<template>
|
<basic-container>
|
<avue-crud
|
ref="userCrud"
|
:data="tableData"
|
:option="option"
|
:page.sync="page"
|
:table-loading="tableLoading"
|
@on-load="getTableList"
|
@refresh-change="handleRefresh"
|
@search-change="handleSearch"
|
@search-reset="handleReset"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler"
|
@row-save="rowSaveHandler"
|
@row-update="rowUpdateHandler"
|
>
|
<template slot="status" slot-scope="{row}">
|
<el-tag v-if="row.status === 0" type="success">启用</el-tag>
|
<el-tag v-if="row.status === 1" type="danger">停用</el-tag>
|
</template>
|
|
<template slot="lockFlag" slot-scope="{row}">
|
<el-tag v-if="!row.lockFlag" type="success">未锁定</el-tag>
|
<el-tag v-if="row.lockFlag" type="danger">锁定</el-tag>
|
</template>
|
|
<template #menu="{row,index,size}">
|
<el-button v-if="permissionList.editBtn" size="small" type="text"
|
@click.stop="rowEditHandler(row,index)">
|
<icon-show :name="permissionList.editBtn.source"></icon-show>
|
编辑
|
</el-button>
|
<el-button v-if="permissionList.delBtn" size="small" type="text"
|
@click.stop="rowDeleteHandler(row)">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
<el-button size="small" type="text" @click.stop="stopUserHandler(row)">
|
<span v-if="row.status === 0 && permissionList.stopBtn" style="color: #fa3434;display: flex">
|
<icon-show :name="permissionList.stopBtn.source"></icon-show>
|
停用
|
</span>
|
<span v-if="row.status === 1 && permissionList.actionBtn" style="color: #55b61d;display: flex">
|
<icon-show :name="permissionList.actionBtn.source"></icon-show>
|
启用
|
</span>
|
</el-button>
|
</template>
|
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button v-if="permissionList.addBtn" class="button-custom-icon" size="small" type="primary"
|
@click="$refs.userCrud.rowAdd()">
|
<icon-show :name="permissionList.addBtn.source"></icon-show>
|
新 增
|
</el-button>
|
<el-button v-if="permissionList.delBtn" class="button-custom-icon" plain size="small" type="danger"
|
@click="allDelHandler">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
<el-button v-if="permissionList.assigningRolesBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="roleHandler">
|
<icon-show :name="permissionList.assigningRolesBtn.source"></icon-show>
|
分配角色
|
</el-button>
|
<el-button v-if="permissionList.distributionDepartmentBtn" class="button-custom-icon" plain size="small"
|
type="primary" @click="departmentHandler">
|
<icon-show :name="permissionList.distributionDepartmentBtn.source"></icon-show>
|
分配部门
|
</el-button>
|
<el-button v-if="permissionList.setPasswordPolicyBtn" class="button-custom-icon" plain size="small"
|
type="success"
|
@click="setPwsHandler">
|
<icon-show :name="permissionList.setPasswordPolicyBtn.source"></icon-show>
|
设置密码策略
|
</el-button>
|
<el-button v-if="permissionList.importPersonnelBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="uploadUser">
|
<icon-show :name="permissionList.importPersonnelBtn.source"></icon-show>
|
导入人员
|
</el-button>
|
<el-button v-if="permissionList.downloadImportTemplateBtn" class="button-custom-icon" plain size="small"
|
type="primary" @click="downloadHandler">
|
<icon-show :name="permissionList.downloadImportTemplateBtn.source"></icon-show>
|
下载导入模板
|
</el-button>
|
</template>
|
</avue-crud>
|
|
<!-- 分配角色穿梭框 -->
|
<transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
|
:transferTitle="transferTitle" title="分配角色"
|
@transferSend="roleSendHandler">
|
</transfer>
|
|
<!-- 设置密码策略对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="pwdLoading"
|
:visible.sync="pwdVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
style="margin-top: -15vh !important;"
|
title="设置密码策略"
|
width="500px"
|
>
|
<div class="password-strategy-container">
|
<div style="width:115px;"><i class="el-icon-setting"/>设置密码策略：</div>
|
<el-select v-model="pwdValue" placeholder="请选择密码策略" style="width: 330px;">
|
<el-option v-for="(item,index) in pwdList" :key="index" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="savePwdHandler">确 定</el-button>
|
<el-button size="small" @click="pwdVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 导入人员 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入人员"
|
@updata="getTableList"></upload-file>
|
|
<!-- 分配部门对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="departLoading"
|
:visible.sync="departVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="分配部门"
|
width="50%"
|
>
|
<avue-crud
|
ref="departCrud"
|
:data="departData"
|
:option="departOption"
|
@current-row-change="handleCurrentRowChange"
|
>
|
</avue-crud>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="saveDepartHandler">确 定</el-button>
|
<el-button size="small" @click="departVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</basic-container>
|
</template>
|
|
<script>
|
import basicOption from '@/util/basic-option'
|
import {
|
getDataUsers,
|
stopUser,
|
gridRoles,
|
listRoleByUserOid,
|
saveRights,
|
addUser,
|
updateUser,
|
deleteUser,
|
selectPwdStrategyMap,
|
saveUserPasswordStrateg,
|
download,
|
departmentQueryController,
|
saveUsersDepts
|
} from '@/api/system/user/api'
|
import {column} from "./option"
|
import func from '@/util/func'
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "userManage",
|
data: function () {
|
return {
|
departSearchObj: {},
|
departSearchValue: '',
|
loadKey: 0,
|
departStatus: '', // 区分不同方式打开部门对话框
|
departCurrenRow: {},
|
departOption: {
|
...basicOption,
|
addBtn: false,
|
rowKey: 'oid',
|
rowParentKey: 'parentId',
|
selection: false,
|
highlightCurrentRow: true,
|
stripe: false,
|
menu: false,
|
refreshBtn: false,
|
gridBtn: false,
|
header: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
align: 'left'
|
},
|
{
|
label: '编号',
|
prop: 'id',
|
},
|
{
|
label: '描述',
|
prop: 'description',
|
},
|
]
|
},
|
departData: [],
|
departLoading: false,
|
departVisible: false,
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/userQueryController/importUser',
|
pwdVisible: false,
|
pwdLoading: false,
|
pwdValue: '',
|
pwdList: [],
|
tableLoading: false,
|
tableData: [],
|
page: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizes: [10, 30, 50, 100],
|
},
|
searchParams: {},
|
selectList: [],
|
leftRoleData: [], // 分配角色穿梭框左侧初始数据
|
rightRoleData: [], // 分配角色穿梭框右侧初始数据
|
transferTitle: ['现有角色', '拥有角色'],
|
tipList: ["导入模板中标明红色字体的为必输项", "部门列上下级关系必须按照反斜杠隔开(/)"],
|
lastIndex: null,
|
}
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
assigningRolesBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
|
distributionDepartmentBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
|
downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false),
|
importPersonnelBtn: this.vaildData(this.permission[this.$route.query.id].CLSRIGHT, false),
|
setPasswordPolicyBtn: this.vaildData(this.permission[this.$route.query.id].RIGHT, false),
|
stopBtn: this.vaildData(this.permission[this.$route.query.id].UNFREZE, false),
|
actionBtn: this.vaildData(this.permission[this.$route.query.id].RECYCLE, false),
|
};
|
},
|
option() {
|
return {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
dialogWidth: '50%',
|
calcHeight: -60,
|
column: column
|
}
|
}
|
},
|
methods: {
|
// 表格请求
|
getTableList() {
|
this.tableLoading = true;
|
getDataUsers(this.page.currentPage, this.page.pageSize, this.searchParams).then(res => {
|
const data = res.data.data;
|
data.map(item => {
|
item.secretGrade = item.secretGrade.toString()
|
})
|
this.tableData = data;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
s
|
})
|
this.departmentQueryOnLoad()
|
},
|
|
// 表格右侧刷新图标
|
handleRefresh() {
|
this.getTableList();
|
},
|
|
// 搜索查询
|
handleSearch(params, done) {
|
this.searchParams = {};
|
if (!func.isEmptyObject(params)) {
|
for (let key in params) {
|
if (params.hasOwnProperty(key)) {
|
// 判断如果 key 是 'pkPersonName'，则改为 'pkPerson' 分别为显示值和保存值
|
let newKey = key === 'pkPersonName' ? 'pkPerson' : key;
|
this.searchParams[`conditionMap["${newKey}"]`] = params[key];
|
}
|
}
|
}
|
|
if (func.isEmptyObject(params)) {
|
this.searchParams = {};
|
}
|
|
this.getTableList();
|
done();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
this.searchParams = {};
|
this.getTableList();
|
},
|
|
// 条数
|
sizeChange(val) {
|
this.page.pageSize = val;
|
},
|
|
// 页码
|
currentChange(val) {
|
this.page.currentPage = val;
|
},
|
|
// 停用启用
|
stopUserHandler(row) {
|
let params = {};
|
params = {
|
ids: row.oid,
|
flag: row.status === 0 ? true : false
|
}
|
stopUser(params).then(res => {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
});
|
},
|
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 点击行
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.userCrud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [row];
|
}
|
);
|
},
|
|
// 分配角色
|
roleHandler() {
|
if (this.selectList.length > 1) {
|
this.$message.warning('只能选择一条数据进行分配！');
|
return;
|
}
|
|
if (this.selectList.length < 1) {
|
this.$message.warning('至少选择一条数据进行分配！');
|
return;
|
}
|
this.leftRoleData = [];
|
this.rightRoleData = [];
|
const userOid = this.selectList[0].oid;
|
gridRoles(1, -1).then(res => {
|
this.leftRoleData = res.data.data;
|
listRoleByUserOid(userOid).then(res => {
|
this.rightRoleData = res.data.data.map(item => item.oid);
|
})
|
});
|
this.$refs.transfer.visible = true;
|
},
|
|
// 穿梭框组件回填
|
roleSendHandler(row) {
|
let params = {
|
userOids: this.selectList[0].oid,
|
roleIds: row.join(',')
|
}
|
saveRights(params).then(res => {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
});
|
},
|
|
// 设置密码策略
|
setPwsHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('清先选择人员再进行操作！')
|
return;
|
}
|
this.pwdLoading = false;
|
selectPwdStrategyMap().then(res => {
|
if (res.data.code === 200) {
|
this.pwdList = res.data.data;
|
this.pwdValue = res.data.data[0].id;
|
console.log(res.data)
|
this.pwdVisible = true;
|
this.pwdLoading = false;
|
} else {
|
this.$message.error(res.data.msg);
|
}
|
})
|
},
|
|
// 保存密码策略
|
savePwdHandler() {
|
let params = {
|
userIds: this.selectList.map(item => item.oid).join(','),
|
passwordStrategId: this.pwdValue
|
}
|
saveUserPasswordStrateg(params).then(res => {
|
this.pwdVisible = false;
|
this.$message.success(res.data.obj)
|
});
|
},
|
|
// 新增
|
rowSaveHandler(row, done, loading) {
|
if (row.password != row.confirmPassword) {
|
this.$message.error('请检查两次密码是否输入一致！')
|
return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
|
}
|
addUser(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done();
|
}
|
}).catch(err => {
|
loading()
|
})
|
},
|
|
// 操作栏编辑
|
rowEditHandler(row, index) {
|
this.$refs.userCrud.rowEdit(row, index);
|
},
|
|
// 编辑
|
rowUpdateHandler(row, index, done, loading) {
|
if (row.password != row.confirmPassword) {
|
this.$message.error('请检查两次密码是否输入一致！')
|
return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
|
}
|
updateUser(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done()
|
}
|
}).catch(err => {
|
loading()
|
});
|
},
|
|
// 删除
|
rowDeleteHandler(row) {
|
let params = {
|
ids: row.oid
|
}
|
|
this.$confirm('您确定要删除当前的成员吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteUser(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 多选删除
|
allDelHandler() {
|
let params = {
|
ids: this.selectList.map(item => item.oid).join(',')
|
}
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请至少选择一条数据进行删除！')
|
return;
|
}
|
this.$confirm('您确定要删除所选择的成员吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteUser(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 下载导入模板
|
downloadHandler() {
|
download().then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('下载成功');
|
})
|
},
|
|
// 导入人员
|
uploadUser() {
|
this.$refs.upload.visible = true;
|
},
|
|
// 分配部门
|
departmentHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('清先选择人员再进行操作！');
|
return;
|
}
|
this.departStatus = 'default'; // 区分不同方式打开部门对话框
|
this.departVisible = true;
|
},
|
|
// 分配部门表格初始化请求
|
departmentQueryOnLoad() {
|
departmentQueryController({queryAllLevel: true}).then(res => {
|
const data = res.data.treeData;
|
this.departData = this.departDtaFormAtter(data);
|
this.option.column[7].dicData = [{
|
oid: 'ALLDept',
|
name: '所有部门',
|
expand: true,
|
disabled: true,
|
children: this.departData
|
}]
|
this.option.column[7].defaultExpandedKeys = ['ALLDept'];
|
});
|
},
|
|
// 分配部门数据转换
|
departDtaFormAtter(items) {
|
return items.map(item => {
|
// 转换当前节点的属性
|
const formList = {
|
oid: item.oid,
|
id: item.attributes.id,
|
name: item.attributes.name,
|
description: item.attributes.description,
|
parentId: item.parentId,
|
parentName: item.parentName,
|
parentBtmName: item.parentBtmName,
|
// 如果children存在且不为空，则递归转换children
|
children: item.children && item.children.length > 0 ? this.departDtaFormAtter(item.children) : undefined
|
};
|
return formList;
|
});
|
},
|
|
// 分配部门 行单选
|
handleCurrentRowChange(row) {
|
this.departCurrenRow = row;
|
},
|
|
// 分配部门 保存
|
saveDepartHandler() {
|
if (func.isEmptyObject(this.departCurrenRow)) {
|
this.$message.warning('请选择部门节点！')
|
return;
|
}
|
|
//分配部门
|
if (this.departStatus == 'default') {
|
let params = {
|
userOIds: this.selectList.map(item => item.oid).join(','),
|
deptId: this.departCurrenRow.oid,
|
};
|
saveUsersDepts(params).then(res => {
|
if (res.data.code === 200) {
|
this.departVisible = false;
|
this.getTableList();
|
this.$message.success('分配成功！')
|
}
|
})
|
return;
|
}
|
},
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.password-strategy-container {
|
margin-bottom: 20px;
|
display: flex;
|
//justify-content: center;
|
align-items: center;
|
gap: 10px;
|
}
|
|
</style>
|
