refactor

organization-web/src/components/page/organization/Member.vue

@@ -2,174 +2,145 @@
     <el-container style="height: 100%">
         <el-aside style="border-right: 1px solid #e6e6e6; padding-right: 20px">
             <el-input v-model="input" placeholder="请输入姓名、邮箱或手机号"></el-input>
-            <el-tree v-if="!input" :data="rootOrganizations"
-                     ref="tree"
-                     :expand-on-click-node="false"
-                     :props="defaultProps"
-                     :render-after-expand='false'
-                     lazy
-                     :load="loadNode"
-                     @node-click="handleNodeClick"
-                     @node-expand="handleNodeExpand">
+            <el-tree v-if="!input" :data="rootOrganizations" ref="tree" :expand-on-click-node="true"
+                :props="defaultProps" :render-after-expand='false' lazy :load="loadNode" @node-click="handleNodeClick"
+                @node-expand="handleNodeExpand">
                 <span class="custom-tree-node" slot-scope="{ node}">
                     <span>{{ node.label }}</span>
                     <el-dropdown trigger="click" size="medium" @command="handleDepartmentCommand">
-                         <span>
-                            <el-icon class="el-icon-more"/>
+                        <span>
+                            <el-icon class="el-icon-more" />
                         </span>
                         <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item v-if="!node.data.groupId" :command="{c:'create-org-group', node: node, depart:node.data}">创建组织官方群</el-dropdown-item>
-                            <el-dropdown-item :command="{c:'edit', node: node, depart:node.data}">编辑部门</el-dropdown-item>
-                            <el-dropdown-item :command="{c:'add-sub', node: node, depart:node.data}">添加子部门</el-dropdown-item>
-                            <el-dropdown-item style="color: red" :command="{c:'remove', node: node, depart:node.data}">删除部门</el-dropdown-item>
-                       </el-dropdown-menu>
+                            <el-dropdown-item v-if="!node.data.groupId"
+                                :command="{ c: 'create-org-group', node: node, depart: node.data }">创建组织官方群</el-dropdown-item>
+                            <el-dropdown-item
+                                :command="{ c: 'edit', node: node, depart: node.data }">编辑部门</el-dropdown-item>
+                            <el-dropdown-item
+                                :command="{ c: 'add-sub', node: node, depart: node.data }">添加子部门</el-dropdown-item>
+                            <el-dropdown-item style="color: red"
+                                :command="{ c: 'remove', node: node, depart: node.data }">删除部门</el-dropdown-item>
+                        </el-dropdown-menu>
                     </el-dropdown>
-              </span>
+                </span>
             </el-tree>
             <div v-else>
                 TODO search result
             </div>
         </el-aside>
-        <el-container>
+        <el-container v-if="currentOrg">
             <el-header>
-                <div style="height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center">
-                    <p style="flex: 1 1 auto"> {{ currentOrg && currentOrg.name }}</p>
-                    <el-button type="primary" icon="el-icon-plus" v-if="rootOrganizations.length > 0" @click="showAddDepartmentMemberDialog = true">添加成员</el-button>
-                    <el-button type="primary" v-if="rootOrganizations.length === 0" @click="importMember">批量导入</el-button>
+                <div
+                    style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100%">
+                    <div v-if="currentOrg" style="flex: 1 1 auto">
+                        <p> {{ currentOrg.name }}</p>
+                        <p v-if="currentOrg.managerName" style="font-size: 12px"> {{ "部门负责人: " + currentOrg.managerName
+                        }}</p>
+                    </div>
+                    <el-button type="primary" icon="el-icon-plus" v-if="rootOrganizations.length > 0"
+                        @click="showAddDepartmentMemberDialog = true">添加成员</el-button>
+                    <el-button type="primary" v-if="rootOrganizations.length === 0"
+                        @click="importMember">批量导入</el-button>
                 </div>
             </el-header>
-            <el-table
-                ref="multipleTable"
-                :data="currentOrgEmployees"
-                empty-text="当前公司或部门没有直属员工"
-                tooltip-effect="dark"
-                style="width: 100%"
-                :cell-style="{padding: '0', height: '50px'}"
-                @selection-change="handleSelectionChange">
-                <el-table-column
-                    type="selection"
-                    width="55">
+            <el-table ref="multipleTable" :data="currentOrgEmployees" empty-text="当前公司或部门没有直属员工" tooltip-effect="dark"
+                type="default" style="width: 100%" :cell-style="{ padding: '0', height: '50px' }">
+                <el-table-column type="default" width="55">
                 </el-table-column>
-                <el-table-column
-                    prop="name"
-                    label="姓名"
-                    width="120">
+                <el-table-column prop="name" label="姓名" width="120">
                 </el-table-column>
-                <el-table-column
-                    prop="title"
-                    label="职位"
-                    width="120">
+                <el-table-column prop="title" label="职位" width="120">
                 </el-table-column>
-                <el-table-column
-                    prop="mobile"
-                    label="手机号"
-                    show-overflow-tooltip>
+                <el-table-column prop="mobile" label="手机号" show-overflow-tooltip>
                 </el-table-column>
                 <el-table-column>
                     <template v-slot="scope">
-                        <el-button v-if="false" class="f-btn" @click="handleClickEmployee(scope.row)" type="text" size="small">查看详情</el-button>
-                        <el-button class="f-btn" @click="handleTransferDepartment(scope.row)" type="text" size="small">变更部门</el-button>
-                        <el-button class="f-btn" @click="handleDeleteEmployee(scope.row)" type="text" size="small">操作离职</el-button>
+                        <el-button v-if="false" class="f-btn" @click="handleClickEmployee(scope.row)" type="text"
+                            size="small">查看详情</el-button>
+                        <el-button class="f-btn" @click="handleTransferDepartment(scope.row)" type="text"
+                            size="small">变更部门</el-button>
+                        <el-button class="f-btn" @click="handleDeleteEmployee(scope.row)" type="text"
+                            size="small">操作离职</el-button>
                     </template>
                 </el-table-column>
             </el-table>
         </el-container>
-        <el-drawer
-            title="操作离职"
-            :visible.sync="showDeleteEmployeeDrawer"
-            direction="rtl"
+        <el-container>
+            <el-header>
+                <div
+                    style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100%">
+                    请选择部门
+                </div>
+            </el-header>
+
+        </el-container>
+        <el-drawer title="操作离职" :visible.sync="showDeleteEmployeeDrawer" direction="rtl"
             :before-close="onDeleteEmployee">
-            <DeleteEmployee
-                :employee="currentEmployee"
-                :on-delete-employee="onDeleteEmployee"/>
+            <DeleteEmployee :employee="currentEmployee" :on-delete-employee="onDeleteEmployee" />
         </el-drawer>
 
-        <el-dialog :visible.sync="showUpdateDepartmentDialog" :before-close="() => this.showUpdateDepartmentDialog= false">
-            <UpdateDepartment
-                :managers="checkedMembers"
-                :current-department="targetDepartment"
-                :parent-department="targetDepartment"
-                :on-update-department="onUpdateDepartment"
-                :on-choose-member="() => {this.checkedMembers = []; this.showChooseMemberDialog = true}"
-                :on-uncheck-member="onUncheckMember"
-            />
-            <el-dialog ref="dialog" :visible.sync="showChooseMemberDialog" append-to-body @hook:mounted="$refs.dialog.rendered = true">>
-                <ChooseMember :initial-checked-members="initialCheckedMembers" :max-choose-count="1" :on-cancel="()=> this.showChooseMemberDialog = false" :on-confirm="onCheckMember"/>
-            </el-dialog>
+        <el-dialog :visible.sync="showUpdateDepartmentDialog"
+            :before-close="() => this.showUpdateDepartmentDialog = false">
+            <UpdateDepartment :current-department="targetDepartment" :on-update-department="onUpdateDepartment" />
         </el-dialog>
 
-        <el-dialog :visible.sync="showAddSubDepartmentDialog" :before-close="() => this.showAddSubDepartmentDialog = false">
-            <AddSubDepartment
-                :managers="checkedMembers"
-                :parent-department="currentOrg"
-                :on-add-department="onAddDepartment"
-                :on-choose-member="() => this.showChooseMemberDialog = true"
-                :on-uncheck-member="onUncheckMember"
-            />
-            <el-dialog ref="dialog" :visible.sync="showChooseMemberDialog" append-to-body @hook:mounted="$refs.dialog.rendered = true">>
-                <ChooseMember :initial-checked-members="initialCheckedMembers" :max-choose-count="1" :on-cancel="()=> this.showChooseMemberDialog = false" :on-confirm="onCheckMember"/>
-            </el-dialog>
+        <el-dialog :visible.sync="showAddSubDepartmentDialog"
+            :before-close="() => this.showAddSubDepartmentDialog = false">
+            <AddSubDepartment :parent-department="currentOrg" :on-add-department="onAddDepartment" />
         </el-dialog>
-        <el-dialog
-            :visible.sync="showAddDepartmentMemberDialog"
-            :close-on-click-modal="false"
-            :before-close="() => {this.showAddDepartmentMemberDialog = false; this.checkedDepartments =[]}">
-            <AddDepartmentMember
-                :checked-departments="checkedDepartments"
-                :on-cancel="()=> this.showAddDepartmentMemberDialog = false"
+
+        <el-dialog :visible.sync="showAddDepartmentMemberDialog" :close-on-click-modal="false"
+            :before-close="() => { this.showAddDepartmentMemberDialog = false; this.checkedDepartments = [] }">
+            <AddDepartmentMember :checked-departments="checkedDepartments"
+                :on-cancel="() => this.showAddDepartmentMemberDialog = false"
                 :on-choose-department="() => this.showChooseDepartmentDialog = true"
-                :on-uncheck-department="onUncheckDepartment"
-            />
+                :on-uncheck-department="onUncheckDepartment" />
             <el-dialog :visible.sync="showChooseDepartmentDialog" append-to-body>
-                <ChooseDepartment :target-department="currentOrg" :on-cancel="()=> this.showChooseDepartmentDialog = false" :on-confirm="onCheckDepartment"/>
+                <ChooseDepartment :target-department="currentOrg"
+                    :on-cancel="() => this.showChooseDepartmentDialog = false" :on-confirm="onCheckDepartment" />
             </el-dialog>
         </el-dialog>
 
-        <el-dialog
-            title="变更部门"
-            :visible.sync="showTransferDepartmentDialog"
-            :close-on-click-modal="false"
-            :before-close="() => {this.showTransferDepartmentDialog = false; this.transferDepartments = []}">
+        <el-dialog title="变更部门" :visible.sync="showTransferDepartmentDialog" :close-on-click-modal="false"
+            :before-close="() => { this.showTransferDepartmentDialog = false; this.transferDepartments = [] }">
             <div v-if="employeeToTransfer">
                 <p>将 <b>{{ employeeToTransfer.name }}</b> 变更至：</p>
                 <el-input disabled style="margin: 20px 0;">
                     <div v-if="transferDepartments && transferDepartments.length" slot="prepend">
-                        <el-tag
-                            v-for="(depart, index) in transferDepartments"
-                            :key="index"
-                            closable
-                            @close="onUncheckTransferDepartment(depart)"
-                            type="info">
+                        <el-tag v-for="(depart, index) in transferDepartments" :key="index" closable
+                            @close="onUncheckTransferDepartment(depart)" type="info">
                             {{ depart && depart.name }}
                         </el-tag>
                     </div>
-                    <el-button slot="append" type="text" icon="el-icon-edit" @click="showTransferChooseDepartmentDialog = true"></el-button>
+                    <el-button slot="append" type="text" icon="el-icon-edit"
+                        @click="showTransferChooseDepartmentDialog = true"></el-button>
                 </el-input>
                 <div style="text-align: right; margin-top: 20px;">
                     <el-button @click="showTransferDepartmentDialog = false">取消</el-button>
-                    <el-button type="primary" :disabled="transferDepartments.length === 0" @click="confirmTransferDepartment">确定</el-button>
+                    <el-button type="primary" :disabled="transferDepartments.length === 0"
+                        @click="confirmTransferDepartment">确定</el-button>
                 </div>
             </div>
             <el-dialog :visible.sync="showTransferChooseDepartmentDialog" append-to-body>
-                <ChooseDepartment :on-cancel="()=> this.showTransferChooseDepartmentDialog = false" :on-confirm="onCheckTransferDepartment"/>
+                <ChooseDepartment :on-cancel="() => this.showTransferChooseDepartmentDialog = false"
+                    :on-confirm="onCheckTransferDepartment" />
             </el-dialog>
         </el-dialog>
     </el-container>
 </template>
 
 <script>
-import {useOrgStore} from "@/store/stores/orgStore";
+import { useOrgStore } from "@/store/stores/orgStore";
 import AddSubDepartment from "@/components/page/organization/dialog/AddSubDepartment";
 import AddDepartmentMember from "@/components/page/organization/dialog/AddDepartmentMember";
 import ChooseDepartment from "@/components/page/organization/dialog/ChooseDepartment";
-import ChooseMember from "@/components/page/organization/dialog/ChooseMember";
 import DeleteEmployee from "@/components/page/organization/drawer/DeleteEmployee";
 import UpdateDepartment from "@/components/page/organization/dialog/UpdateDepartment.vue";
 import api from "@/api/api";
 
 export default {
     name: "Member",
-    components: {UpdateDepartment, DeleteEmployee, AddDepartmentMember, AddSubDepartment, ChooseDepartment, ChooseMember},
+    components: { UpdateDepartment, DeleteEmployee, AddDepartmentMember, AddSubDepartment, ChooseDepartment },
     data() {
         return {
             defaultProps: {
@@ -183,9 +154,7 @@ export default {
             multipleSelection: [],
 
             showDeleteEmployeeDrawer: false,
-
             showUpdateDepartmentDialog: false,
-
             showAddSubDepartmentDialog: false,
             showAddDepartmentMemberDialog: false,
 
@@ -197,9 +166,6 @@ export default {
             showChooseDepartmentDialog: false,
             checkedDepartments: [],
 
-            showChooseMemberDialog: false,
-            checkedMembers: [],
-
             showTransferDepartmentDialog: false,
             showTransferChooseDepartmentDialog: false,
             employeeToTransfer: null,
@@ -207,9 +173,6 @@ export default {
         }
     },
     computed: {
-        initialCheckedMembers() {
-            return this.checkedMembers.map(m => m.employeeId);
-        },
         rootOrganizations() {
             return this.orgStore.rootOrganizations;
         }
@@ -233,7 +196,7 @@ export default {
 
     setup() {
         const orgStore = useOrgStore();
-        return {orgStore};
+        return { orgStore };
     },
 
     activated() {
@@ -299,6 +262,7 @@ export default {
                 this.orgStore.transferEmployee(this.employeeToTransfer.employeeId, targetOrgIds)
             }
             this.showTransferDepartmentDialog = false
+            this.currentOrg = null;
         },
         importMember() {
             this.$router.push('/organization/departmentanduser/import-member')
@@ -308,7 +272,6 @@ export default {
             switch (command.c) {
                 case "add-sub":
                     this.showAddSubDepartmentDialog = true;
-                    this.targetParentDepartment = command.depart;
                     this.targetParentNode = command.node;
                     break;
                 case "edit":
@@ -317,7 +280,7 @@ export default {
                     this.targetNode = command.node;
                     break;
                 case "remove":
-                    this.orgStore.removeOrganization({organization: command.depart, dismissGroup: true})
+                    this.orgStore.removeOrganization({ organization: command.depart, dismissGroup: true })
                         .then(() => {
                             let parentNode = command.node.parent;
                             this.updateTreeNode(parentNode);
@@ -334,13 +297,6 @@ export default {
             this.checkedDepartments = departments;
             this.showChooseDepartmentDialog = false;
         },
-        onCheckMember(members) {
-            this.showChooseMemberDialog = false;
-            this.checkedMembers = members;
-        },
-        onUncheckMember(member) {
-            this.checkedMembers = this.checkedMembers.filter(m => m.employeeId !== member.employeeId);
-        },
         onUncheckDepartment(department) {
             this.checkedDepartments = this.checkedDepartments.filter(d => d.id !== department.id);
         },
@@ -373,7 +329,6 @@ export default {
 </script>
 
 <style scoped>
-
 .custom-tree-node {
     flex: 1 1 auto;
     display: flex;
@@ -383,7 +338,7 @@ export default {
     padding-right: 8px;
 }
 
->>> .el-tree-node__content {
+>>>.el-tree-node__content {
     height: 50px;
 }
 

organization-web/src/components/page/organization/dialog/AddSubDepartment.vue

@@ -15,7 +15,7 @@
             </el-form-item>
             <el-form-item label="部门负责人">
                 <el-input disabled>
-                    <div v-if="managers && managers.length > 0" slot="prepend">
+                    <div v-if="managers.length > 0" slot="prepend">
                         <el-tag
                             v-for="(member, index) in managers"
                             :key="index"
@@ -25,7 +25,7 @@
                             {{ member.name }}
                         </el-tag>
                     </div>
-                    <el-button slot="append" type="text" icon="el-icon-edit" @click="onChooseMember"></el-button>
+                    <el-button slot="append" type="text" icon="el-icon-edit" @click="showChooseMemberDialog = true"></el-button>
                 </el-input>
             </el-form-item>
             <el-form-item label="是否创建部门群">
@@ -36,34 +36,33 @@
             <el-button @click="onAddDepartment(false)">取消</el-button>
             <el-button type="primary" :disabled="!confirmButtonEnable" @click="onConfirm">确定</el-button>
         </div>
+
+        <!-- 集成 ChooseMember 对话框 -->
+        <el-dialog :visible.sync="showChooseMemberDialog" append-to-body title="选择成员">
+            <ChooseMember
+                :initial-checked-members="initialCheckedMembers"
+                :max-choose-count="1"
+                :on-cancel="() => this.showChooseMemberDialog = false"
+                :on-confirm="onCheckMember"/>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import { useOrgStore } from "@/store/stores/orgStore";
+import ChooseMember from "@/components/page/organization/dialog/ChooseMember";
 
 export default {
     name: "AddSubDepartment",
+    components: {ChooseMember},
     props: {
         parentDepartment: {
             type: Object,
             required: true,
         },
-        managers: {
-            type: Array,
-            required: true,
-        },
         onAddDepartment: {
             type: Function,
             required: true,
-        },
-        onChooseMember: {
-            type: Function,
-            required: true,
-        },
-        onUncheckMember: {
-            type: Function,
-            required: true,
         }
     },
 
@@ -76,18 +75,31 @@ export default {
         return {
             organization: {},
             createOrganizationGroup: false,
+            managers: [],
+            showChooseMemberDialog: false
         }
     },
     computed: {
         confirmButtonEnable() {
             return this.organization.name && this.managers.length === 1
+        },
+        initialCheckedMembers() {
+            return this.managers.map(m => m.employeeId);
         }
     },
     methods: {
         handleCloseTag(tag) {
-            this.onUncheckMember(tag);
+            this.managers = this.managers.filter(m => m.employeeId !== tag.employeeId);
+        },
+        onCheckMember(members) {
+            this.showChooseMemberDialog = false;
+            this.managers = members;
         },
         onConfirm() {
+            if (this.managers.length === 0) {
+                this.$message.error('请选择部门负责人');
+                return;
+            }
             this.organization.managerId = this.managers[0].employeeId;
             this.orgStore.createOrganization({
                 organization: this.organization,

organization-web/src/components/page/organization/dialog/UpdateDepartment.vue

@@ -1,31 +1,19 @@
 <template>
     <div>
         <p class="title">更新部门</p>
-        <el-form
-            label-position="right"
-            :model="updatedOrganization"
-            size="medium"
-            class="demo-form-inline">
+        <el-form label-position="right" :model="updatedOrganization" size="medium" class="demo-form-inline">
             <el-form-item label="部门名称">
                 <el-input v-model.trim="updatedOrganization.name" placeholder="部门名称"></el-input>
             </el-form-item>
-            <el-form-item label="上级部门">
-                <el-input disabled :value="parentDepartment.name">
-                </el-input>
-            </el-form-item>
             <el-form-item label="部门负责人">
                 <el-input disabled>
-                    <div v-if="managers && managers.length > 0" slot="prepend">
-                        <el-tag
-                            v-for="(member, index) in managers"
-                            :key="index"
-                            closable
-                            @close="handleCloseTag(member)"
-                            type="info">
-                            {{ member.name }}
+                    <div slot="prepend">
+                        <el-tag v-if="manager" closable @close="handleCloseTag(manager)" type="info">
+                            {{ manager.name }}
                         </el-tag>
                     </div>
-                    <el-button slot="append" type="text" icon="el-icon-edit" @click="onChooseMember"></el-button>
+                    <el-button slot="append" type="text" icon="el-icon-edit"
+                        @click="showChooseMemberDialog = true"></el-button>
                 </el-input>
             </el-form-item>
             <el-form-item v-if="!currentDepartment.groupId" label="是否创建部门群">
@@ -36,40 +24,31 @@
             <el-button @click="onUpdateDepartment(false)">取消</el-button>
             <el-button type="primary" :disabled="!confirmButtonEnable" @click="onConfirm">确定</el-button>
         </div>
+
+        <!-- 集成 ChooseMember 对话框 -->
+        <el-dialog :visible.sync="showChooseMemberDialog" append-to-body title="选择成员">
+            <ChooseMember :initial-checked-members="initialCheckedMembers" :max-choose-count="1"
+                :on-cancel="() => this.showChooseMemberDialog = false" :on-confirm="onCheckMember" />
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import { useOrgStore } from "@/store/stores/orgStore";
 import api from "@/api/api";
-import fa from "element-ui/src/locale/lang/fa";
+import ChooseMember from "@/components/page/organization/dialog/ChooseMember";
 
 export default {
     name: "UpdateDepartment",
+    components: { ChooseMember },
     props: {
         currentDepartment: {
             type: Object,
             required: true,
         },
-        parentDepartment: {
-            type: Object,
-            required: true,
-        },
-        managers: {
-            type: Array,
-            required: true,
-        },
         onUpdateDepartment: {
             type: Function,
             required: true,
-        },
-        onChooseMember: {
-            type: Function,
-            required: true,
-        },
-        onUncheckMember: {
-            type: Function,
-            required: true,
         }
     },
 
@@ -84,56 +63,68 @@ export default {
                 name: this.currentDepartment.name,
             },
             createOrganizationGroup: !this.currentDepartment.groupId,
+            manager: null,
+            showChooseMemberDialog: false,
         }
     },
     computed: {
-        fa() {
-            return fa
-        },
         confirmButtonEnable() {
-            return this.updatedOrganization.name && this.managers.length === 1
+            return this.updatedOrganization.name && this.manager;
         },
+        initialCheckedMembers() {
+            return this.manager ? [this.manager.employeeId] : [];
+        }
     },
+
     async mounted() {
+        this.manager = this.currentDepartment.employees.filter(m => m.employeeId === this.currentDepartment.managerId)[0];
+    },
+
+    unmounted() {
+        this.updatedOrganization = {}
     },
 
     methods: {
-        handleCloseTag(tag) {
-            this.onUncheckMember(tag);
+        handleCloseTag() {
+            this.manager = null;
+        },
+        onCheckMember(members) {
+            this.showChooseMemberDialog = false;
+            console.log('onCheckMembers ', members)
+            if (members && members.length > 0) {
+                this.manager = members[0];
+                console.log('xxxxxx', this.manager)
+            }
         },
         onConfirm() {
-            this.updatedOrganization.managerId = this.managers[0].employeeId;
+            if (!this.manager) {
+                this.$message.error('请选择部门负责人');
+                return;
+            }
+
+            this.updatedOrganization.managerId = this.manager.employeeId;
             this.currentDepartment.name = this.updatedOrganization.name;
-            this.currentDepartment.managerId = this.managers[0].employeeId;
+            this.currentDepartment.managerId = this.manager.employeeId;
+
             this.orgStore.updateOrganization(this.currentDepartment)
                 .then(res => {
-                    console.log('create organization success', res)
+                    console.log('更新部门成功', res)
                     this.onUpdateDepartment(true);
                 })
                 .catch(err => {
-                    console.log('create organization error', err)
+                    console.log('更新部门失败', err)
                     this.onUpdateDepartment(false);
                 })
+
             if (this.createOrganizationGroup) {
                 api.createOrganizationGroup(this.currentDepartment.id, '')
             }
-        },
-    },
-
-    watch: {
-        organization: {
-            async handler() {
-                let employee = await api.queryEmployee(this.currentDepartment.managerId)
-                this.managers.push(employee);
-            },
-            immediate: true,
         }
     }
 }
 </script>
 
 <style scoped>
-
 .title {
     position: absolute;
     top: 20px;
@@ -151,5 +142,4 @@ export default {
     justify-content: flex-end;
     margin-right: 10px;
 }
-
 </style>

organization-web/src/model/organization.js

@@ -18,6 +18,7 @@ export default class Organization {
     // for ui
     label;
     type;
+    managerName;
     // subDepartments
     children;
     hasChildren = true;
@@ -26,6 +27,8 @@ export default class Organization {
     buildRenderData(organizationWithChildren) {
         this.label = this.name;
         this.type = 1;
+        let manager = organizationWithChildren ? organizationWithChildren.employees.find(e => e.employeeId === this.managerId) : null
+        this.managerName = manager ? manager.name : null;
         this.children = [];
         this.employees = [];
         if (!organizationWithChildren) {

organization-web/src/router/index.js

@@ -30,7 +30,7 @@ export default new Router({
                 },
                 {
                     path: '/organization/departmentanduser',
-                    component: resolve => require(['../components/page/organization/DepartmentAndMember.vue'], resolve),
+                    component: resolve => require(['../components/page/organization/Member.vue'], resolve),
                     meta: {title: '成员与部门'},
                     // children: [
                     //     {