3D配置页面bug修改

src/views/storeManage/warehouse3DConfig/index.vue

@@ -42,6 +42,7 @@
       </el-table>
     </div>
     <!-- 绑定参数对话框 -->
+    <!-- :before-close="beforeClose" -->
     <el-dialog title="绑定参数" :visible.sync="dialogVisible" @opened="opened">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
@@ -59,7 +60,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="参数绑定" prop="deviceSpecParams">
-            <el-select ref="paramsSelect" v-model="form.deviceSpecParams" filterable :multiple="form.divPosition && form.divPosition.includes('OAO')" clearable placeholder="请选择" :disabled="form.divPosition && form.divPosition.includes('CAM')">
+            <el-select ref="paramsSelect" v-model="form.deviceSpecParams" filterable :multiple="isMultiple" clearable placeholder="请选择" :disabled="form.divPosition && form.divPosition.includes('CAM')">
               <el-option v-for="item in paramsOptions" :key="item.id" :label="item.label" :value="item.value">
                 <span style="float: left">{{ item.label }}&nbsp;-&nbsp;{{ item.info }}</span>
               </el-option>
@@ -105,7 +106,7 @@ export default {
       cameraTypeId: '',
       airEquipmentTypeId: '', // 空气质量检测设备
       temperaSensorTypeId: '', // 温湿度感应器
-      form: { deviceInfo: {}},
+      form: { deviceInfo: {}, divPosition: '' },
       // 设备绑定
       devVal: '',
       devOptions: [],
@@ -116,7 +117,20 @@ export default {
         deviceInfo: [
           { required: true, validator: checkDeviceInfo, trigger: 'change' }
         ]
+      },
+      isMultiple: false
+    }
+  },
+  watch: {
+    'form.divPosition': (newVal, oldVal) => {
+      // 解决单选，多选切换后， 上次值残留
+      if (newVal && newVal.includes('OAO')) {
+        this.isMultiple = true
       }
+      // this.$nextTick(function() {
+      //   const label = this.$refs.paramsSelect.selectedLabel
+      //   console.log(label)
+      // })
     }
   },
   created() {
@@ -145,9 +159,8 @@ export default {
       }
     },
     handleBindParam() {
-      console.log(1111)
       if (this.selections.length === 1) {
-        this.form = JSON.parse(JSON.stringify(this.selections[0]))
+        this.resetForm(JSON.parse(JSON.stringify(this.selections[0])))
         if (!this.form.deviceInfo) {
           this.form.deviceInfo = {}
         }
@@ -168,26 +181,31 @@ export default {
           }
           this.devOptions = data.content.map(data => { return { value: data.id, label: data.deviceName, info: isCamera ? data.videoRoute : data.deviceId, self: data } })
         })
-        // 温湿度感应器
         if (!isCAM && this.form.deviceInfo.id) {
-          // 获取参数选项
+          // 温湿度感应器或者空气质量传感器重新绑定，获取参数选项
           this.getParamsOptionsList()
+          // 参数选项的回显
+          if (this.form.deviceSpecParams && this.form.deviceSpecParams.length > 0) {
+            let formParams = this.form.deviceSpecParams.map((item) => { return item.id })
+            if (this.form.divPosition.includes('TOP')) {
+              formParams = formParams[0]
+            }
+            this.$set(this.form, 'deviceSpecParams', formParams)
+          }
         } else {
+          // 清除参数选项
           this.paramsOptions.splice(0, this.paramsOptions.length)
+          // 清除参数内容
           if (this.form.divPosition.includes('TOP')) {
-            this.form.deviceSpecParams = ''
+            this.$set(this.form, 'deviceSpecParams', '')
           } else {
             this.form.deviceSpecParams.splice(0, this.form.deviceSpecParams.length)
           }
         }
-        if (this.form.deviceSpecParams && this.form.deviceSpecParams.length > 0) {
-          let formParams = this.form.deviceSpecParams.map((item) => { return item.id })
-          if (this.form.divPosition.includes('TOP')) {
-            formParams = formParams[0]
-          }
-          this.$set(this.form, 'deviceSpecParams', formParams)
-        }
         this.dialogVisible = true
+        // if (this.$refs.formDom) {
+        //   this.$refs.formDom.clearValidate()
+        // }
       } else {
         this.$message({
           message: '只可以同时修改一个设备的参数',
@@ -236,8 +254,44 @@ export default {
       }
     },
     opened() {
-      this.$refs.formDom.clearValidate()
+      if (this.$refs.formDom) {
+        this.$refs.formDom.clearValidate()
+      }
+    },
+    resetForm(data) {
+      // const defaultForm = {}
+      // for (const key in this.form) {
+      //   if (crudFrom.hasOwnProperty(key)) {
+      //     crudFrom[key] = form[key]
+      //   } else {
+      if (data) {
+        const form = data
+        const crudFrom = this.form
+        for (const key in data) {
+          if (crudFrom.hasOwnProperty(key)) {
+            crudFrom[key] = form[key]
+          } else {
+            this.$set(crudFrom, key, form[key])
+          }
+        }
+      } else {
+        if (this.form.divPosition.includes('TOP')) {
+          this.$set(this.form, 'deviceSpecParams', '')
+        } else if (this.form.divPosition.includes('OAO')) {
+          this.form.deviceSpecParams.splice(0, this.form.deviceSpecParams.length)
+        }
+        this.$set(this.form, 'divPosition', '')
+        this.$set(this.form, 'isDisplay', false)
+        this.$set(this.form.deviceInfo, 'id', '')
+      }
     }
+    // beforeClose(done) {
+    //   this.$set(this.form, 'deviceSpecParams', '')
+    //   this.$set(this.form, 'divPosition', '')
+    //   this.$set(this.form, 'isDisplay', false)
+    //   this.$set(this.form.deviceInfo, 'id', '')
+    //   done()
+    // }
   }
 }
 </script>