Skip to content

胡锦波 / org-manager-web

Go to a project
Commit f28ba6ae by 胡锦波
Options

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

parent e94f24af
Inline Side-by-side
Showing with 170 additions and 61 deletions
src/views/pages/employ-management/address-book/address-book.vue
<template> <template>
<div class="d-flex address-book-container"> <div class="d-flex address-book-container">
<Aside class="flex-none"></Aside> <Aside class="flex-none" @onEmpChange="onEmpChange"></Aside>
<EmployList class="flex-fill"></EmployList> <EmployList
:pdid2Members="pdid2Members"
:curDepId="curDepId"
class="flex-fill"
></EmployList>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; 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 Aside from "@/views/pages/employ-management/address-book/aside.vue";
import EmployList from "@/views/pages/employ-management/address-book/employ-list.vue"; import EmployList from "@/views/pages/employ-management/address-book/employ-list.vue";
import { empTreeController } from "@/views/service/emp-tree";
@Component({ components: { Aside, EmployList } }) @Component({ components: { Aside, EmployList } })
export default class AddressBook extends Vue { export default class AddressBook extends Vue {
private test() { private pdid2Members: { [key: string]: any } = {};
sdkService.getJoinedList(); private curDepId = "";
const comid = EnterpriseHost.getPoid();
TokenManager.getCompanyToken(comid); created() {
companyService.getDepartment(comid); this.initOrgTree();
}
private onEmpChange(depId: string) {
this.curDepId = depId;
}
private initOrgTree() {
empTreeController.initTree(this).then(() => {
this.pdid2Members = empTreeController.getPdid2Members();
});
} }
} }
</script> </script>
......
src/views/pages/employ-management/address-book/aside.vue
...@@ -22,25 +22,32 @@ ...@@ -22,25 +22,32 @@
<div v-show="!searchVal" class="flex-fill"> <div v-show="!searchVal" class="flex-fill">
<div class="el-tree-box"> <div class="el-tree-box">
<el-tree <el-tree
class="el-tree-item old-tree" class="el-tree-item addressbook-tree"
:data="departments" :data="departments"
:props="defaultProps" :props="defaultProps"
@node-click="handleNodeClick"
@current-change="isChecked" @current-change="isChecked"
:default-expanded-keys="defaultExpandedKeys"
:filter-node-method="filterNode" :filter-node-method="filterNode"
:expand-on-click-node="false" :expand-on-click-node="false"
node-key="id" node-key="id"
ref="tree" 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> </div>
</div> </div>
</template> </template>
<script lang="ts"> <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 { departmentController } from "@/views/service/department-controller";
import { popupService } from "@/apppackage/element-upgrades/popup"; import { popupService } from "@/apppackage/element-upgrades/popup";
import SearchList from "@/views/pages/employ-management/address-book/components/search-list.vue"; import SearchList from "@/views/pages/employ-management/address-book/components/search-list.vue";
import { Direction } from "@/router";
@Component({ components: { SearchList } }) @Component({ components: { SearchList } })
export default class Aside extends Vue { export default class Aside extends Vue {
...@@ -52,6 +59,11 @@ ...@@ -52,6 +59,11 @@
private departments = []; private departments = [];
private searchVal = ""; private searchVal = "";
private defaultExpandedKeys: string[] = [];
private defaultCheckedKeys: string[] = [];
@Ref("tree")
private tree!: any;
created() { created() {
this.getDepartmentInfo(); this.getDepartmentInfo();
...@@ -62,10 +74,36 @@ ...@@ -62,10 +74,36 @@
.getDepartments() .getDepartments()
.then((r: any) => { .then((r: any) => {
this.departments = r.departments4tree; 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); .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() { private addDepGroup() {
return ""; return "";
} }
...@@ -91,11 +129,10 @@ ...@@ -91,11 +129,10 @@
// return []; // return [];
// } // }
private defaultCheckedKeys() { // // let info = this.currentDeptInfo;
// let info = this.currentDeptInfo; // // return [info.self.id];
// return [info.self.id]; // return [];
return []; // }
}
} }
</script> </script>
...@@ -125,3 +162,10 @@ ...@@ -125,3 +162,10 @@
} }
} }
</style> </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> <template>
<div class="search-list"> <div class="search-list">
<div class="search-label">员工和分组</div> <div class="search-label">员工和分组</div>
<ul> <div class="emps-list">
<li v-for="(emp, index) in emps" :key="`e-${index}`"> <div v-for="(emp, index) in emps" :key="`e-${index}`">
<label>{{ emp.name }}</label> <div>{{ emp.name }}</div>
<span>{{ emp.dptsName }}</span> </div>
</li> <div v-for="(dept, index) in depts" :key="`d-${index}`">
<li v-for="(dept, index) in depts" :key="`d-${index}`"> <div>{{ dept.name }}</div>
<label>{{ dept.name }}</label> </div>
</li> </div>
</ul>
</div> </div>
</template> </template>
...@@ -17,6 +16,7 @@ ...@@ -17,6 +16,7 @@
import { departmentController } from "@/views/service/department-controller"; import { departmentController } from "@/views/service/department-controller";
import { Component, Vue, Prop, Watch } from "vue-property-decorator"; import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { empTreeController } from "@/views/service/emp-tree"; import { empTreeController } from "@/views/service/emp-tree";
import { popupService } from "@/apppackage/element-upgrades/popup";
@Component({ components: {} }) @Component({ components: {} })
export default class SearchList extends Vue { export default class SearchList extends Vue {
...@@ -32,36 +32,38 @@ ...@@ -32,36 +32,38 @@
Promise.all([ Promise.all([
departmentController.getDepartments(), departmentController.getDepartments(),
empTreeController.initTree(), empTreeController.initTree(),
]).then((r: any) => { ])
if (this.val !== curVal) { .then((r: any) => {
return; 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);
} }
}); const departments = r[0]?.departments;
const members = empTreeController.getRoleList();
departments.forEach((d: any) => { const cacheMember: string[] = [];
if (d.name && d.name.includes(curVal)) { this.depts = [];
cacheMember.push(d.id); this.emps = [];
const params = JSON.parse(JSON.stringify(d)); members.forEach((m: any) => {
this.depts.push(params); 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) { private handleClick(id: string) {
......
src/views/pages/employ-management/address-book/employ-list.vue
<template> <template>
<div>EmployList</div> <div>
EmployList
{{ tableData }}
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({ components: {} }) @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> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
src/views/service/emp-tree.ts
...@@ -115,8 +115,9 @@ class EmpTreeController { ...@@ -115,8 +115,9 @@ class EmpTreeController {
} }
users.push(user); users.push(user);
} }
this.pdid2Members[tree.pdid] = this.pdid2Members[tree.pdid] = this.quchong(
this.pdid2Members[tree.pdid].concat(users); this.pdid2Members[tree.pdid].concat(users)
);
return { return {
_isPid: JSON.parse( _isPid: JSON.parse(
...@@ -135,6 +136,28 @@ class EmpTreeController { ...@@ -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(); const empTreeController = new EmpTreeController();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment