优化通道管理/行政区划页面逻辑

web_src/src/components/common/RegionTree.vue

@@ -27,16 +27,16 @@
         @node-contextmenu="contextmenuEventHandler"
         @node-click="nodeClickHandler"
       >
-        <span class="custom-tree-node" slot-scope="{ node, data }">
-          <span @click.stop v-if="edit">
-            <el-radio v-if="node.data.type === 0 && node.level !== 1 " style="margin-right: 0" v-model="chooseId" @input="chooseIdChange(node.data.treeId, node.data.deviceId)" :label="node.data.deviceId">{{''}}</el-radio>
-          </span>
-          <span v-if="node.data.type === 0" style="color: #409EFF" class="iconfont icon-bianzubeifen3"></span>
+        <template class="custom-tree-node" v-slot:default="{ node, data }">
+        <span class="custom-tree-node" >
+          <span v-if="node.data.type === 0 && chooseId !== node.data.deviceId" style="color: #409EFF" class="iconfont icon-bianzubeifen3"></span>
+          <span v-if="node.data.type === 0 && chooseId === node.data.deviceId" style="color: #013e83;" class="iconfont icon-bianzubeifen3"></span>
           <span v-if="node.data.type === 1 && node.data.status === 'ON'" style="color: #409EFF" class="iconfont icon-shexiangtou2"></span>
           <span v-if="node.data.type === 1 && node.data.status !== 'ON'" style="color: #808181" class="iconfont icon-shexiangtou2"></span>
           <span style=" padding-left: 1px" v-if="node.data.deviceId !=='' && showCode" :title="node.data.deviceId">{{ node.label }}（编号：{{ node.data.deviceId }}）</span>
           <span style=" padding-left: 1px" v-if="node.data.deviceId ==='' || !showCode" :title="node.data.deviceId">{{ node.label }}</span>
         </span>
+        </template>
       </vue-easy-tree>
     </div>
     <regionEdit ref="regionEdit"></regionEdit>
@@ -65,7 +65,7 @@ export default {
       treeData: [],
     }
   },
-  props: ['edit', 'clickEvent', 'chooseIdChange', 'onChannelChange', 'showHeader'],
+  props: ['edit', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel'],
   created() {
   },
   methods: {
@@ -91,7 +91,8 @@ export default {
           url: `/api/region/tree/list`,
           params: {
             query: this.searchSrt,
-            parent: node.data.id
+            parent: node.data.id,
+            hasChannel: this.hasChannel
           }
         }).then((res) => {
           if (res.data.code === 0) {
@@ -113,40 +114,7 @@ export default {
         return
       }
       console.log(node.level)
-      if (node.data.type === 1) {
-        data.parentId = node.parent.data.id;
-        this.$contextmenu({
-          items: [
-            {
-              label: "移除通道",
-              icon: "el-icon-delete",
-              disabled: false,
-              onClick: () => {
-                console.log(data)
-                this.$axios({
-                  method: "post",
-                  url: `/api/common/channel/region/delete`,
-                  data: {
-                    channelIds: [data.id]
-                  }
-                }).then((res) => {
-                  console.log("移除成功")
-                  if (this.onChannelChange) {
-                    this.onChannelChange()
-                  }
-                  node.parent.loaded = false
-                  node.parent.expand();
-                }).catch(function (error) {
-                  console.log(error);
-                });
-              }
-            }
-          ],
-          event, // 鼠标事件信息
-          customClass: "custom-class", // 自定义菜单 class
-          zIndex: 3000, // 菜单样式 z-index
-        });
-      } else if (node.data.type === 0) {
+      if (node.data.type === 0) {
         this.$contextmenu({
           items: [
             {
@@ -202,10 +170,19 @@ export default {
               label: "移除设备",
               icon: "el-icon-delete",
               disabled: node.level === 1,
+              divided: true,
               onClick: () => {
                 this.removeChannelFormDevice(data.id, node)
               }
             },
+            {
+              label: "添加通道",
+              icon: "el-icon-plus",
+              disabled: node.level === 1,
+              onClick: () => {
+                this.addChannel(data.id, node)
+              }
+            },
             // {
             //   label: "导出",
             //   icon: "el-icon-download",
@@ -272,7 +249,7 @@ export default {
             message: "保存成功"
           })
             if (this.onChannelChange) {
-              this.onChannelChange()
+              this.onChannelChange(node.data.deviceId)
             }
             node.loaded = false
             node.expand();
@@ -311,7 +288,47 @@ export default {
               message: "保存成功"
             })
             if (this.onChannelChange) {
-              this.onChannelChange()
+              this.onChannelChange(node.data.deviceId)
+            }
+            node.loaded = false
+            node.expand();
+          }else {
+            this.$message.error({
+              showClose: true,
+              message: res.data.msg
+            })
+          }
+          this.loading = false
+        }).catch((error)=> {
+          this.$message.error({
+            showClose: true,
+            message: error
+          })
+          this.loading = false
+        });
+      })
+    },
+    addChannel: function (id, node) {
+      this.$refs.gbDeviceSelect.openDialog((rows)=>{
+        let deviceIds = []
+        for (let i = 0; i < rows.length; i++) {
+          deviceIds.push(rows[i].id)
+        }
+        this.$axios({
+          method: 'post',
+          url: `/api/common/channel/region/device/add`,
+          data: {
+            civilCode: node.data.deviceId,
+            deviceIds: deviceIds,
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            this.$message.success({
+              showClose: true,
+              message: "保存成功"
+            })
+            if (this.onChannelChange) {
+              this.onChannelChange(node.data.deviceId)
             }
             node.loaded = false
             node.expand();
@@ -368,12 +385,10 @@ export default {
     nodeClickHandler: function (data, node, tree) {
       console.log(data)
       console.log(node)
+      this.chooseId = data.deviceId;
       if (this.clickEvent) {
         this.clickEvent(data)
       }
-      // this.chooseId = data.id;
-      // this.chooseName = data.name;
-      // if (this.catalogIdChange)this.catalogIdChange(this.chooseId, this.chooseName);
     }
   },
   destroyed() {