<template>
|
<div class="menuSettings_box">
|
<My-bread
|
:list="[
|
`${$t('operatManage.operatManage')}`,
|
|
`${$t('operatManage.MenuRoleAuthorization')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<div class="menuTreeBox">
|
<div class="left_tree">
|
<el-tree
|
:data="depList"
|
:props="defaultProps"
|
:show-checkbox="false"
|
:check-on-click-node="true"
|
:check-strictly="true"
|
node-key="id"
|
@check="treeCheck"
|
ref="treeForm"
|
:default-expanded-keys="[1]"
|
>
|
</el-tree>
|
</div>
|
<div class="right_menu">
|
<div
|
style="
|
font-size: 14px;
|
color: #409eff;
|
line-height: 1;
|
cursor: text;
|
position: relative;
|
top: 5px;
|
margin-left: 10px;
|
display: flex;
|
align-items: center;
|
"
|
>
|
<span>
|
{{
|
$t('operatManage.UserRoleAuthorizationObj.PermissionTable')
|
}}</span
|
>
|
<div class="btn" style="margin-left: auto">
|
<el-button
|
v-if="menuStatus.insert"
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="small"
|
:disabled="roleid == null ? true : false"
|
@click="adduser"
|
style="background: #409eff"
|
>{{
|
$t('operatManage.UserRoleAuthorizationObj.Added')
|
}}</el-button
|
>
|
<el-button
|
v-if="menuStatus.delete"
|
type="danger"
|
icon="el-icon-delete"
|
size="small"
|
@click="deletesUser"
|
:disabled="roleid == null ? true : false"
|
>{{
|
$t('operatManage.UserRoleAuthorizationObj.delete')
|
}}</el-button
|
>
|
</div>
|
</div>
|
<el-divider class="divider" />
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="77%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('dataManage.styleObj.index')"
|
width="55"
|
/>
|
<el-table-column
|
prop="authName"
|
:label="$t('operatManage.UserRoleAuthorizationObj.name')"
|
>
|
</el-table-column>
|
</el-table>
|
|
<div
|
style="margin-top: 20px; text-align: center"
|
class="pagination_box"
|
>
|
<el-pagination
|
@size-change="userhandleSizeChange"
|
@current-change="userhandleCurrentChange"
|
:current-page="userlistData.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="userlistData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="usercount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
|
<!-- <div class="menuSettings">
|
|
<div
|
style="
|
font-size: 14px;
|
color: #606266;
|
line-height: 1;
|
cursor: text;
|
position: relative;
|
top: 5px;
|
margin-left: 10px;
|
display: flex;
|
align-items: center;
|
"
|
>
|
<span>
|
{{
|
$t('operatManage.UserRoleAuthorizationObj.PermissionTable')
|
}}</span
|
>
|
<div class="btn" style="margin-left: auto">
|
<el-button
|
v-if="menuStatus.insert"
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="small"
|
:disabled="roleid == null ? true : false"
|
@click="adduser"
|
style="background: #409eff"
|
>{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button
|
>
|
<el-button
|
v-if="menuStatus.delete"
|
type="danger"
|
icon="el-icon-delete"
|
size="small"
|
@click="deletesUser"
|
:disabled="roleid == null ? true : false"
|
>{{ $t('operatManage.UserRoleAuthorizationObj.delete') }}</el-button
|
>
|
</div>
|
</div>
|
<el-divider class="divider" />
|
|
|
</div> -->
|
<el-dialog
|
:title="$t('operatManage.UserRoleAuthorizationObj.Added')"
|
:visible.sync="dialogTableVisible"
|
>
|
<el-table
|
:data="gridData"
|
height="40vh"
|
@selection-change="addhandleSelectionChange"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('dataManage.styleObj.index')"
|
/>
|
<el-table-column
|
prop="name"
|
:label="$t('operatManage.UserRoleAuthorizationObj.name')"
|
>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 20px; text-align: center" class="pagination_box">
|
<el-pagination
|
@size-change="addhandleSizeChange"
|
@current-change="addhandleCurrentChange"
|
:current-page="addlistData.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="addlistData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="addcount"
|
>
|
</el-pagination>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogTableVisible = false">{{
|
$t('dataManage.dictionaryManageObj.cancel')
|
}}</el-button>
|
<el-button
|
style="background: #409eff; border: 1px solid #409eff; color: white"
|
@click="addConfirm"
|
>{{ $t('dataManage.dictionaryManageObj.confirm') }}</el-button
|
>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from '../../components/MyBread.vue';
|
import {
|
selectMenuRecursives,
|
select_menuAuth_ByPageAndCount,
|
menuAuthDeletes,
|
select_AuthMenu_ByPageAndCount,
|
menuAuthinserts,
|
} from '../../api/api';
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data() {
|
return {
|
menuStatus: {
|
delete: false,
|
insert: false,
|
update: false,
|
},
|
addcount: 0,
|
gridData: [],
|
addlistData: {
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
dialogTableVisible: false,
|
usertableData: [],
|
userlistData: {
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
usercount: 0,
|
tableData: [],
|
// 当前选择的行的id
|
templateSelection: '',
|
// 当前选择的行的数据
|
checkList: [],
|
|
defaultProps: {
|
children: 'children',
|
label: 'cnName',
|
},
|
oriData: [], //原始树数据
|
depList: [], //el树数据
|
backUpData: {},
|
formLabelWidth: '170px',
|
listData: {
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
count: 0,
|
usermultipleSelection: [],
|
debid: null,
|
roleid: null,
|
addmultipleSelection: [],
|
};
|
},
|
methods: {
|
/**
|
* sws
|
*/
|
|
// 部门请求
|
async getMenuTree() {
|
//获取目录树最大ID，新建节点使用
|
const data = await selectMenuRecursives({ name: menuStartName });
|
if (data.code !== 200) {
|
return this.$message.error('请求单位报错');
|
}
|
|
this.depList = this.treeData(data.result);
|
},
|
treeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
|
return father.pid == 0; // 返回一级菜单
|
});
|
},
|
// 部门树单选
|
treeCheck(node, list) {
|
//node 该节点所对应的对象、list 树目前的选中状态对象
|
//选中事件在选中后执行，当lis中有两个选中时，使用setCheckedKeys方法，选中一个节点
|
|
if (list.checkedNodes.length > 0) {
|
this.listData.menuid = node.id;
|
this.debid = node.id;
|
this.roleid = node.id;
|
this.getRole();
|
if (list.checkedKeys.length == 2) {
|
//单选实现
|
this.$refs.treeForm.setCheckedKeys([node.id]);
|
}
|
} else {
|
this.debid = null;
|
this.roleid = null;
|
this.tableData = [];
|
this.usertableData = [];
|
}
|
},
|
|
addConfirm() {
|
this.$confirm('确定是否新增', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
let arr = [];
|
this.addmultipleSelection.forEach((e) => {
|
arr.push({ menuid: this.roleid, authid: e.id });
|
});
|
|
const data = await menuAuthinserts(arr);
|
if (data.code !== 200) {
|
return this.$message.error('新增失败');
|
}
|
this.$message({
|
type: 'success',
|
message: '新增成功!',
|
});
|
this.dialogTableVisible = false;
|
this.getRole();
|
})
|
.catch(() => {});
|
},
|
adduser() {
|
this.dialogTableVisible = true;
|
this.getadduserList();
|
},
|
//用户删除
|
async deletesUser() {
|
let arr = [];
|
this.usermultipleSelection.forEach((e) => {
|
arr.push(e.id);
|
});
|
const data = await menuAuthDeletes({ ids: arr.toString() });
|
if (data.code !== 200) {
|
return this.$message.error('删除失败');
|
}
|
this.$message({
|
message: '删除成功',
|
type: 'success',
|
});
|
this.getRole();
|
},
|
|
async getadduserList() {
|
this.addlistData.menuid = this.roleid;
|
const data = await select_AuthMenu_ByPageAndCount(this.addlistData);
|
if (data.code !== 200) {
|
return this.$message.error('新增用户列表请求错误');
|
}
|
this.gridData = data.result;
|
this.addcount = data.count;
|
},
|
|
//用户表多选
|
handleSelectionChange(val) {
|
this.usermultipleSelection = val;
|
},
|
//新增用户表多选
|
addhandleSelectionChange(val) {
|
this.addmultipleSelection = val;
|
},
|
// 新增用户表分页
|
addhandleSizeChange(val) {
|
this.addlistData.pageSize = val;
|
this.getadduserList();
|
},
|
// 新增用户表分页
|
addhandleCurrentChange(val) {
|
this.addlistData.pageIndex = val;
|
this.getadduserList();
|
},
|
// 用户表分页
|
userhandleSizeChange(val) {
|
this.userlistData.pageSize = val;
|
this.getRole();
|
},
|
// 用户表分页
|
userhandleCurrentChange(val) {
|
this.userlistData.pageIndex = val;
|
this.getRole();
|
},
|
|
// 角色表请求
|
async getRole() {
|
const data = await select_menuAuth_ByPageAndCount(this.listData);
|
if (data.code !== 200) {
|
return this.$message.error('用户角色请求错误');
|
}
|
this.tableData = data.result;
|
this.usercount = data.count;
|
},
|
showPermsMenu(res) {
|
switch (res.tag) {
|
case '/delete':
|
this.menuStatus.delete = true;
|
break;
|
case '/insert':
|
this.menuStatus.insert = true;
|
break;
|
case '/update':
|
this.menuStatus.update = true;
|
break;
|
}
|
},
|
},
|
created() {
|
var val = this.$store.state.currentPerms;
|
var permsEntity = this.$store.state.permsEntity;
|
for (var i = 0; i < permsEntity.length; i++) {
|
if (permsEntity[i].perms == val) {
|
this.showPermsMenu(permsEntity[i]);
|
}
|
}
|
this.getMenuTree();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.menuSettings_box {
|
height: 98%;
|
width: 98%;
|
padding: 1%;
|
position: absolute;
|
.menuTreeBox {
|
width: 100%;
|
height: 91%;
|
.left_tree {
|
width: 30%;
|
height: 92%;
|
padding: 10px;
|
border: 1px solid rgb(202, 201, 204);
|
border-radius: 5px;
|
float: left;
|
overflow-y: auto;
|
// 更改指标树图标颜色
|
/deep/ .el-tree .el-icon-caret-right:before {
|
color: white; /** 这里是要修改图标的颜色 **/
|
}
|
/deep/ .el-tree {
|
color: white; /** 这里是要修改图标的颜色 **/
|
background: transparent;
|
}
|
/deep/.el-tree-node__content {
|
&:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
}
|
/deep/.el-tree-node.is-current > .el-tree-node__content {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
color: #409eff;
|
}
|
}
|
.right_menu {
|
width: 65%;
|
height: 92%;
|
padding: 10px;
|
border: 1px solid rgb(202, 201, 204);
|
border-radius: 5px;
|
float: right;
|
}
|
}
|
/*里面的代码可以根据自己需求去进行更改*/
|
/* 设置滚动条的样式 */
|
::-webkit-scrollbar {
|
width: 4px;
|
}
|
/* 滚动槽 */
|
::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
|
border-radius: 10px;
|
}
|
/* 滚动条滑块 */
|
::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: #8b8b8b;
|
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
|
}
|
::-webkit-scrollbar-thumb:window-inactive {
|
background: #8b8b8b;
|
height: 289px;
|
}
|
.pagination_box {
|
/deep/.el-input__inner {
|
background-color: transparent !important;
|
border: 1px solid;
|
color: white;
|
}
|
/deep/.el-pagination__total {
|
color: white;
|
}
|
/deep/.el-pagination__jump {
|
color: white;
|
}
|
/deep/.el-pager li.active {
|
color: #1890ff;
|
}
|
/deep/.el-pager li {
|
color: white;
|
background: transparent;
|
}
|
/deep/.el-pager li {
|
color: white;
|
}
|
/deep/.btn-prev {
|
background: transparent;
|
}
|
/deep/.btn-next {
|
background: transparent;
|
}
|
}
|
/deep/ .el-dialog {
|
background: #303030;
|
}
|
/deep/.el-range-editor.is-active,
|
.el-range-editor.is-active:hover,
|
.el-select .el-input.is-focus .el-input__inner {
|
border: 1px solid;
|
}
|
/deep/.el-dialog__title {
|
color: white;
|
}
|
/*修改table 表体的背景颜色和文字颜色*/
|
/deep/ .el-table {
|
background-color: transparent;
|
|
th,
|
td {
|
background-color: transparent;
|
}
|
.el-table__expanded-cell {
|
background-color: transparent !important;
|
}
|
|
// 表头背景色
|
th.el-table__cell {
|
background-color: #303030;
|
color: #fff;
|
}
|
tr > td {
|
background-color: #303030;
|
color: #fff;
|
}
|
|
// hover效果
|
tr:hover > td {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
|
tbody tr:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
// text-align: center;
|
}
|
|
// 滚动条宽高
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 5px;
|
height: 5px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 5px;
|
/*滚动条宽度*/
|
height: 10px;
|
/*滚动条高度*/
|
}
|
/*定义滚动条轨道 内阴影+圆角*/
|
.el-table__body-wrapper::-webkit-scrollbar-track {
|
box-shadow: 0px 1px 3px #216fe6 inset;
|
/*滚动条的背景区域的内阴影*/
|
border-radius: 10px;
|
}
|
|
/*定义滑块 内阴影+圆角*/
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
box-shadow: 0px 1px 3px #216fe6 inset;
|
border-radius: 6px;
|
background-color: #216fe6;
|
}
|
}
|
.divider {
|
margin-top: 8px;
|
}
|
}
|
</style>
|
<style>
|
.el-select-dropdown {
|
background: #303030 !important;
|
border-color: 1px solid !important;
|
}
|
|
.el-scrollbar__wrap {
|
margin-bottom: -20px !important;
|
margin-right: -20px !important;
|
}
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background: rgba(255, 255, 255, 0.3) !important;
|
}
|
.el-select-dropdown__item {
|
color: white !important;
|
}
|
</style>
|
