1. init 通讯录 左侧与右侧列表 处理，交互逻辑处理

src/views/pages/employ-management/address-book/address-book.vue

 <template>
     <div class="d-flex address-book-container">
-        <Aside class="flex-none"></Aside>
-        <EmployList class="flex-fill"></EmployList>
+        <Aside class="flex-none" @onEmpChange="onEmpChange"></Aside>
+        <EmployList
+            :pdid2Members="pdid2Members"
+            :curDepId="curDepId"
+            class="flex-fill"
+        ></EmployList>
     </div>
 </template>
 
 <script lang="ts">
     import { Component, Vue } from "vue-property-decorator";
-    import { TokenManager } from "@/api/token";
-    import EnterpriseHost from "@/views/service/enterprise-host";
-    import { sdkService } from "@/api/sdk-service";
-    import companyService from "@/api/company-service";
     import Aside from "@/views/pages/employ-management/address-book/aside.vue";
     import EmployList from "@/views/pages/employ-management/address-book/employ-list.vue";
+    import { empTreeController } from "@/views/service/emp-tree";
 
     @Component({ components: { Aside, EmployList } })
     export default class AddressBook extends Vue {
-        private test() {
-            sdkService.getJoinedList();
-            const comid = EnterpriseHost.getPoid();
-            TokenManager.getCompanyToken(comid);
-            companyService.getDepartment(comid);
+        private pdid2Members: { [key: string]: any } = {};
+        private curDepId = "";
+
+        created() {
+            this.initOrgTree();
+        }
+
+        private onEmpChange(depId: string) {
+            this.curDepId = depId;
+        }
+
+        private initOrgTree() {
+            empTreeController.initTree(this).then(() => {
+                this.pdid2Members = empTreeController.getPdid2Members();
+            });
         }
     }
 </script>

src/views/pages/employ-management/address-book/aside.vue

@@ -22,25 +22,32 @@
         <div v-show="!searchVal" class="flex-fill">
             <div class="el-tree-box">
                 <el-tree
-                    class="el-tree-item old-tree"
+                    class="el-tree-item addressbook-tree"
                     :data="departments"
                     :props="defaultProps"
+                    @node-click="handleNodeClick"
                     @current-change="isChecked"
+                    :default-expanded-keys="defaultExpandedKeys"
                     :filter-node-method="filterNode"
                     :expand-on-click-node="false"
                     node-key="id"
                     ref="tree"
-                ></el-tree>
+                >
+                    <div class="custom-tree-node" slot-scope="{ data }">
+                        <div class="div_onde">{{ data.name }}</div>
+                    </div>
+                </el-tree>
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
+    import { Component, Vue, Ref } from "vue-property-decorator";
     import { departmentController } from "@/views/service/department-controller";
     import { popupService } from "@/apppackage/element-upgrades/popup";
     import SearchList from "@/views/pages/employ-management/address-book/components/search-list.vue";
+    import { Direction } from "@/router";
 
     @Component({ components: { SearchList } })
     export default class Aside extends Vue {
@@ -52,6 +59,11 @@
 
         private departments = [];
         private searchVal = "";
+        private defaultExpandedKeys: string[] = [];
+        private defaultCheckedKeys: string[] = [];
+
+        @Ref("tree")
+        private tree!: any;
 
         created() {
             this.getDepartmentInfo();
@@ -62,10 +74,36 @@
                 .getDepartments()
                 .then((r: any) => {
                     this.departments = r.departments4tree;
+                    const curPdid = this.$route.query.pdid || r.departments[0].id;
+                    this.$nextTick(() => {
+                        this.tree.setCurrentKey(curPdid);
+                    });
+                    this.defaultExpandedKeys = [curPdid];
+                    this.onEmpChange(curPdid);
                 })
                 .catch(popupService.toast.error);
         }
 
+        private onEmpChange(pdid: string) {
+            if (this.$route.query.pdid === pdid) {
+                return this.$emit("onEmpChange", pdid);
+            }
+            this.$router
+                .replace({
+                    name: Direction[Direction.AddressBook],
+                    query: {
+                        pdid: pdid,
+                    },
+                })
+                .then(() => {
+                    this.$emit("onEmpChange", pdid);
+                });
+        }
+
+        private handleNodeClick(data: any) {
+            this.onEmpChange(data.id);
+        }
+
         private addDepGroup() {
             return "";
         }
@@ -91,11 +129,10 @@
         //     return [];
         // }
 
-        private defaultCheckedKeys() {
-            // let info = this.currentDeptInfo;
-            // return [info.self.id];
-            return [];
-        }
+        //     // let info = this.currentDeptInfo;
+        //     // return [info.self.id];
+        //     return [];
+        // }
     }
 </script>
 
@@ -125,3 +162,10 @@
         }
     }
 </style>
+<style lang="less">
+    .addressbook-tree {
+        .is-current > div:first-child {
+            background-color: #f5f7fa;
+        }
+    }
+</style>

src/views/pages/employ-management/address-book/components/search-list.vue

 <template>
     <div class="search-list">
         <div class="search-label">员工和分组</div>
-        <ul>
-            <li v-for="(emp, index) in emps" :key="`e-${index}`">
-                <label>{{ emp.name }}</label>
-                <span>{{ emp.dptsName }}</span>
-            </li>
-            <li v-for="(dept, index) in depts" :key="`d-${index}`">
-                <label>{{ dept.name }}</label>
-            </li>
-        </ul>
+        <div class="emps-list">
+            <div v-for="(emp, index) in emps" :key="`e-${index}`">
+                <div>{{ emp.name }}</div>
+            </div>
+            <div v-for="(dept, index) in depts" :key="`d-${index}`">
+                <div>{{ dept.name }}</div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -17,6 +16,7 @@
     import { departmentController } from "@/views/service/department-controller";
     import { Component, Vue, Prop, Watch } from "vue-property-decorator";
     import { empTreeController } from "@/views/service/emp-tree";
+    import { popupService } from "@/apppackage/element-upgrades/popup";
 
     @Component({ components: {} })
     export default class SearchList extends Vue {
@@ -32,36 +32,38 @@
             Promise.all([
                 departmentController.getDepartments(),
                 empTreeController.initTree(),
-            ]).then((r: any) => {
-                if (this.val !== curVal) {
-                    return;
-                }
-                const departments = r[0]?.departments;
-                const members = empTreeController.getRoleList();
-
-                const cacheMember: string[] = [];
-                this.depts = [];
-                this.emps = [];
-                members.forEach((m: any) => {
-                    if (
-                        m.name &&
-                        m.name.includes(curVal) &&
-                        !cacheMember.includes(m.id)
-                    ) {
-                        cacheMember.push(m.id);
-                        const params = JSON.parse(JSON.stringify(m));
-                        this.emps.push(params);
+            ])
+                .then((r: any) => {
+                    if (this.val !== curVal) {
+                        return;
                     }
-                });
+                    const departments = r[0]?.departments;
+                    const members = empTreeController.getRoleList();
 
-                departments.forEach((d: any) => {
-                    if (d.name && d.name.includes(curVal)) {
-                        cacheMember.push(d.id);
-                        const params = JSON.parse(JSON.stringify(d));
-                        this.depts.push(params);
-                    }
-                });
-            });
+                    const cacheMember: string[] = [];
+                    this.depts = [];
+                    this.emps = [];
+                    members.forEach((m: any) => {
+                        if (
+                            m.name &&
+                            m.name.includes(curVal) &&
+                            !cacheMember.includes(m.id)
+                        ) {
+                            cacheMember.push(m.id);
+                            const params = JSON.parse(JSON.stringify(m));
+                            this.emps.push(params);
+                        }
+                    });
+
+                    departments.forEach((d: any) => {
+                        if (d.name && d.name.includes(curVal)) {
+                            cacheMember.push(d.id);
+                            const params = JSON.parse(JSON.stringify(d));
+                            this.depts.push(params);
+                        }
+                    });
+                })
+                .catch(popupService.toast.error);
         }
 
         private handleClick(id: string) {

src/views/pages/employ-management/address-book/employ-list.vue

 <template>
-    <div>EmployList</div>
+    <div>
+        EmployList
+        {{ tableData }}
+    </div>
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
+    import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 
     @Component({ components: {} })
-    export default class EmployList extends Vue {}
+    export default class EmployList extends Vue {
+        @Prop({ default: {} })
+        private pdid2Members!: { [key: string]: any };
+
+        @Prop({ default: "" })
+        private curDepId!: string;
+
+        private list = [];
+        private totalCount = 0;
+        private pageIndex = 1;
+        private tableData: any[] = [];
+        private size = 10;
+
+        @Watch("curDepId", { immediate: true })
+        private onCurDepIdChange() {
+            this.getPageList(1);
+        }
+
+        private getPageList(page?: number) {
+            this.list = this.pdid2Members[this.curDepId || 0] || [];
+            this.totalCount = this.list.length;
+            this.$emit("getListTotalNum", this.list.length);
+            const p = page || 1;
+            this.pageIndex = p;
+            this.tableData = this.list.slice((p - 1) * this.size, p * this.size);
+        }
+    }
 </script>
 
 <style lang="less" scoped>

src/views/service/emp-tree.ts

@@ -115,8 +115,9 @@ class EmpTreeController {
                 }
                 users.push(user);
             }
-            this.pdid2Members[tree.pdid] =
-                this.pdid2Members[tree.pdid].concat(users);
+            this.pdid2Members[tree.pdid] = this.quchong(
+                this.pdid2Members[tree.pdid].concat(users)
+            );
 
             return {
                 _isPid: JSON.parse(
@@ -135,6 +136,28 @@ class EmpTreeController {
             };
         }
     }
+
+    quchong(arr: any[]) {
+        const result = [];
+        const obj: { [key: string]: any } = {};
+        const objIndex: { [key: string]: any } = {};
+        for (let i = 0; i < arr.length; i++) {
+            if (!obj[arr[i].id]) {
+                result.push(arr[i]);
+                obj[arr[i].id] = true;
+                objIndex[arr[i].id] = result.length - 1;
+            } else {
+                let val = result[objIndex[arr[i].id]].depNames || [];
+                val = val.concat(arr[i].depNames);
+                result[objIndex[arr[i].id]].depNames = val;
+
+                let val4Id = result[objIndex[arr[i].id]].depIds || [];
+                val4Id = val4Id.concat(arr[i].depIds);
+                result[objIndex[arr[i].id]].depIds = val4Id;
+            }
+        }
+        return result;
+    }
 }
 
 const empTreeController = new EmpTreeController();