Skip to content

O
office-web
Commit 6b96dbd2 by xiaohai
Options

组建样式调整

parent cdae9b79
Showing with 164 additions and 61 deletions
src/components/contacts/searchMenu.vue
......@@ -20,30 +20,26 @@
</el-tree>
</div>
<div class="search-result-container" v-if="searchResultShow">
<ul class="search-result-ul">
<ul class="search-result-ul" v-if="departmentList.length > 0">
<p class="title">部门列表</p>
<li class="group-item items">
<li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
人事部
{{department.name}}
</li>
<li class="group-item items">
<!-- <li class="group-item items">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
人事部
</li>
</li> -->
</ul>
<ul class="search-result-ul">
<ul class="search-result-ul" v-if="employeeList.length > 0">
<p class="title">人员列表</p>
<li class="person-item items">
<li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId">
<i class="iconfont icon-chengyuan"></i>
陈景良
<span class="from-group">人事部</span>
</li>
<li class="person-item items">
<i class="iconfont icon-chengyuan"></i>
陈景良
{{employee.name}}
<span class="from-group">人事部</span>
</li>
</ul>
<p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
</div>
</div>
</template>
......@@ -55,6 +51,10 @@
treeData: {
type: Array,
required: true
},
searchResult: {
type: Object,
required: true
}
},
data() {
......@@ -170,7 +170,22 @@
}
},
filter: {},
computed: {},
computed: {
employeeList() {
if (this.searchResult.employeeList && this.searchResult.employeeList.list) {
return this.searchResult.employeeList.list;
} else {
return [];
}
},
departmentList() {
if (this.searchResult.departmentList) {
return this.searchResult.departmentList;
} else {
return [];
}
}
},
watch: {
treeData(newArr, old) {
// console.log(old, newArr, "newarr");
......@@ -191,6 +206,10 @@
.p-0-15 {
padding: 0 15px;
}
.no-data-tip {
text-align: center;
margin-top: 50px;
}
.search-menu {
margin-top: 30px;
color: #606266;
......
src/views/contacts/administrativeFrame.vue
<template>
<div class="administrative-estrutura-container">
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData"></search-menu>
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData" :searchResult="searchResult"></search-menu>
<div class="af-right-container">
<div class="af-right-header">
<span class="title-span">人事部（5人）</span>
......@@ -14,10 +14,13 @@
<div class="af-right-button-box">
<el-button type="primary">添加成员</el-button>
<el-button>批量导入/导出</el-button>
<el-button type="danger" plain>批量删除</el-button>
<el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember"></el-checkbox><a class="a-href">显示子成员</a></el-button>
<el-button type="danger" plain @click="delMembers" :disabled="disabledDel">批量删除</el-button>
<el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
</div>
<el-table
height="495"
v-loading="loading"
@selection-change="selectMember"
:data="employeeList">
<el-table-column
type="selection"
......@@ -25,8 +28,12 @@
</el-table-column>
<el-table-column
label="姓名"
prop="name"
></el-table-column>
>
<template slot-scope="scope">
<span>{{scope.row.name}}</span>
<span v-if="scope.row.isManager == 1" class="is-manager">部门负责人</span>
</template>
</el-table-column>
<el-table-column
label="手机号"
prop="phoneNumber"
......@@ -71,64 +78,46 @@
data() {
return {
showChildMember: false,
setDisabledDel: false,
menuData: [],
pageSize: 100,
currentPage: 1,
selectedList: [],
total: 0,
loading: true,
departmentId: "",
groupInfo: {
groupName: ""
},
employeeList: [
{
employeeClerkId: 222,
name: "陈景良",
phoneNumber: "13777800255",
isManager: 0,
positionName: "HRM",
sort: 1,
activationStatus: 1,
userId: 111,
departmentId: "hr001",
hireDate: "2018-12-12"
},
{
employeeClerkId: 223,
name: "陈景良2",
phoneNumber: "13777800256",
isManager: 0,
positionName: "HRM",
sort: 2,
activationStatus: 0,
userId: 112,
departmentId: "hr002",
hireDate: "2018-12-12"
},
{
employeeClerkId: 224,
name: "陈景良3",
phoneNumber: "13777800257",
isManager: 0,
positionName: "HRM",
sort: 3,
activationStatus: 1,
userId: 113,
departmentId: "hr003",
hireDate: "2018-12-12"
}
]
employeeList: [],
searchResult: {}
};
},
created() {},
beforeMount() {
this.getGroupData();
this.getEmployee();
},
methods: {
handleSizeChange() {},
handleCurrentChange() {},
/**
* 树形菜单搜索
*/
handleSearchKey(key) {
console.log(key, "searchKey");
handleSearchKey(keyWord) {
console.log(keyWord, "searchKey");
let params = {
keyWord
};
getRequest("/haoban-manage-web/emp/searchpage", params)
.then(res => {
console.log(res, "key word search");
this.searchResult = res.data.result;
})
.catch(e => {
console.log(e, "error");
})
},
/**
......@@ -136,23 +125,107 @@
*/
handleTreeSelection(obj, node) {
console.log(obj, node, "selection");
this.departmentId = obj.groupId;
this.loading = true;
this.getEmployee();
},
/**
* table选择员工
*/
selectMember(selection) {
console.log(selection);
this.selectedList = selection;
},
/**
* 批量删除成员
*/
delMembers() {
let _this = this;
_this.$confirm("是否要删除选中的员工？", "提示", {
type: "warning"
}).then(() => {
let arr = [];
_this.selectedList.forEach(li => {
arr.push(li.employeeClerkId);
});
console.log(arr.push(","));
let params = {
ids: arr.push(",")
}
getRequest("/haoban-manage-web/emp/del", params)
.then(res => {
console.log(res, "Del result");
let selected = _this.selectedList;
let originList = _this.employeeList;
let selSet = new Set(selected);
let originSet = new Set(originList);
_this.employeeList = selected.concat(originList).filter(v => !selSet.has(v) || !originSet.has(v)); // 两数组非交集部分即为剔除后剩下的数据
})
.catch(e => {
console.log(e, "error");
});
})
},
/**
* 设置是否显示子成员
*/
setChildMemberShow() {
console.log(this.showChildMember * 1);
this.getEmployee();
},
/**
* 获取分组架构
*/
getGroupData() {
getGroupData(fn) {
let _this = this;
let params = {
isStoreGroup: 0
};
getRequest("/haoban-manage-web/dept/deptListForCompany", params)
.then(res => {
this.menuData = res.data.result;
_this.menuData = res.data.result;
res.data.result.forEach(li => {
if (li.level == 0) {
_this.departmentId = li.groupId;
}
});
_this.getEmployee();
})
.catch(e => {
console.log(e, "error");
});
},
/**
* 获取员工列表
*/
getEmployee() {
let _this = this;
let params = {
departmentId: _this.departmentId,
showChild: _this.showChildMember * 1,
pageSize: _this.pageSize,
status: 1
};
getRequest("/haoban-manage-web/emp/findsimplepage", params)
.then(res => {
console.log(res, "employeeList");
_this.employeeList = res.data.result.list;
_this.total = res.data.result.total;
_this.loading = false;
})
.catch(e => {
console.log(e, "error");
});
}
},
computed: {
disabledDel() {
return this.selectedList.length < 1 && !this.setDisabledDel;
}
}
};
</script>
......@@ -209,6 +282,17 @@
}
}
}
.el-table .cell .is-manager {
display: inline-block;
font-size: 10px;
color: #fff;
width:56px;
height:13px;
text-align: center;
line-height: 15px;
background:rgba(247,203,39,1);
border-radius:2px;
}
}
</style>
......
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