1. init 部门列表展示

src/api/company-service.ts

@@ -6,7 +6,7 @@ class CompanyService extends BaseService {
     }
 
     public getDepartment(comid: string) {
-        this.getWithCompanyToken(`/v1/companies/${comid}/departments/all`);
+        return this.getWithCompanyToken(`/v1/companies/${comid}/departments/all`);
     }
 }
 

src/assets/images/add_item.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.a,.b,.d{fill:none;}.a{stroke:#e6e7eb;}.b{stroke:#c8c8cc;}.c{stroke:none;}</style></defs><g transform="translate(-562.332 -110.5)"><g class="a" transform="translate(562.332 110.5)"><rect class="c" width="40" height="40"/><rect class="d" x="0.5" y="0.5" width="39" height="39"/></g><line class="b" x2="17" transform="translate(573.5 130.5)"/><line class="b" x2="17" transform="translate(582 122) rotate(90)"/></g></svg>
\ No newline at end of file

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

 <template>
-    <div>
-        AddressBook
-
-        <button @click="test">asdfasdf</button>
+    <div class="d-flex address-book-container">
+        <Aside class="flex-none"></Aside>
+        <EmployList class="flex-fill"></EmployList>
     </div>
 </template>
 
@@ -12,8 +11,10 @@
     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/components/aside.vue";
+    import EmployList from "@/views/pages/employ-management/address-book/components/employ-list.vue";
 
-    @Component({ components: {} })
+    @Component({ components: { Aside, EmployList } })
     export default class AddressBook extends Vue {
         private test() {
             sdkService.getJoinedList();
@@ -26,4 +27,7 @@
 
 <style lang="less" scoped>
     @import "~@/css/variables.less";
+    .address-book-container {
+        min-height: 700px;
+    }
 </style>

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

+<template>
+    <div class="aside-container">
+        <div class="search flex-none d-flex justify-content-between">
+            <el-input
+                placeholder="搜索员工和部门"
+                v-model="searchVal"
+                class="lt"
+                clearable
+                suffix-icon="el-icon-search"
+            >
+            </el-input>
+            <img
+                src="~/@/assets/images/add_item.svg"
+                alt="新建部门"
+                class="add-icon"
+                @click="addDepGroup"
+            />
+        </div>
+        <div>查询之后的列表</div>
+        <div class="flex-fill">
+            <div class="el-tree-box">
+                <el-tree
+                    class="el-tree-item old-tree"
+                    :data="departments"
+                    :props="defaultProps"
+                    @current-change="isChecked"
+                    :filter-node-method="filterNode"
+                    :expand-on-click-node="false"
+                    node-key="id"
+                    ref="tree"
+                ></el-tree>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Vue } from "vue-property-decorator";
+    import { departmentController } from "@/views/service/department-controller";
+    import { popupService } from "@/apppackage/element-upgrades/popup";
+
+    @Component({ components: {} })
+    export default class Aside extends Vue {
+        private defaultProps = {
+            children: "children",
+            label: "name",
+            value: "id",
+        };
+
+        private departments = [];
+        private searchVal = "";
+
+        created() {
+            this.getDepartmentInfo();
+        }
+
+        private getDepartmentInfo() {
+            departmentController
+                .getDepartment4Tree()
+                .then((r: any) => {
+                    this.departments = r;
+                })
+                .catch(popupService.toast.error);
+        }
+
+        private addDepGroup() {
+            return "";
+        }
+
+        private isChecked(value: any, chk: any) {
+            chk.checked = false;
+        }
+
+        private filterNode(value: any, data: any) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+
+        // private defaultExpandedKeys() {
+        //     // let info = this.currentDeptInfo;
+        //     // let fullPath = info.fullpath();
+        //     // let ary = [];
+        //     // if (Array.isArray(fullPath)) {
+        //     //     ary.push(...fullPath.map((item) => item.self.id));
+        //     // }
+        //     // ary.push(info.self.id);
+        //     // return ary;
+        //     return [];
+        // }
+
+        private defaultCheckedKeys() {
+            // let info = this.currentDeptInfo;
+            // return [info.self.id];
+            return [];
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    @import "~@/css/variables.less";
+    .aside-container {
+        width: 266px;
+        background: #fff;
+        padding: 26px 0px 25px 24px;
+
+        .search {
+            display: flex;
+            // align-items: center;
+            justify-content: space-between;
+
+            .el-input {
+                width: 192px;
+                height: 40px;
+                background: #f5f6fa;
+            }
+
+            .add-icon {
+                cursor: pointer;
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
+</style>

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

+<template>
+    <div>EmployList</div>
+</template>
+
+<script lang="ts">
+    import { Component, Vue } from "vue-property-decorator";
+
+    @Component({ components: {} })
+    export default class EmployList extends Vue {}
+</script>
+
+<style lang="less" scoped>
+    @import "~@/css/variables.less";
+</style>

src/views/pages/main.vue

@@ -5,19 +5,11 @@
                 <CommonHeader></CommonHeader>
             </div>
             <div class="root-contaniner d-flex">
-                <el-scrollbar class="container-scrollbar-left">
+                <el-scrollbar class="container-scrollbar-left flex-none">
                     <AsidePanels class="flex-none"></AsidePanels>
                 </el-scrollbar>
                 <el-scrollbar class="container-scrollbar-right">
-                    <div
-                        class="
-                            main-container
-                            flex-fill
-                            d-flex
-                            align-items-center
-                            justify-content-center
-                        "
-                    >
+                    <div class="main-container flex-fill d-flex">
                         <router-view
                             class="router-page flex-fill"
                         ></router-view>
@@ -44,7 +36,7 @@
 
         .root-contaniner {
             height: calc(100vh - 64px);
-            min-width: 1200px;
+            min-width: 1240px;
         }
 
         .main-container {
@@ -57,6 +49,7 @@
                 height: 100%;
                 max-width: 1448px;
                 background-color: #fff;
+                margin: 0 auto;
             }
         }
     }

src/views/service/department-controller.ts

+
+import companyService from "@/api/company-service";
+import EnterpriseHost from "./enterprise-host";
+
+class DepartmentController {
+    public getDepartment4Tree() {
+        const poid = EnterpriseHost.getPoid();
+        return new Promise((resolve, reject) => {
+            companyService.getDepartment(poid).then((res: any) => {
+                const ary = res.departments;
+                const r = this.parseMarksTree(ary);
+                resolve(r);
+            }).catch(reject);
+        });
+    }
+
+    private parseMarksTree(ary: any[], pid = '0'): any {
+        if (!Array.isArray(ary)) {
+            return null;
+        }
+        const marks = ary.filter(item => item.parentid === pid);
+
+        return marks.map(item => {
+            const children = this.parseMarksTree(ary, item.id);
+            if (children && children.length > 0) {
+                return {
+                    id: item.id,
+                    name: item.name,
+                    name_pinyin: item.name_pinyin,
+                    parentid: item.parentid,
+                    order: item.order,
+                    children: children
+                };
+            } else {
+                return {
+                    id: item.id,
+                    name: item.name,
+                    name_pinyin: item.name_pinyin,
+                    order: item.order,
+                    parentid: item.parentid,
+                };
+            }
+        });
+    }
+}
+
+const departmentController = new DepartmentController();
+export { departmentController };