能源监控

src/views/energy/base/energyPlcConnect/components/energyPlcConnectAdd.vue

@@ -1,24 +1,28 @@
 <template>
   <el-form ref="form" :rules="rules" label-width="100px" :model="form">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="关联表名" prop="plcId">
-          <el-select v-model="form.plcId" placeholder="请选择" style="width: 100%;">
-            <el-option
-              v-for="item in plcList"
-              :key="item.id"
-              :label="item.plcTableName"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="对象" prop="code">
-          <el-input v-model="form.code"></el-input>
-        </el-form-item>
-      </el-col>
-    </el-row>
+    <el-form-item label="关联表名" prop="plcId">
+      <el-select v-model="form.plcId" placeholder="请选择" style="width: 100%;">
+        <el-option
+          v-for="item in plcList"
+          :key="item.id"
+          :label="item.plcTableName"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象" prop="bindObjectId">
+      <el-cascader
+        style='width: 100%;'
+        v-model="objIds"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        @change="selectObj"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="对象备注" prop="remark">
+      <el-input v-model="form.remark"/>
+    </el-form-item>
   </el-form>
 </template>
 <script>
@@ -26,20 +30,27 @@ import { getEnergyPlcConnect, updateEnergyPlcConnect, createEnergyPlcConnect } f
 import { getEnergyPlcAll } from '@/api/base/energyPlc'
 export default {
   name: 'EnergyPlcConnectAdd',
+  props: {
+    objList: {
+      type: Array,
+      default: () => []
+    },
+  },
   data() {
     return {
       form: {
         id: '',
         plcId: '',
         bindObjectId: '',
-        bindObjectType: ''
+        bindObjectType: '',
+        remark: ''
       },
+      objIds: [],// 回显数组
       plcList: [],
       isEdit: false, //是否是编辑
       rules: {
-        plcTableName: [{ required: true, message: '关联表名不能为空', trigger: 'blur' }],
-        code: [{ required: true, message: '关联表编码不能为空', trigger: 'blur' }],
-        name: [{ required: true, message: '标识名称不能为空', trigger: 'blur' }]
+        plcId: [{ required: true, message: '关联表名不能为空', trigger: 'change' }],
+        bindObjectId: [{ required: true, message: '对象不能为空', trigger: 'change' }]
       }
     }
   },
@@ -54,7 +65,7 @@ export default {
         getEnergyPlcConnect( id ).then((res) => {
           if (res.code === 0) {
             this.form = res.data
-            this.form.collection = this.form.collection === 0 ? false : true
+            this.objIds = this.changeDetSelect(this.form.bindObjectId, this.objList)
           }
         })
       } else {
@@ -62,10 +73,37 @@ export default {
         this.form.id = ''
       }
     },
+    // 递归处理分类回显问题
+    changeDetSelect(key, treeData) {
+      let arr = [] // 递归时操作的数组
+      let returnArr = [] // 存放结果的数组
+      let depth = 0 // 定义全局层级
+      // 定义递归函数
+      function childrenEach(childrendData, depthN) {
+        for (var j = 0; j < childrendData.length; j++) {
+          depth = depthN
+          arr[depthN] = childrendData[j].id
+          if (childrendData[j].id == key) {
+            returnArr = arr.slice(0, depthN + 1)
+            break
+          } else {
+            if (childrendData[j].children) {
+              depth++
+              childrenEach(childrendData[j].children, depth)
+            }
+          }
+        }
+        return returnArr
+      }
+      return childrenEach(treeData, depth)
+    },
+    selectObj(val) {
+      this.form.bindObjectId = val[val.length-1]
+      this.form.bindObjectType = val.length-1
+    },
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.form.collection = this.form.collection === false ? 0 : 1
           if (this.isEdit) {
             // 编辑
             updateEnergyPlcConnect({...this.form}).then((res) => {
@@ -88,9 +126,19 @@ export default {
       })
     },
     formClear() {
-      this.$refs.form.resetFields()
+      this.form.id = ''
+      this.form.plcId = ''
+      this.form.bindObjectId = ''
+      this.form.bindObjectType = ''
+      this.form.remark = ''
+      this.objIds = []
       this.isEdit = false
     }
   }
 }
 </script>
+<style>
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>