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>
<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>
<el-tree
v-show="!searchResultShow"
class="search-menu"
node-key="id"
:default-expanded-keys="[1, 2, 3]"
:data="data"
:highlight-current="true"
:expand-on-click-node="false"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : node.isLeaf ? 'icon-chengyuan' : 'icon-tongshi-zuzhijiagou'"></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
<div class="p-0-15">
<el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
<el-tree
v-if="!searchResultShow"
class="search-menu"
node-key="id"
:default-expanded-keys="defaultOpen"
:data="menuData"
:highlight-current="true"
:expand-on-click-node="false"
:props="myProps"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<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>
</template>
<script>
export default {
name: "searchMenu",
components: {},
props: {},
props: {
treeData: {
type: Array,
required: true
}
},
data() {
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: "",
searchResultShow: false,
myProps: {
children: 'childrens',
label: 'label',
disabled: "disabled"
},
menuData: [],
defaultOpen: []
};
},
created() {
this.sortGroupByLevel();
// this.sortGroupByLevel();
},
methods: {
/**
......@@ -151,34 +101,96 @@
// console.log(obj, node);
this.$emit("handleTreeSelection", obj, node);
},
/**
* 按层级排序部门
* fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
*/
sortGroupByLevel() {
let arr = this.testData;
for (let i = 6; i > 0; i--) {
console.log(i);
// arr.forEach(item => {
// });
sortGroupByLevel(list) {
let that = this;
var arr = {
list0: {},
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: {},
computed: {},
watch: {}
watch: {
treeData(newArr, old) {
// console.log(old, newArr, "newarr");
this.sortGroupByLevel(newArr);
}
}
};
</script>
<style lang="scss">
.searh-menu-container {
overflow-y: scroll;
overflow-x: scroll;
overflow-y: auto;
overflow-x: auto;
width: 260px;
background: #eef1f8;
height: 690px;
padding: 20px 15px;
padding: 20px 0;
box-sizing: border-box;
.p-0-15 {
padding: 0 15px;
}
.search-menu {
margin-top: 30px;
color: #606266;
......@@ -210,6 +222,27 @@
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>
......
src/views/contacts/administrativeFrame.vue
<template>
<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-header">
<span class="title-span">人事部（5人）</span>
......@@ -62,6 +62,7 @@
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "administrativeEstrutura",
components: {
......@@ -70,9 +71,13 @@
data() {
return {
showChildMember: false,
menuData: [],
pageSize: 100,
currentPage: 1,
total: 0,
groupInfo: {
groupName: ""
},
employeeList: [
{
employeeClerkId: 222,
......@@ -113,6 +118,9 @@
]
};
},
beforeMount() {
this.getGroupData();
},
methods: {
handleSizeChange() {},
handleCurrentChange() {},
......@@ -128,6 +136,22 @@
*/
handleTreeSelection(obj, node) {
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