保护方案

src/views/ems/site/sbbh/AddDevice.vue

@@ -111,7 +111,9 @@
                 <el-cascader
                     v-model="item.deviceId"
                     :options="childOptions"
+                    :props="props"
                     :show-all-levels="false"
+                    :ref="'protectionSettings'+index"
                     @change="(v)=>handleChange(v,'protectionSettings',index)"
                 ></el-cascader>
               </div>
@@ -226,6 +228,8 @@
                     v-model="item.deviceId"
                     :show-all-levels="false"
                     :options="childOptions"
+                    :props="props"
+                    :ref="'protectionPlan'+index"
                     @change="(v)=>handleChange(v,'protectionPlan',index)"
                 ></el-cascader>
               </div>
@@ -270,13 +274,9 @@
 import {mapState} from "vuex";
 import {getAllSites} from "@/api/ems/zddt";
 import {validText} from "@/utils/validate";
-import {
+import {addProtectPlan, getDeviceListBySiteAndCategory, getProtectPlan, updateProtectPlan} from "@/api/ems/site";
-  updateProtectPlan,
-  addProtectPlan,
-  getProtectPlan,
-  getDeviceListBySiteAndCategory
-} from "@/api/ems/site";
 import {getAllDeviceCategory, pointFuzzyQuery} from "@/api/ems/search";
+
 export default {
   data() {
     const validateText = (rule, value, callback) => {
@@ -287,6 +287,14 @@ export default {
       }
     };
     return {
+      props: {
+        // emitPath: false,//在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+        lazy: true,
+        lazyLoad: (node, resolve) => {
+          console.log('---------node', node)
+          this.getDeviceList(node, resolve)
+        }
+      },
       mode: '',
       loading: 0,
       childOptions: [],
@@ -349,8 +357,8 @@ export default {
       this.getZdList();
       this.getDeviceCategoryList().then(() => {
         if (id && siteId) {
-          this.getDeviceList('PCS',siteId)
+          // this.getDeviceList('PCS', siteId)
-          this.getDeviceList('STACK',siteId)
+          // this.getDeviceList('STACK', siteId)
         }
       });
       if (id) {
@@ -369,20 +377,39 @@ export default {
             description: data?.description || '',//方案描述
           }
           const plan = (JSON.parse(data?.protectionPlan || [])).map(item => {
+            const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
+            if (index > -1) {
+              !this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
+                value: item.deviceId,
+                label: item.deviceName,
+                leaf: true
+              })
+            }
             return Object.assign({}, item, {
               deviceId: [item.deviceCategory || '', item.deviceId || ''],
+              deviceName: [item.categoryName || '', item.deviceName || ''],
             })
           })
           const settings = (JSON.parse(data?.protectionSettings || [])).map(item => {
+            const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
+            if (index > -1) {
+              !this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
+                value: item.deviceId,
+                label: item.deviceName,
+                leaf: true
+              })
+            }
             return Object.assign({}, item, {
               deviceId: [item.deviceCategory || '', item.deviceId || ''],
+              deviceName: [item.categoryName || '', item.deviceName || ''],
             })
           })
           this.$nextTick(() => {
             this.protectionPlan.splice(0, 0, ...plan)
             this.protectionSettings.splice(0, 0, ...settings)
           })
-          console.log('获取设备保护详情并初始化',this.formData,this.protectionPlan,this.protectionSettings)
+          console.log('获取设备保护详情并初始化', this.formData, this.protectionPlan, this.protectionSettings, this.childOptions)
+
         })
       } else {
         this.mode = 'add'
@@ -392,6 +419,7 @@ export default {
     addRow(type) {
       const item = type === 'protectionSettings' ? {
         deviceId: [],//设备ID
+        deviceName: [],
         deviceCategory: "",//设备类型 英文
         categoryName: '',//设备类型名称 中文
         point: "",//点位 英文
@@ -403,6 +431,7 @@ export default {
         relationNext: "",//与下一个点位的关系
       } : {
         deviceId: [],
+        deviceName: [],
         deviceCategory: "",//设备类型 英文
         categoryName: '',//设备类型名称 中文
         point: "",
@@ -461,14 +490,14 @@ export default {
       this.loading += 1;
       return getAllDeviceCategory()
           .then((response) => {
-            const data = (response?.data || []).filter(item => ['PCS','STACK'].includes(item.code));
+            const data = (response?.data || []);
-            // this.childOptions=[]
             this.$set(this, 'childOptions', [])
             let arr = []
             data.forEach((item) => {
               arr.push({
                 value: item.code,
                 label: item.name,
+                leaf: false,
                 children: []
               })
             })
@@ -480,21 +509,28 @@ export default {
           });
     },
     //获取设备列表-区分站点
-    getDeviceList(deviceCategory,siteId){
+    getDeviceList(node, resolve) {
-      this.$nextTick(()=>{
+      if (!this.formData.siteId) {
-        getDeviceListBySiteAndCategory({siteId:siteId || this.formData.siteId,deviceCategory}).then((response) => {
+        this.$message({
+          type: "warning",
+          message: "请先选择站点",
+        });
+        return resolve([])
+      }
+      getDeviceListBySiteAndCategory({
+        siteId: this.formData.siteId,
+        deviceCategory: node.value
+      }).then((response) => {
         const data = (response?.data || []).map(item => {
           return {
             label: item.deviceName,
             value: item.id,
+            leaf: true
           }
         })
-          const index = this.childOptions.findIndex(item=>item.value === deviceCategory)
+        resolve(data)
-          if(index>-1){
+      }).catch(() => {
-            const length = this.childOptions[index].children.length
+        resolve([])
-            this.childOptions[index].children.splice(0,length,...data)
-          }
-        })
       })
     },
     //更新站点下面的设备列表
@@ -503,17 +539,17 @@ export default {
         const length = item.children.length
         item.children.splice(0, length)
       })
-      this.getDeviceList('PCS')
-      this.getDeviceList('STACK')
     },
     //选中设备类型、设备
     handleChange(data, type, index) {
-      const deviceCategory = data[0],deviceId=data[1]
+      console.log('设置选中设备类型、设备', data, type, index)
-      console.log('设置选中设备类型、设备',deviceCategory,deviceId,type,index)
+      const {label = '', parent = {}} = this.$refs[type + index][0].getCheckedNodes()[0]
+      console.log('选中设备的名称', parent.label, label)
       const item = Object.assign({}, this[type][index], {
         deviceId: data,
-        deviceCategory,
+        deviceName: [parent.label, label],
-        categoryName : this.childOptions.find(i=>i.value === deviceCategory).label,
+        deviceCategory: data[0],
+        categoryName: parent.label,
         pointName: '',
         point: ''
       })
@@ -547,6 +583,7 @@ export default {
           item.point = ""
           item.pointName = ""
           item.deviceId = []
+          item.deviceName = []
           item.categoryName = ''
           item.deviceCategory = ''
         });
@@ -561,6 +598,7 @@ export default {
           item.point = ""
           item.pointName = ""
           item.deviceId = []
+          item.deviceName = []
           item.categoryName = ''
           item.deviceCategory = ''
         });
@@ -597,6 +635,7 @@ export default {
           }
         }[type][name]
       }
+
       this.$refs.addTempForm.validate((valid) => {
         if (!valid) return;
         const {
@@ -659,11 +698,13 @@ export default {
         const settings = protectionSettings.map(item => {
           return Object.assign({}, item, {
             deviceId: item.deviceId[1],
+            deviceName: item.deviceName[1],
           })
         })
         const plan = protectionPlan.map(item => {
           return Object.assign({}, item, {
             deviceId: item.deviceId[1],
+            deviceName: item.deviceName[1],
           })
         })
         this.loading += 1;
@@ -727,35 +768,43 @@ export default {
 .items-container {
   margin-top: 40px;
   margin-bottom: 20px;
+
   .item-title {
     line-height: 16px;
     padding: 10px 0;
     color: #000;
   }
 }
+
 .time-lists-container {
   width: 100%;
   border: 1px solid #eee;
+
   .time-lists {
     &:not(:last-child) {
       border-bottom: 1px solid #eee;
     }
+
     display: flex;
+
     & > div {
       width: 16%;
       box-sizing: border-box;
       text-align: center;
       padding: 10px 15px;
+
       &:not(:last-child) {
         width: 28%;
         border-right: 1px solid #eee;
       }
+
       .el-date-editor.el-input,
       .el-date-editor.el-input__inner {
         width: 100%;
       }
     }
   }
+
   .time-lists-title {
     color: #000;
     font-size: 12px;