mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-14 14:43:48 +08:00
573 lines
16 KiB
Vue
573 lines
16 KiB
Vue
<template>
|
|
|
|
<Col :lg="19" :md="16">
|
|
<Card class="warp-card" dis-hover>
|
|
<!--Row 顶部操作区 start-->
|
|
<Row justify="space-between" type="flex">
|
|
<Col>
|
|
<Input
|
|
@on-change="searchEmployees"
|
|
icon="md-search"
|
|
placeholder="请输入姓名搜搜..."
|
|
style="width: 200px"
|
|
v-model="searchEmployeeName"
|
|
/>
|
|
<Button
|
|
@click="showAddEmployeeModal"
|
|
icon="md-add"
|
|
style="margin-left: 5px;"
|
|
type="primary"
|
|
v-privilege="'add-employee'"
|
|
>添加成员</Button>
|
|
</Col>
|
|
<Col>
|
|
<Button
|
|
@click="queryEmployeeListByIsDisabled(1)"
|
|
type="default"
|
|
v-privilege="'search-department'"
|
|
v-show="!currentDisabled"
|
|
>查看已禁用用户</Button>
|
|
<Button
|
|
@click="queryEmployeeListByIsDisabled(0)"
|
|
type="default"
|
|
v-privilege="'search-department'"
|
|
v-show="currentDisabled"
|
|
>查看已启用用户</Button>
|
|
<Button
|
|
@click="GroupDisable(1)"
|
|
style="margin-left:5px"
|
|
type="error"
|
|
v-privilege="'disabled-employee-batch'"
|
|
v-show="!currentDisabled"
|
|
>批量禁用</Button>
|
|
<Button
|
|
@click="GroupDisable(0)"
|
|
style="margin-left:5px"
|
|
type="success"
|
|
v-privilege="'disabled-employee-batch'"
|
|
v-show="currentDisabled"
|
|
>批量启用</Button>
|
|
</Col>
|
|
</Row>
|
|
<!--Row 顶部操作区 end-->
|
|
<!--Row 表格区 start-->
|
|
<Row style="padding-top:10px; ">
|
|
<Table
|
|
:columns="columns"
|
|
:data="employeeTable"
|
|
:loading="isShowTablesLoading"
|
|
@on-selection-change="singleSelect"
|
|
border
|
|
></Table>
|
|
</Row>
|
|
<!--Row 表格区 end-->
|
|
<!--Row 底部操作区 start-->
|
|
<Row class="page" justify="end" style="position: relative;margin-top: 10px;" type="flex">
|
|
<Page
|
|
:current="pageNum"
|
|
:page-size="pageSize"
|
|
:total="totalPage"
|
|
@on-change="changePage"
|
|
show-elevator
|
|
></Page>
|
|
</Row>
|
|
<!--Row 底部操作区 end-->
|
|
</Card>
|
|
|
|
<!--EmployeeTableAdd 添加成员弹窗 start-->
|
|
<EmployeeTableAdd
|
|
:selectDepartment="selectDepartment"
|
|
@addSuccess="getEmployeeList"
|
|
ref="employeeTableAdd"
|
|
></EmployeeTableAdd>
|
|
<!--EmployeeTableAdd 添加成员弹窗 end-->
|
|
<!--Modal 角色管理弹窗 start-->
|
|
<Modal
|
|
@on-ok="confirmAddRole"
|
|
class-name="vertical-center-modal"
|
|
title="角色管理"
|
|
v-model="isShowManageRoleModal"
|
|
>
|
|
<CheckboxGroup v-model="employeeRole">
|
|
<Checkbox
|
|
:key="roleItem.id"
|
|
:label="roleItem.id"
|
|
style="width:104px;line-height:40px;"
|
|
v-for="roleItem in roleList"
|
|
>{{roleItem.roleName}}</Checkbox>
|
|
</CheckboxGroup>
|
|
</Modal>
|
|
<!--Modal 角色管理弹窗 end-->
|
|
<!--EmployeeTableDetail 角色详情 start-->
|
|
<EmployeeTableDetail ref="employeeTableDetail"></EmployeeTableDetail>
|
|
<!--EmployeeTableDetail 角色详情 end-->
|
|
|
|
</Col>
|
|
|
|
|
|
</template>
|
|
<script>
|
|
import { departmentApi } from '@/api/department';
|
|
import { employeeApi } from '@/api/employee';
|
|
import { roleApi } from '@/api/role';
|
|
import { utils } from '@/lib/util';
|
|
import EmployeeTableAdd from '../employee-table-add/employee-table-add.vue';
|
|
import EmployeeTableDetail from '../employee-table-detail/employee-table-detail.vue';
|
|
export default {
|
|
name: 'EmployeeTable',
|
|
components: {
|
|
EmployeeTableAdd,
|
|
EmployeeTableDetail
|
|
},
|
|
props: {
|
|
// 选中的部门
|
|
selectDepartment: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
// 表格样式 按钮功能
|
|
departments: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
employeeRole: [],
|
|
// 员工id
|
|
mid: '',
|
|
totalPage: 0,
|
|
pageSize: 20,
|
|
pageNum: 1,
|
|
isShowManageRoleModal: false,
|
|
isShowTablesLoading: false,
|
|
// 搜索框内容
|
|
searchEmployeeName: '',
|
|
columns: [
|
|
{
|
|
type: 'selection',
|
|
width: 60,
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: 'ID',
|
|
width: 60,
|
|
key: 'id'
|
|
},
|
|
{
|
|
key: 'actualName',
|
|
width: 200,
|
|
title: '名称',
|
|
align: 'left'
|
|
},
|
|
{
|
|
key: 'loginName',
|
|
title: '登录名',
|
|
width: 200,
|
|
align: 'left'
|
|
},
|
|
{
|
|
key: 'isDisabled',
|
|
width: 80,
|
|
title: '状态',
|
|
align: 'left',
|
|
render: (h, params) => {
|
|
let disabled = params.row.isDisabled;
|
|
return h('span', disabled ? '禁用' : '启用');
|
|
}
|
|
},
|
|
{
|
|
key: 'phone',
|
|
width: 120,
|
|
title: '手机',
|
|
align: 'left'
|
|
},
|
|
{
|
|
key: 'departmentName',
|
|
width: 180,
|
|
title: '所属部门',
|
|
align: 'left'
|
|
},
|
|
{
|
|
key: 'positionName',
|
|
width: 180,
|
|
title: '岗位',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
tooltip: true
|
|
},
|
|
{
|
|
key: 'email',
|
|
width: 180,
|
|
title: '电子邮箱',
|
|
align: 'left'
|
|
},
|
|
|
|
{
|
|
key: 'createTime',
|
|
width: 180,
|
|
title: '创建时间',
|
|
align: 'left'
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 160,
|
|
fixed: 'right',
|
|
align: 'center',
|
|
className: 'action-hide',
|
|
render: (h, params) => {
|
|
let btnGroup = [];
|
|
let isSuper = params.row.super;
|
|
if (!isSuper) {
|
|
btnGroup.push({
|
|
title: '角色设置',
|
|
directives: [
|
|
{
|
|
name: 'privilege',
|
|
value: 'update-employee-role'
|
|
}
|
|
],
|
|
action: () => {
|
|
this.showManageRoleModal(h, params);
|
|
}
|
|
});
|
|
}
|
|
btnGroup.push({
|
|
title: '详情',
|
|
action: () => {
|
|
this.$refs['employeeTableDetail'].showModal(params.row);
|
|
}
|
|
});
|
|
if (params.row.isDisabled == 0 && !isSuper) {
|
|
btnGroup.push({
|
|
title: '编辑',
|
|
directives: [
|
|
{
|
|
name: 'privilege',
|
|
value: 'update-employee'
|
|
}
|
|
],
|
|
action: () => {
|
|
this.updataEmployee(params.row);
|
|
}
|
|
});
|
|
}
|
|
if (!isSuper) {
|
|
let isDisableBtn;
|
|
if (params.row.isDisabled == 0) {
|
|
isDisableBtn = {
|
|
title: '禁用',
|
|
directives: [
|
|
{
|
|
name: 'privilege',
|
|
value: 'disabled-employee'
|
|
}
|
|
],
|
|
action: () => {
|
|
this.updateEmployeeStatus(h, params);
|
|
}
|
|
};
|
|
} else {
|
|
isDisableBtn = {
|
|
title: '启用',
|
|
directives: [
|
|
{
|
|
name: 'privilege',
|
|
value: 'disabled-employee'
|
|
}
|
|
],
|
|
action: () => {
|
|
this.updateEmployeeStatus(h, params);
|
|
}
|
|
};
|
|
}
|
|
btnGroup.push(isDisableBtn);
|
|
}
|
|
if (!isSuper) {
|
|
btnGroup.push({
|
|
title: '密码重置',
|
|
directives: [
|
|
{
|
|
name: 'privilege',
|
|
value: 'reset-employee-password'
|
|
}
|
|
],
|
|
action: () => {
|
|
this.$Modal.confirm({
|
|
title: '重置密码',
|
|
content: '是否将密码重置为123456',
|
|
onOk: () => {
|
|
this.resetPassword(params.row.id);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
if (params.row.isDisabled == 1 && !isSuper) {
|
|
btnGroup.push({
|
|
title: '删除',
|
|
directives: [
|
|
{
|
|
name: 'privilege',
|
|
value: 'delete-employee'
|
|
}
|
|
],
|
|
action: () => {
|
|
this.$Modal.confirm({
|
|
title: '删除',
|
|
content: '确认删除？',
|
|
onOk: () => {
|
|
this.deleteEmployee(params.row.id);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
// return h('div', btnGroup)
|
|
return this.$tableAction(h, btnGroup);
|
|
}
|
|
}
|
|
],
|
|
// 表格数据
|
|
employeeTable: [],
|
|
disableId: [],
|
|
currentDisabled: 0,
|
|
roleList: []
|
|
};
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
selectDepartment(newData) {
|
|
this.selectDepartment = newData;
|
|
this.pageNum = 1;
|
|
this.getEmployeeList();
|
|
}
|
|
},
|
|
filters: {},
|
|
created() {},
|
|
mounted() {
|
|
this.getEmployeeList();
|
|
},
|
|
beforeCreate() {},
|
|
beforeMount() {},
|
|
beforeUpdate() {},
|
|
updated() {},
|
|
beforeDestroy() {},
|
|
destroyed() {},
|
|
activated() {},
|
|
methods: {
|
|
// 翻页
|
|
changePage(pageNum) {
|
|
this.pageNum = pageNum;
|
|
this.getEmployeeList();
|
|
},
|
|
// 根据部门ID查询部门员工
|
|
async getEmployeeList() {
|
|
let param = {
|
|
isDisabled: this.currentDisabled,
|
|
pageSize: this.pageSize,
|
|
pageNum: this.pageNum
|
|
};
|
|
param.departmentId = this.selectDepartment.id;
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
param.keyword = this.searchEmployeeName;
|
|
let result = await employeeApi.getEmployeeList(param);
|
|
this.totalPage = result.data.total;
|
|
this.employeeTable = result.data.list;
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
} finally {
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
},
|
|
// 打开子组件的模态框
|
|
showAddEmployeeModal() {
|
|
this.$refs.employeeTableAdd.showModal();
|
|
},
|
|
// 根据是否启用查询成员
|
|
queryEmployeeListByIsDisabled(type) {
|
|
this.currentDisabled = type;
|
|
this.pageNum = 1;
|
|
this.getEmployeeList();
|
|
},
|
|
// 确定添加角色
|
|
async confirmAddRole() {
|
|
let roleList = this.employeeRole;
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
let result = await employeeApi.updateRoles(
|
|
Object.assign({
|
|
employeeId: this.mid,
|
|
roleIds: roleList
|
|
})
|
|
);
|
|
this.isShowTablesLoading = false;
|
|
this.$Message.success('授权成功');
|
|
this.getEmployeeList();
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
},
|
|
// 确认添加角色的后台数据接口
|
|
async getRoles(id) {
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
let result = await roleApi.getRoles(id);
|
|
this.isShowTablesLoading = false;
|
|
this.roleList = result.data;
|
|
this.employeeRole = [];
|
|
this.roleList.forEach(item => {
|
|
if (item.selected) {
|
|
this.employeeRole.push(item.id);
|
|
}
|
|
});
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
},
|
|
// 点击打开员工角色选择框
|
|
showManageRoleModal(h, param) {
|
|
this.mid = param.row.id;
|
|
this.isShowManageRoleModal = true;
|
|
this.getRoles(param.row.id);
|
|
},
|
|
// 修改员工信息
|
|
updataEmployee(detail) {
|
|
if (this.departments[0].id == detail.departmentId) {
|
|
detail.departmentName = this.departments[0].name;
|
|
} else {
|
|
this.departments[0].children.forEach(item => {
|
|
if (item.id == detail.departmentId) {
|
|
detail.departmentName = item.name;
|
|
}
|
|
});
|
|
}
|
|
if (detail.birthday) {
|
|
detail.birthday = utils.getDate(new Date(detail.birthday), 'YMD');
|
|
}
|
|
this.$refs.employeeTableAdd.showModal(detail);
|
|
},
|
|
// 点击搜索
|
|
searchEmployees() {
|
|
this.pageNum = 1;
|
|
this.queryEmployeeListByIsDisabled(0);
|
|
},
|
|
// 表格左侧复选框，点击保存选中栏信息
|
|
singleSelect(row) {
|
|
this.disableId = row;
|
|
},
|
|
// 批量禁用
|
|
GroupDisable(type) {
|
|
if (this.disableId.length == 0) {
|
|
this.$Message.error('请最少选择一项');
|
|
return false;
|
|
} else {
|
|
this.currentDisabled = type;
|
|
let disableIds = this.disableId.map(e => e.id);
|
|
this.updateStatusBatch(
|
|
Object.assign({ status: type, employeeIds: disableIds })
|
|
);
|
|
}
|
|
},
|
|
// 禁用/启用单个用户
|
|
async updateEmployeeStatus(h, params) {
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
let employeeId = params.row.id;
|
|
let status = 0;
|
|
if (params.row.isDisabled == 0) {
|
|
status = 1;
|
|
this.queryEmployeeListByIsDisabled(0);
|
|
} else {
|
|
status = 0;
|
|
this.queryEmployeeListByIsDisabled(1);
|
|
}
|
|
let result = await employeeApi.updateStatus(employeeId, status);
|
|
this.isShowTablesLoading = false;
|
|
if (status) {
|
|
this.$Message.success('禁用成功');
|
|
this.getEmployeeList();
|
|
} else {
|
|
this.$Message.success('启用成功');
|
|
this.queryEmployeeListByIsDisabled(1);
|
|
}
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
},
|
|
// 批量禁用多个用户
|
|
async updateStatusBatch(param) {
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
let result = await employeeApi.updateStatusBatch(param);
|
|
this.isShowTablesLoading = false;
|
|
this.$Message.success('操作成功');
|
|
this.disableId = [];
|
|
this.queryEmployeeListByIsDisabled(this.currentDisabled);
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
},
|
|
// 重置密码
|
|
async resetPassword(id) {
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
let result = await employeeApi.resetPassword(id);
|
|
this.isShowTablesLoading = false;
|
|
this.$Message.success('操作成功');
|
|
|
|
this.queryEmployeeListByIsDisabled(this.currentDisabled);
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
},
|
|
// 删除成员
|
|
async deleteEmployee(id) {
|
|
try {
|
|
this.isShowTablesLoading = true;
|
|
let result = await employeeApi.deleteEmployee(id);
|
|
this.isShowTablesLoading = false;
|
|
this.$Message.success('操作成功');
|
|
this.queryEmployeeListByIsDisabled(this.currentDisabled);
|
|
} catch (e) {
|
|
//TODO zhuoda sentry
|
|
console.error(e);
|
|
this.isShowTablesLoading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.ivu-tree-children {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.option-department {
|
|
font-size: 14px;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.searchable-table-con1 {
|
|
min-height: 350px !important;
|
|
}
|
|
|
|
.option-department:hover {
|
|
background-color: rgba(5, 170, 250, 0.2);
|
|
}
|
|
</style>
|