选择用地类型后,影响因子自动联动(无后台暂用商业用地假数据代替)前端实现

src/views/siteselection/components/fzxz.vue

@@ -105,7 +105,11 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="defaultValue" label="约束值(m/°)" show-overflow-tooltip>
+        <el-table-column
+          prop="defaultValue"
+          label="约束值(m/°)"
+          show-overflow-tooltip
+        >
         </el-table-column>
       </el-table>
     </div>
@@ -168,7 +172,9 @@ export default {
         ],
 
         // sjy: [{ required: true, message: "请选择数据源", trigger: "change" }],
-        xzys: [{ required: true, message: "请选择选址约束", trigger: "change" }],
+        xzys: [
+          { required: true, message: "请选择选址约束", trigger: "change" },
+        ],
       },
       options: [],
       tableData: [],
@@ -214,9 +220,53 @@ export default {
       console.log(val, "杰卡斯到货时间啊肯定会刷卡机很大");
     },
     handleChange(value) {
-      // console.log(value);
       const obj = this.$refs["Cascader"].getCheckedNodes();
       this.ydlxBSM = obj[0].value;
+      if (this.ydlxBSM == "09") {
+        let lxData = [
+          {
+            id: "66b94c0cab0c4a389197db46ddd30fd0",
+            bsm: "TB_YJJBNTBH",
+            name: "永久基本农田",
+            level: 1,
+            parent_id: "cba68762194b4d56b9845d7daf15d6f1",
+            conditionInfo:
+              '{"spatial_type":"intersect","items":[{"key":"intersect","name":"相交"},{"key":"not_intersect","name":"不相交"}],"default":"not_intersect","hasValue":false,"defaultValue":0,"unit":"米"}',
+            children: [],
+          },
+          {
+            id: "261da715b6864cb8b85cc11331e38847",
+            bsm: "TB_CZKFBJ",
+            name: "城镇开发边界内",
+            level: 1,
+            parent_id: "cba68762194b4d56b9845d7daf15d6f1",
+            conditionInfo:
+              '{"spatial_type":"contain","items":[{"key":"contain","name":"包含"},{"key":"not_contain","name":"不包含"}],"default":"contain","hasValue":false,"defaultValue":0,"unit":"米"}',
+            children: [],
+          },
+          {
+            id: "98aa5713b52f4d1a8fc1dbf480fcf530",
+            bsm: "TB_STBHHX",
+            name: "生态保护红线",
+            level: 1,
+            parent_id: "cba68762194b4d56b9845d7daf15d6f1",
+            conditionInfo:
+              '{"spatial_type":"intersect","items":[{"key":"intersect","name":"相交"},{"key":"not_intersect","name":"不相交"}],"default":"not_intersect","hasValue":false,"defaultValue":0,"unit":"米"}',
+            children: [],
+          },
+        ];
+        lxData.forEach((item)=> {
+          let JSONItem = JSON.parse(item.conditionInfo);
+          item.hasValue=JSONItem.hasValue //是否可以填写约束值
+          item.defaultValue= Number(JSONItem.defaultValue) //约束值默认值
+          item.default= JSONItem.default //默认选中条件
+          item.spatial_types= JSONItem.items,
+          item.spatial_type=JSONItem.spatial_type
+        })
+        this.tableData = lxData
+        console.log(lxData, "lxData");
+        this.$refs.yxyzPop.yzTableData = lxData;
+      }
     },
     handleChange2(value) {
       // console.log(value);
@@ -295,13 +345,13 @@ export default {
         return "包含";
       } else if (val == "not_contain") {
         return "不包含";
-      }else if (val == "gt") {
+      } else if (val == "gt") {
         return "大于";
-      }else if (val == "lt") {
+      } else if (val == "lt") {
         return "小于";
-      }else if (val == "get") {
+      } else if (val == "get") {
         return "大于等于";
-      }else if (val == "let") {
+      } else if (val == "let") {
         return "小于等于";
       }
     },

src/views/siteselection/components/yxyzPop.vue

@@ -19,6 +19,7 @@
               show-checkbox
               node-key="id"
               ref="tree"
+              :default-checked-keys="defaultArr"
             ></el-tree>
           </el-scrollbar>
         </el-col>
@@ -64,7 +65,11 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column prop="defaultValue" label="约束值(m/°)" width="120">
+            <el-table-column
+              prop="defaultValue"
+              label="约束值(m/°)"
+              width="120"
+            >
               <template slot-scope="scope">
                 <el-input
                   Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
@@ -113,6 +118,8 @@ export default {
       optionsTemp: [],
       selectdialogData: [],
       dialogData: [],
+      defaultArr: [], //用地类型选中后可选因子默认勾选的值
+      yzTableData: [], //用地类型选中后影响因子对应的值
     };
   },
   computed: {},
@@ -120,8 +127,8 @@ export default {
     this.GetFactorList();
   },
   methods: {
-    testInput(val){
-val = Number(val)
+    testInput(val) {
+      val = Number(val);
     },
     close() {
       this.dialogVisible = false;
@@ -187,9 +194,9 @@ val = Number(val)
           // sjlx: item.spatial_type,
           // yzbsm: item.bsm,
           name: item.name,
-          bsm:item.bsm,
-          spatial_types:JSONItem.items,
-          spatial_type:JSONItem.spatial_type,
+          bsm: item.bsm,
+          spatial_types: JSONItem.items,
+          spatial_type: JSONItem.spatial_type,
           hasValue: JSONItem.hasValue, //是否可以填写约束值
           defaultValue: Number(JSONItem.defaultValue), //约束值默认值
           default: JSONItem.default, //默认选中条件
@@ -217,7 +224,9 @@ val = Number(val)
         if (item.children != undefined && item.children.length == 0) {
           if (item.parentNode) {
             item.disabled = true;
-            this.$refs.tree.setCheckedKeys([]);
+            if (this.$refs.tree) {//用地类型绑定后易出现找不到tree的情况
+              this.$refs.tree.setCheckedKeys([]);
+            }
           }
         }
         if (item.children != undefined && item.children.length > 0) {
@@ -278,10 +287,10 @@ val = Number(val)
     },
     clearitem(item) {
       this.options[0].children = this.options[0].children.filter((item1) => {
-        return item.id != '';
+        return item.id != "";
       });
       this.options[1].children = this.options[1].children.filter((item1) => {
-        return item.id != '';//item1.defaultValue
+        return item.id != ""; //item1.defaultValue
       });
       this.options[0].children.length == 0
         ? (this.options[0].disabled = true)
@@ -303,6 +312,20 @@ val = Number(val)
         this.dialogData = JSON.parse(JSON.stringify(this.tableData));
         this.setData(this.dialogData);
       }
+      if (this.defaultArr.length) {
+        this.dialogData.forEach((item) => {
+          this.resetTree(this.options, item);
+        });
+        this.removeChildrenZero(this.options);
+        return this.dialogData;
+      }
+    },
+    yzTableData(oldVal, newVal) {
+      let idArr = [];
+      this.yzTableData.forEach((item) => {
+        idArr.push(item.id);
+      });
+      this.defaultArr = idArr;
     },
   },
 };
@@ -373,14 +396,14 @@ val = Number(val)
 /deep/ .el-input__inner[type="number"] {
   -webkit-appearance: none; /* 移除系统默认的外观样式 */
 }
- 
+
 /* 去除增加/减少数字按钮的样式 */
 /deep/ .el-input__inner[type="number"]::-webkit-inner-spin-button,
 .el-input__inner[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none; /* 移除输入框两侧的上下箭头 */
   margin: 0; /* 移除上下箭头与文本之间的间隔 */
 }
- 
+
 /* 去除Firefox浏览器中的一些特定样式 */
 /deep/ .el-input__inner[type="number"]::-moz-inner-spin-button {
   -moz-appearance: none; /* 移除Firefox中的上下箭头 */