<template>
|
<el-container style="border: 1px solid #eee">
|
<el-aside ref="left-aside" class="left-aside" width="200px" style="background-color: rgb(238, 241, 246)">
|
<div class="left-role-title">请选择角色</div>
|
<el-menu unique-opened @select="menuSelect">
|
<template v-for="item in roleList">
|
<el-submenu v-if="item.children && item.children.length" :key="item.role_Id" :index="''+item.role_Id">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
{{ item.roleName }}
|
</template>
|
<el-menu-item v-for="subItem in item.children" :key="subItem.role_Id" :sub-item="subItem" :index="'' + subItem.role_Id">{{ subItem.roleName }}</el-menu-item>
|
</el-submenu>
|
<el-menu-item v-else :key="item.role_Id" :item="item" :index="'' + item.role_Id">{{ item.roleName }}</el-menu-item>
|
</template>
|
</el-menu>
|
</el-aside>
|
|
<el-tabs v-model="currentTab" type="card" style="width:100%" @tab-click="handleClick">
|
<el-tab-pane label="角色权限设置" name="user">
|
<el-main ref="el-main" style="padding:0">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>角色权限设置 - {{ title }}</span>
|
</div>
|
<tree-table ref="tree-table" :data="menuList" :expand-all="expandAll" :max-height="600" 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 margin-top-20">
|
<el-button :loading="loading" type="primary" icon="el-icon-yrt-baocun" @click="saveAuth">保存</el-button>
|
</div>
|
</el-card>
|
</el-main>
|
|
</el-tab-pane>
|
<el-tab-pane label="APP权限设置" name="app">
|
<el-main ref="el-main" style="padding:0">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>APP权限设置 - {{ title }}</span>
|
</div>
|
<tree-table ref="tree-table" :data="menuAppList" :expand-all="expandAll" :max-height="600" 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 margin-top-20">
|
<el-button :loading="loading" type="primary" icon="el-icon-yrt-baocun" @click="saveAuth">保存</el-button>
|
</div>
|
</el-card>
|
</el-main>
|
|
</el-tab-pane>
|
</el-tabs>
|
|
</el-container>
|
</template>
|
|
<script>
|
/* *
|
auth: Lei.j1ang
|
Created: 2018/1/19-14:54
|
*/
|
import treeTable from "@/components/TreeTable";
|
|
export default {
|
name: "sys-permission-role-auth",
|
components: { treeTable },
|
data() {
|
return {
|
title: "[请选择左侧角色名称]",
|
// 加载状态
|
loading: false,
|
expandAll: true,
|
// 选中角色
|
currentRoleInfo: {},
|
// 左侧导航集合
|
roleList: [],
|
// 右侧表格树权限列表集合
|
menuList: [],
|
// 需要保存的角色权限集合
|
saveMenuList: [],
|
currentTab: "user",
|
// 右侧表格树APP权限列表集合
|
menuAppList: [],
|
// app选中角色
|
currentAppRoleInfo: {},
|
role_Id: null
|
};
|
},
|
mounted() {
|
this.getMenuData();
|
},
|
methods: {
|
// 左侧加载数据
|
getMenuData() {
|
var the = this;
|
var userInfo = this.common.getUserInfo();
|
var where = {
|
parentId: 0,
|
userProduct_Id: userInfo.userProduct_Id
|
};
|
|
var url = "/api/common/loadTreeNodeAll";
|
var params = {
|
openNodeApi: true,
|
folder: "sys/core",
|
DBServer: "Sys",
|
tableName: "Sys_Role",
|
tableView: "Sys_Role",
|
keyName: "role_Id",
|
nodeName: "roleName",
|
fixHasChild: false,
|
isBreakWay: false,
|
displayBreakWay: false,
|
parentName: "parentId",
|
orderBy: "orderNo desc, role_Id",
|
where: where,
|
extendColumns: ""
|
};
|
the.common.ajax(
|
url,
|
params,
|
res => {
|
the.common.showMsg(res);
|
if (res.result) {
|
the.roleList = res.data;
|
}
|
},
|
this.$refs["left-aside"]
|
);
|
},
|
// 左侧菜单点击事件
|
menuSelect(index, indexPath, node) {
|
var item = node.$attrs.item;
|
this.currentRoleInfo = item;
|
this.title = item.roleName;
|
if (this.currentTab === "user") {
|
this.getRoleAuthMenu(item.role_Id);
|
} else {
|
this.getRoleAuthMenuApp(item.role_Id);
|
}
|
this.currentAppRoleInfo = item;
|
this.role_Id = item.role_Id;
|
},
|
// 获得角色权限右侧表格树列表
|
getRoleAuthMenu(role_Id) {
|
var url = "/api/sys/roleAuth/getRoleAuthMenu";
|
var params = {
|
role_Id: role_Id,
|
roleType: 0
|
};
|
this.loading = true;
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.menuList = res.data;
|
this.loading = false;
|
},
|
true
|
);
|
},
|
// 获得App权限右侧表格树列表
|
getRoleAuthMenuApp(role_Id) {
|
var url = "/api/sys/roleAuth/getRoleAuthMenu";
|
var params = {
|
role_Id: role_Id,
|
roleType: 8
|
};
|
this.loading = true;
|
var ref = this.$refs["tree-table"];
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.menuAppList = res.data;
|
this.loading = false;
|
}
|
},
|
ref
|
);
|
},
|
// 权限点改变
|
checkAuthNode(row) {
|
const authValue = [];
|
row.auth.forEach((item, index) => {
|
authValue.push(item.nodeName + "=" + item.value);
|
});
|
const node = {
|
role_Id: this.currentRoleInfo.role_Id,
|
menu_Id: row.menu_Id,
|
authValue: authValue.join(",")
|
};
|
var existItem = this.saveMenuList.find(item => {
|
return item.menu_Id === node.menu_Id;
|
});
|
if (existItem >= 0) {
|
existItem.authValue = node.authValue;
|
} else {
|
this.saveMenuList.push(node);
|
}
|
},
|
// 树前面复选框选中
|
rowSelected(isSelected, row) {
|
var setValue = authList => {
|
authList.forEach(item => {
|
item.value = isSelected ? 1 : 0;
|
});
|
};
|
|
var 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);
|
|
// 改变保存数据集合
|
this.checkAuthNode(row);
|
},
|
// 保存数据
|
saveAuth() {
|
if (!this.saveMenuList.length) {
|
this.$message.error("没有可保存的数据！");
|
return;
|
}
|
this.loading = true;
|
var url = "/api/sys/roleAuth/saveAuthMenu";
|
var params = {
|
menuList: this.saveMenuList,
|
roleType: this.currentTab === "user" ? 0 : 8
|
};
|
var ref = this.$refs["tree-table"];
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
this.loading = false;
|
if (res.result) {
|
this.saveMenuList = [];
|
}
|
},
|
ref
|
);
|
},
|
// 头部切换
|
handleClick(tab, event) {
|
this.saveMenuList = [];
|
if (tab.label === "APP权限设置") {
|
if (this.role_Id !== null) {
|
this.getRoleAuthMenuApp(this.role_Id);
|
}
|
}
|
if (tab.label === "角色权限设置") {
|
if (this.role_Id !== null) {
|
// this.getRoleAuthMenu(this.role_Id);
|
this.menuAppList = [];
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.left-aside {
|
.left-role-title {
|
padding: 10px;
|
border-bottom: 1px solid #ebeef5;
|
background-color: #66b1ff;
|
color: white;
|
}
|
::v-deep .el-menu {
|
.el-menu-item,
|
.el-submenu__title {
|
height: 35px;
|
line-height: 35px;
|
}
|
.el-menu-item.is-active {
|
background-color: #ecf5ff;
|
}
|
|
&.is-active,
|
&.is-opened {
|
background-color: #66b1ff;
|
.el-submenu__title {
|
color: white;
|
.el-icon-menu,
|
.el-submenu__icon-arrow {
|
color: white;
|
}
|
&:hover {
|
background-color: #66b1ff;
|
}
|
}
|
}
|
}
|
}
|
.box-card {
|
::v-deep .el-card__body {
|
padding: 10px;
|
.el-checkbox:first-child {
|
margin-left: 0px;
|
}
|
.el-checkbox + .el-checkbox {
|
margin-left: 0px;
|
}
|
.el-checkbox__label {
|
padding-left: 2px;
|
}
|
}
|
}
|
</style>
|
