<template>
|
<div>
|
<el-form :model="params" :inline="true" class="demo-form-inline">
|
<el-form-item label="角色编码">
|
<el-input type="text" v-model="params.roleCode" show-word-limit placeholder="输入角色编码" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="角色名称">
|
<el-input type="text" v-model="params.roleName" show-word-limit width="200" placeholder="输入角色名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="roleSearch" icon="el-icon-search" size="small">查询</el-button>
|
</el-form-item>
|
<el-form-item>
|
<template slot-scope="scope" v-if="buttonList.role_manager_add.show" >
|
<el-button type="primary" @click="showDialog" icon="el-icon-circle-plus" size="small">新增</el-button>
|
</template>
|
</el-form-item>
|
</el-form>
|
<el-table class="show_table" :data="pageDate.list" v-if="pageDate.list"
|
highlight-current-row v-loading="listLoading" :style="conHeight" :height="conHeight.height" style="width: 100%">
|
<el-table-column type="index" align="center" label="序号"></el-table-column>
|
<el-table-column prop="roleCode" label="角色编码" class-name="left"></el-table-column>
|
<el-table-column prop="roleName" label="角色名称" class-name="left"></el-table-column>
|
<el-table-column prop="description" label="描述" class-name="left"></el-table-column>
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button v-if="buttonList.role_manager_edit.show" size="mini" icon="el-icon-edit" @click="editRole(scope.$index, scope.row)">编辑</el-button>
|
<el-button v-if="buttonList.role_manager_delete.show" size="mini" icon="el-icon-delete" @click="deleteRole(scope.$index, scope.row)">删除</el-button>
|
<el-button v-if="buttonList.role_manager_assign.show" size="mini" icon="el-icon-setting" @click="assignRole(scope.$index, scope.row)">角色权限</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageDate.page"
|
:page-sizes="pageDate.pageSizeArr"
|
:page-size="pageDate.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pageDate.total">
|
</el-pagination>
|
<el-dialog :visible.sync="visible" :close-on-click-modal="false" :title="roleFormTitle" :before-close="closeDialog" @open="openDialog" width="480px">
|
<el-form :model="roleForm" :rules="roleFormRules" ref="roleForm" label-width="80px" label-position="auto">
|
<el-form-item label="角色编码" prop="roleCode">
|
<el-input placeholder="请输入角色编码" :readonly="isReadOnly" v-model.trim="roleForm.roleCode"></el-input>
|
</el-form-item>
|
<el-form-item label="角色名称" prop="roleName">
|
<el-input placeholder="请输入角色名称" v-model.trim="roleForm.roleName"></el-input>
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input type="textarea" placeholder="请输入描述信息" v-model.trim="roleForm.description" rows="5" resize="none" :maxlength='50'></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="commitRole" :loading="roleLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
<el-button @click="closeDialog" class="btn-custom">
|
<span>取 消</span>
|
|
|
</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="assignVisible" :close-on-click-modal="false" title="分配角色权限" :before-close="closeDialog" @open="openDialog" width="550px">
|
<template>
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="当前角色" prop="menuName">
|
<el-input v-model.trim="selectRwo.roleName" readonly></el-input>
|
</el-form-item>
|
</el-form>
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="系统按钮" name="first">
|
<template>
|
<el-table
|
ref="multipleTable"
|
:data="roleButtonList"
|
class="show_table"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange">
|
<el-table-column
|
type="selection"
|
align="center"
|
width="35"
|
label="序号">
|
</el-table-column>
|
<el-table-column
|
prop="buttonName"
|
label="按钮名称"
|
width="100"
|
class-name="left"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="buttonPerm"
|
label="按钮授权编码"
|
class-name="left"
|
>
|
</el-table-column>
|
</el-table>
|
<div class="buttonFooter">
|
<el-button type="primary" :loading="assignLoading" @click="roleAssignTab">保存</el-button>
|
<el-button :loading="assignLoading" @click="clearChecked('first')">取消</el-button>
|
|
</div>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="菜单" name="second">
|
<div class="treeDiv">
|
<el-tree
|
class="filter-tree"
|
:data="menuTreeData"
|
ref="menuTreeData"
|
show-checkbox
|
node-key="id"
|
default-expand-all
|
:default-checked-keys="treeCheckedKeys">
|
</el-tree>
|
</div>
|
<div class="buttonFooter">
|
<el-button type="primary" :loading="assignLoading" @click="checkedNodes('menuTreeData')">保存</el-button>
|
<el-button :loading="assignLoading" @click="clearChecked('second')">取消</el-button>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="菜单按钮" name="third">
|
<div class="treeDiv">
|
<el-tree
|
:data="menuBtnTreeData"
|
ref="menuBtnTreeData"
|
show-checkbox
|
node-key="id"
|
default-expand-all
|
:default-checked-keys="treeCheckedKeys">
|
</el-tree>
|
</div>
|
<div class="buttonFooter">
|
<el-button type="primary" :loading="assignLoading" @click="checkedNodes('menuBtnTreeData')">保存</el-button>
|
<el-button :loading="assignLoading" @click="clearChecked('third')">取消</el-button>
|
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="对象按钮" name="fourth">
|
<div class="treeDiv">
|
<el-tree
|
:data="menuObjectData"
|
ref="menuObjectData"
|
show-checkbox
|
node-key="id"
|
default-expand-all
|
:default-checked-keys="treeCheckedKeys">
|
</el-tree>
|
</div>
|
<div class="buttonFooter">
|
<el-button type="primary" :loading="assignLoading" @click="checkedNodes('menuObjectData')">保存</el-button>
|
<el-button :loading="assignLoading" @click="clearChecked('fourth')">取消</el-button>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as roleApi from '../api/role'
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "role_manager",
|
data(){
|
return {
|
pageDate: {
|
page: 1,//页码
|
size: 10,//每页显示个数
|
list: [],
|
pageSizeArr: [10, 20, 40],
|
total: 0
|
},
|
params: {
|
roleCode: '',//编号
|
roleName: '' //名称
|
},
|
selectRwo:{},
|
roleButtonList:[],//角色系统按钮列表
|
multipleSelection:[],
|
selectRoleId:'',
|
listLoading:false,
|
conHeight:{//表格样式
|
height:'',
|
overflow: 'auto'
|
},
|
buttonList:{//按钮列表
|
role_manager_add : {show:false, code : 'role_manager_add'},
|
role_manager_edit : {show:false, code : 'role_manager_edit'},
|
role_manager_delete : {show:false, code : 'role_manager_delete'},
|
role_manager_assign : {show:false, code : 'role_manager_assign'}
|
},
|
isReadOnly:false,
|
visible:false, //角色Dialog 选择器
|
defaultRoleForm:null,//默认初始表单数据
|
roleForm:{
|
roleCode:'',
|
roleName:'',
|
description:''
|
},
|
roleFormRules:{
|
roleId:[
|
{required: false, message: '主键', trigger: 'blur'}
|
],
|
roleCode:[
|
{required: true, message: '请输入角色编码', trigger: 'blur'}
|
],
|
roleName:[
|
{required: true, message: '请输入角色名称', trigger: 'blur'}
|
],
|
description: [
|
{required: false, message: '请输入描述信息', trigger: 'blur'}
|
]
|
},
|
roleFormTitle:'新增角色',
|
roleLoading:false,
|
assignVisible: false, //权限配置Dialog 选择器
|
activeName: 'first', //tabs选中
|
assignLoading: false,
|
menuTreeData:[],//角色分配的菜单树
|
menuBtnTreeData:[],//角色分配的菜单按钮树
|
menuObjectData:[],//角色分配的对象树
|
treeCheckedKeys:[],//树默认选中的节点
|
tableParams:[],//表格选中节点 后台参数
|
treeParams:[],//树选中节点 后台参数
|
}
|
},
|
methods:{
|
/*列表查询*/
|
roleSearch(){
|
this.pageDate.page = 1;
|
this.roleQuery();
|
},
|
roleQuery(){
|
this.listLoading = true;
|
roleApi.role_list(this.pageDate.page, this.pageDate.size, this.params).then((res) => {
|
if (res.success) {
|
this.listLoading = false;
|
this.pageDate.total = res.page.total;
|
this.pageDate.list = res.page.records;
|
} else if (res.message) {
|
this.listLoading = false;
|
this.$message({
|
type: 'error',
|
message: res.message
|
});
|
}
|
}).catch((error) => {
|
this.$message({
|
type: 'error',
|
message: '服务器异常！'
|
});
|
});
|
},
|
handleClick(tab, event){ //tab切换触发
|
this.treeCheckedKeys =[];
|
if (tab.name == 'first') {
|
this.queryRoleButtonList();
|
}else if (tab.name == 'second') {
|
this.queryMenuTree();
|
}else if (tab.name == 'third') {
|
this.queryMenuButtonTree();
|
}else if (tab.name == 'fourth') {
|
this.queryObjectTree();
|
|
}
|
},
|
/*角色系统按钮列表查询*/
|
queryRoleButtonList(){
|
let param ={roleId : this.selectRoleId};
|
roleApi.get_role_button(param).then((res) =>{
|
if (res.success) {
|
this.roleButtonList = res.list;
|
}
|
res.list.forEach((row,index) =>{
|
if (row.checked) {
|
this.tableChecked('multipleTable',row)
|
}
|
})
|
})
|
},
|
/*获取角色分配的菜单树*/
|
queryMenuTree(){
|
this.treeCheckedKeys = [];
|
roleApi.get_menu_tree(this.selectRoleId).then((res) =>{
|
if (res.success) {
|
this.menuTreeData = res.list;
|
this.treeChecked(res.list);
|
}
|
})
|
},
|
/*获取角色分配的菜单按钮树*/
|
queryMenuButtonTree(){
|
this.treeCheckedKeys = [];
|
roleApi.get_menu_button_tree(this.selectRoleId).then((res) =>{
|
if (res.success) {
|
this.menuBtnTreeData = res.list;
|
}
|
this.treeChecked(res.list);
|
})
|
},
|
/*获取角色分配的对象按钮树*/
|
queryObjectTree(){
|
this.treeCheckedKeys = [];
|
roleApi.get_object_tree(this.selectRoleId).then((res) =>{
|
if (res.success) {
|
this.menuObjectData = res.list;
|
}
|
this.treeChecked(res.list);
|
})
|
},
|
/*每页展示信息数*/
|
handleSizeChange(val) {
|
this.pageDate.size = val;
|
this.roleQuery();
|
},
|
/*根据查询页码*/
|
handleCurrentChange(val) {
|
this.pageDate.page = val;
|
this.roleQuery();
|
},
|
/*设置表格高度*/
|
getHeight(){
|
this.conHeight.height=window.innerHeight-160+'px';
|
},
|
/*获取按钮权限*/
|
getButtonList(){
|
let params = {flag: 1, param: this.$route.path};
|
SystemApi.button_list(params).then((res) => {
|
if (res.success && res.list.length > 0) {
|
res.list.forEach((v, k) => {
|
if (this.buttonList[v] && this.buttonList[v].code == v) {
|
this.buttonList[v].show = true
|
}
|
});
|
}
|
})
|
},
|
/*角色新增、编辑提交方法*/
|
commitRole(){
|
if (this.roleId == null){
|
/*新增*/
|
this.addRole();
|
} else {
|
/*编辑*/
|
this.editRoleInfo();
|
}
|
},
|
/*新增角色*/
|
addRole(){
|
this.$refs.roleForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.roleLoading = true;
|
roleApi.role_add(this.roleForm).then((res) => {
|
if(res.success){
|
this.roleLoading = false;
|
//NProgress.done();
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog();
|
this.roleQuery();
|
}else if(res.message){
|
this.roleLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
/*角色编辑弹窗信息设置*/
|
editRole(index ,row){
|
this.visible = true;
|
this.isReadOnly = true;
|
this.roleFormTitle = '编辑角色';
|
this.roleForm = Object.assign({}, row);
|
this.roleId=row.roleId;
|
|
},
|
deleteRole(index, row) {
|
this.$confirm('确认删除吗？', '提示', {}).then(() => {
|
roleApi.delete_role(row.roleId).then((res) => {
|
if (res.success) {
|
let totalPage = Math.ceil((this.pageDate.total-1)/this.pageDate.size);
|
totalPage = (totalPage < 1 ? 1 : totalPage);
|
this.pageDate.page = this.pageDate.page > totalPage ? totalPage : this.pageDate.page;
|
this.roleQuery();
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
} else if (res.message) {
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
},
|
/*编辑角色*/
|
editRoleInfo(){
|
this.$refs.roleForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.roleLoading = true;
|
roleApi.role_edit(this.roleId,this.roleForm).then((res) => {
|
if (res.success) {
|
this.roleLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog();
|
this.roleQuery();
|
} else if (res.message) {
|
this.roleLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
/*角色新增弹窗信息设置*/
|
showDialog(){
|
this.roleId = null;
|
this.visible = true;
|
this.isReadOnly = false;
|
this.roleFormTitle = '新增角色';
|
},
|
/*角色权限分配弹窗信息设置*/
|
assignRole(index ,row){
|
this.selectRwo=row;
|
this.assignVisible = true;
|
this.selectRoleId = row.roleId;
|
if (this.activeName == 'first') {
|
this.queryRoleButtonList();
|
}else if (this.activeName == 'second') {
|
this.queryMenuTree();
|
}else if (this.activeName == 'third') {
|
this.queryMenuButtonTree();
|
}else if (this.activeName == 'fourth') {
|
this.queryObjectTree();
|
}
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
openDialog(){
|
|
},
|
//关闭Dialog方法 formName 参数
|
closeDialog(){
|
this.visible = false;
|
this.assignVisible = false;
|
this.roleQuery();
|
this.roleForm = JSON.parse(JSON.stringify(this.defaultRoleForm));//表单内容清空
|
},
|
//封装的让table表格的复选框默认选中的函数
|
tableChecked(tableName,row){
|
this.$nextTick(()=>{
|
this.$refs[tableName].toggleRowSelection(row,true);
|
})
|
},
|
treeChecked(lists){
|
if (lists && lists.length >0){
|
lists.forEach((list,k) =>{
|
if (list.children != null){
|
this.treeChecked(list.children)
|
}else {
|
if(list.checked) {
|
this.treeCheckedKeys.push(list.id)
|
}
|
}
|
});
|
}
|
|
},
|
checkedNodes(treeName){
|
if(treeName =='menuTreeData'){
|
this.treeParams = [];
|
let treeParamsLits = this.$refs[treeName].getCheckedNodes(false,true);
|
treeParamsLits.forEach((val,k) =>{
|
this.treeParams.push(val.id);
|
});
|
}else {
|
this.treeParams = this.$refs[treeName].getCheckedKeys(true);
|
}
|
this.roleAssign(treeName);
|
},
|
clearChecked(name){
|
if (name == 'first') {
|
this.queryRoleButtonList();
|
this.closeDialog();
|
}else if (name == 'second') {
|
this.queryMenuTree()
|
this.closeDialog();
|
}else if (name == 'third') {
|
this.queryMenuButtonTree()
|
this.closeDialog();
|
}else if (name == 'fourth') {
|
this.queryMenuTree()
|
this.closeDialog();
|
}
|
},
|
roleAssign(treeName){
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.assignLoading = true;
|
let flag;
|
if (treeName == 'menuTreeData') {
|
flag = 2
|
} else if (treeName == 'menuBtnTreeData') {
|
flag = 3
|
} else if (treeName == 'menuObjectData') {
|
flag = 4
|
}
|
roleApi.role_assign_button(flag,this.selectRoleId,this.treeParams).then((res) => {
|
if(res.success){
|
this.assignLoading = false;
|
//NProgress.done();
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
}else if(res.message){
|
this.assignLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
},
|
roleAssignTab(){
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.tableParams = [];
|
this.multipleSelection.forEach((v,k) =>{
|
this.tableParams .push(v.buttonId)
|
});
|
roleApi.role_assign_button(1,this.selectRoleId,this.tableParams).then((res) => {
|
if(res.success){
|
this.assignLoading = false;
|
//NProgress.done();
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
}else if(res.message){
|
this.assignLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
}
|
},
|
//初始化 模板渲染前调用
|
created(){
|
this.defaultRoleForm = JSON.parse(JSON.stringify(this.roleForm));//值为空的初始表单
|
|
window.addEventListener('resize', this.getHeight);
|
this.getHeight()//设置表格高度
|
},
|
//发起后端请求，获取数据 模板渲染后调用
|
mounted() {
|
//按钮权限
|
this.getButtonList();
|
//默认查询页面
|
this.roleQuery();
|
//初始化查询条件
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.buttonFooter{
|
margin-top: 30px;
|
text-align: right;
|
}
|
.treeDiv{
|
max-height: 300px;
|
overflow: auto;
|
.el-tree{
|
height: 100%;
|
overflow: auto;
|
}
|
}
|
|
</style>
|
