<template>
|
<basic-container>
|
<avue-crud
|
ref="roleCrud"
|
:data="tableData"
|
:option="option"
|
:page.sync="page"
|
:table-loading="tableLoading"
|
@on-load="getTableList"
|
@refresh-change="handleRefresh"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler"
|
@row-save="rowSaveHandler"
|
@row-update="rowUpdateHandler"
|
@row-del="rowDeleteHandler"
|
>
|
<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-school" plain size="small" type="primary" @click="assignMembersHandler">分配成员
|
</el-button>
|
<el-button icon="el-icon-user" plain size="small" type="primary" @click="statisticsHandler">统计</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">导出</el-button>
|
</template>
|
|
<template slot="roleClassifyText" slot-scope="{row}">
|
<el-tag type="success">{{ row.roleClassifyText }}</el-tag>
|
</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="statisticsLoading"
|
:visible.sync="statisticsVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="人员信息"
|
width="50%"
|
>
|
<avue-crud
|
:data="countData"
|
:option="countOption"
|
>
|
</avue-crud>
|
<div slot="footer" class="dialog-footer" style="display: flex;gap: 20px;justify-content: center">
|
<div>
|
<el-tag>当前角色总人数: {{ this.countData.length }}</el-tag>
|
</div>
|
<el-button icon="el-icon-close" size="small" type="danger" @click="statisticsVisible = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 导入角色 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入角色"
|
@updata="getTableList"></upload-file>
|
|
</basic-container>
|
</template>
|
|
<script>
|
import {
|
gridRoles,
|
addRole,
|
updateRole,
|
deleteRole,
|
listUserUnInRoleOid,
|
listUserByRoleOid,
|
saveRight
|
} from '@/api/system/role/api'
|
import basicOption from "@/util/basic-option";
|
import {column} from "@/views/system/role/option";
|
import func from "@/util/func";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
tableData: [],
|
option: {
|
...basicOption,
|
dialogTop: 0,
|
dialogWidth: '30%',
|
column: column,
|
calcHeight: -60,
|
},
|
page: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizes: [10, 30, 50, 100],
|
},
|
onLoadParams: {},
|
tableLoading: false,
|
selectList: [],
|
leftRoleData: [], // 分配成员穿梭框左侧初始数据
|
rightRoleData: [], // 分配成员穿梭框右侧初始数据
|
transferTitle: ['角色外成员', '角色内成员'],
|
statisticsLoading: false,
|
statisticsVisible: false,
|
countData: [],
|
countOption: {
|
...basicOption,
|
selection: false,
|
refreshBtn: false,
|
addBtn: false,
|
menu: false,
|
header:false,
|
column: [
|
{
|
label: '部门',
|
prop: 'pkDepartmentName',
|
sortable: true,
|
},
|
{
|
label: '用户名',
|
prop: 'id',
|
sortable: true,
|
},
|
{
|
label: '真实姓名',
|
prop: 'name',
|
sortable: true,
|
},
|
{
|
label: '角色',
|
prop: 'pkPersonName',
|
sortable: true,
|
overHidden: true,
|
},
|
]
|
},
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/roleQueryController/importRole',
|
tipList: ["角色导入只有 名称 和 描述 两列，且名称为必输项不能为空"]
|
}
|
},
|
methods: {
|
// 表格初始化请求
|
getTableList() {
|
this.tableLoading = true;
|
gridRoles(this.page.currentPage, this.page.pageSize, this.onLoadParams).then(res => {
|
const data = res.data.data;
|
this.tableData = data;
|
this.page.total = res.data.total;
|
this.tableLoading = false;
|
})
|
},
|
|
// 列头刷新
|
handleRefresh() {
|
this.getTableList()
|
},
|
|
// 条数
|
sizeChange(val) {
|
this.page.pageSize = val;
|
},
|
|
// 页码
|
currentChange(val) {
|
this.page.currentPage = val;
|
},
|
|
// 下拉
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 行单选
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.roleCrud,
|
this.lastIndex,
|
(newIndex) => { this.lastIndex = newIndex; },
|
() => { this.selectList = []; }
|
);
|
},
|
|
// 添加
|
rowSaveHandler(row, done, loading) {
|
delete row.roleClassifyText;
|
addRole(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done();
|
}
|
}).catch(err => {
|
console.log(err);
|
loading();
|
})
|
},
|
|
// 编辑
|
rowUpdateHandler(row, index, done, loading) {
|
delete row.roleClassifyText;
|
updateRole(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(() => {
|
deleteRole(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(() => {
|
deleteRole(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 分配成员
|
assignMembersHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请选择角色进行成员分配！');
|
return;
|
}
|
|
if (this.selectList.length > 1) {
|
this.$message.warning('一次只能对一个角色进行分配成员操作！');
|
return;
|
}
|
Promise.all([
|
listUserUnInRoleOid({pkRole: this.selectList[0].oid}),
|
listUserByRoleOid({pkRole: this.selectList[0].oid})
|
]).then(([unInRoleRes, byRoleRes]) => {
|
if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
|
const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
|
// 组装好穿梭框可用数据
|
this.leftRoleData = leftData.map(item => {
|
return {
|
name: item.name + `(${item.id})`,
|
oid: item.oid
|
}
|
})
|
this.rightRoleData = byRoleRes.data.data.map(item => item.oid);
|
this.$refs.transfer.visible = true;
|
}
|
});
|
|
},
|
|
// 分配成员穿梭框回填
|
roleSendHandler(row) {
|
let params = {
|
userOids: row.join(','),
|
roleId: this.selectList[0].oid
|
}
|
saveRight(params).then(res => {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
})
|
},
|
|
// 统计
|
statisticsHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请选择角色！');
|
return;
|
}
|
|
if (this.selectList.length > 1) {
|
this.$message.warning('最多只能选择一个角色进行统计！');
|
return;
|
}
|
listUserByRoleOid({pkRole: this.selectList[0].oid}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.countData = data.map(item => {
|
return {
|
pkDepartmentName: item.pkDepartmentName,
|
name: item.name,
|
id: item.id,
|
pkPersonName: this.selectList[0].name
|
}
|
});
|
this.statisticsVisible = true;
|
}
|
})
|
},
|
|
// 导入角色
|
upLoadRole() {
|
this.$refs.upload.visible = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
