更改选址因子数据结构,接入接口将用地类型改为级联选择器

src/api/ghss/ghxz.js

@@ -6,4 +6,11 @@ export function GetFxyzList(params) {
         method: 'get',
         params
     })
+}
+export function GetDldmTree(params) {
+    return request({
+        url: '/apply/fzxz/GetDldmTree',
+        method: 'get',
+        params
+    })
 }

src/views/siteselection/components/fzxz.vue

@@ -54,11 +54,19 @@
         </el-select>
       </el-form-item>
       <el-form-item label="用地类型:" prop="ydlx">
-        <el-input
+        <!-- <el-input
           v-model="ruleForm.ydlx"
           size="mini"
           placeholder="请输入用地类型"
-        ></el-input>
+        ></el-input> -->
+
+        <el-cascader
+          v-model="ruleForm.ydlx"
+          :options="cascaderOptions"
+          :props="{ expandTrigger: 'hover' }"
+          @change="handleChange"
+          size="mini"
+        ></el-cascader>
       </el-form-item>
       <el-form-item label="用地面积" required>
         <el-col :span="11">
@@ -106,7 +114,7 @@
 <script>
 import yxyzPop from "./yxyzPop.vue"; ///mapview/range
 import range from "@/components/mapview/range.vue"; ///mapview/range
-
+import { GetDldmTree } from "../../../api/ghss/ghxz.js";
 export default {
   components: {
     yxyzPop,
@@ -402,11 +410,38 @@ export default {
           spatial_type: "identity",
         },
       ],
+      cascaderOptions: [], //用地性质数据存储数组
     };
   },
   computed: {},
-  mounted() {},
+  mounted() {
+    GetDldmTree({
+      fzbs: "3DDLDM",
+    }).then((res) => {
+      //顶级树只有一个
+      let childArr = res.data;
+      childArr.forEach((item) => {
+        let child = item.children;
+        if (item.children.length < 1) {
+          item.children = undefined;
+        } else {
+          for (var i = 0; i < child.length; i++) {
+            if (child[i].children.length < 1) {
+              //判断children的数组长度
+              child[i].children = undefined;
+            }
+          }
+        }
+      });
+
+      this.cascaderOptions = childArr; //为Cascader的options值
+
+    });
+  },
   methods: {
+    handleChange(value) {
+      console.log(value);
+    },
     submitData() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {

src/views/siteselection/components/yxyzPop.vue

@@ -53,9 +53,24 @@
                   v-model="scope.row.condition"
                   placeholder="请选择"
                   class="input-style"
+                  v-if="scope.row.condition == 'identity'"
                 >
                   <el-option
-                    v-for="item in conditionList"
+                    v-for="item in conditionList1"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model="scope.row.condition"
+                  placeholder="请选择"
+                  class="input-style"
+                  v-if="scope.row.condition == 'contain'"
+                >
+                  <el-option
+                    v-for="item in conditionList2"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
@@ -543,15 +558,25 @@ export default {
       optionsTemp: [],
       selectdialogData: [],
       dialogData: [],
-      conditionList: [
+      conditionList1: [
         { label: "范围内", value: "identity" },
         { label: "范围外", value: "n_identity" },
+      ],
+      conditionList2: [
         { label: "距离包含", value: "contain" },
         { label: "距离不包含", value: "n_contain" },
-        // { label: "分析", value: "F" },contain,n_contain，相交/不相交：:identity,n_identity
       ],
     };
   },
+  computed: {
+    conditionList(val) {
+      if (val == "identity") {
+        return this.conditionList1;
+      } else {
+        return this.conditionList2;
+      }
+    },
+  },
   mounted() {
     // this.getList();
     this.GetFxyzList();