选择范围关联逻辑

src/views/education/add-manager.vue

@@ -124,13 +124,17 @@
         </el-form>
       </div>
       <div class="second-step" v-else-if="active === 1">
-        <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tabs v-model="activeName" @tab-click="handleClickTabs">
           <el-tab-pane label="设定行政范围" name="first">
             <el-row :gutter="20">
               <el-col class="rim" :span="12">
-                <el-tree
+                <!-- 
                   :load="loadNode"
                   lazy 
+                  default-expand-all
+                -->
+                <el-tree
+                  default-expand-all
                   :data="treeData"
                   show-checkbox
                   node-key="id"
@@ -138,7 +142,19 @@
                   highlight-current
                   :props="defaultProps"
                   @check="onChecked"
-                ></el-tree>
+                >
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <span>{{ node.label }}</span>
+                    <span>
+                      <el-button
+                        type="text"
+                        icon="el-icon-caret-bottom"
+                        size="mini"
+                        @click="() => append(data,node)"
+                      ></el-button>
+                    </span>
+                  </span>
+                </el-tree>
               </el-col>
               <el-col :span="11">
                 <el-tag
@@ -404,6 +420,7 @@ export default {
     return {
       itemOrganization: itemOrganization,
       itemPerson: itemPerson,
+      projectId: null,
       //面包屑
       curmbFirst: "教培项目",
       curmbSecond: "新建项目",
@@ -436,6 +453,7 @@ export default {
       treeData: [],
       tagsRegion: [],
       //设定机构 数据
+      organizationChange: false,
       formOrganization: {
         name: "",
         region: "",
@@ -564,6 +582,7 @@ export default {
   },
   created() {
     vm = this;
+    this.projectId = vm.getUrlSearch(window.location.href, "projectId"),
     this.editManager();
     this.changeOnStep(this.active);
 
@@ -998,6 +1017,19 @@ export default {
         this.getAdministrative();
       }
     },
+    //切换tabs
+    handleClickTabs(tab, event) {
+      let tabName = tab.name;
+      if (tabName == "second") {
+        //设定机构
+        this.getOrganization();
+      } else if (tabName == "third") {
+        //设定科室
+      } else if (tabName == "fourth") {
+        //设定人员
+        this.getPeople();
+      }
+    },
     //初始化范围树
     setTreeData(administrative) {
       let treeIdList = [];
@@ -1022,24 +1054,14 @@ export default {
           //console.log(res.data);
           let administrativeAll = res.data.administrativeAll;
           let administrative = res.data.administrative;
-          //this.treeData[0] = administrativeAll;
+          this.treeData = [];
+          this.treeData[0] = administrativeAll;
           this.setTreeData(administrative);
+          console.log("treeData", this.treeData);
         }
       });
     },
-    //切换tab
-    handleClick(tab, event) {
-      let tabName = tab.name;
-      if (tabName == "second") {
-        //设定机构
-        this.getOrganization();
-      } else if (tabName == "third") {
-        //设定科室
-      } else if (tabName == "fourth") {
-        //设定人员
-        this.getPeople();
-      }
-    },
+    
     //列举选中地区
     initCheckList(allSelectedKeys) {
       this.tagsRegion = [];
@@ -1060,14 +1082,34 @@ export default {
         }
       }
     },
+    //添加子节点
+    append(data, node) {
+      console.log("data:", data);
+      console.log("node:", node);
+      if (data.children.length == 0) {
+        let id = data.id + "add";
+        const newChild = [{ id: id, label: "testtest", children: [] },{ id: id, label: "22", children: [] }];
+
+        //data.children.push(newChild);
+        let req = {
+          id: data.id
+        };
+        vm.GET("scope/v1/administrative/children", req).then(res => {
+          if (res.code == "000000") {
+            let administrative = res.data.administrative;
+            console.log(administrative);
+            data.children = administrative;
+            //data.children.push(newChild);
+          }
+        });
+      }
+    },
     //树结构
     loadNode(node, resolve) {
-      //console.log(node);
       if (node.level === 0) {
         return resolve([{ label: "全国", id: "000", status: 0 }]);
       }
       if (node.level === 1) {
-        //let treeData = returnData().treeData;
         let req = {
           //projectId: vm.getUrlSearch(window.location.href, "projectId"),
           projectId: 54
@@ -1077,7 +1119,6 @@ export default {
             let administrativeAll = res.data.administrativeAll;
             let administrative = res.data.administrative;
             let children = administrativeAll.children;
-            //this.treeData[0] = administrativeAll;
             //console.log(administrativeAll);
             return resolve(children);
           }
@@ -1100,7 +1141,6 @@ export default {
       console.log(this.$refs.tree.getCheckedKeys());
     },
     onChecked() {
-      //console.log(this.treeData);
       let cData = [],
         oldData = (this.treeData.length && this.treeData.slice()) || [],
         checkedKeys = this.$refs.tree.getCheckedKeys(),
@@ -1114,15 +1154,11 @@ export default {
           return { type: 1, key: key };
         }),
         allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
-      console.log('treeData',this.treeData);
-      console.log('oldData',oldData);
-      console.log('checkedKeys',checkedKeys);
-      console.log('halfCheckedKeys',halfCheckedKeys);
-      console.log('savedCheckedKeys',savedCheckedKeys);
-      console.log('allSelectedKeys',allSelectedKeys);
+
       this.initCheckList(allSelectedKeys);
       //改变行政范围后，更新设定机构和设定人员
       this.updateOrganizationAndPerson(allSelectedKeys);
+      this.organizationChange = true;
     },
     // 递归删除列表中所有子节点
     delSubKeysByNode(node, checkedKeys) {
@@ -1195,15 +1231,33 @@ export default {
         //this.$refs[name].clearSelection();
       }
     },
+    //获取用户类型
+    getKind(type) {
+      let kind = 0;
+      if(type == 'organization') {
+        if(this.organizationChange) {
+          kind = 3;
+        } else {
+          kind = 0;
+        }
+      } else if(type == '') {
+
+      }
+      return kind;
+    },
     //查询机构列表
     getOrganization() {
       let req = {
-        projectId: 1,
-        setKind: 3,
-        scope: "000_110",
+        projectId: this.projectId,
+        setKind: this.getKind('organization'),
+        // scope: "000_110",
         pageNum: this.formOrganization.pageNum,
         pageSize: this.formOrganization.pageSize
       };
+      if(req.setKind == 3) {
+        req.scope = '000_110';
+        console.log('tagsRegion',this.tagsRegion);
+      }
       vm.GET("scope/v1/organization", req).then(res => {
         if (res.code == "000000") {
           console.log(res.data);
@@ -1389,6 +1443,10 @@ export default {
   }
   .second-step {
     margin: 10px 0 0 20px;
+    //隐藏树展开
+    .el-tree-node__expand-icon {
+      display: none;
+    }
     .department {
       margin-top: 20px;
       border: 1px solid #dddddd;
@@ -1412,7 +1470,7 @@ export default {
       content: "•";
     }
     .el-tag {
-      margin-right: 10px;
+      margin: 0 10px 10px 0;
       border: 1.3px solid #48a8fe;
       color: #1e92fe;
       background-color: #e7f6fe;