1. init 侧边栏搜索功能添加

src/api/sdk-service.ts

@@ -68,6 +68,11 @@ class SdkService extends SdkCoreService {
     getWaitJoinList() {
         return this.get(`/system/org/waitjoin/list`);
     }
+
+    getOrgTree() {
+        const oid = EnterpriseHost.getOid();
+        return this.get(`/system/org/${oid}/emptree`);
+    }
 }
 
 const sdkService = new SdkService();

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

@@ -16,7 +16,9 @@
                 @click="addDepGroup"
             />
         </div>
-        <div v-show="searchVal">查询之后的列表</div>
+        <div v-if="searchVal">
+            <SearchList :val="searchVal"></SearchList>
+        </div>
         <div v-show="!searchVal" class="flex-fill">
             <div class="el-tree-box">
                 <el-tree
@@ -38,8 +40,9 @@
     import { Component, Vue } 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";
 
-    @Component({ components: {} })
+    @Component({ components: { SearchList } })
     export default class Aside extends Vue {
         private defaultProps = {
             children: "children",

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

@@ -2,25 +2,11 @@
     <div class="search-list">
         <div class="search-label">员工和分组</div>
         <ul>
-            <li
-                @click="handleClick(emp.empid)"
-                :class="emp.empid === activeIndex ? 'active' : ''"
-                v-for="emp in searchResult.emps"
-                :key="emp.empid"
-            >
-                <i class="item_icon">
-                    <img src="@img/M@2x.png" alt />
-                </i>
+            <li v-for="(emp, index) in emps" :key="`e-${index}`">
                 <label>{{ emp.name }}</label>
                 <span>{{ emp.dptsName }}</span>
             </li>
-            <li
-                @click="toDept(dept.id)"
-                :class="dept.id === activeIndex ? 'active' : ''"
-                v-for="dept in searchResult.depts"
-                :key="dept.id"
-            >
-                <i class="iconfont">&#xe60a;</i>
+            <li v-for="(dept, index) in depts" :key="`d-${index}`">
                 <label>{{ dept.name }}</label>
             </li>
         </ul>
@@ -28,10 +14,56 @@
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
+    import { departmentController } from "@/views/service/department-controller";
+    import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+    import { empTreeController } from "@/views/service/emp-tree";
 
     @Component({ components: {} })
     export default class SearchList extends Vue {
+        @Prop()
+        private val!: string;
+
+        private emps: any[] = [];
+        private depts: any[] = [];
+
+        @Watch("val", { immediate: true })
+        private onValChange() {
+            const curVal = this.val;
+            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);
+                    }
+                });
+
+                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);
+                    }
+                });
+            });
+        }
+
         private handleClick(id: string) {
             this.$root.$emit("openAddressBookDetail", id);
         }

src/views/service/emp-tree.ts

+import { sdkService } from "@/api/sdk-service";
+import Vue from "vue";
+
+class EmpTreeController {
+    private tree: any[] = [];
+    private pdid2Members: { [key: string]: any } = {}
+    private roleList: any[] = [];
+    private roleMap4PeidOrEid: { [key: string]: any } = {}
+    private success = false
+    private busy = false;
+    private action: any[] = [];
+
+    initTree(vue?: Vue) {
+        vue && vue.$once("hook:beforeDestroy", () => {
+            this.tree = [];
+            this.pdid2Members = {};
+            this.roleList = [];
+            this.roleMap4PeidOrEid = {};
+            this.success = false;
+            this.busy = false;
+            this.action = [];
+        });
+        this.busy = true;
+        return new Promise((resolve, reject) => {
+            sdkService.getOrgTree().then((r: any) => {
+                this.tree = r;
+                this.success = true;
+                this.handlerAction();
+                this.filterData2Use(this.tree);
+                resolve(JSON.parse(JSON.stringify(this.tree)));
+            }).catch((err) => {
+                reject(err);
+            }).finally(() => {
+                this.busy = false;
+            });
+        });
+    }
+
+    getTree() {
+        if (this.success) {
+            return Promise.resolve(this.tree);
+        }
+        if (this.busy) {
+            return new Promise((resolve) => {
+                this.action.push(() => {
+                    resolve(this.tree);
+                });
+            });
+        }
+        return this.initTree();
+    }
+
+    handlerAction() {
+        for (let i = 0; i < this.action.length; i++) {
+            this.action[i]();
+        }
+        this.action = [];
+    }
+
+    filterData2Use(tree: any) {
+        if (tree) {
+            this.pdid2Members = {};
+            this.buildPdid2Members(tree[0]);
+            this.roleList = [];
+            Object.keys(this.pdid2Members).forEach((i) => {
+                this.roleList = this.roleList.concat(
+                    this.pdid2Members[i]
+                );
+            });
+            this.roleList.forEach(i => {
+                const val = JSON.parse(JSON.stringify(i));
+                this.roleMap4PeidOrEid[i.peid] = val;
+                this.roleMap4PeidOrEid[i.id] = val;
+            });
+        }
+    }
+
+    getRoleMap4PeidOrEid() {
+        return JSON.parse(JSON.stringify(this.roleMap4PeidOrEid));
+    }
+
+    getRoleList() {
+        return JSON.parse(JSON.stringify(this.roleList));
+    }
+
+    getPdid2Members() {
+        return JSON.parse(JSON.stringify(this.pdid2Members));
+    }
+
+    transitionPid2Id(pidOrId: string) {
+        return this.roleMap4PeidOrEid[pidOrId].id;
+    }
+
+    buildPdid2Members(tree: any) {
+        if (tree && tree.pdid) {
+            this.pdid2Members[tree.pdid] =
+                this.pdid2Members[tree.pdid] || [];
+            if (!tree.children.length) {
+                return {
+                    _last: true,
+                };
+            }
+            let users: any[] = [];
+            for (let i = 0; i < tree.children.length; i++) {
+                const user = this.buildPdid2Members(tree.children[i]);
+                if (user._last) {
+                    continue;
+                }
+                if (user._isPid) {
+                    users = users.concat(user._isPid);
+                    continue;
+                }
+                if (user._none) {
+                    continue;
+                }
+                users.push(user);
+            }
+            this.pdid2Members[tree.pdid] =
+                this.pdid2Members[tree.pdid].concat(users);
+
+            return {
+                _isPid: JSON.parse(
+                    JSON.stringify(this.pdid2Members[tree.pdid])
+                ),
+            };
+        } else {
+            Object.assign(tree, {
+                empid: tree.peid,
+            });
+            if ([0, 1, "0", "1"].includes(tree.enable)) {
+                return JSON.parse(JSON.stringify(tree));
+            }
+            return {
+                _none: true,
+            };
+        }
+    }
+}
+
+const empTreeController = new EmpTreeController();
+export { empTreeController };