|
|
<template>
|
|
|
<div class="main">
|
|
|
<a-row>
|
|
|
<!-- 组织架构 -->
|
|
|
<a-col :span="5" class="left-tree">
|
|
|
<!-- <a-input-search
|
|
|
style="margin-bottom: 8px"
|
|
|
placeholder="请输入搜索信息"
|
|
|
v-model="searchStr"
|
|
|
@change="onSearch"
|
|
|
/> -->
|
|
|
<div>
|
|
|
<a-button type="link" @click="openDepartment(1)"
|
|
|
>+ 新建分组</a-button
|
|
|
>
|
|
|
<a-button type="link" icon="form" @click="openDepartment()">
|
|
|
</a-button>
|
|
|
<a-button
|
|
|
type="link"
|
|
|
style="color: #ff4d4f"
|
|
|
icon="delete"
|
|
|
@click="del()"
|
|
|
>
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<a-tree
|
|
|
v-model="checkedKeys"
|
|
|
:expanded-keys="expandedKeys"
|
|
|
:auto-expand-parent="autoExpandParent"
|
|
|
:selected-keys="selectedKeys"
|
|
|
:tree-data="treeData"
|
|
|
@expand="onExpand"
|
|
|
@select="onSelect"
|
|
|
:replaceFields="{ children: 'childList', title: 'name' }"
|
|
|
>
|
|
|
<template slot="title" slot-scope="{ name }">
|
|
|
<span
|
|
|
v-html="
|
|
|
name.replace(
|
|
|
new RegExp(searchValue, 'g'),
|
|
|
'<span style=color:#f50>' + searchValue + '</span>'
|
|
|
)
|
|
|
"
|
|
|
></span>
|
|
|
</template>
|
|
|
</a-tree>
|
|
|
</a-col>
|
|
|
<!-- right 员工 -->
|
|
|
<a-col :span="19">
|
|
|
<div class="search-box">
|
|
|
<a-space size="large">
|
|
|
<a-input v-model="searchForm.keyword" placeholder="请输入姓名/手机号" />
|
|
|
<a-button type="primary" @click='getData'>查 询</a-button>
|
|
|
<a-button @click='reset'>重 置</a-button>
|
|
|
</a-space>
|
|
|
</div>
|
|
|
<!-- 表格 -->
|
|
|
<div id="commonTable">
|
|
|
<div style="margin-bottom: 16px">
|
|
|
<a-space size="large">
|
|
|
<a-button class='add-btn' :loading="loading" @click="addStaff()">
|
|
|
新增员工
|
|
|
</a-button>
|
|
|
<a-button :disabled="!hasSelected" :loading="loading">
|
|
|
批量操作
|
|
|
</a-button>
|
|
|
</a-space>
|
|
|
<span style="margin-left: 8px">
|
|
|
<template v-if="hasSelected">
|
|
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
|
|
</template>
|
|
|
</span>
|
|
|
</div>
|
|
|
<a-table
|
|
|
:columns="columns"
|
|
|
:data-source="tableData"
|
|
|
:pagination="pagination"
|
|
|
@change="handleTableChange"
|
|
|
:row-selection="{
|
|
|
selectedRowKeys: selectedRowKeys,
|
|
|
onChange: onSelectChange,
|
|
|
}"
|
|
|
:row-key="
|
|
|
(record, index) => {
|
|
|
return record.id;
|
|
|
}
|
|
|
"
|
|
|
>
|
|
|
<!-- 操作 -->
|
|
|
<span slot="action" slot-scope="text,scope">
|
|
|
<a-space size="small">
|
|
|
<a class="ant-dropdown-link" @click="edit(scope)">编辑</a>
|
|
|
<a-switch checked-children="开" un-checked-children="关" @change="enableUser(scope.id)" :checked='scope.status ===1'></a-switch>
|
|
|
<a class="ant-dropdown-link" @click="resetPsw(scope.id)">重置密码</a>
|
|
|
</a-space>
|
|
|
</span>
|
|
|
<span slot="formatter" slot-scope="scope">{{
|
|
|
scope === 1 ? "可" : ""
|
|
|
}}</span>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<!-- 添加部门 -->
|
|
|
<a-modal
|
|
|
:title="show.depepartmentTitle"
|
|
|
:visible="show.addDepartment"
|
|
|
@ok="handleOk"
|
|
|
@cancel="handleCancel"
|
|
|
>
|
|
|
<div>
|
|
|
<a-form-model
|
|
|
layout="vertical"
|
|
|
ref="ruleForm"
|
|
|
:model="form"
|
|
|
:rules="rules"
|
|
|
:wrapper-col="{ span: 18 }"
|
|
|
>
|
|
|
<a-form-model-item
|
|
|
prop="parentId"
|
|
|
label="上级"
|
|
|
v-show="show.depepartmentTitle === '新增组织架构'"
|
|
|
>
|
|
|
<a-cascader
|
|
|
:field-names="{
|
|
|
label: 'name',
|
|
|
value: 'id',
|
|
|
children: 'childList',
|
|
|
}"
|
|
|
:options="treeData"
|
|
|
placeholder="无上级"
|
|
|
change-on-select
|
|
|
@change="onChange"
|
|
|
v-model="cascVal"
|
|
|
/>
|
|
|
</a-form-model-item>
|
|
|
<a-form-model-item prop="type" label="类型">
|
|
|
<a-select v-model="form.type">
|
|
|
<a-select-option
|
|
|
v-for="item in typeOption"
|
|
|
:key="item.id"
|
|
|
:value="item.id"
|
|
|
>{{ item.name }}</a-select-option
|
|
|
>
|
|
|
</a-select>
|
|
|
</a-form-model-item>
|
|
|
<a-form-model-item prop="name" label="部门/岗位名称">
|
|
|
<a-input v-model="form.name"></a-input>
|
|
|
</a-form-model-item>
|
|
|
</a-form-model>
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
<!-- 添加员工信息 -->
|
|
|
<a-drawer
|
|
|
:title="show.addStaffTitle"
|
|
|
:width="720"
|
|
|
:visible="show.addStaffShow"
|
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
|
@close="addStaffClose"
|
|
|
>
|
|
|
<div class="drawer-content">
|
|
|
<vue-form :type="type" ref="addform" @success="success" :editId='editId'></vue-form>
|
|
|
</div>
|
|
|
<div class="drawer-footer">
|
|
|
<a-button :style="{ marginRight: '8px' }" @click="addStaffClose">
|
|
|
关闭
|
|
|
</a-button>
|
|
|
<a-button type="primary" @click="addStaffSubmit"> 提交 </a-button>
|
|
|
</div>
|
|
|
</a-drawer>
|
|
|
<!-- 重置密码 -->
|
|
|
<a-drawer
|
|
|
title="重置密码"
|
|
|
:width="500"
|
|
|
:visible="show.resetPswShow"
|
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
|
@close="repswClose"
|
|
|
>
|
|
|
<div class="drawer-content">
|
|
|
<a-row>
|
|
|
<a-col :span="8">
|
|
|
新密码
|
|
|
</a-col>
|
|
|
<a-col :span="16">
|
|
|
<a-input style='width:90%' v-model="password.newPassword" type='password'/>
|
|
|
</a-col>
|
|
|
<a-col :span="8" style='margin-top:20px'>
|
|
|
确认密码
|
|
|
</a-col>
|
|
|
<a-col :span="16" style='margin-top:20px'>
|
|
|
<a-input style='width:90%' v-model="password.confirmpsw" type='password'/>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
<div class="drawer-footer">
|
|
|
<a-button :style="{ marginRight: '8px' }" @click="repswClose">
|
|
|
关闭
|
|
|
</a-button>
|
|
|
<a-button type="primary" @click="rePswSubmit"> 提交 </a-button>
|
|
|
</div>
|
|
|
</a-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { columns, pagination, searchForm } from "./depend/config.js";
|
|
|
import vueForm from "./depend/form.vue";
|
|
|
import {
|
|
|
departmentList,
|
|
|
departmentInsert,
|
|
|
departmentUpdate,
|
|
|
departmentDel,
|
|
|
findToUser,
|
|
|
rePassword,
|
|
|
userEnable
|
|
|
} from "@/api/basic/department";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
vueForm,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
columns,
|
|
|
pagination,
|
|
|
searchForm,
|
|
|
searchStr: "",
|
|
|
searchValue: "",
|
|
|
rules: {
|
|
|
type: [{ required: true, message: "请选择类型", trigger: "change" }],
|
|
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
|
|
},
|
|
|
cascVal: [],
|
|
|
typeOption: [
|
|
|
{
|
|
|
id: 1,
|
|
|
name: "公司/部门",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
name: "岗位",
|
|
|
},
|
|
|
],
|
|
|
form: {
|
|
|
parentId: 0,
|
|
|
type: null,
|
|
|
name: "",
|
|
|
},
|
|
|
editId:null,
|
|
|
password:{
|
|
|
id:null,
|
|
|
newPassword:'',
|
|
|
confirmpsw:''
|
|
|
},
|
|
|
choose: {
|
|
|
id: undefined,
|
|
|
},
|
|
|
show: {
|
|
|
addStaffShow: false,
|
|
|
addDepartment: false,
|
|
|
resetPswShow:false,
|
|
|
addStaffTitle:'添加员工信息',
|
|
|
depepartmentTitle: "",
|
|
|
},
|
|
|
expandedKeys: [],
|
|
|
autoExpandParent: true,
|
|
|
backupsExpandedKeys: [],
|
|
|
checkedKeys: [],
|
|
|
selectedKeys: [],
|
|
|
treeData: [],
|
|
|
// 数据
|
|
|
tableData: [],
|
|
|
// 分页
|
|
|
loading: false,
|
|
|
selectedRowKeys: [],
|
|
|
type: "add",
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
getData() {
|
|
|
departmentList().then((res) => {
|
|
|
this.treeData = res.data;
|
|
|
});
|
|
|
findToUser({
|
|
|
pageNum: this.pagination.current,
|
|
|
size: this.pagination.pageSize,
|
|
|
...this.searchForm
|
|
|
}).then((res) => {
|
|
|
this.tableData = res.data.rows;
|
|
|
this.pagination.total = res.data.total
|
|
|
});
|
|
|
},
|
|
|
openDepartment(type) {
|
|
|
if (type === 1) {
|
|
|
this.show.depepartmentTitle = "新增组织架构";
|
|
|
this.show.addDepartment = true;
|
|
|
} else {
|
|
|
if (this.choose.id !== undefined) {
|
|
|
this.show.depepartmentTitle = "修改组织架构";
|
|
|
this.show.addDepartment = true;
|
|
|
this.form.id = this.choose.id;
|
|
|
this.form.name = this.choose.name;
|
|
|
this.form.type = this.choose.type;
|
|
|
} else {
|
|
|
this.$message.error("请选择组织架构");
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 新增组织架构
|
|
|
handleOk() {
|
|
|
if (this.show.depepartmentTitle === "新增组织架构") {
|
|
|
departmentInsert(this.form).then((res) => {
|
|
|
if (res.code === 200) {
|
|
|
this.$message.success(res.msg);
|
|
|
this.getData();
|
|
|
this.handleCancel();
|
|
|
} else {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
departmentUpdate({
|
|
|
id: this.form.id,
|
|
|
type: this.form.type,
|
|
|
name: this.form.name,
|
|
|
}).then((res) => {
|
|
|
if (res.code === 200) {
|
|
|
this.$message.success(res.msg);
|
|
|
this.getData();
|
|
|
this.handleCancel();
|
|
|
} else {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
del() {
|
|
|
if (this.choose.id === undefined) {
|
|
|
this.$message.error("请选择组织架构");
|
|
|
} else {
|
|
|
this.$confirm({
|
|
|
title: "是否删除",
|
|
|
icon: "delete",
|
|
|
onOk: () => {
|
|
|
departmentDel({ id: this.choose.id, type: this.choose.type }).then(
|
|
|
(res) => {
|
|
|
if (res.code === 200) {
|
|
|
this.$message.success(res.msg);
|
|
|
this.getData();
|
|
|
} else {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
async enableUser(id){
|
|
|
const res = await userEnable({manageUserId:id})
|
|
|
if(res.code === 200){
|
|
|
this.$message.success(res.msg)
|
|
|
this.getData()
|
|
|
}else{
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
},
|
|
|
handleCancel() {
|
|
|
this.show.addDepartment = false;
|
|
|
this.$refs.ruleForm.resetFields();
|
|
|
this.cascVal = [];
|
|
|
},
|
|
|
success() {
|
|
|
this.addStaffClose();
|
|
|
this.getData();
|
|
|
},
|
|
|
reset(){
|
|
|
this.searchForm.keyword=''
|
|
|
this.getData();
|
|
|
},
|
|
|
// 新增员工
|
|
|
addStaff() {
|
|
|
this.type = 'add'
|
|
|
this.show.addStaffShow = true;
|
|
|
},
|
|
|
edit(row){
|
|
|
this.show.addStaffShow = true;
|
|
|
this.type = 'edit'
|
|
|
this.editId = row.id
|
|
|
this.show.addStaffTitle = "修改员工信息"
|
|
|
},
|
|
|
addStaffSubmit() {
|
|
|
this.$refs.addform.submit();
|
|
|
},
|
|
|
addStaffClose() {
|
|
|
this.editId =null
|
|
|
this.$refs.addform.close();
|
|
|
this.show.addStaffShow = false;
|
|
|
},
|
|
|
resetPsw(id){
|
|
|
this.show.resetPswShow = true
|
|
|
this.password.id = id
|
|
|
},
|
|
|
rePswSubmit() {
|
|
|
if(this.password.newPassword !== this.password.confirmpsw){
|
|
|
this.$message.error('两次输入密码不同')
|
|
|
return
|
|
|
}
|
|
|
rePassword(this.password).then(res=>{
|
|
|
if(res.code === 200){
|
|
|
this.$message.success(res.msg)
|
|
|
this.repswClose()
|
|
|
}else{
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
repswClose(){
|
|
|
this.show.resetPswShow = false
|
|
|
this.password = {
|
|
|
id:null,
|
|
|
newPassword:'',
|
|
|
confirmpsw:''
|
|
|
}
|
|
|
},
|
|
|
onExpand(expandedKeys) {
|
|
|
this.expandedKeys = expandedKeys;
|
|
|
this.autoExpandParent = false;
|
|
|
},
|
|
|
onCheck(checkedKeys) {
|
|
|
this.checkedKeys = checkedKeys;
|
|
|
},
|
|
|
onSelect(selectedKeys, info) {
|
|
|
this.selectedKeys = selectedKeys;
|
|
|
this.searchForm.departmentId = null
|
|
|
this.searchForm.positionId = null
|
|
|
|
|
|
if (info.selectedNodes.length !== 0) {
|
|
|
this.choose.id = info.selectedNodes[0].data.props.id;
|
|
|
this.choose.name = info.selectedNodes[0].data.props.name;
|
|
|
this.choose.type = info.selectedNodes[0].data.props.type;
|
|
|
if(this.choose.type === 1){
|
|
|
this.searchForm.departmentId = this.choose.id
|
|
|
this.getData()
|
|
|
}else if(this.choose.type === 2){
|
|
|
this.searchForm.positionId = this.choose.id
|
|
|
this.getData()
|
|
|
}
|
|
|
} else {
|
|
|
this.choose = {};
|
|
|
this.getData()
|
|
|
}
|
|
|
},
|
|
|
detail() {
|
|
|
this.$router.push({ name: "settle_detail" });
|
|
|
},
|
|
|
// 表格selection
|
|
|
onSelectChange(selectedRowKeys) {
|
|
|
this.selectedRowKeys = selectedRowKeys;
|
|
|
},
|
|
|
handleTableChange(pagination) {
|
|
|
const pager = { ...this.pagination };
|
|
|
pager.current = pagination.current;
|
|
|
pager.pageSize = pagination.pageSize;
|
|
|
this.pagination = pager;
|
|
|
this.getData();
|
|
|
},
|
|
|
// 级联选择上级
|
|
|
onChange(data) {
|
|
|
let thatId = data.slice(-1);
|
|
|
this.form.parentId = thatId[0];
|
|
|
},
|
|
|
onSearch() {
|
|
|
var vm = this;
|
|
|
//添加这行代码是为了只点击搜索才触发
|
|
|
vm.searchValue = vm.searchStr;
|
|
|
//如果搜索值为空，则不展开任何项，expandedKeys置为空
|
|
|
//如果搜索值不位空，则expandedKeys的值要为搜索值的父亲及其所有祖先
|
|
|
if (vm.searchValue === "") {
|
|
|
vm.expandedKeys = [];
|
|
|
} else {
|
|
|
//首先将展开项与展开项副本置为空
|
|
|
vm.expandedKeys = [];
|
|
|
vm.backupsExpandedKeys = [];
|
|
|
//获取所有存在searchValue的节点
|
|
|
let candidateKeysList = vm.getkeyList(vm.searchValue, vm.treeData, []);
|
|
|
//遍历满足条件的所有节点
|
|
|
candidateKeysList.map((item) => {
|
|
|
//获取每个节点的母亲节点
|
|
|
var key = vm.getParentKey(item, vm.treeData);
|
|
|
//当item是最高一级，父key为undefined，将不放入到数组中
|
|
|
//如果母亲已存在于数组中，也不放入到数组中
|
|
|
if (key && !vm.backupsExpandedKeys.some((item) => item === key))
|
|
|
vm.backupsExpandedKeys.push(key);
|
|
|
});
|
|
|
let length = this.backupsExpandedKeys.length;
|
|
|
for (let i = 0; i < length; i++) {
|
|
|
vm.getAllParentKey(vm.backupsExpandedKeys[i], vm.treeData);
|
|
|
}
|
|
|
vm.expandedKeys = vm.backupsExpandedKeys.slice();
|
|
|
}
|
|
|
},
|
|
|
//获取节点中含有value的所有key集合
|
|
|
getkeyList(value, tree, keyList) {
|
|
|
//遍历所有同一级的树
|
|
|
for (let i = 0; i < tree.length; i++) {
|
|
|
let node = tree[i];
|
|
|
//如果该节点存在value值则push
|
|
|
if (node.name.indexOf(value) > -1) {
|
|
|
keyList.push(node.key);
|
|
|
}
|
|
|
//如果拥有孩子继续遍历
|
|
|
if (node.childList) {
|
|
|
this.getkeyList(value, node.childList, keyList);
|
|
|
}
|
|
|
}
|
|
|
//因为是引用类型，所有每次递归操作的都是同一个数组
|
|
|
return keyList;
|
|
|
},
|
|
|
//该递归主要用于获取key的父亲节点的key值
|
|
|
getParentKey(key, tree) {
|
|
|
let parentKey, temp;
|
|
|
//遍历同级节点
|
|
|
for (let i = 0; i < tree.length; i++) {
|
|
|
const node = tree[i];
|
|
|
if (node.childList) {
|
|
|
//如果该节点的孩子中存在该key值，则该节点就是我们要找的父亲节点
|
|
|
//如果不存在，继续遍历其子节点
|
|
|
if (node.childList.some((item) => item.key === key)) {
|
|
|
parentKey = node.key;
|
|
|
} else if ((temp = this.getParentKey(key, node.childList))) {
|
|
|
//parentKey = this.getParentKey(key,node.children)
|
|
|
//改进，避免二次遍历
|
|
|
parentKey = temp;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return parentKey;
|
|
|
},
|
|
|
//获取该节点的所有祖先节点
|
|
|
getAllParentKey(key, tree) {
|
|
|
var parentKey;
|
|
|
if (key) {
|
|
|
//获得父亲节点
|
|
|
parentKey = this.getParentKey(key, tree);
|
|
|
if (parentKey) {
|
|
|
//如果父亲节点存在，判断是否已经存在于展开列表里，不存在就进行push
|
|
|
if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
|
|
|
this.backupsExpandedKeys.push(parentKey);
|
|
|
}
|
|
|
//继续向上查找祖先节点
|
|
|
this.getAllParentKey(parentKey, tree);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
hasSelected() {
|
|
|
return this.selectedRowKeys.length > 0;
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
checkedKeys(val) {
|
|
|
console.log("onCheck", val);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.left-tree {
|
|
|
padding: 10px;
|
|
|
border-right: 1px solid #0000000f;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
#commonTable {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
</style> |
