机构管理左侧树回显

src/views/Sys/ChannelGrouping.vue

@@ -13,7 +13,7 @@
     </templateTable>
     <el-dialog
       :title="dialogTitle"
-      width="25%"
+      width="30%"
       :visible.sync="dialogVisibleadd"
     >
       <div class="flex" style="line-height: 50px">
@@ -76,7 +76,7 @@
             </el-tree>
           </div>
         </el-col>
-        <el-col :span="11" :offset="1" style="height: 500px; ">
+        <el-col :span="11" :offset="1" style="height: 500px">
           <div>
             <span>工号：</span>
             <el-input
@@ -103,37 +103,34 @@
             >
           </div>
           <h4>已选中机构名称</h4>
-          <!-- <div v-for="val in treedatatransfer" :key="val.id">
-            <p>{{ val }} </p>
-          </div> -->
           <div style="height: 460px; overflow-y: auto">
-
-         
-          <div
-            v-for="(item,index) in treedatatransfer"
-            :key="item.id"
-            style="
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-            "
-          >
-            <p>{{ item.name }}</p>
-            <p>{{ item.areaId }}</p>
-            <el-button
-              class="delete"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              circle
-              @click="deleteDept(item,index)"
-            ></el-button>
+            <div
+              v-for="(item, index) in treedatatransfer"
+              :key="item.id"
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <p>{{ item.name }}</p>
+              <!-- <p>{{ item.areaId }}</p> -->
+              <el-button
+                class="delete"
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                circle
+                @click="deleteDept(item, index)"
+              ></el-button>
+            </div>
           </div>
-        </div>
         </el-col>
       </el-row>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="dialogVisible = false,dept = []">取 消</el-button>
+        <el-button size="small" @click="(dialogVisible = false), (dept = [])"
+          >取 消</el-button
+        >
         <el-button type="primary" size="small" @click="sumbitInstitution"
           >确 定</el-button
         >
@@ -255,26 +252,31 @@ export default {
         if (res.code == 200 && res.data.length > 0) {
           this.dialogVisible = true;
           setTimeout(() => {
-            // this.dept = res.data;
             this.treedatatransfer = res.data;
+          
             this.$refs.tree.setCheckedKeys(res.data);
           }, 500);
+        } else if (res.code == 200 && res.data.length == 0) {
+          this.$message.error("暂无数据");
+          this.dialogVisible = true;
         } else {
           this.$message.error(res.msg);
         }
       });
     },
     //删除右侧已选项
-    deleteDept(dept,index) {
+    deleteDept(dept, index) {
       this.treedatatransfer = this.treedatatransfer.filter(
-        (item) => item.areaId !== dept.areaId
-      )
-      
+        (item) => item.name !== dept.name
+      );
+
       this.dept = this.dept.filter((item) => item !== dept.areaId);
     },
     treeListFun(data) {
       this.$api.dept.queryTreeList(data).then((res) => {
         this.treedata = res.data;
+      
+        
         this.setDisabled(this.treedata);
       });
     },
@@ -302,30 +304,34 @@ export default {
       return label;
     },
     uthorizedAgency(row) {
-        this.selectId = ''
-        this.selectName = ''
+      this.selectId = "";
+      this.selectName = "";
       this.treeListFun({
         id: "",
         name: "",
       });
       this.rowId = row.id;
-      
+
       this.treedatatransfer = [];
       this.treeSeachId = "";
       this.treeSeachname = "";
       let data = {};
       data.gradeId = row.id;
       this.$api.sys.queryRelation(data).then((res) => {
-        this.dept = []
+        this.dept = [];
         if (res.code == 200) {
           this.dialogVisible = true;
           setTimeout(() => {
             this.treedatatransfer = res.data;
-
             res.data.forEach((e) => {
-              this.dept.push(e.areaId);
               
+              this.treekeys.push(e.areaId);
+              this.dept.push(e.areaId);
+            });
+            this.$nextTick(() => {
+              this.$refs.tree.setCheckedKeys(this.treekeys);
             });
+            
           }, 500);
         } else {
           this.$message.error(res.msg);
@@ -336,20 +342,21 @@ export default {
     //获取选中节点
     treechange(item, node, self) {
       if (item.children.length == 0) {
-        if (node === true) {
-          this.dept.push(item.id);
-          this.treedatatransfer.push({ name: item.name, areaId: item.id });
-        } else {
-          let index = this.dept.indexOf(
-            this.dept.filter((e) => e == item.id)[0]
-          );
-          let name = this.treedatatransfer.indexOf(
-            this.treedatatransfer.filter((e) => e == item.name)[0]
+        let temp = [];
+        this.treedatatransfer.forEach((e) => {
+          temp.push(e.name);
+        });
+        let containsItem = temp.indexOf(item.name);
+        let strId = String(item.id) 
+        if (containsItem > -1) {
+          this.dept = this.dept.filter((e) => e !== strId)
+          
+          this.treedatatransfer = this.treedatatransfer.filter(
+            (_, index) => index !== containsItem
           );
-          if (index !== -1) {
-            this.dept.splice(index, 1);
-            this.treedatatransfer.splice(name, 1);
-          }
+        } else {
+          this.dept.push(item.id);
+          this.treedatatransfer.push({name:item.name});
         }
       }
     },
@@ -449,17 +456,18 @@ export default {
         });
     },
     sumbitInstitution() {
-        this.$api.sys
-          .sysChannelauthorized({ areaIdList: this.dept, id: this.rowId })
-          .then((res) => {
-            if (res.code == 200) {
-              this.getList();
-              this.dialogVisible = false;
-        this.dept = []
-            } else {
-              this.$message.error(res.msg);
-            }
-          });
+      let array =  [...new Set( this.dept)]
+      this.$api.sys
+        .sysChannelauthorized({ areaIdList: array, id: this.rowId })
+        .then((res) => {
+          if (res.code == 200) {
+            this.getList();
+            this.dialogVisible = false;
+            this.dept = [];
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
     },
     handleTableUpload(row) {
       this.name = row.name;