<template>
|
<basic-container>
|
<avue-crud
|
ref="userCrud"
|
:before-open="beforeOpen"
|
: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-scope="{disabled,size}" slot="pkDepartmentNameSearch">
|
<div style="display: flex;gap: 5px">
|
<el-select v-model="departSearchValue" clearable placeholder="请选择部门">
|
<el-option :label="departSearchObj.name" :value="departSearchObj.oid"></el-option>
|
</el-select>
|
<el-button size="small" type="success" @click="dialogDepartSearchHandler">选择部门</el-button>
|
</div>
|
</template>
|
|
<!-- 对话框部门插槽 -->
|
<template slot="pkDepartmentNameForm" slot-scope="scope">
|
<div style="display: flex;gap: 5px">
|
<el-select v-model="departValue" clearable placeholder="请选择部门">
|
<el-option :label="departObj.name" :value="departObj.oid"></el-option>
|
</el-select>
|
<el-button size="small" type="success" @click="dialogDepartHandler">选择部门</el-button>
|
</div>
|
</template>
|
|
<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 icon="el-icon-edit" size="small" type="text" @click.stop="rowEditHandler(row,index)">编辑</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" @click.stop="rowDeleteHandler(row)">删除</el-button>
|
<el-button size="small" type="text" @click.stop="stopUserHandler(row)">
|
<span v-if="row.status === 0" style="color: #fa3434"><i class="el-icon-video-pause"></i> 停用</span>
|
<span v-if="row.status === 1" style="color: #55b61d"><i class="el-icon-video-pause"></i> 启用</span>
|
</el-button>
|
</template>
|
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="allDelHandler">删除</el-button>
|
<el-button icon="el-icon-user" plain size="small" type="primary" @click="roleHandler">分配角色</el-button>
|
<el-button icon="el-icon-school" plain size="small" type="primary" @click="departmentHandler">分配部门</el-button>
|
<el-button icon="el-icon-key" plain size="small" type="success" @click="setPwsHandler">设置密码策略</el-button>
|
<el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadRole">导入人员</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="primary" @click="downloadHandler">下载导入模板</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"
|
:destroy-on-close="true"
|
:visible.sync="pwdVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
style="margin-top: -15vh !important;"
|
title="设置密码策略"
|
width="30%"
|
>
|
|
<div class="password-strategy-container">
|
<div><i class="el-icon-setting"/>设置密码策略：</div>
|
<el-select v-model="pwdValue" placeholder="请选择密码策略">
|
<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" @click="pwdVisible = false">取 消</el-button>
|
<el-button size="small" type="primary" @click="savePwdHandler">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 导入人员 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" title="导入人员"></upload-file>
|
|
<!-- 分配部门对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="departLoading"
|
:destroy-on-close="true"
|
: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" @click="departVisible = false">取 消</el-button>
|
<el-button size="small" type="primary" @click="saveDepartHandler">确 定</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'
|
|
export default {
|
name: "userManage",
|
data: function () {
|
return {
|
departSearchObj:{},
|
departSearchValue:'',
|
loadKey: 0,
|
departStatus: '', // 区分不同方式打开部门对话框
|
departValue: '', // 部门对话框下拉框绑定值
|
departObj: {}, // 部门对话框下拉框选项绑定值
|
departCurrenRow: {},
|
departOption: {
|
...basicOption,
|
rowKey: 'oid',
|
rowParentKey: 'parentId',
|
selection: false,
|
highlightCurrentRow: true,
|
stripe: false,
|
menu: false,
|
refreshBtn: false,
|
gridBtn: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
},
|
{
|
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: [],
|
option: {
|
...basicOption,
|
editBtn: false,
|
delBtn: false,
|
dialogWidth: '50%',
|
calcHeight: -60,
|
column: column
|
},
|
page: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizes: [10, 30, 50, 100],
|
},
|
searchParams: {},
|
selectList: [],
|
leftRoleData: [], // 分配角色穿梭框左侧初始数据
|
rightRoleData: [], // 分配角色穿梭框右侧初始数据
|
transferTitle: ['现有角色', '拥有角色']
|
}
|
},
|
created() {
|
},
|
methods: {
|
// 新增或修改对话框打开前
|
beforeOpen(done, type) {
|
if(type == 'add'){
|
this.departObj = {};
|
this.departValue = "";
|
}
|
done();
|
},
|
// 表格请求
|
getTableList() {
|
this.tableLoading = true;
|
getDataUsers(this.page.currentPage, this.page.pageSize, this.searchParams).then(res => {
|
const data = res.data.data;
|
this.tableData = data;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 表格右侧刷新图标
|
handleRefresh() {
|
this.getTableList();
|
},
|
|
// 搜索查询
|
handleSearch(params, done) {
|
this.searchParams = {};
|
if(this.departSearchObj && this.departSearchValue){
|
this.searchParams['conditionMap["pkDepartment"]'] = this.departSearchValue;
|
}
|
|
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.departSearchValue) {
|
this.searchParams = {};
|
}
|
|
this.getTableList();
|
done();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
this.departSearchObj = {};
|
this.departSearchValue = "";
|
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();
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
},
|
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 点击行
|
rowClickHandler(row) {
|
this.$refs.userCrud.toggleRowSelection(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);
|
})
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
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();
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
},
|
|
// 设置密码策略
|
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)
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
},
|
|
// 新增
|
rowSaveHandler(row, done) {
|
if (row.password != row.confirmPassword) {
|
this.$message.error('请检查两次密码是否输入一致！')
|
return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
|
}
|
row.pkDepartment = this.departValue; // 将当前行的部门参数pkDepartment 赋值为下拉框绑定的值
|
addUser(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
}).catch(err => {
|
console.log(err);
|
})
|
done()
|
},
|
|
// 操作栏编辑
|
rowEditHandler(row, index) {
|
let obj = { name: row.pkDepartmentName, oid: row.pkDepartment, rowOid: row.oid };
|
this.departValue = row.pkDepartment;
|
this.departObj = obj;
|
|
if (this.departObj.rowOid) {
|
this.$refs.userCrud.rowEdit(row, index);
|
}
|
|
},
|
|
// 编辑
|
rowUpdateHandler(row, index, done) {
|
if (row.password != row.confirmPassword) {
|
this.$message.error('请检查两次密码是否输入一致！')
|
return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
|
}
|
row.pkDepartment = this.departValue; // 将当前行的部门参数pkDepartment 赋值为下拉框绑定的值
|
updateUser(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
}).catch(err => {
|
console.log(err);
|
});
|
done()
|
},
|
|
// 删除
|
rowDeleteHandler(row) {
|
let params = {
|
ids: row.oid
|
}
|
deleteUser(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
}).catch(err => {
|
console.log(err);
|
})
|
},
|
|
// 多选删除
|
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 => {
|
console.log(res);
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('下载成功')
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// 导入人员
|
uploadRole() {
|
this.$refs.upload.visible = true;
|
},
|
|
// 分配部门
|
departmentHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('清先选择人员再进行操作！')
|
return;
|
}
|
this.departStatus = 'default'; // 区分不同方式打开部门对话框
|
this.departmentQueryOnLoad();
|
},
|
|
// 分配部门表格初始化请求
|
departmentQueryOnLoad() {
|
departmentQueryController({queryAllLevel: true}).then(res => {
|
const data = res.data.treeData;
|
this.departData = this.departDtaFormAtter(data);
|
this.departVisible = true;
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// 分配部门数据转换
|
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('分配成功！')
|
}
|
}).catch(err => {
|
console.log(err);
|
})
|
return;
|
}
|
|
if (this.departStatus == 'handle') {
|
this.departObj = this.departCurrenRow;
|
this.departValue = this.departCurrenRow.oid;
|
this.departVisible = false;
|
return;;
|
}
|
|
if(this.departStatus == 'search'){
|
this.departSearchObj = this.departCurrenRow;
|
this.departSearchValue = this.departCurrenRow.oid;
|
this.departVisible = false;
|
return;
|
}
|
},
|
|
// 对话框分配部门按钮
|
dialogDepartHandler() {
|
this.departmentQueryOnLoad();
|
this.departStatus = 'handle'; // 区分不同方式打开部门对话框
|
},
|
|
// 搜索对话框分配部门按钮
|
dialogDepartSearchHandler(){
|
this.departmentQueryOnLoad();
|
this.departStatus = 'search'; // 区分不同方式打开部门对话框
|
},
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.password-strategy-container {
|
padding-left: 20px;
|
display: flex;
|
//justify-content: center;
|
align-items: center;
|
gap: 10px;
|
}
|
|
</style>
|
