Skip to content

O
office-web
Commit 78b2ad9b by xiaohai
Options

添加子部门

parent b884df0a
Showing with 117 additions and 147 deletions
src/components/contacts/employeeInfo.vue 0 → 100644
<template>
<div class="employee-info">
<p class="title">员工信息</p>
<el-form
class="employee-info-form"
label-width="70px"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="info.name"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="info.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="部门" prop="departmentName">
<el-input v-model="info.departmentName"></el-input>
</el-form-item>
<el-form-item label="职位" prop="positionName">
<el-input v-model="info.positionName"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "employeeInfo",
props: {
info: {
type: Object,
required: true
}
},
data() {
return {
employeeInfo: {
name: "",
phoneNumber: "",
departmentName: ""
}
};
}
};
</script>
<style lang="scss">
.employee-info {
width: 100%;
background: #fff;
>.title {
line-height: 55px;
text-indent: 32px;
border-bottom: 1px solid #E4E7ED;
}
.employee-info-form {
padding: 24px 60px;
.el-input {
width: 380px;
}
}
}
</style>
src/components/contacts/searchMenu.vue
<template>
<div class="searh-menu-container">
<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-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"
......@@ -22,21 +22,17 @@
<div class="search-result-container" v-if="searchResultShow">
<ul class="search-result-ul" v-if="departmentList.length > 0">
<p class="title">部门列表</p>
<li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId">
<li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}}
</li>
<!-- <li class="group-item items">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
人事部
</li> -->
</ul>
<ul class="search-result-ul" v-if="employeeList.length > 0">
<p class="title">人员列表</p>
<li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId">
<li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
<i class="iconfont icon-chengyuan"></i>
{{employee.name}}
<span class="from-group">人事部</span>
<span class="from-group">{{employee.departmentName}}</span>
</li>
</ul>
<p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
......@@ -70,9 +66,6 @@
defaultOpen: []
};
},
created() {
// this.sortGroupByLevel();
},
methods: {
/**
* 清楚输入框
......@@ -80,7 +73,6 @@
clearFn() {
this.searchResultShow = false;
},
/**
* 关键字搜索
*/
......@@ -93,16 +85,20 @@
// console.log(this.searchKey);
this.$emit("handleSearchKey", this.searchKey);
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
// console.log(obj, node);
this.$emit("handleTreeSelection", obj, node);
this.$emit("handleTreeSelection", obj, node, false);
},
/**
* 搜索结果中选人
*/
selectEmployee(person) {
this.$emit("handleEmployeeSelection", person, true);
},
/**
* 按层级排序部门
* fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
*/
......@@ -172,8 +168,8 @@
filter: {},
computed: {
employeeList() {
if (this.searchResult.employeeList && this.searchResult.employeeList.list) {
return this.searchResult.employeeList.list;
if (this.searchResult.searchList) {
return this.searchResult.searchList;
} else {
return [];
}
......@@ -209,6 +205,7 @@
.no-data-tip {
text-align: center;
margin-top: 50px;
color: #5b6a80;
}
.search-menu {
margin-top: 30px;
......@@ -260,6 +257,13 @@
.from-group {
float: right;
}
&:hover {
background: #409EFF;
color: #fff;
.iconfont {
color: #fff;
}
}
}
}
}
......
src/views/contacts/addDepartment.vue
......@@ -16,62 +16,20 @@
</div>
<div class="setting-cell">
<p class="title">权限设置</p>
<div class="jurisdiction-setting">
<div class="only-visivble-there">
本部门员工仅可见本部门员工
<el-switch
v-model="visibleThere"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
</div>
<div class="particular-setting">
<div>
<p>个别员工不设置该权限</p>
<ul class="particular-list">
<li></li>
<li></li>
<li></li>
<div class="add-btn item">
<i class="el-icon-plus"></i>
</div>
</ul>
<p>允许指定部门/人员可见</p>
<ul class="particular-list">
<li class="item person-item">
<img src="http://www.vstou.com/upload/image/1/201806/1528248938430018.jpeg" alt="haoban">
<p class="name">陈景良</p>
<i class="el-icon-circle-close"></i>
</li>
<li class="item group-item">
市场部
<i class="el-icon-circle-close"></i>
</li>
<div class="add-btn item">
<i class="el-icon-plus"></i>
</div>
</ul>
</div>
</div>
<div class="only-visivble-self">
本部门员工仅可见本部门员工
<el-switch
v-model="visibleThere"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
</div>
</div>
<permission-setting></permission-setting>
</div>
<div class="setting-cell"></div>
</div>
</template>
<script>
import permissionSetting from "components/contacts/permissionSetting";
export default {
name: "addDepartment",
components: {
permissionSetting
},
data() {
return {
visibleThere: false,
departInfo: {
name: ""
}
......@@ -99,72 +57,6 @@
width: 380px;
}
}
.jurisdiction-setting {
padding: 36px 32px 55px;
.particular-setting {
width: 480px;
min-height: 300px;
border-radius: 2px;
background: #F5F7FA;
margin: 32px 0;
padding: 20px;
.particular-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
.add-btn {
width:40px;
height:40px;
background:rgba(251,253,255,1);
border:1px dashed rgba(192,204,218,1);
border-radius:50%;
box-sizing: border-box;
line-height: 40px;
text-align: center;
.el-icon-plus {
font-size: 16px;
color: #8C939D;
}
}
.item {
position: relative;
margin-right: 24px;
margin-top: 30px;
.el-icon-circle-close {
position: absolute;
font-size: 16px;
color: #808995;
right: -8px;
top: -8px;
}
}
.person-item {
width:40px;
position: relative;
img {
width: 100%;
border-radius:4px;
}
.name {
font-size: 12px;
text-align: center;
margin-top: 20px;
}
}
.group-item {
width:57px;
height:30px;
background:rgba(236,245,255,1);
border:1px solid rgba(217,236,255,1);
border-radius:4px;
font-size:12px;
color:rgba(64,158,255,1);
line-height: 32px;
text-align: center;
}
}
}
}
}
}
</style>
......
src/views/contacts/administrativeFrame.vue
<template>
<div class="administrative-estrutura-container">
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData" :searchResult="searchResult"></search-menu>
<div class="af-right-container">
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData" :searchResult="searchResult" @handleEmployeeSelection="handleEmployeeSelection"></search-menu>
<employee-info v-if="showEmployee" :info="selectedEmployee"></employee-info>
<div class="af-right-container" v-else>
<div class="af-right-header">
<span class="title-span">人事部（5人）</span>
<span class="id-span">部门ID： 1233344</span>
<span class="title-span">{{groupInfo.groupName}}（{{total}}人）</span>
<span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
<span class="handle-area">
<a class="J_add-child a-href">添加子部门</a>
<a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" target="_blank" class="J_add-child a-href">添加子部门</a>
<span class="hurdle"></span>
<a class="J_edit a-href">编辑</a>
</span>
</div>
<div class="af-right-button-box">
<el-button type="primary">添加成员</el-button>
<el-button>批量导入/导出</el-button>
<a><el-button>批量导入/导出</el-button></a>
<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>
......@@ -69,11 +70,13 @@
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
import employeeInfo from "components/contacts/employeeInfo";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "administrativeEstrutura",
components: {
searchMenu
searchMenu,
employeeInfo
},
data() {
return {
......@@ -85,12 +88,14 @@
selectedList: [],
total: 0,
loading: true,
departmentId: "",
groupInfo: {
groupName: ""
groupName: "",
departmentId: ""
},
employeeList: [],
searchResult: {}
searchResult: {},
showEmployee: false,
selectedEmployee: {}
};
},
created() {},
......@@ -123,13 +128,22 @@
/**
* 树形菜单选择项处理
*/
handleTreeSelection(obj, node) {
handleTreeSelection(obj, node, showEmployee) {
console.log(obj, node, "selection");
this.departmentId = obj.groupId;
this.groupInfo.departmentId = obj.groupId;
this.groupInfo.groupName = obj.name;
this.showEmployee = showEmployee;
this.loading = true;
this.getEmployee();
},
/**
* 树形搜索结果选人处理
*/
handleEmployeeSelection(employee, showEmployee) {
console.log(employee);
this.selectedEmployee = employee;
this.showEmployee = showEmployee;
},
/**
* table选择员工
*/
......@@ -149,7 +163,6 @@
_this.selectedList.forEach(li => {
arr.push(li.employeeClerkId);
});
console.log(arr.push(","));
let params = {
ids: arr.push(",")
}
......@@ -189,7 +202,8 @@
_this.menuData = res.data.result;
res.data.result.forEach(li => {
if (li.level == 0) {
_this.departmentId = li.groupId;
_this.groupInfo.departmentId = li.groupId;
_this.groupInfo.groupName = li.name;
}
});
_this.getEmployee();
......@@ -205,14 +219,13 @@
getEmployee() {
let _this = this;
let params = {
departmentId: _this.departmentId,
departmentId: _this.groupInfo.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;
......
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