更新新建项目中tree和label双向绑定 多层tabs的数据关联

src/views/education/add-manager.vue

@@ -118,38 +118,50 @@
               ></el-tree>
             </el-col>
             <el-col :span="11">
-              <el-tag v-for="tag in tagsRegion" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag>
+              <el-tag
+                v-for="tag in tagsRegion"
+                :key="tag.name"
+                closable
+                :type="tag.type"
+                @close="handleCloseTree(tag)"
+              >{{tag.name}}</el-tag>
             </el-col>
           </el-row>
         </el-tab-pane>
         <el-tab-pane label="设定机构" name="second">
-          <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form :inline="true" :model="formOrganization" class="demo-form-inline">
             <el-form-item label>
-              <el-input v-model="formInline.name" placeholder="请输入机构名称"></el-input>
+              <el-input v-model="formOrganization.name" placeholder="请输入机构名称"></el-input>
             </el-form-item>
             <el-form-item label>
-              <el-select v-model="formInline.region" placeholder="全部地区">
+              <el-select v-model="formOrganization.region" placeholder="全部地区">
                 <el-option label="全部地区" value></el-option>
                 <el-option label="区域一" value="shanghai"></el-option>
                 <el-option label="区域二" value="beijing"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-select v-model="formInline.grade" placeholder="全部医院级别">
+              <el-select v-model="formOrganization.grade" placeholder="全部医院级别">
                 <el-option label="全部医院级别" value></el-option>
                 <el-option label="三家" value="3"></el-option>
                 <el-option label="二甲" value="2"></el-option>
                 <el-option label="一甲" value="1"></el-option>
               </el-select>
             </el-form-item>
+            <el-form-item>
+              <el-button-group>
+                <el-button type @click="checkAll(true)">选择全部</el-button>
+                <el-button type @click="checkAll(false)">全部不选</el-button>
+              </el-button-group>
+            </el-form-item>
           </el-form>
           <el-table
             class="rim"
-            ref="multipleTable"
-            :data="tableData"
+            ref="multipleOrganization"
+            :data="tableOrganization"
             tooltip-effect="dark"
             style="width: 100%"
-            @selection-change="handleSelectionChange"
+            @selection-change="handleSelectionOrganization"
           >
             <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column prop="name" label="医院名称"></el-table-column>
@@ -157,8 +169,17 @@
             <el-table-column prop="province" label="所属省份"></el-table-column>
             <el-table-column prop="city" label="所属城市"></el-table-column>
             <el-table-column prop="district" label="所属区县"></el-table-column>
-            <el-table-column prop="street" label="所属街道" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="street" label="所属街道"></el-table-column>
           </el-table>
+          <el-pagination
+            @size-change="handleSizeOrganization"
+            @current-change="handleCurrentOrganization"
+            :current-page="currentOrganization"
+            :page-sizes="[2, 3, 4]"
+            :page-size="pageSizeOrganization"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalOrganization"
+          ></el-pagination>
         </el-tab-pane>
         <el-tab-pane label="设定科室" name="third">
           <el-col :span="8">
@@ -171,7 +192,7 @@
             <el-table
               class="department"
               ref="multipleTable"
-              :data="tableData2"
+              :data="tableDepartment"
               tooltip-effect="dark"
               style="width: 100%"
               @selection-change="handleSelectionChange"
@@ -272,12 +293,14 @@
 <script>
 import BreadCrumb from "../../components/breadcrumb.vue";
 import { create } from "domain";
+import { returnData } from "../mock";
+import { setTimeout } from "timers";
 export default {
   components: {
     BreadCrumb
   },
   data() {
-    const item = {
+    const itemOrganization = {
       name: "上海市第一人民医院",
       grade: "二甲医院",
       province: "上海市",
@@ -294,6 +317,8 @@ export default {
       district: "长宁区"
     };
     return {
+      itemOrganization: itemOrganization,
+      itemPerson: itemPerson,
       //面包屑
       curmbFirst: "教培项目",
       curmbSecond: "新建项目",
@@ -328,76 +353,27 @@ export default {
         children: "children",
         label: "label"
       },
-      treeData: [
-        {
-          id: 11,
-          label: "一级 1",
-          children: [
-            {
-              id: 1,
-              label: "一级 1",
-              children: [
-                {
-                  id: 4,
-                  label: "二级 1-1",
-                  children: [
-                    {
-                      id: 9,
-                      label: "三级 1-1-1"
-                    },
-                    {
-                      id: 10,
-                      label: "三级 1-1-2"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              id: 2,
-              label: "一级 2",
-              children: [
-                {
-                  id: 5,
-                  label: "二级 2-1"
-                },
-                {
-                  id: 6,
-                  label: "二级 2-2"
-                }
-              ]
-            },
-            {
-              id: 3,
-              label: "一级 3",
-              children: [
-                {
-                  id: 7,
-                  label: "二级 3-1"
-                },
-                {
-                  id: 8,
-                  label: "二级 3-2"
-                }
-              ]
-            }
-          ]
-        }
-      ],
+      treeData: returnData().treeData,
       tagsRegion: [],
-      tableData: Array(10).fill(item),
-      multipleSelection: [],
       //设定机构 数据
-      formInline: {
+      formOrganization: {
         name: "",
         region: "",
-        grade: ""
+        grade: "",
+        chechAll: true
       },
+      hasOrganizationInit: false,
+      //tableOrganization: Array(10).fill(itemOrganization),
+      tableOrganization: new Array(),
+      multipleSelectionOrganization: [],
+      currentOrganization: 1,
+      totalOrganization: 10,
+      pageSizeOrganization: 2,
       //设定科室 数据
       formDepartment: {
         grade: ""
       },
-      tableData2: [
+      tableDepartment: [
         { name: "全科" },
         { name: "内科" },
         { name: "外科" },
@@ -409,7 +385,7 @@ export default {
         hospital: "",
         department: ""
       },
-      tablePerson: Array(10).fill(itemPerson),
+      tablePerson: new Array(),
       //选择项目组件 数据
       optionsComponent: [
         {
@@ -524,6 +500,13 @@ export default {
   },
   created() {
     this.changeOnStep(this.active);
+    this.initOrganization();
+    this.initPerson();
+
+    let that = this;
+    setTimeout(function() {
+      that.checkAll(true);
+    });
   },
   methods: {
     //表单校验
@@ -602,18 +585,23 @@ export default {
     },
     //切换tab
     handleClick(tab, event) {
-      console.log(tab);
+      //console.log(tab);
     },
+    //列举选中地区
     initCheckList(allSelectedKeys) {
       this.tagsRegion = [];
-      console.log(allSelectedKeys);
-      console.log(this.$refs.tree.getCheckedNodes());
+      // console.log(allSelectedKeys);
+      // console.log(this.$refs.tree.getCheckedNodes());
       let nodeData = this.$refs.tree.getCheckedNodes();
-      for(let i=0;i<nodeData.length;i++){
-        for(let j=0;j<allSelectedKeys.length;j++) {
-          if(allSelectedKeys[j].type == 2 && nodeData[i].id==allSelectedKeys[j].key) {
+      for (let i = 0; i < nodeData.length; i++) {
+        for (let j = 0; j < allSelectedKeys.length; j++) {
+          if (
+            allSelectedKeys[j].type == 2 &&
+            nodeData[i].id == allSelectedKeys[j].key
+          ) {
             let tagObj = {};
             tagObj.name = nodeData[i].label;
+            tagObj.key = nodeData[i].id;
             this.tagsRegion.push(tagObj);
           }
         }
@@ -652,6 +640,8 @@ export default {
 
       //console.log(allSelectedKeys);
       this.initCheckList(allSelectedKeys);
+      //改变行政范围后，更新设定机构和设定人员
+      this.updateOrganizationAndPerson(allSelectedKeys);
     },
     // 递归删除列表中所有子节点
     delSubKeysByNode(node, checkedKeys) {
@@ -688,22 +678,79 @@ export default {
       });
       return checkedKeys;
     },
-    //check table
+    //通过key设置tree
+    setCheckedKeys(tagsRegion) {
+      console.log(tagsRegion);
+      let treeKeyList = [];
+      for (let index = 0; index < tagsRegion.length; index++) {
+        treeKeyList[index] = tagsRegion[index].key 
+      }
+      console.log(treeKeyList);
+      this.$refs.tree.setCheckedKeys(treeKeyList);
+    },
+    //删除label节点 同步树结构
+    handleCloseTree(tag) {
+      this.tagsRegion.splice(this.tagsRegion.indexOf(tag), 1);
+      this.setCheckedKeys(this.tagsRegion);
+    },
+    //改变 设定机构选项
+    handleSelectionOrganization(val) {
+      this.multipleSelectionOrganization = val;
+      console.log(this.multipleSelectionOrganization);
+      this.updatePerson(this.multipleSelectionOrganization)
+    },
+    //改变 table的check状态
     handleSelectionChange(val) {
       this.multipleSelection = val;
+      console.log(this.multipleSelection);
     },
-    checkAll() {
-      this.$refs.multipleTable.toggleAllSelection();
-    },
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach(row => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
+    //设定机构table全选
+    checkAll(flag) {
+      if (flag === true) {
+        this.$refs.multipleOrganization.toggleAllSelection();
       } else {
-        this.$refs.multipleTable.clearSelection();
+        this.$refs.multipleOrganization.clearSelection();
+      }
+    },
+    handleSizeOrganization(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentOrganization(val) {
+      console.log(`当前页: ${val}`);
+    },
+    //初始化机构数据
+    initOrganization() {
+      //console.log(returnData());
+      let data = returnData().tableOrganization;
+      this.tableOrganization = data;
+    },
+    //初始化设定人员数据
+    initPerson() {
+      let data = returnData().tablePerson;
+      this.tablePerson = data;
+    },
+    //行政范围改变更新设定机构和设定人员
+    updateOrganizationAndPerson(allSelectedKeys) {
+      this.tableOrganization = [];
+      this.tablePerson = [];
+    },
+    //设定机构改变更新设定人员
+    updatePerson(organization) {
+
+      if(this.hasOrganizationInit === true) {
+        this.tablePerson = [];
       }
+      this.hasOrganizationInit = true;
     },
+    // toggleSelection(rows) {
+    //   if (rows) {
+    //     rows.forEach(row => {
+    //       this.$refs.multipleTable.toggleRowSelection(row);
+    //     });
+    //   } else {
+    //     this.$refs.multipleTable.clearSelection();
+    //   }
+    // },
     changeValue(value) {
       this.tagsComponent = [];
       let len = 0;
@@ -770,6 +817,21 @@ export default {
       margin-left: 20px;
       content: "•";
     }
+    .el-tag {
+      margin-right: 10px;
+      border: 1.3px solid #48a8fe;
+      color: #1e92fe;
+      background-color: #e7f6fe;
+      .el-icon-close {
+        width: 13px;
+        height: 13px;
+        line-height: 13px;
+        font-size: 12px;
+        background-color: #0486fe;
+        border-radius: 50%;
+        color: #d4edfe;
+      }
+    }
   }
 }
 
@@ -813,7 +875,6 @@ export default {
   left: 130px;
 }
 .rim {
-  min-height: 700px;
   border: 1px solid #dddddd;
 }
 .department {

src/views/education/item-manager.vue

@@ -2,9 +2,7 @@
   <div class="main-container">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <el-main>
-      <el-header
-        style="text-align: left; font-size: 12px; background-color:#fff; border-bottom: 1px solid #fff;"
-      >
+      <el-header class="header">
         <h3 class="title">项目管理</h3>
       </el-header>
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
@@ -43,7 +41,11 @@
           <el-button class="add-button" type="primary" @click="toPage()">新建项目</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="loading" :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        :header-cell-style="{background:'#FAFAFA',color:'#000'}"
+      >
         <el-table-column prop="id" label="ID编号" width="140"></el-table-column>
         <el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
         <el-table-column prop="createName" label="创建人"></el-table-column>
@@ -138,7 +140,7 @@ export default {
   create() {},
   methods: {
     toPage() {
-      this.$router.push('add-manager');
+      this.$router.push("add-manager");
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
@@ -168,36 +170,33 @@ export default {
   }
 };
 </script>
-<style>
-.label-row {
-  padding-top: 10px;
-}
-
+<style lang="scss">
 .main-container {
   width: 100%;
-}
-.title {
-  color: #409eff;
-}
-.el-header {
-  background-color: #b3c0d1;
-  color: #333;
-  line-height: 60px;
-}
-.table-option span {
-  color: #409eff;
-}
-.add-button {
-  float: right;
-}
-/* .el-table tr>.el-table_1_column_2 .cell {
-  color: #409eff
-} */
-.el-table .cell {
-  color: #929292;
-}
-.el-table th > .cell {
-  font-weight: bold;
-  color: #000;
+  .el-header {
+    margin-top: 20px;
+    color: #333;
+    line-height: 60px;
+    text-align: left;
+    font-size: 12px;
+    background-color: #fff;
+    border-bottom: 1px solid #fff;
+    .title {
+      color: #409eff;
+    }
+  }
+  .table-option span {
+    color: #409eff;
+  }
+  .add-button {
+    float: right;
+  }
+  .el-table .cell {
+    color: #929292;
+  }
+  .el-table th > .cell {
+    font-weight: bold;
+    color: #000;
+  }
 }
 </style>
\ No newline at end of file

src/views/mock.js

+let tableOrganization = [{
+    name: "上海市第一人民医院",
+    grade: "一甲医院",
+    province: "上海市",
+    city: "上海市",
+    district: "浦东新区",
+    street: "张江街道"
+}, {
+    name: "上海市第二人民医院",
+    grade: "二甲医院",
+    province: "上海市",
+    city: "上海市",
+    district: "浦东新区",
+    street: "张江街道"
+}, {
+    name: "上海市第三人民医院",
+    grade: "三甲医院",
+    province: "上海市",
+    city: "上海市",
+    district: "浦东新区",
+    street: "张江街道"
+}];
+
+let tablePerson = [{
+    name: "云小鹊",
+    hospital: "上海市第一人民医院",
+    department: "全科",
+    province: "上海市",
+    city: "上海市",
+    district: "浦东新区"
+}, {
+    name: "云小鹊",
+    hospital: "上海市第二人民医院",
+    department: "全科",
+    province: "上海市",
+    city: "上海市",
+    district: "长宁区"
+}, {
+    name: "云小鹊",
+    hospital: "上海市第三人民医院",
+    department: "全科",
+    province: "上海市",
+    city: "上海市",
+    district: "南汇区"
+}];
+let treeData = [
+    {
+        id: 11,
+        label: "一级 1",
+        children: [
+            {
+                id: 1,
+                label: "一级 1",
+                children: [
+                    {
+                        id: 4,
+                        label: "二级 1-1",
+                        children: [
+                            {
+                                id: 9,
+                                label: "三级 1-1-1"
+                            },
+                            {
+                                id: 10,
+                                label: "三级 1-1-2"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 2,
+                label: "一级 2",
+                children: [
+                    {
+                        id: 5,
+                        label: "二级 2-1"
+                    },
+                    {
+                        id: 6,
+                        label: "二级 2-2"
+                    }
+                ]
+            },
+            {
+                id: 3,
+                label: "一级 3",
+                children: [
+                    {
+                        id: 7,
+                        label: "二级 3-1"
+                    },
+                    {
+                        id: 8,
+                        label: "二级 3-2"
+                    }
+                ]
+            }
+        ]
+    }
+];
+export function returnData() {
+    let data = {};
+    data.tableOrganization = tableOrganization;
+    data.tablePerson = tablePerson;
+    data.treeData = treeData;
+    return data;
+}
\ No newline at end of file