<template>
|
<div id="role-auth" class="global-content">
|
<div class="width height overflow flex align-start justify-around">
|
<div class="width20 height99 left-aside overflow">
|
<div class="left-role-title" @click="refresh">请选择角色</div>
|
<div class="width height-calc40 overflowy-auto">
|
<template v-for="(item, index) in roleList">
|
<div
|
@click="activeclick(item, index)"
|
class="pointer paddingtopbottom textindex2 hover"
|
:class="activeindex == index ? 'color409EFF backgroundecf5ff' : ''"
|
:key="index + 'role'"
|
>
|
{{ item.roleName }}
|
</div>
|
</template>
|
</div>
|
</div>
|
<div class="width78 height overflow">
|
<el-tabs v-model="currentTab" type="card" class="width height" @tab-click="handleClick">
|
<el-tab-pane class="width height" label="角色权限设置" name="user">
|
<div ref="el-main" class="height" style="padding: 0">
|
<el-card class="box-card height99 overflow">
|
<div slot="header" class="clearfix">
|
<span>角色权限设置 - {{ title }}</span>
|
</div>
|
<tree-table
|
ref="tree-table"
|
:data="menuList"
|
:expand-all="expandAll"
|
height="100%"
|
border
|
class="heightclacimport overflow"
|
tree-column-label="菜单名称"
|
@row-selected="rowSelected"
|
>
|
<el-table-column label="权限点">
|
<template slot-scope="scope">
|
<el-checkbox
|
v-for="(item, index) in scope.row.auth"
|
:key="index"
|
v-model="item.value"
|
:true-label="1"
|
:false-label="0"
|
:checked="!!item.value"
|
@change="checkAuthNode(scope.row)"
|
>{{ item.label }}</el-checkbox
|
>
|
</template>
|
</el-table-column>
|
</tree-table>
|
<div class="tool absolute bottom7">
|
<el-button :loading="loading" type="primary" size="mini" @click="saveAuth">保存</el-button>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane class="width height" label="APP权限设置" name="app">
|
<el-main ref="el-main" class="height" style="padding: 0">
|
<el-card class="box-card height99 overflow">
|
<div slot="header" class="clearfix">
|
<span>APP权限设置 - {{ title }}</span>
|
</div>
|
<tree-table
|
ref="tree-table"
|
:data="menuList"
|
:expand-all="expandAll"
|
height="100%"
|
class="heightclacimport overflow"
|
border
|
tree-column-label="菜单名称"
|
@row-selected="rowSelected"
|
>
|
<el-table-column label="权限点">
|
<template slot-scope="scope">
|
<el-checkbox
|
v-for="(item, index) in scope.row.auth"
|
:key="index"
|
v-model="item.value"
|
:true-label="1"
|
:false-label="0"
|
:checked="!!item.value"
|
@change="checkAuthNode(scope.row)"
|
>{{ item.label }}</el-checkbox
|
>
|
</template>
|
</el-table-column>
|
</tree-table>
|
<div class="tool absolute bottom7">
|
<el-button :loading="loading" type="primary" size="mini" @click="saveAuth">保存</el-button>
|
</div>
|
</el-card>
|
</el-main>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import treeTable from '@/components/TreeTable';
|
import { getCache, setCache } from '@/utils/sessionStorage';
|
import { SearchPermission, AddOrUpdateRoleVsPermission, GetUserRoleAllPermission } from '@/api/role-auth';
|
import { RoleSearch } from '@/api/role';
|
export default {
|
name: 'sys-permission-role-auth',
|
components: { treeTable },
|
data() {
|
return {
|
title: '[请选择左侧角色名称]',
|
// 加载状态
|
loading: false,
|
expandAll: true,
|
activeindex: -1,
|
// 选中角色
|
currentRoleInfo: {},
|
// 左侧导航集合
|
roleList: [],
|
// 右侧表格树权限列表集合
|
menuList: [],
|
// 需要保存的角色权限集合
|
saveMenuList: [],
|
currentTab: 'user',
|
// 右侧表格树APP权限列表集合
|
menuAppList: [],
|
// app选中角色
|
currentAppRoleInfo: {},
|
role_Id: null,
|
types: 1,
|
tablabel: ''
|
};
|
},
|
mounted() {
|
this.RoleSearch();
|
// this.GetUserRoleAllPermission();
|
},
|
methods: {
|
//刷新
|
refresh() {
|
this.activeindex = -1;
|
this.GetUserRoleAllPermission();
|
},
|
// 左侧加载数据
|
RoleSearch() {
|
RoleSearch('1&onePageNum=999').then(res => {
|
if (res.code == 0) {
|
this.roleList = res.data;
|
}
|
});
|
},
|
// 左侧菜单点击事件
|
activeclick(item, index) {
|
this.activeindex = index;
|
// var item = node.$attrs.item;
|
// this.currentRoleInfo = item;
|
this.$Loading(true);
|
this.title = item.roleName;
|
|
this.GetUserRoleAllPermission(item.roleName);
|
},
|
// 获得所有权限右侧表格树列表
|
GetUserRoleAllPermission(e) {
|
this.$Loading(true);
|
this.menuList = [];
|
GetUserRoleAllPermission({ roleName: this.title, type: this.types }).then(res => {
|
if (res.code == 0) {
|
if (e) {
|
let data = res.data;
|
let curcir = element => {
|
element.forEach(item => {
|
// item.isSelected = true;
|
if (item.children) {
|
curcir(item.children);
|
}
|
// if (item.value == 0) {
|
// item.isSelected = false;
|
// }
|
});
|
};
|
let Selected = element => {
|
element.forEach(item => {
|
if (item.auth) {
|
let auth = item.auth;
|
auth.forEach(i => {
|
if (i.value == 1) {
|
item.isSelected = true;
|
}
|
});
|
}
|
if (item.children) {
|
Selected(item.children);
|
}
|
});
|
};
|
Selected(data);
|
curcir(data);
|
data.forEach(element => {
|
if (element.children) {
|
let item = element.children;
|
item.forEach(i => {
|
if (i.isSelected) {
|
element.isSelected = true;
|
}
|
});
|
}
|
if (element.menuName == '首页') {
|
element.isSelected = true;
|
}
|
});
|
console.log(data);
|
this.menuList = data;
|
} else {
|
this.menuList = res.data;
|
}
|
}
|
this.$Loading();
|
});
|
},
|
// 权限点改变
|
checkAuthNode(row) {
|
row.auth.forEach(item => {
|
if (item.value == 1) {
|
row.isSelected = true;
|
if (row.parent) {
|
row.parent.isSelected = true;
|
}
|
}
|
});
|
},
|
// 树前面复选框选中
|
rowSelected(isSelected, row) {
|
let circulation = element => {
|
element.forEach(item => {
|
if (row.parentId == item.menu_Id) {
|
item.isSelected = row.isSelected;
|
} else {
|
if (item.children) {
|
circulation(item.children);
|
}
|
}
|
});
|
};
|
let setValue = authList => {
|
if (authList) {
|
authList.forEach(item => {
|
item.value = isSelected ? 1 : 0;
|
});
|
}
|
};
|
let eachChildren = children => {
|
if (children) {
|
children.forEach(item => {
|
item.isSelected = isSelected;
|
setValue(item.auth);
|
eachChildren(item.children);
|
// 改变保存数据集合
|
this.checkAuthNode(item);
|
});
|
}
|
};
|
setValue(row.auth);
|
eachChildren(row.children);
|
},
|
// 保存数据
|
saveAuth() {
|
let list = [];
|
//获取勾选的
|
let savlist = element => {
|
element.forEach(item => {
|
if (item.isSelected) {
|
list.push(item.menu_Id);
|
}
|
if (item.children) {
|
savlist(item.children);
|
}
|
if (item.value == 1) {
|
list.push(item.menu_Id);
|
}
|
if (item.auth) {
|
savlist(item.auth);
|
}
|
});
|
};
|
savlist(this.menuList);
|
if (list.length == 0) {
|
this.$message.error('没有可保存的数据！');
|
return;
|
}
|
const { roleName } = getCache('userInfo');
|
if (this.title == '[请选择左侧角色名称]') {
|
this.$message.error('请选择角色');
|
} else {
|
this.$Loading(true);
|
AddOrUpdateRoleVsPermission({ roleName: this.title, permissionNameList: JSON.stringify(list) }).then(res => {
|
if (res.code == 0) {
|
this.$message({
|
type: 'success',
|
message: '修改成功'
|
});
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.msg
|
});
|
}
|
this.$Loading();
|
});
|
}
|
},
|
// 头部切换
|
handleClick(tab, event) {
|
this.activeindex = -1;
|
this.title = '';
|
this.tablabel = tab.label;
|
if (tab.label === 'APP权限设置') {
|
this.types = 2;
|
this.GetUserRoleAllPermission();
|
}
|
if (tab.label === '角色权限设置') {
|
this.types = 1;
|
this.GetUserRoleAllPermission();
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.left-aside {
|
box-shadow: 0 0 4px #eaedef;
|
.left-role-title {
|
padding: 8px 10px;
|
background-color: #66b1ff;
|
color: white;
|
}
|
}
|
.box-card {
|
::v-deep .el-card__body {
|
padding: 10px;
|
height: calc(100% - 75px);
|
.el-checkbox:first-child {
|
margin-left: 0px;
|
}
|
.el-checkbox + .el-checkbox {
|
margin-left: 0px;
|
}
|
.el-checkbox__label {
|
padding-left: 2px;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
#role-auth {
|
.el-tabs__content {
|
height: calc(100% - 60px) !important;
|
}
|
}
|
</style>
|
