Skip to content

O
office-web
Commit cdae9b79 by xiaohai
Options

企业通讯录公用侧边选择器

parent 6a94ff17
Showing with 179 additions and 122 deletions
src/components/contacts/searchMenu.vue
<template> <template>
<div class="searh-menu-container"> <div class="searh-menu-container">
<el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input> <div class="p-0-15">
<el-tree <el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
v-show="!searchResultShow" <el-tree
class="search-menu" v-if="!searchResultShow"
node-key="id" class="search-menu"
:default-expanded-keys="[1, 2, 3]" node-key="id"
:data="data" :default-expanded-keys="defaultOpen"
:highlight-current="true"
:expand-on-click-node="false" :data="menuData"
@node-click="handleNodeClick"> :highlight-current="true"
<span class="custom-tree-node" slot-scope="{ node, data }"> :expand-on-click-node="false"
<i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : node.isLeaf ? 'icon-chengyuan' : 'icon-tongshi-zuzhijiagou'"></i> :props="myProps"
<span>{{ node.label }}</span> @node-click="handleNodeClick">
</span> <span class="custom-tree-node" slot-scope="{ node, data }">
</el-tree> <i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : 'icon-tongshi-zuzhijiagou'"></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
<div class="search-result-container" v-if="searchResultShow">
<ul class="search-result-ul">
<p class="title">部门列表</p>
<li class="group-item items">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
人事部
</li>
<li class="group-item items">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
人事部
</li>
</ul>
<ul class="search-result-ul">
<p class="title">人员列表</p>
<li class="person-item items">
<i class="iconfont icon-chengyuan"></i>
陈景良
<span class="from-group">人事部</span>
</li>
<li class="person-item items">
<i class="iconfont icon-chengyuan"></i>
陈景良
<span class="from-group">人事部</span>
</li>
</ul>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "searchMenu", name: "searchMenu",
components: {}, components: {},
props: {}, props: {
treeData: {
type: Array,
required: true
}
},
data() { data() {
return { return {
data: [ // el-tree mock data
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
}
],
testData: [ // 方法测试数据，可删
{
name: 'w',
groupId: "001",
level: 0
},
{
name: '2w',
groupId: "002",
level: 0
},
{
name: '22w',
groupId: "00232",
level: 1
},
{
name: '32w',
groupId: "004412",
level: 1
},
{
name: '2sw',
groupId: "0042",
level: 2
},
{
name: '2dw',
groupId: "00244",
level: 3
},
{
name: '2fw',
groupId: "00222",
level: 3
},
{
name: '2gw',
groupId: "0022",
level: 3
}
],
searchKey: "", searchKey: "",
searchResultShow: false, searchResultShow: false,
myProps: {
children: 'childrens',
label: 'label',
disabled: "disabled"
},
menuData: [],
defaultOpen: []
}; };
}, },
created() { created() {
this.sortGroupByLevel(); // this.sortGroupByLevel();
}, },
methods: { methods: {
/** /**
...@@ -151,34 +101,96 @@ ...@@ -151,34 +101,96 @@
// console.log(obj, node); // console.log(obj, node);
this.$emit("handleTreeSelection", obj, node); this.$emit("handleTreeSelection", obj, node);
}, },
/** /**
* 按层级排序部门 * 按层级排序部门
* fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
*/ */
sortGroupByLevel() { sortGroupByLevel(list) {
let arr = this.testData; let that = this;
for (let i = 6; i > 0; i--) { var arr = {
console.log(i); list0: {},
// arr.forEach(item => { list1: {},
list2: {},
// }); list3: {},
list4: {},
list5: {},
list6: {},
list: list,
listObj: {}
},
key,
obj2,
key2,
parent,
idOfLevel0,
parentLevel;
list.length && list.forEach(obj => {
obj.name = obj.name || "";
obj.disabled = true;
obj.label = obj.name || "";
obj.id = obj.groupId || "";
obj.englishName = obj.englishName || "";
obj.level = obj.level;
obj.groupId = obj.groupId || "";
obj.parentId = obj.parentId || "";
key = obj.groupId;
if (arr["list" + obj.level]) {
arr["list" + obj.level][key] = obj;
arr["list" + obj.level][key]["children"] = {};
}
if (obj.level == 0) {
idOfLevel0 = obj.groupId;
}
});
for (let level = 6; level > 0; level--) {
for (let item in arr["list" + level]) {
obj2 = arr["list" + level][item];
parentLevel = level - 1;
parent = arr["list" + parentLevel][obj2.parentId];
if (!parent) {
continue;
}
key2 = obj2.groupId;
if (!parent.hasOwnProperty("childrens")) {
parent["childrens"] = [];
}
parent["children"][key2] = obj2;
parent["childrens"].push(obj2);
}
} }
arr.listObj = Object.assign({}, arr.list0, arr.list1, arr.list2, arr.list3, arr.list4, arr.list5, arr.list6);
let menuArr = [];
for (let key in arr.list0) {
menuArr.push(arr.list0[key]);
that.defaultOpen.push(key);
}
that.menuData = menuArr;
console.log(that.menuData);
} }
}, },
filter: {}, filter: {},
computed: {}, computed: {},
watch: {} watch: {
treeData(newArr, old) {
// console.log(old, newArr, "newarr");
this.sortGroupByLevel(newArr);
}
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.searh-menu-container { .searh-menu-container {
overflow-y: scroll; overflow-y: auto;
overflow-x: scroll; overflow-x: auto;
width: 260px; width: 260px;
background: #eef1f8; background: #eef1f8;
height: 690px; height: 690px;
padding: 20px 15px; padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;
.p-0-15 {
padding: 0 15px;
}
.search-menu { .search-menu {
margin-top: 30px; margin-top: 30px;
color: #606266; color: #606266;
...@@ -210,6 +222,27 @@ ...@@ -210,6 +222,27 @@
color: #fff; color: #fff;
} }
} }
.search-result-ul {
font-size: 14px;
color: #606266;
.title {
padding: 15px;
color: #303133;
}
li.items {
padding: 15px;
background: #fff;
box-sizing: border-box;
border-bottom: 1px solid #E4E7ED;
cursor: pointer;
.iconfont {
color: #409EFF;
}
.from-group {
float: right;
}
}
}
} }
</style> </style>
......
src/views/contacts/administrativeFrame.vue
<template> <template>
<div class="administrative-estrutura-container"> <div class="administrative-estrutura-container">
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection"></search-menu> <search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData"></search-menu>
<div class="af-right-container"> <div class="af-right-container">
<div class="af-right-header"> <div class="af-right-header">
<span class="title-span">人事部（5人）</span> <span class="title-span">人事部（5人）</span>
...@@ -62,6 +62,7 @@ ...@@ -62,6 +62,7 @@
</template> </template>
<script> <script>
import searchMenu from "components/contacts/searchMenu"; import searchMenu from "components/contacts/searchMenu";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default { export default {
name: "administrativeEstrutura", name: "administrativeEstrutura",
components: { components: {
...@@ -70,9 +71,13 @@ ...@@ -70,9 +71,13 @@
data() { data() {
return { return {
showChildMember: false, showChildMember: false,
menuData: [],
pageSize: 100, pageSize: 100,
currentPage: 1, currentPage: 1,
total: 0, total: 0,
groupInfo: {
groupName: ""
},
employeeList: [ employeeList: [
{ {
employeeClerkId: 222, employeeClerkId: 222,
...@@ -113,6 +118,9 @@ ...@@ -113,6 +118,9 @@
] ]
}; };
}, },
beforeMount() {
this.getGroupData();
},
methods: { methods: {
handleSizeChange() {}, handleSizeChange() {},
handleCurrentChange() {}, handleCurrentChange() {},
...@@ -128,6 +136,22 @@ ...@@ -128,6 +136,22 @@
*/ */
handleTreeSelection(obj, node) { handleTreeSelection(obj, node) {
console.log(obj, node, "selection"); console.log(obj, node, "selection");
},
/**
* 获取分组架构
*/
getGroupData() {
let params = {
isStoreGroup: 0
};
getRequest("/haoban-manage-web/dept/deptListForCompany", params)
.then(res => {
this.menuData = res.data.result;
})
.catch(e => {
console.log(e, "error");
});
} }
} }
}; };
......
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 to comment