树型结构迁移

src/views/system/item-role.vue

@@ -205,7 +205,31 @@
         width="70%"
         class="dialog-area"
         center>
-        
+        <el-col class="area-choose" :span="12">
+          <el-tree
+            default-expand-all
+            :data="treeData"
+            show-checkbox
+            node-key="id"
+            ref="tree"
+            highlight-current
+            :props="defaultProps"
+            @check="onChecked"
+          >
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>{{ node.label }}</span>
+              <span>
+                <el-button
+                  type="text"
+                  icon="el-icon-caret-bottom"
+                  size="small"
+                  @click="() => append(data,node)"
+                ></el-button>
+              </span>
+            </span>
+          </el-tree>
+        </el-col>
+        <el-col class="rim" :span="11"></el-col>
         <span slot="footer" class="dialog-footer">
           <el-button size="small" @click="dialogArea = false">取消</el-button>
           <el-button type="primary"  size="small" @click="dialogArea = false">确认</el-button>
@@ -287,7 +311,15 @@ export default {
       failType: 2,
       failNum: 2,
       dialogFail: false,
+
+      defaultProps: {
+        children: "children",
+        label: "label",
+        isLeaf: "isLeaf"
+      },
+      treeData: [],
       dialogArea: false,
+      tagsRegion: [],
     };
   },
   created() {
@@ -357,9 +389,6 @@ export default {
         })
       });
     },
-    addArea() {
-      this.dialogArea = true;
-    },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.formInline.pageSize = val;
@@ -455,7 +484,99 @@ export default {
           this.dialog.option = "升级为次级负责人";
         }
       }
-    }
+    },
+    addArea() {
+      vm.dialogArea = true;
+      vm.getAdministrative();
+    },
+    getAdministrative() {
+      let req = {
+        projectId: vm.formInline.portalProjectId
+      };
+      openLoading(vm);
+      vm.GET("portal/scope/v1/administrative", req).then(res => {
+        closeLoading(vm);
+        if (res.code == "000000") {
+          let administrativeAll = res.data.administrativeAll;
+          let administrative = res.data.administrative;
+          this.treeData = [];
+          this.treeData[0] = administrativeAll;
+          this.setTreeData(administrative);
+        }
+      });
+    },
+    //初始化范围树
+    setTreeData(administrative) {
+      let treeIdList = [];
+      let checkList = [];
+      for (let i = 0; i < administrative.length; i++) {
+        treeIdList.push(administrative[i].id);
+        checkList[i] = {};
+        checkList[i].name = administrative[i].label;
+        checkList[i].key = administrative[i].id;
+      }
+      //console.log(treeIdList);
+      this.$refs.tree.setCheckedKeys(treeIdList);
+      this.tagsRegion = checkList;
+    },
+    onChecked() {
+      let cData = [],
+        oldData = (this.treeData.length && this.treeData.slice()) || [],
+        checkedKeys = this.$refs.tree.getCheckedKeys(),
+        halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),
+        savedCheckedKeys = this.handlerCheckedData(oldData, checkedKeys).map(
+          key => {
+            return { type: 1, key: key };
+          }
+        ),
+        savedHalfCheckedKeys = halfCheckedKeys.map(key => {
+          return { type: 2, key: key };
+        }),
+        allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
+
+      this.allSelectedKeys = allSelectedKeys;
+      // this.initCheckList(allSelectedKeys);
+    },
+    //添加子节点
+    append(data, node) {
+      console.log("data:", data);
+      console.log("node:", node);
+      if (data.children.length == 0) {
+        //let id = data.id + "add";
+        let statusValue = 0;
+        if (node.checked == true) {
+          statusValue = 1;
+        }
+        let req = {
+          id: data.id,
+          status: statusValue,
+          disabled: data.disabled
+        };
+        vm.GET("portal/scope/v1/administrative/children", req).then(res => {
+          if (res.code == "000000") {
+            let administrative = res.data.administrative;
+            //console.log(administrative);
+            data.children = administrative;
+            this.appendCheck(administrative, node.checked);
+          }
+        });
+      }
+    },
+    //子节点选中
+    appendCheck(administrative, checked) {
+      //console.log(checked,administrative)
+      let checkList = [];
+      checkList = this.$refs.tree.getCheckedKeys();
+      if (checked) {
+        for (let i = 0; i < administrative.length; i++) {
+          checkList.push(administrative[i].id);
+          // console.log(checkList);
+        }
+      }
+      this.$nextTick(function() {
+        this.$refs.tree.setCheckedKeys(checkList);
+      });
+    },
   }
 };
 </script>
@@ -526,6 +647,19 @@ export default {
         }
       }
     }
+    .dialog-area {
+      .el-dialog {
+        height: 700px;
+        .el-dialog__body {
+          overflow: hidden;
+          .area-choose {
+            height: 515px;
+            overflow-y: scroll;
+            border: 1px solid #dddddd;
+          }
+        }
+      }
+    }
     .table-empty {
       img {
         width: 100px;