Skip to content

O
office-web
Commit 41870357 by xiaohai
Options

插件调试

parent 0cb26b18
Showing with 253 additions and 70 deletions
src/components/common/vueSelectEmployee.vue
......@@ -11,7 +11,29 @@
<div class="input-container">
<el-input v-model="searchKey" placeholder="请输入内容"></el-input>
</div>
<el-tree></el-tree>
<el-tree
class="search-menu"
node-key="id"
ref="tree"
v-loading="loading"
:default-expanded-keys="defaultOpen"
:data="menuData"
show-checkbox
:highlight-current="true"
:expand-on-click-node="false"
icon-class="open-child"
:props="myProps"
@check-change="getCurrentNode"
@node-expand="nodeOpen"
@node-collapse="nodeClose"
@node-click="handleNodeClick">
<span class="custom-tree-node" :class="data.disableOpen || (data.children && !data.childrens) ? 'disable-open' : ''" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span class="open-btn" v-if="data.children">
<el-button @click="nodeOpen(data, node)" :disabled="data.disableOpen" type="text" size="small">下级</el-button>
</span>
</span>
</el-tree>
</div>
</div>
<div class="selected-area t-a-select">
......@@ -22,14 +44,119 @@
</el-dialog>
</template>
<script>
import { formatTreeData } from '@/utils/index';
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "vue-select-employee",
props: {},
data() {
return {
dialogVisible: true,
searchKey: ""
searchKey: "",
myProps: {
children: 'childrens',
label: 'label',
disabled: "disabled"
},
menuData: [],
defaultOpen: [],
loading: false
};
},
methods: {
/**
* 获取分组架构
*/
getGroupData() {
let _this = this;
// _this.loading = true;
let params = {
isStoreGroup: 0
};
getRequest("/haoban-manage-web/dept/deptListForCompany", params)
.then(res => {
let treeData = [];
if (res.data.errorCode == 1) {
treeData = res.data.result || [];
}
let obj = formatTreeData(treeData);
this.defaultOpen = obj.defaultOpen;
this.menuData = obj.menuArr;
console.log(this.menuData);
this.getEmployee(obj.menuArr[0]);
})
.catch(e => {
console.log(e, "error");
});
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
this.$emit("handleTreeSelection", obj, node, 'node');
},
getCurrentNode(data, ifChecked) {
data.disableOpen = ifChecked;
},
nodeOpen(data, node, self) {
console.log(data, node, self);
this.loading = true;
data.disabled = true;
this.departmentId = data.id;
if (!data.hasLoad) {
this.getEmployee(data || [], node);
data.hasLoad = true;
} else {
this.loading = false;
}
},
nodeClose(data, node, self) {
console.log(data, node, self);
data.disabled = false;
},
/**
* 获取员工列表
*/
getEmployee( parent, node, showChild = 0) {
let _this = this;
let params = {
departmentId: parent.id,
showChild,
pageSize: 10000,
pageNum: 1,
status: 1
};
getRequest("/haoban-manage-web/emp/findsimplepage", params)
.then(res => {
if (res.data.errorCode == 1) {
// childrens.concat(res.data.result.list);
this.formatEmployeeList(res.data.result.list || [], parent, node);
} else {
parent.childrens = parent.childrens.concat([]);
_this.loading = false;
}
})
.catch(e => {
console.log(e, "error");
_this.loading = false;
});
},
formatEmployeeList(list = [], parent, node) {
list.forEach((li, idx) => {
li.id = li.employeeClerkId;
li.label = li.name;
li.level = parent.level + 1;
});
if ("childrens" in parent) {
parent.childrens = parent.childrens.concat(list);
} else {
parent.childrens = list;
}
this.loading = false;
}
},
beforeMount() {
this.getGroupData();
}
};
</script>
......@@ -42,6 +169,7 @@
background:rgba(255,255,255,1);
border:1px solid rgba(220,223,230,1);
border-radius:4px;
overflow: hidden;
&:first-child {
margin-right: 20px;
}
......@@ -62,6 +190,52 @@
overflow: auto;
padding: 15px;
box-sizing: border-box;
.search-menu {
margin-top: 20px;
color: #606266;
font-size: 14px;
min-width: 100%;
display:inline-block !important;
.el-tree-node {
.el-tree-node__content {
height: 36px;
position: relative;
.open-child {
position: absolute;
right: 0;
top: 0;
width: 36px;
height: 36px;
padding: 0;
box-sizing: border-box;
}
.custom-tree-node {
flex: 1;
height: 100%;
line-height: 36px;
.open-btn {
width: 50px;
height: 14px;
color: #409EFF;
float: right;
text-align: right;
border-left: 1px solid #DCDFE6;
margin-top: 11px;
line-height: 14px;
}
&.disable-open {
z-index: 999;
}
}
&:hover {
background: none;
}
}
}
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background: none;
}
}
}
}
......
src/components/contacts/searchMenu.vue
......@@ -8,7 +8,6 @@
class="search-menu"
node-key="id"
:default-expanded-keys="defaultOpen"
:data="menuData"
:highlight-current="true"
:expand-on-click-node="false"
......@@ -73,6 +72,7 @@
</div>
</template>
<script>
import { formatTreeData } from '@/utils/index';
export default {
name: "searchMenu",
components: {},
......@@ -139,72 +139,6 @@
*/
handleStoreClick(store) {
this.$emit("handleStoreSelection", store, 'store');
},
/**
* 按层级排序部门
* fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
*/
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: {},
......@@ -233,7 +167,9 @@
},
watch: {
treeData(newArr, old) {
this.sortGroupByLevel(newArr);
let obj = formatTreeData(newArr);
this.defaultOpen = obj.defaultOpen;
this.menuData = obj.menuArr;
}
}
};
......
src/utils/index.js
......@@ -270,3 +270,76 @@ export function deepCopy(obj) {
}
return o;
}
/**
* 按层级排序部门
* fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
*/
export function formatTreeData(list) {
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.disableOpen = false;
obj.label = obj.name || "";
obj.id = obj.groupId || "";
obj.englishName = obj.englishName || "";
obj.level = obj.level;
obj.groupId = obj.groupId || "";
obj.parentId = obj.parentId || "";
// obj.childrens = [{label: "", id: ""}];
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 = [];
let defaultOpen = [];
for (let key in arr.list0) {
menuArr.push(arr.list0[key]);
arr.list0[key].disabled = true;
arr.list0[key].hasLoad = true;
defaultOpen.push(key);
}
return {
defaultOpen,
menuArr,
arr
}
}
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