tree嵌套

src/components/RightPage/TreeNode.vue

@@ -10,7 +10,8 @@
       @select="onSelect"
       :checkable="false"
     >
-      <a-tree-node v-for="item in treeData" :key="item.did">
+      <template v-for="item in treeData">
+        <a-tree-node :key="item.did">
           <a-tree-node v-for="itemA in item.positionInfoList" :key="item.did + itemA.pid">
             <a-tree-node v-for="itemB in itemA.memberInfoList" :key="itemA.pid + itemB.mid">
               <div class="d-flex flex-row justify-space-between align-center" slot="title">
@@ -72,7 +73,8 @@
               </a-popover>
             </div>
           </div>
-        <TreeNode
+          <TreeNodeCopy
+            :key="item.did + '1'"
             ref="tree-node"
             v-if="item.sonDepartment"
             :tree-data="item.sonDepartment"
@@ -85,15 +87,17 @@
             @editDepartmentModal="editDepartmentModal"
           />
         </a-tree-node>
+      </template>
     </a-tree>
   </div>
 </template>
 <script>
-import TreeNode from './TreeNode.vue';
+import TreeNodeCopy from './TreeNodeCopy.vue';
 
 export default {
+  name: 'TreeNode',
   isTreeNode: true,
-  components: { TreeNode },
+  components: { TreeNodeCopy },
   props: {
     treeData: {
       default: () => [],

src/components/RightPage/TreeNodeCopy.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <a-tree
+      v-model="checkedKeys"
+      :expanded-keys="expandedKeys"
+      @expand="onExpand"
+      :auto-expand-parent="autoExpandParent"
+      class="fill-width"
+      :block-node="true"
+      @select="onSelect"
+      :checkable="false"
+    >
+      <template v-for="item in treeData">
+        <a-tree-node :key="item.did">
+          <a-tree-node v-for="itemA in item.positionInfoList" :key="item.did + itemA.pid">
+            <a-tree-node v-for="itemB in itemA.memberInfoList" :key="itemA.pid + itemB.mid">
+              <div class="d-flex flex-row justify-space-between align-center" slot="title">
+                <div>{{ itemB.mname }}，{{ itemB.phone }}</div>
+              </div>
+            </a-tree-node>
+            <div class="d-flex flex-row justify-space-between align-center" slot="title">
+              <div>
+                {{ itemA.pname }}
+                <a-tag color="blue" class="ml-2" v-for="tag in itemA.roleList" :key="tag.rid" @click="changeRole(itemA.pid)">
+                  {{ tag.rname }}
+                </a-tag>
+              </div>
+              <div>
+                <!-- <a-icon
+                class="mr-2"
+                :style="{ fontSize: '20px' }"
+                v-if="isSelect === item.did + itemA.pid"
+                type="plus"
+                @click="showAddMember(itemA.did)"
+              ></a-icon> -->
+                <a-popover v-model="itemA.show" placement="topRight" trigger="click">
+                  <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did + itemA.pid" type="more" />
+                  <template slot="content">
+                    <div class="d-flex align-center">
+                      <a-button type="primary" class="mr-2" @click="editPositionModal(itemA)"> 修改 </a-button>
+                      <a-button type="danger" @click="delPositionInfo(itemA)"> 删除 </a-button>
+                    </div>
+                  </template>
+                </a-popover>
+              </div>
+            </div>
+          </a-tree-node>
+          <div class="d-flex flex-row justify-space-between align-center" slot="title">
+            <div>
+              {{ item.departmentName }}
+              <a-tag color="#87d068" class="ml-2" style="border-radius: 10px">
+                {{ (item.positionInfoList ? item.positionInfoList.length : 0) + (item.sonDepartment ? item.sonDepartment.length : 0) }}
+              </a-tag>
+            </div>
+            <div>
+              <a-icon
+                class="mr-2"
+                :style="{ fontSize: '20px' }"
+                v-if="isSelect === item.did"
+                type="plus"
+                @click="showAddItem(item.did)"
+              ></a-icon>
+              <!-- <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="m
+            ore" @click="showEditItem(item)" /> -->
+              <a-popover v-model="item.departmentIsShow" placement="topRight" trigger="click">
+                <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="more" />
+                <template slot="content">
+                  <div class="d-flex align-center">
+                    <a-button type="primary" class="mr-2" @click="editDepartmentModal(item)"> 修改 </a-button>
+                    <a-button type="danger" @click="delpartment(item)"> 删除 </a-button>
+                  </div>
+                </template>
+              </a-popover>
+            </div>
+          </div>
+          <TreeNode
+            :key="item.did + '1'"
+            ref="tree-node"
+            v-if="item.sonDepartment"
+            :tree-data="item.sonDepartment"
+            @showAddItem="showAddItem"
+            @showEditItem="showEditItem"
+            @showAddMember="showAddMember"
+            @showEditMember="showEditMember"
+            @changeRole="changeRole"
+            @editPositionModal="editPositionModal"
+            @editDepartmentModal="editDepartmentModal"
+          />
+        </a-tree-node>
+      </template>
+    </a-tree>
+  </div>
+</template>
+<script>
+import TreeNode from './TreeNode.vue';
+
+export default {
+  name: 'TreeNode',
+  isTreeNode: true,
+  components: { TreeNode },
+  props: {
+    treeData: {
+      default: () => [],
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      isSelect: '',
+      expandedKeys: [],
+      autoExpandParent: true,
+      checkedKeys: [],
+    };
+  },
+  watch: {
+    treeData: {
+      handler() {
+        this.expandedKeys = [];
+        if (this.treeData.length) {
+          for (let i = 0; i < this.treeData.length; i++) {
+            this.expandedKeys.push(this.treeData[i].did);
+          }
+        }
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.expandedKeys = [];
+    if (this.treeData.length) {
+      for (let i = 0; i < this.treeData.length; i++) {
+        this.expandedKeys.push(this.treeData[i].did);
+      }
+    }
+  },
+  methods: {
+    // 显示修改部门信息
+    editDepartmentModal(item) {
+      console.log('item: ', item);
+      this.$emit('editDepartmentModal', item);
+    },
+    // 显示修改职位信息
+    editPositionModal(item) {
+      this.$emit('editPositionModal', item);
+    },
+    // 删除部门
+    delpartment(item) {
+      console.log('item: ', item);
+    },
+    // 删除职位信息
+    delPositionInfo(item) {
+      console.log('item: ', item);
+    },
+    // 显示修改关联角色
+    changeRole(id) {
+      this.$emit('changeRole', id);
+    },
+    onSelect(selectedKeys, info) {
+      console.log('selected', selectedKeys, info);
+      this.isSelect = selectedKeys[0];
+    },
+    showAddItem(id) {
+      this.$emit('showAddItem', id);
+    },
+    showEditItem(item) {
+      this.$emit('showEditItem', item);
+    },
+    showAddMember(id) {
+      this.$emit('showAddMember', id);
+    },
+    showEditMember(item) {
+      this.visible = true;
+      // this.$emit('showEditMember', item);
+    },
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    // 全部折叠
+    foldAll() {
+      this.expandedKeys = [];
+    },
+    // 全部展开
+    openAll() {
+      var expandedKeys = [];
+      if (this.treeData.length) {
+        for (let i = 0; i < this.treeData.length; i++) {
+          const item = this.treeData[i];
+          expandedKeys.push(item.did);
+          for (let j = 0; j < item.positionInfoList.length; j++) {
+            const itemA = item.positionInfoList[j];
+            expandedKeys.push(item.did + itemA.pid);
+          }
+        }
+      }
+      this.expandedKeys = expandedKeys;
+      var child = this.$refs['tree-node'];
+      console.log('child: ', child);
+      if (child) {
+        child.foldAll();
+      }
+    },
+    // 全选/取消全选
+    chooseAll(isTrue) {
+      if (isTrue) {
+        var checkedKeys = [];
+        if (this.treeData.length) {
+          for (let i = 0; i < this.treeData.length; i++) {
+            const item = this.treeData[i];
+            checkedKeys.push(item.did);
+            for (let j = 0; j < item.positionInfoList.length; j++) {
+              const itemA = item.positionInfoList[j];
+              checkedKeys.push(item.did + itemA.pid);
+            }
+          }
+        }
+        this.checkedKeys = checkedKeys;
+        var child = this.$refs['tree-node'];
+        if (child) {
+          child.foldAll();
+        }
+      } else {
+        this.checkedKeys = [];
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+ul {
+  margin: 0;
+  padding: 0 !important;
+}
+/deep/.ant-tree li span.ant-tree-switcher,
+.ant-tree li span.ant-tree-iconEle {
+  margin-top: 8px !important;
+}
+/deep/.ant-tree li {
+  min-height: 54px;
+  line-height: 40px;
+  font-size: 16px;
+}
+/deep/.ant-tree li .ant-tree-node-content-wrapper {
+  min-height: 40px;
+  line-height: 40px;
+}
+</style>