<template>
<div class="roleManagePage H100">
<div class="head_box">
<h6>系统管理 / 角色管理</h6>
<h4>角色管理</h4>
</div>
<div class="content_box">
<div class="form_box h778px" >
<el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
<el-form-item label="">
<el-input size="mini" placeholder="请输入角色名称" v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
</el-form-item>
<el-form-item class="r-float">
<el-button size="mini" type="primary" class="btn_form_add" icon="el-icon-plus" @click="addRole()">新 建</el-button>
<el-dropdown>
<el-button style="margin-left: 10px;" size="mini" class="btn_form_add">批量操作</el-button>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item @click.native="multipleDelete">批量删除</el-dropdown-item>
<el-dropdown-item @click.native="multipleDisable">批量禁用</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
</el-form>
<div class="scrool">
<el-table style="width:100%;" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="角色名称" prop="name" ></el-table-column>
<el-table-column label="角色说明" show-overflow-tooltip prop="instruction"></el-table-column>
<el-table-column label="状态" prop="status" >
<template slot-scope="scope">
<div class="statusBox">
<span class="active" :style="{'backgroundColor':(scope.row.status ? 'rgba(82,196,26,1)' :'rgba(0,0,0,0.25)')}"></span>
<span class="openKey">{{scope.row.status ? '启用':'禁用'}}</span>
</div>
</template>
</el-table-column>
<el-table-column label="登录权限" prop="allowLogin" >
<template slot-scope="scope">
<div class="statusBox">
<span class="active" :style="{'backgroundColor':(scope.row.allowLogin ? 'rgba(82,196,26,1)' :'rgba(0,0,0,0.25)')}"></span>
<span class="openKey">{{scope.row.allowLogin ? '允许':'禁止'}}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center" width="230">
<template slot-scope="scope">
<el-button-group >
<el-button title="编辑" size="mini" type="text" @click="openEdit(scope.row)">编辑 | </el-button>
<el-button title="权限分配" size="mini" type="text" @click="allocate(scope.row)">权限分配 | </el-button>
<el-button title="菜单分配" type="text" size="mini" @click="munuAllocate(scope.row)">菜单分配 | </el-button>
<el-button title="删除" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination small background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next"
:total="page.total">
</el-pagination>
</div>
<!--新建弹框-->
<el-dialog title="新建" :visible.sync="FormVisible2" :before-close="close2">
<div class="form_box">
<el-form :model="roleform" ref="roleform" :rules="rules2" >
<el-form-item label="角色名称：" prop="name" :label-width="formLabelWidth">
<el-input v-model="roleform.name" size="small" clearable auto-complete="off" placeholder="请输入您的角色名称"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="角色说明：" prop="instruction" :label-width="formLabelWidth">
<el-input v-model="roleform.instruction" size="small" clearable auto-complete="off" placeholder="输入角色说明"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="角色状态：" prop="status" :label-width="formLabelWidth">
<el-radio v-model="roleform.status" label="1">启用</el-radio>
<el-radio v-model="roleform.status" label="0">禁用</el-radio>
</el-form-item>
<el-form-item label="登录权限：" prop="status" :label-width="formLabelWidth">
<el-radio v-model="roleform.allowLogin" label="1">允许</el-radio>
<el-radio v-model="roleform.allowLogin" label="0">禁止</el-radio>
</el-form-item>
<el-form-item label="权限选择：" prop="permissionIds" :label-width="formLabelWidth" style="height: 275px;">
<template slot-scope="scope">
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree1"
highlight-current
v-model="roleform.permissionIds"
@check = 'haha'
style="height: 280px;overflow:auto;"
>
</el-tree>
</template>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="roleSave">确定</el-button>
<el-button class="r-float" size="mini" @click="close2">取消</el-button>
</div>
</div>
</el-dialog>
<!--编辑弹框-->
<el-dialog title="编辑" :visible.sync="FormVisible1" :before-close="close1">
<div class="form_box">
<el-form :model="editform" ref="editform" :rules="rules" >
<el-form-item label="角色名称：" prop="name" :label-width="formLabelWidth" >
<el-input v-model="editform.name" size="small" clearable auto-complete="off" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="角色说明：" prop="instruction" :label-width="formLabelWidth">
<el-input v-model="editform.instruction" size="small" clearable auto-complete="off" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="状 态：" prop="status" :label-width="formLabelWidth">
<el-radio v-model="editform.status" label="1">启用</el-radio>
<el-radio v-model="editform.status" label="0">禁用</el-radio>
</el-form-item>
<el-form-item label="登录权限：" prop="is_allow_login" :label-width="formLabelWidth">
<el-radio v-model="editform.allowLogin" label="1">允许</el-radio>
<el-radio v-model="editform.allowLogin" label="0">禁止</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="saveEdit('form')">确定</el-button>
<el-button class="r-float" size="mini" @click="close1">取 消</el-button>
</div>
</div>
</el-dialog>
<!--权限分配弹框-->
<el-dialog class="allocate" title=" " :visible.sync="FormVisible" :before-close="close">
<div class="form_box allocate">
<el-form :model="form1" ref="form1" :rules="rules" >
<el-form-item label="权限选择：" prop="permissionIds" :label-width="formLabelWidth" style="height: 480px;overflow:auto;">
<template slot-scope="scope">
<el-tree :data="treeData" show-checkbox node-key="id"
default-expand-all ref="tree" highlight-current v-model="form1.permissionIds" @check = 'haha'>
</el-tree>
</template>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="submitForm('form1')">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
<!--菜单分配弹框-->
<el-dialog title="菜单分配" :visible.sync="menuFormVisible">
<div class="form_box allocate">
<el-form :model="formMenu" ref="formMenu">
<el-form-item label="菜单选择：" prop="permissionIds" :label-width="formLabelWidth" style="height: 480px;overflow:auto;">
<template slot-scope="scope">
<el-tree :data="menuTreeData"
check-strictly="true"
show-checkbox node-key="id"
default-expand-all
ref="menuTree"
highlight-current
v-model="formMenu.menuIds" @check ='menuCheck'>
</el-tree>
</template>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="menusubmitForm('formMenu')">确定</el-button>
<el-button class="r-float" size="mini" @click="memuclose">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
let thisRoleId = '';
export default {
data() {
return {
page: {
currentPage: 1, //当前页
pageSize: null, //每页条数
total: null, //总条数
},
tableData: [],
treeData: [],
menuTreeData:[],
menuTreeIds:[],
FormVisible: false,
FormVisible1: false,
FormVisible2: false,
menuFormVisible:false,
formLabelWidth: "100px",
status: '1',
allowLogin: '1',
form:{
name:''
},
roleform: {
name: '',
instruction: '',
status: '1',
allowLogin: '1',
permissionIds: '',
},
editform: {
name: '',
instruction: '',
status: true,
allowLogin: true,
},
form1: {
permissionIds: '',
},
formMenu:{
menuIds:''
},
typeList: [],
rules2: {
name: [
{required: true, message: '请输入角色名'},
{max: 20, message: '不能超过20个字符'},
{pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, message: '请输入正确的角色名'}
],
instruction: [
{required: true, message: '请输入角色说明'},
{max: 50, message: '不能超过50个字符'},
],
permissionIds: [
// {required: true, message: '请输入角色说明'},
]
},
rules: {
name: [
{required: true, message: '请输入角色名'},
{max: 20, message: '不能超过20个字符'}
],
instruction: [
{required: true, message: '请输入角色说明'},
{max: 50, message: '不能超过50个字符'},
],
},
value: '',
roleId:'',
}
},
computed: {
},
mounted() {
this.onSearch();
},
components: {},
methods: {
addRole() {
this.FormVisible2 = true;
$('.el-dialog__title').html('新建');
this.getProTree();
},
//获得数据接口
getTableData(param) {
let vm = this;
vm.$https({
url : "role/getRoleList",
method: 'get',
authType: this.backToken
},param).then((res)=>{
let data = res.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
}).catch(function(err){
console.log(err);
})
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param)
},
Search(){
let _this = this;
_this.page.currentPage = 1;
let param = {
"_index": _this.page.currentPage,
"_size": _this.page.pageSize,
"name": _this.form.name,
};
this.getTableData(param);
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
"_index": _this.page.currentPage,
"_size": _this.page.pageSize
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
method: 'delete',
url: 'role/delete?roleId='+ row.id,
authType: this.backToken
}).then((res) => {
if(res.data.status == 201 || res.data.status == 200){
this.$message({type: 'success', message: res.data.message});
}else{
this.$message({type: 'error', message: res.data.message});
}
_this.Search();
}, (error) => {
this.$message({type: 'fail', message: "删除失败!" + error.response.data});
})
})
},
// 批量操作
handleSelectionChange(selection){
let _this = this;
_this.selection = selection;
},
getMultipleSelect () {
let _this = this;
let arr = [];
let str = '';
if (_this.selection){
_this.selection.forEach(function (e) {
arr.push(e.id);
})
str = arr.join(',');
}else{
str = '';
}
return str;
},
// 批量禁用
multipleDisable () {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm('此操作将禁用角色权限, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
url:'role/batchDis?roleIds='+str,
method:'put',
authType: this.backToken
}).then((res) => {
if(res.data.status == 201 || res.data.status == 200){
this.$message({type: 'success', message: res.data.message});
}else{
this.$message({type: 'error', message: res.data.message});
}
//重新查询数据
_this.onSearch();
}, (error) => {})
})
} else {
this.$message({
type: 'info',
message: '请至少选择一个选项'
});
}
},
// 批量删除
multipleDelete () {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm('此操作将删除选中角色, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
url:'role/batchDel?roleIds='+str,
method:'DELETE',
authType: this.backToken
})
.then((res) => {
if(res.data.status == 201 || res.data.status == 200){
this.$message({
type: 'success',
message: res.data.message
});
}else{
this.$message({
type: 'error',
message: res.data.message
});
}
//重新查询数据
_this.onSearch();
}, (error) => {
}
)
})
} else {
this.$message({
type: 'info',
message: '请至少选择一个选项！'
});
}
},
// 新增角色
roleSave() {
let _this = this;
_this.$refs.roleform.validate((valid) => {
if (valid) {
let keysId = _this.$refs.tree1.getCheckedKeys();
let searchObj = {}
for (let key in _this.roleform) {
if (_this.roleform[key]) {
searchObj[key] = _this.roleform[key];
}
}
searchObj.status =_this.roleform.status == '1'? 'true':'false';
searchObj.allowLogin =_this.roleform.allowLogin == '1'? 'true':'false';
console.log(keysId);
let arr = [];
let str = '';
keysId.forEach(function (e){
arr.push(e);
});
str =arr.join(',');
searchObj.permissionIds = str;
_this.$https({
url: 'role/add',
method: 'post',
authType: this.backToken
}, _this.$qs.stringify(searchObj)).then((res) => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.Search();
_this.FormVisible2 = false;
for (let key in _this.roleform) {
_this.roleform[key]=null;
}
_this.roleform.status = '1';
_this.roleform.allowLogin = '1';
_this.$refs['roleform'].resetFields();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
}
)
}
});
},
close1() {
this.FormVisible1=false;
this.$refs['editform'].resetFields();
},
close2() {
this.FormVisible2 = false;
for (let key in this.roleform) {
this.roleform[key]=null;
}
this.roleform.status = '1';
this.roleform.allowLogin = '1';
this.$refs['roleform'].resetFields();
},
// 编辑弹框
openEdit(row){
$('.el-dialog__title').html('编辑');
let _this=this;
_this.$https({
url : "role/getById?Id="+row.id,
method: 'get',
authType: this.backToken
}).then((res)=>{
let data = res.data;
_this.editform = data;
let status = data.status == true? '1':'0';
let allowLogin = data.allowLogin == true? '1':'0';
_this.editform.status= status;
_this.editform.allowLogin= allowLogin;
}).catch(function(err){
console.log(err);
})
_this.FormVisible1 = true;
},
// 编辑后提交
saveEdit() {
let _this = this;
_this.$refs.editform.validate((valid) => {
if (valid) {
let searchObj = {}
searchObj.id = _this.editform.id;
searchObj.name = _this.editform.name;
searchObj.instruction = _this.editform.instruction;
searchObj.status = _this.editform.status == '1'? true:false;
searchObj.allowLogin = _this.editform.allowLogin == '1'? true:false;
if (searchObj.id && searchObj.id != "") {
_this.$https({
url: 'role/edit',
method: 'put',
authType: this.backToken
}, _this.$qs.stringify(searchObj))
.then((res) => {
if (res.status == 200) {
_this.$message({
type: 'success',
message: '修改成功!'
});
//重新查询数据
_this.onSearch();
// //关闭窗口
_this.FormVisible1=false;
_this.$refs['editform'].resetFields();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
}
)
}
}
});
},
// 权限分配
allocate(row) {
this.getProTree();
$('.el-dialog__title').html('权限分配');
let _this=this;
thisRoleId = row.id;
_this.$https({
url : "role/rights?roleId="+row.id,
method: 'get',
authType: this.backToken
}).then((res)=>{
let data = res.data;
let arr = [];
for (let item of data) {
if(item.checked == 'true'){
arr.push(item.id);
}
}
_this.$refs.tree.setCheckedKeys(arr);
}).catch(function(err){
console.log(err);
});
_this.FormVisible = true;
},
//菜单分配
munuAllocate(row){
$('.el-dialog__title').html('菜单分配');
let vm=this;
vm.menuTreeIds=[];
vm.roleId=row.id
vm.getMenuTree(row.id)
},
haha (data) {
let _this = this;
_this.form1.permissionIds = data;
},
menuCheck(data){
this.formMenu.menuIds=data;
},
// 渲染权限选择的数据
getProTree() {
let _this = this;
_this.$https({
method: 'get',
url: 'role/rights',
authType: this.backToken
}).then((res) => {
let data = res.data;
let A = [];
data.map((e, i) => {
if(e.pId == 0){
let obj = {
id: e.id,
label: e.name,
children: []
};
A.push(obj);
}
});
for (let j in A) {
for (let i in data) {
if(data[i].pId == A[j].id) {
let obj = {
id: data[i].id,
label: data[i].name,
};
A[j].children.push(obj);
}
}
}
if (_this.treeData == null) {
_this.treeData = A;
} else {
_this.treeData = [];
_this.treeData = A;
}
}, (error) => {
console.log(error)
}
)
},
//获取菜单接口
getMenuTree(roleId){
let vm = this;
vm.$https({
method: 'get',
url: 'menu/getRoleMenu?roleId='+roleId,
authType: vm.backToken
}).then((res) => {
let treeData=res.data;
let tempArr=[];
let tempIds=[];
for(let i=0,len=treeData.length;i<len;i++){
let treeObj=treeData[i];
let obj={};
if(treeObj.parentId=='0'){ //根节点
obj.label=treeObj.menuName;
obj.id=treeObj.id;
obj.sort=treeObj.sort
if(treeObj.checked=='true'){
tempIds.push(treeObj.id)
}
obj.children=[];
for(let k=0,klen=treeData.length;k<klen;k++){
let ktreeObj=treeData[k];
let kobj={};
if(ktreeObj.parentId==treeObj.id){
kobj.label=ktreeObj.menuName.split('-')[1];
kobj.id=ktreeObj.id;
kobj.sort=ktreeObj.sort;
if(ktreeObj.checked=='true'){
tempIds.push(ktreeObj.id)
}
obj.children.push(kobj)
}
}
}
if(JSON.stringify(obj) != "{}"){
tempArr.push(obj)
}
}
let lastTreeData=tempArr.sort(function (a,b) {
if(a.children.length!=0){
a.children.sort(function (c,d) {
return c.sort-d.sort
})
}
return a.sort-b.sort
})
vm.menuTreeIds=tempIds;
vm.menuTreeData=lastTreeData
vm.menuFormVisible=true;
setTimeout(function () {
vm.$refs['menuTree'].setCheckedKeys(vm.menuTreeIds);
},100)
}, (error) => {
console.log(error)
}
)
},
// 分配权限
submitForm() {
let roleId = thisRoleId;
let _this = this;
let keysId = _this.$refs.tree.getCheckedKeys();
_this.$https({
url: 'role/updateRoleRights?roleId='+roleId+'&permissionIds='+keysId,
method: 'post',
authType: this.backToken
}).then((res) => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.close();
_this.onSearch();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
})
},
menusubmitForm(){
let _this=this;
let keysId = _this.$refs['menuTree'].getCheckedKeys();
let arr = [];
arr = keysId.map(function (id) {
return id;
});
// console.log(arr);
_this.$https({
url: 'role/updateRoleMenu?roleId='+_this.roleId+'&menuIds='+arr,
method: 'post',
authType: this.backToken
}).then((res) => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.memuclose();
_this.onSearch();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
})
},
close() {
this.FormVisible=false;
},
memuclose(){
this.menuFormVisible=false
}
}
}
</script>
<style lang="less">
@import '../../style/common';
.roleManagePage{
.content_box{
.input_box{
width: 100%;
min-width: 815px;
margin-bottom: 30px;
.el-input, .el-select{
max-width:272px;
height:32px;
background:rgba(255,255,255,1);
border-radius:4px;
.el-input__inner{
height:32px;
}
}
.btn_form_search,.btn_form_add{
height: 32px;
text-align: center;
padding: 0 15px;
}
}
.scrool {
width: 100%;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
.el-table {
.el-table__header-wrapper {
.el-table__header {
.has-gutter tr th {
background: rgba(250, 250, 250, 1);
}
}
}
.el-table__body-wrapper {
width: 100%;
table tbody tr td {
padding: 6px 0px;
}
}
}
}
/*提示弹框*/
.el-message-box__wrapper{
.el-message-box{
width:433px !important;
height: 180px !important;
}
}
/*!*编辑弹框*!*/
.el-dialog{
width: 600px;
margin-top: 12vh!important;
background:rgba(255,255,255,1);
box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
border-radius:4px;
.el-dialog__header{
padding: 15px;
border-bottom: 1px solid rgba(0,0,0,0.09);
}
.el-dialog__body{
padding: 0px!important;
border: 1px solid transparent;
.form_box{
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item{
margin: 10px 50px 20px;
.el-form-item__content{
width: 360px;
}
}
.el-input{
width: 100%;
}
}
.dialog-footer{
border-top: 1px solid rgba(0,0,0,0.09);
padding-top: 8px;
.el-button{
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
}
</style>