<template>
|
<div class="app-container">
|
<el-container>
|
<el-card class="box-card" style="width: 100%" shadow="never">
|
<div class="filter-container">
|
<my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
|
</div>
|
<el-row style="margin-top: 8px">
|
<el-col>
|
<!--列表-->
|
<my-table-v2 ref="myTable" :filter="queryParams" :table="table" v-if="tableShow"/>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-container>
|
<!-- 添加或修改角色配置对话框 -->
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
<el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="角色名称" prop="role_name">
|
<el-input v-model="form.role_name" placeholder="请输入角色名称"/>
|
</el-form-item>
|
<!-- <el-form-item prop="role_key">
|
<span slot="label">
|
<el-tooltip content="角色标识，目前暂未使用" placement="top">
|
<i class="el-icon-question"></i>
|
</el-tooltip>
|
角色标识
|
</span>
|
<el-input v-model="form.role_key" placeholder="请输入角色标识"/>
|
</el-form-item>-->
|
<el-form-item label="角色顺序" prop="role_sort">
|
<el-input-number v-model="form.role_sort" controls-position="right" :min="0"/>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="0">正常</el-radio>
|
<el-radio :label="1">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="角色范围">
|
<el-radio-group v-model="form.data_scope">
|
<el-radio v-if="$store.getters.userInfo.lv<2" :label="1">省</el-radio>
|
<el-radio v-if="$store.getters.userInfo.lv<3" :label="2">市</el-radio>
|
<el-radio v-if="$store.getters.userInfo.lv<4" :label="3">县</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="菜单权限">
|
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
|
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选
|
</el-checkbox>
|
<el-checkbox v-model="form.menu_check_strictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动
|
</el-checkbox>
|
<el-tree
|
class="tree-border"
|
:data="menuOptions"
|
show-checkbox
|
ref="menu"
|
node-key="menu_id"
|
:check-strictly="!form.menu_check_strictly"
|
empty-text="加载中，请稍候"
|
:props="defaultProps"
|
></el-tree>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer" align="center">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus} from "@/api/system/role";
|
import {treeselect as menuTreeselect, roleMenuTreeselect} from "@/api/system/menu";
|
import {treeselect as deptTreeselect, roleDeptTreeselect, listOrgRoot} from "@/api/system/dept";
|
import MyTableV2 from "@/components/myTable/myTableV2";
|
import SettingIplatform from '@/utils/settingIplatform';
|
import items from './items'
|
|
export default {
|
name: "Role",
|
components: {MyTableV2},
|
data() {
|
return {
|
radio: 3,
|
scopeOption: [
|
{value: 1, label: '省'},
|
{value: 2, label: '市'},
|
{value: 3, label: '县'},
|
],
|
constants: this.$constants,
|
// 2022-12-15 根机构列表，个人只能列出自己所在根机构
|
rootOrgList: [],
|
// 2022-12-15 超级管理员选择的顶级机构ID
|
selectedRootOrgId: undefined,
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 角色表格数据
|
roleList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 是否显示弹出层（数据权限）
|
openDataScope: false,
|
menuExpand: false,
|
menuNodeAll: false,
|
deptExpand: true,
|
deptNodeAll: false,
|
// 日期范围
|
dateRange: [],
|
// 数据范围选项
|
dataScopeOptions: [
|
{
|
value: "1",
|
label: "全部数据权限"
|
},
|
{
|
value: "2",
|
label: "自定数据权限"
|
},
|
{
|
value: "3",
|
label: "本部门数据权限"
|
},
|
{
|
value: "4",
|
label: "本部门及以下数据权限"
|
},
|
{
|
value: "5",
|
label: "仅本人数据权限"
|
}
|
],
|
// 菜单列表
|
menuOptions: [],
|
// 部门列表
|
deptOptions: [],
|
// 查询参数
|
items: items,
|
queryParams: {
|
roleName: '',
|
roleKey: '',
|
status: 0
|
},
|
tableShow: false,
|
// 表格数据
|
table: {
|
autoLoad: false,
|
showIndex: true, // 是否显示序号
|
expand: false, // 是否显示详情数据
|
url: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/user/query/role', // 请求地址
|
// 工具条
|
tools: {
|
columnsCtrl: {// 列控制按钮
|
show: false
|
},
|
generalExport: {// 通用导出按钮
|
show: false
|
},
|
// 自定义工具条按钮
|
custom: [
|
{
|
name: '新增',
|
// checkPermission:'system:role:edit',
|
click: () => {
|
this.handleAdd(null)
|
}
|
}
|
]
|
},
|
// 列信息
|
columns: [
|
{title: '角色编号', field: 'role_id', align: 'center', width: 135},
|
{title: '角色名称', field: 'role_name', align: 'left', minWidth: 200},
|
// {title: '权限字符', field: 'role_key', align: 'center', width: 100},
|
{title: '显示顺序', field: 'role_sort', align: 'center', width: 100},
|
{
|
title: '状态', field: 'status', align: 'center', width: 100,
|
switch: row => {
|
const result = {}
|
if (row.status == 0) {
|
Object.assign(result, {
|
value: true, // 开
|
label: '启用', // 开的描述
|
click: () => { // 点击事件
|
this.handleStatusChange(row)
|
}
|
})
|
} else {
|
Object.assign(result, {
|
value: false, // 关
|
label: '禁用', // 关的描述
|
click: () => {
|
this.handleStatusChange(row)
|
}
|
})
|
}
|
return result
|
}
|
},
|
{title: '备注', field: 'remark', align: 'left', minWidth: 200},
|
],
|
// 操作信息
|
operation: {
|
width: 150,
|
align: 'center',
|
show: true, // 显示操作列
|
attr: [
|
// 分类下有正在进行中的项目时，给出提示不允许禁用和删除。且禁用一级分类前需要先禁用下面的所有二级，有启用的二级时不允许禁用一级
|
{
|
// checkPermission:'system:role:edit',
|
title: '修改',
|
events: row => {
|
this.handleUpdate(row)
|
}
|
},
|
{
|
// checkPermission: 'system:role:remove',
|
title: '删除',
|
events: row => {
|
this.handleDelete(row)
|
}
|
},
|
]/*,
|
more:[
|
{
|
// checkPermission:'system:role:edit',
|
title: '数据权限',
|
events: row => {
|
this.handleDataScope(row);
|
}
|
},
|
{
|
// checkPermission:'system:role:edit',
|
title: '分配用户',
|
events: row => {
|
this.handleAuthUser(row);
|
}
|
},
|
]*/
|
},
|
paging: {
|
show: true, // 显示分页
|
// 分页信息
|
page: {
|
small: false,
|
pageNum: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
},
|
// 表单参数
|
form: {
|
role_name: '',
|
role_key: '',
|
role_sort: '',
|
data_scope: 1,
|
status: 1
|
},
|
defaultProps: {
|
children: "children",
|
label: "menu_name"
|
},
|
// 表单校验
|
rules: {
|
role_name: [
|
{required: true, message: "角色名称不能为空", trigger: "blur"}
|
],
|
role_key: [
|
{required: false, message: "权限字符不能为空", trigger: "blur"}
|
],
|
role_sort: [
|
{required: true, message: "角色顺序不能为空", trigger: "blur"}
|
]
|
}
|
};
|
},
|
created() {
|
this.getRootOrgList();
|
},
|
methods: {
|
fifterForm(params) {
|
this.queryParams = Object.assign(this.queryParams, params)
|
// this.queryParams.status = 0
|
this.search(1)
|
},
|
// 查询table列表
|
search(pageNum) {
|
if (pageNum != undefined) {
|
this.$refs.myTable.search({pageNum})
|
} else {
|
this.$refs.myTable.search()
|
}
|
},
|
/** 获取顶级机构列表选择框 2022-12-15 */
|
getRootOrgList() {
|
listOrgRoot().then(response => {
|
this.rootOrgList = response;
|
this.selectedRootOrgId = this.rootOrgList[0].id;
|
this.queryParams.orgId = this.selectedRootOrgId;
|
}).then(() => {
|
this.tableShow = true
|
this.$nextTick(() => {
|
this.search(1);
|
})
|
|
});
|
},
|
/** 查询角色列表 */
|
getList() {
|
this.selectedRootOrgId = this.queryParams.orgId;
|
listRole(this.queryParams).then(response => {
|
this.roleList = response.datas;
|
this.total = response.totalRows;
|
}
|
);
|
},
|
/** 查询菜单树结构 */
|
async getMenuTreeselect() {
|
await menuTreeselect().then(response => {
|
this.menuOptions = response;
|
});
|
},
|
/** 查询部门树结构 */
|
getDeptTreeselect() {
|
deptTreeselect().then(response => {
|
this.deptOptions = response;
|
});
|
},
|
// 所有菜单节点数据
|
getMenuAllCheckedKeys() {
|
// 目前被选中的菜单节点
|
let checkedKeys = this.$refs.menu.getCheckedKeys();
|
// 半选中的菜单节点
|
let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
|
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
return checkedKeys;
|
},
|
// 所有部门节点数据
|
getDeptAllCheckedKeys() {
|
// 目前被选中的部门节点
|
let checkedKeys = this.$refs.dept.getCheckedKeys();
|
// 半选中的部门节点
|
let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
|
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
return checkedKeys;
|
},
|
/** 根据角色ID查询菜单树结构 */
|
getRoleMenuTreeselect(roleId) {
|
return roleMenuTreeselect(roleId).then(response => {
|
this.menuOptions = response.menus;
|
return response;
|
});
|
},
|
/** 根据角色ID查询部门树结构 */
|
getRoleDeptTreeselect(roleId) {
|
return roleDeptTreeselect(roleId).then(response => {
|
this.deptOptions = response.depts;
|
return response;
|
});
|
},
|
// 角色状态修改
|
handleStatusChange(row) {
|
let text = row.status == 0 ? "禁用" : "启用";
|
this.$modal.confirm('确认要' + text + '"' + row.role_name + '"角色吗？').then(function () {
|
row.status = row.status == 0 ? 1 : 0;
|
return changeRoleStatus(row);
|
}).then(() => {
|
this.$modal.msgSuccess(text + "成功");
|
this.search();
|
}).catch(function () {
|
row.status = row.status == 0 ? 1 : 0;
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
// 取消按钮（数据权限）
|
cancelDataScope() {
|
this.openDataScope = false;
|
this.reset();
|
},
|
// 表单重置
|
reset() {
|
if (this.$refs.menu != undefined) {
|
this.$refs.menu.setCheckedKeys([]);
|
}
|
this.menuExpand = false
|
this.menuNodeAll = false
|
this.deptExpand = true
|
this.deptNodeAll = false
|
this.form = {
|
org_id: undefined, // 顶级机构ID
|
role_id: undefined,
|
role_name: undefined,
|
data_scope: this.$store.getters.userInfo ? this.$store.getters.userInfo.lv : 1,
|
role_key: "None",
|
role_sort: 0,
|
status: 0,
|
menuIds: [],
|
deptIds: [],
|
menu_check_strictly: true,
|
dept_check_strictly: true,
|
remark: undefined
|
};
|
this.resetForm("form");
|
},
|
changeSize(e) {
|
this.queryParams.pageSize = e
|
this.getList()
|
},
|
changePage(e) {
|
this.queryParams.pageNum = e
|
this.getList()
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.queryParams.orgId = this.selectedRootOrgId;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.dateRange = [];
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.roleId)
|
this.single = selection.length != 1
|
this.multiple = !selection.length
|
},
|
// 更多操作触发
|
handleCommand(command, row) {
|
switch (command) {
|
case "handleDataScope":
|
this.handleDataScope(row);
|
break;
|
case "handleAuthUser":
|
this.handleAuthUser(row);
|
break;
|
default:
|
break;
|
}
|
},
|
// 树权限（展开/折叠）
|
handleCheckedTreeExpand(value, type) {
|
if (type == 'menu') {
|
let treeList = this.menuOptions;
|
for (let i = 0; i < treeList.length; i++) {
|
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
|
}
|
} else if (type == 'dept') {
|
let treeList = this.deptOptions;
|
for (let i = 0; i < treeList.length; i++) {
|
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
|
}
|
}
|
},
|
// 树权限（全选/全不选）
|
handleCheckedTreeNodeAll(value, type) {
|
if (type == 'menu') {
|
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
|
} else if (type == 'dept') {
|
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
|
}
|
},
|
// 树权限（父子联动）
|
handleCheckedTreeConnect(value, type) {
|
if (type == 'menu') {
|
// this.form.menu_check_strictly = value ? true: false;
|
this.form.menu_check_strictly = value ? true : false;
|
} else if (type == 'dept') {
|
this.form.dept_check_strictly = value ? true : false;
|
}
|
},
|
/** 新增按钮操作 */
|
async handleAdd() {
|
this.loading = true
|
this.reset();
|
await this.getMenuTreeselect();
|
// 2022-12-18 添加上顶级机构ID
|
this.form.org_id = this.selectedRootOrgId;
|
this.open = true;
|
this.title = "添加角色";
|
this.loading = false
|
},
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
this.reset();
|
// const roleId = row.role_id || this.ids
|
const roleId = row.role_id;
|
const roleMenu = this.getRoleMenuTreeselect(roleId);
|
this.loading = true
|
getRole(roleId).then(response => {
|
this.form = response;
|
this.open = true;
|
this.$nextTick(() => {
|
roleMenu.then(res => {
|
let checkedKeys = res.checkedKeys;
|
if (checkedKeys) {
|
checkedKeys.forEach((v) => {
|
this.$nextTick(() => {
|
this.$refs.menu.setChecked(v, true, false);
|
})
|
})
|
}
|
});
|
});
|
this.title = "修改角色";
|
this.loading = false
|
}).catch(() => {
|
this.loading = false
|
});
|
},
|
/** 选择角色权限范围触发 */
|
dataScopeSelectChange(value) {
|
if (value !== '2') {
|
this.$refs.dept.setCheckedKeys([]);
|
}
|
},
|
/** 分配数据权限操作 */
|
handleDataScope(row) {
|
this.reset();
|
const roleDeptTreeselect = this.getRoleDeptTreeselect(row.role_id);
|
getRole(row.role_id).then(response => {
|
this.form = response;
|
this.openDataScope = true;
|
this.$nextTick(() => {
|
roleDeptTreeselect.then(res => {
|
this.$refs.dept.setCheckedKeys(res.checkedKeys);
|
});
|
});
|
this.title = "分配数据权限";
|
});
|
},
|
/** 分配用户操作 */
|
handleAuthUser: function (row) {
|
const roleId = row.role_id;
|
this.$router.push("/system/role-auth/user/" + roleId);
|
},
|
/** 提交按钮 */
|
submitForm: function () {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
// 2022-12-19,把这两个字段设置为数值，目前暂不使用，要不后台类型转换错误(boolean)
|
this.form.menu_check_strictly = 1;
|
this.form.dept_check_strictly = 1;
|
// 2023-11-30 增加默认data_scope为1
|
// this.form.data_scope = 1;
|
|
if (this.form.role_id != undefined) {
|
this.form.menuIds = this.getMenuAllCheckedKeys();
|
updateRole(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.search()
|
});
|
} else {
|
this.form.menuIds = this.getMenuAllCheckedKeys();
|
addRole(this.form).then(response => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.search()
|
});
|
}
|
}
|
});
|
},
|
/** 提交按钮（数据权限） */
|
submitDataScope: function () {
|
if (this.form.roleId != undefined) {
|
this.form.deptIds = this.getDeptAllCheckedKeys();
|
dataScope(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.openDataScope = false;
|
this.getList();
|
});
|
}
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const roleIds = row.role_id;
|
this.$modal.confirm('是否确认删除角色为"' + row.role_name + '"的数据项？').then(function () {
|
return delRole(roleIds);
|
}).then(() => {
|
this.search();
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {
|
});
|
},
|
/** 导出按钮操作 */
|
handleExport() {
|
this.download('system/role/export', {
|
...this.queryParams
|
}, `role_${new Date().getTime()}.xlsx`)
|
}
|
}
|
};
|
</script>
|
