<template>
|
<div class="app-container">
|
<el-container>
|
<el-card class="box-card" style="width: 100%" shadow="never">
|
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">-->
|
<!-- <el-form-item label="角色名称" prop="roleName">-->
|
<!-- <el-input-->
|
<!-- v-model="queryParams.roleName"-->
|
<!-- placeholder="请输入"-->
|
<!-- clearable-->
|
<!-- @keyup.enter.native="handleQuery"-->
|
<!-- style="width: 150px"-->
|
<!-- />-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="状态" prop="status">-->
|
<!-- <el-select-->
|
<!-- style="width: 150px"-->
|
<!-- v-model="queryParams.status"-->
|
<!-- placeholder="请选择"-->
|
<!-- clearable>-->
|
<!-- <el-option-->
|
<!-- v-for="dict in constants.normalOrDisabled"-->
|
<!-- :key="dict.value"-->
|
<!-- :label="dict.label"-->
|
<!-- :value="dict.value"-->
|
<!-- />-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item>-->
|
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>-->
|
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
|
<!-- </el-form-item>-->
|
<!-- </el-form>-->
|
<!-- <el-row :gutter="10" class="mb8">-->
|
<!-- <el-col :span="1.5">-->
|
<!-- <el-button-->
|
<!-- type="primary"-->
|
<!-- plain-->
|
<!-- icon="el-icon-plus"-->
|
<!-- size="mini"-->
|
<!-- @click="handleAdd"-->
|
<!-- v-hasPermi="['system:role:add']"-->
|
<!-- >新增</el-button>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">-->
|
<!-- <el-table-column type="selection" width="55" align="center" />-->
|
<!-- <el-table-column label="角色编号" prop="role_id" width="160" />-->
|
<!-- <el-table-column label="角色名称" prop="role_name" :show-overflow-tooltip="true" width="150" />-->
|
<!-- <el-table-column label="权限字符" prop="role_key" :show-overflow-tooltip="true" width="150" />-->
|
<!-- <el-table-column label="显示顺序" prop="role_sort" width="100" />-->
|
<!-- <el-table-column label="状态" align="center" width="100">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <el-switch-->
|
<!-- v-model="scope.row.status"-->
|
<!-- :active-value=0-->
|
<!-- :inactive-value=1-->
|
<!-- @change="handleStatusChange(scope.row)"-->
|
<!-- ></el-switch>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="备注" align="center" prop="remark" width="180">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <el-button-->
|
<!-- size="mini"-->
|
<!-- type="text"-->
|
<!-- icon="el-icon-edit"-->
|
<!-- @click="handleUpdate(scope.row)"-->
|
<!-- v-hasPermi="['system:role:edit']"-->
|
<!-- >修改</el-button>-->
|
<!-- <el-button-->
|
<!-- size="mini"-->
|
<!-- type="text"-->
|
<!-- icon="el-icon-delete"-->
|
<!-- @click="handleDelete(scope.row)"-->
|
<!-- v-hasPermi="['system:role:remove']"-->
|
<!-- >删除</el-button>-->
|
<!--<!– <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">-->
|
<!-- <span class="el-dropdown-link">-->
|
<!-- <i class="el-icon-d-arrow-right el-icon--right"></i>更多-->
|
<!-- </span>-->
|
<!-- <el-dropdown-menu slot="dropdown">-->
|
<!-- <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"-->
|
<!-- v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>-->
|
<!-- <el-dropdown-item command="handleAuthUser" icon="el-icon-user"-->
|
<!-- v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>-->
|
<!-- </el-dropdown-menu>-->
|
<!-- </el-dropdown>–>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- </el-table>-->
|
<!-- <el-pagination-->
|
<!-- :current-page="queryParams.pageNum"-->
|
<!-- :page-sizes="constants.page.limit"-->
|
<!-- :layout="constants.page.layout"-->
|
<!-- :total="this.total"-->
|
<!-- @size-change="changeSize"-->
|
<!-- @current-change="changePage"-->
|
<!-- />-->
|
<!--搜索条件-->
|
<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 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-->
|
<!-- v-for="dict in constants.normalOrDisabled"-->
|
<!-- :key="dict.value"-->
|
<!-- :label="dict.value"-->
|
<!-- >{{dict.label}}</el-radio>-->
|
</el-radio-group>
|
</el-form-item>
|
<!-- <el-form-item label="角色范围">
|
<el-radio-group v-model="form.data_scope">
|
<el-radio :label="1" checked>省</el-radio>
|
<el-radio :label="2">市</el-radio>
|
<el-radio :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 {addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole} from "@/api/system/role";
|
import {roleMenuTreeselect, treeselect as menuTreeselect} from "@/api/system/menu";
|
import {listOrgRoot, roleDeptTreeselect, treeselect as deptTreeselect} 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: {
|
showIndex: true, // 是否显示序号
|
expand: false, // 是否显示详情数据
|
url: SettingIplatform.apiBaseURL + '/system/role/list', // 请求地址
|
// 工具条
|
tools: {
|
columnsCtrl: {// 列控制按钮
|
show: false
|
},
|
generalExport: {// 通用导出按钮
|
show: false
|
},
|
// 自定义工具条按钮
|
custom: [
|
{
|
name: '新增',
|
// checkPermission:'system:role:edit',
|
click: () => {
|
this.handleAdd(null)
|
}
|
}
|
]
|
},
|
// 列信息
|
columns: [
|
{title: '角色编号', field: 'role_id', align: 'center',},
|
{title: '角色名称', field: 'role_name', align: 'center',},
|
{title: '权限字符', field: 'role_key', align: 'center',},
|
{title: '顺序号', field: 'role_sort', align: 'center',},
|
{
|
title: '状态', field: 'status', align: 'center',
|
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', width: '250px'},
|
],
|
// 操作信息
|
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: {
|
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.search(1)
|
},
|
// 查询table列表
|
search(pageNum) {
|
if (pageNum != undefined) {
|
this.$refs.myTable.search(pageNum)
|
} else {
|
this.$refs.myTable.search()
|
}
|
},
|
/** 获取顶级机构列表选择框 2022-12-15 */
|
getRootOrgList() {
|
this.loading = true;
|
listOrgRoot().then(response => {
|
this.rootOrgList = response;
|
this.selectedRootOrgId = this.rootOrgList[0].id;
|
this.queryParams.orgId = this.selectedRootOrgId;
|
this.loading = false;
|
}).then(() => {
|
this.tableShow = true
|
this.search(1);
|
}).catch(function () {
|
// this.loading = false;
|
});
|
},
|
/** 查询角色列表 */
|
getList() {
|
this.loading = true;
|
this.selectedRootOrgId = this.queryParams.orgId;
|
listRole(this.queryParams).then(response => {
|
this.roleList = response.datas;
|
this.total = response.totalRows;
|
this.loading = false;
|
}
|
);
|
},
|
/** 查询菜单树结构 */
|
getMenuTreeselect() {
|
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.role_id, row.status);
|
}).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,
|
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;
|
}
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.reset();
|
this.getMenuTreeselect();
|
// 2022-12-18 添加上顶级机构ID
|
this.form.org_id = this.selectedRootOrgId;
|
this.open = true;
|
this.title = "添加角色";
|
},
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
this.reset();
|
// const roleId = row.role_id || this.ids
|
const roleId = row.role_id;
|
const roleMenu = this.getRoleMenuTreeselect(roleId);
|
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 = "修改角色";
|
});
|
},
|
/** 选择角色权限范围触发 */
|
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;
|
|
if (this.form.role_id != undefined) {
|
this.form.menuIds = this.getMenuAllCheckedKeys();
|
updateRole(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.getList();
|
});
|
} else {
|
this.form.menuIds = this.getMenuAllCheckedKeys();
|
addRole(this.form).then(response => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.getList();
|
});
|
}
|
}
|
});
|
},
|
/** 提交按钮（数据权限） */
|
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.this.search();
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {
|
});
|
},
|
/** 导出按钮操作 */
|
handleExport() {
|
this.download('system/role/export', {
|
...this.queryParams
|
}, `role_${new Date().getTime()}.xlsx`)
|
}
|
}
|
};
|
</script>
|
