选址约束更新,配合后端完成功能

src/views/siteselection/components/fzxz.vue

@@ -81,12 +81,24 @@
           </el-form-item>
         </el-col>
       </el-form-item>
-      <!-- <el-form-item label="选址约束:" required>
-        <el-checkbox-group v-model="ruleForm.xzys" @change="changeCheckBox">
-        <el-checkbox false-label="null" :true-label="0" name="checkbox_data"> 是否与控规用地性质一致</el-checkbox>
-        <el-checkbox false-label="null" :true-label="1" name="checkbox_data">是否允许选出多个分散地块。</el-checkbox>
-      </el-checkbox-group>
-      </el-form-item> -->
+      <el-form-item label="选址约束:">
+        <el-checkbox v-model="ruleForm.useLandType">
+            是否与控规用地性质一致</el-checkbox
+          >
+          <el-checkbox v-model="ruleForm.useMultiple"
+            >是否允许选出多个分散地块。</el-checkbox
+          >
+        <div v-if="ruleForm.useMultiple">
+          请输入地块间最大距离
+          <el-input
+            v-model.number="ruleForm.multipleDistance"
+            size="mini"
+            type="number"
+            style="width: 30%"
+          ></el-input
+          >米
+        </div>
+      </el-form-item>
     </el-form>
     <div class="site-title">
       <div class="siteCon">
@@ -142,6 +154,7 @@ export default {
 
   data() {
     return {
+      otherValShow:false,
       checkbox_data: 0,
       ruleForm: {
         xzmj: 0,
@@ -152,7 +165,9 @@ export default {
         ydmjbegin: "", //用地面积开始
         ydmjend: "", //用地面积结束
         sjy: "", //数据源
-        xzys: 0, //选址约束,暂时没有在逻辑里添加改字段
+        useMultiple:false,//是否允许多个分散地块
+        useLandType:false,//是否与控规用地性质一致
+        multipleDistance:0,//多地块最大距离
       },
       rules: {
         xzmj: [{ required: true, message: "请填写范围的数据" }],
@@ -172,9 +187,6 @@ export default {
         ],
 
         // sjy: [{ required: true, message: "请选择数据源", trigger: "change" }],
-        xzys: [
-          { required: true, message: "请选择选址约束", trigger: "change" },
-        ],
       },
       options: [],
       tableData: [],
@@ -183,6 +195,16 @@ export default {
       cascaderOptions: [], //用地性质数据存储数组
       sjyBSM: "",
       ydlxBSM: "",
+      checkList: [
+        {
+          key: "是否与控规用地性质一致",
+          value: 0,
+        },
+        {
+          key: "是否允许选出多个分散地块",
+          value: 1,
+        },
+      ], //选址约束
     };
   },
   computed: {},
@@ -218,6 +240,10 @@ export default {
   methods: {
     changeCheckBox(val) {
       console.log(val, "杰卡斯到货时间啊肯定会刷卡机很大");
+      if (val.value==1) {
+        this.otherValShow = true
+        
+      }
     },
     handleChange(value) {
       const obj = this.$refs["Cascader"].getCheckedNodes();
@@ -255,15 +281,15 @@ export default {
             children: [],
           },
         ];
-        lxData.forEach((item)=> {
+        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
+          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;
       }
@@ -274,6 +300,7 @@ export default {
       this.sjyBSM = value;
     },
     submitData() {
+      console.log(this.ruleForm,'this.ruleForm');
       //更新范围
       var _temp = this.$refs.range.getRange();
       // this.ruleForm.xzfw = _temp.xzfw;
@@ -292,6 +319,10 @@ export default {
             sjy: this.sjyBSM, //数据源标识码
             geomId: this.$refs.range.fileDataID,
             yxyz: this.tableData,
+            useMultiple:this.ruleForm.useMultiple,//是否允许多个分散地块
+        useLandType:this.ruleForm.useLandType,//是否与控规用地性质一致
+        multipleDistance:this.ruleForm.multipleDistance,//多地块最大距离
+
           };
           // console.log(obj, "objobj");
           AddFzxz(obj).then((res) => {
@@ -329,6 +360,9 @@ export default {
         ydmjend: "", //用地面积结束
         sjy: this.options[0].sjymc, //数据源
         xzmj: 0,
+        useMultiple:false,//是否允许多个分散地块
+        useLandType:false,//是否与控规用地性质一致
+        multipleDistance:0,//多地块最大距离
       }),
         (this.sjyBSM = this.options[0].value);
       this.tableData = [];