Skip to content

O
office-web
Commit 78b2ad9b by xiaohai
Options

添加子部门

parent b884df0a
Showing with 118 additions and 148 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> <template>
<div class="searh-menu-container"> <div class="searh-menu-container">
<div class="p-0-15"> <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 <el-tree
v-if="!searchResultShow" v-if="!searchResultShow"
class="search-menu" class="search-menu"
...@@ -22,21 +22,17 @@ ...@@ -22,21 +22,17 @@
<div class="search-result-container" v-if="searchResultShow"> <div class="search-result-container" v-if="searchResultShow">
<ul class="search-result-ul" v-if="departmentList.length > 0"> <ul class="search-result-ul" v-if="departmentList.length > 0">
<p class="title">部门列表</p> <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> <i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}} {{department.name}}
</li> </li>
<!-- <li class="group-item items">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
人事部
</li> -->
</ul> </ul>
<ul class="search-result-ul" v-if="employeeList.length > 0"> <ul class="search-result-ul" v-if="employeeList.length > 0">
<p class="title">人员列表</p> <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> <i class="iconfont icon-chengyuan"></i>
{{employee.name}} {{employee.name}}
<span class="from-group">人事部</span> <span class="from-group">{{employee.departmentName}}</span>
</li> </li>
</ul> </ul>
<p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p> <p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
...@@ -70,9 +66,6 @@ ...@@ -70,9 +66,6 @@
defaultOpen: [] defaultOpen: []
}; };
}, },
created() {
// this.sortGroupByLevel();
},
methods: { methods: {
/** /**
* 清楚输入框 * 清楚输入框
...@@ -80,7 +73,6 @@ ...@@ -80,7 +73,6 @@
clearFn() { clearFn() {
this.searchResultShow = false; this.searchResultShow = false;
}, },
/** /**
* 关键字搜索 * 关键字搜索
*/ */
...@@ -93,15 +85,19 @@ ...@@ -93,15 +85,19 @@
// console.log(this.searchKey); // console.log(this.searchKey);
this.$emit("handleSearchKey", this.searchKey); this.$emit("handleSearchKey", this.searchKey);
}, },
/** /**
* 树形菜单选择 * 树形菜单选择
*/ */
handleNodeClick(obj, node) { handleNodeClick(obj, node) {
// console.log(obj, node); this.$emit("handleTreeSelection", obj, node, false);
this.$emit("handleTreeSelection", obj, node); },
/**
* 搜索结果中选人
*/
selectEmployee(person) {
this.$emit("handleEmployeeSelection", person, true);
}, },
/** /**
* 按层级排序部门 * 按层级排序部门
* fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简 * fixme 现在代码是将每个层级都剥离了出来，为的是适用后面可能出现的需求，但是如果后期需求无特殊更改，本代码可优化精简
...@@ -172,8 +168,8 @@ ...@@ -172,8 +168,8 @@
filter: {}, filter: {},
computed: { computed: {
employeeList() { employeeList() {
if (this.searchResult.employeeList && this.searchResult.employeeList.list) { if (this.searchResult.searchList) {
return this.searchResult.employeeList.list; return this.searchResult.searchList;
} else { } else {
return []; return [];
} }
...@@ -209,6 +205,7 @@ ...@@ -209,6 +205,7 @@
.no-data-tip { .no-data-tip {
text-align: center; text-align: center;
margin-top: 50px; margin-top: 50px;
color: #5b6a80;
} }
.search-menu { .search-menu {
margin-top: 30px; margin-top: 30px;
...@@ -260,6 +257,13 @@ ...@@ -260,6 +257,13 @@
.from-group { .from-group {
float: right; float: right;
} }
&:hover {
background: #409EFF;
color: #fff;
.iconfont {
color: #fff;
}
}
} }
} }
} }
......
src/views/contacts/addDepartment.vue
...@@ -16,62 +16,20 @@ ...@@ -16,62 +16,20 @@
</div> </div>
<div class="setting-cell"> <div class="setting-cell">
<p class="title">权限设置</p> <p class="title">权限设置</p>
<div class="jurisdiction-setting"> <permission-setting></permission-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>
</div> </div>
<div class="setting-cell"></div> <div class="setting-cell"></div>
</div> </div>
</template> </template>
<script> <script>
import permissionSetting from "components/contacts/permissionSetting";
export default { export default {
name: "addDepartment", name: "addDepartment",
components: {
permissionSetting
},
data() { data() {
return { return {
visibleThere: false,
departInfo: { departInfo: {
name: "" name: ""
} }
...@@ -99,72 +57,6 @@ ...@@ -99,72 +57,6 @@
width: 380px; 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> </style>
......
src/views/contacts/administrativeFrame.vue
<template> <template>
<div class="administrative-estrutura-container"> <div class="administrative-estrutura-container">
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData" :searchResult="searchResult"></search-menu> <search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData" :searchResult="searchResult" @handleEmployeeSelection="handleEmployeeSelection"></search-menu>
<div class="af-right-container"> <employee-info v-if="showEmployee" :info="selectedEmployee"></employee-info>
<div class="af-right-container" v-else>
<div class="af-right-header"> <div class="af-right-header">
<span class="title-span">人事部（5人）</span> <span class="title-span">{{groupInfo.groupName}}（{{total}}人）</span>
<span class="id-span">部门ID： 1233344</span> <span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
<span class="handle-area"> <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> <span class="hurdle"></span>
<a class="J_edit a-href">编辑</a> <a class="J_edit a-href">编辑</a>
</span> </span>
</div> </div>
<div class="af-right-button-box"> <div class="af-right-button-box">
<el-button type="primary">添加成员</el-button> <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 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> <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> </div>
...@@ -69,11 +70,13 @@ ...@@ -69,11 +70,13 @@
</template> </template>
<script> <script>
import searchMenu from "components/contacts/searchMenu"; import searchMenu from "components/contacts/searchMenu";
import employeeInfo from "components/contacts/employeeInfo";
import { getRequest, postRequest, postJsonRequest } from '@/api/api'; import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default { export default {
name: "administrativeEstrutura", name: "administrativeEstrutura",
components: { components: {
searchMenu searchMenu,
employeeInfo
}, },
data() { data() {
return { return {
...@@ -85,12 +88,14 @@ ...@@ -85,12 +88,14 @@
selectedList: [], selectedList: [],
total: 0, total: 0,
loading: true, loading: true,
departmentId: "",
groupInfo: { groupInfo: {
groupName: "" groupName: "",
departmentId: ""
}, },
employeeList: [], employeeList: [],
searchResult: {} searchResult: {},
showEmployee: false,
selectedEmployee: {}
}; };
}, },
created() {}, created() {},
...@@ -123,13 +128,22 @@ ...@@ -123,13 +128,22 @@
/** /**
* 树形菜单选择项处理 * 树形菜单选择项处理
*/ */
handleTreeSelection(obj, node) { handleTreeSelection(obj, node, showEmployee) {
console.log(obj, node, "selection"); 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.loading = true;
this.getEmployee(); this.getEmployee();
}, },
/**
* 树形搜索结果选人处理
*/
handleEmployeeSelection(employee, showEmployee) {
console.log(employee);
this.selectedEmployee = employee;
this.showEmployee = showEmployee;
},
/** /**
* table选择员工 * table选择员工
*/ */
...@@ -149,7 +163,6 @@ ...@@ -149,7 +163,6 @@
_this.selectedList.forEach(li => { _this.selectedList.forEach(li => {
arr.push(li.employeeClerkId); arr.push(li.employeeClerkId);
}); });
console.log(arr.push(","));
let params = { let params = {
ids: arr.push(",") ids: arr.push(",")
} }
...@@ -189,7 +202,8 @@ ...@@ -189,7 +202,8 @@
_this.menuData = res.data.result; _this.menuData = res.data.result;
res.data.result.forEach(li => { res.data.result.forEach(li => {
if (li.level == 0) { if (li.level == 0) {
_this.departmentId = li.groupId; _this.groupInfo.departmentId = li.groupId;
_this.groupInfo.groupName = li.name;
} }
}); });
_this.getEmployee(); _this.getEmployee();
...@@ -205,14 +219,13 @@ ...@@ -205,14 +219,13 @@
getEmployee() { getEmployee() {
let _this = this; let _this = this;
let params = { let params = {
departmentId: _this.departmentId, departmentId: _this.groupInfo.departmentId,
showChild: _this.showChildMember * 1, showChild: _this.showChildMember * 1,
pageSize: _this.pageSize, pageSize: _this.pageSize,
status: 1 status: 1
}; };
getRequest("/haoban-manage-web/emp/findsimplepage", params) getRequest("/haoban-manage-web/emp/findsimplepage", params)
.then(res => { .then(res => {
console.log(res, "employeeList");
_this.employeeList = res.data.result.list; _this.employeeList = res.data.result.list;
_this.total = res.data.result.total; _this.total = res.data.result.total;
_this.loading = false; _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