<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-25 10:17:56
|
* @LastEditors: zhaoxiaoqiang 287285524@qq.com
|
* @LastEditTime: 2023-09-05 15:31:32
|
* @Description:
|
-->
|
<template>
|
<div class="role-control-page">
|
<el-row type="flex" align="top" justify="start" :gutter="16">
|
<el-col :span="6">
|
<el-card>
|
<div class="role-list-title">
|
<span>角色列表</span>
|
<el-button type="primary" @click="addRoleModel = true" size="small">新增</el-button>
|
</div>
|
<div class="role-list-table">
|
<Etable isFind httpUrl="roleGetRoleList" nameUrl="roleGetRoleList" itemsArr="roles" highlightCurrentRow :columns="columns" :searchData="searchData" :hasPagination="false" @operateDo="operateDo" @cellClick="powerInit" border></Etable>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="18">
|
<el-card>
|
<el-tabs value="操作权限">
|
<el-tab-pane label="操作权限" name="操作权限">
|
<el-collapse v-for="item in initList" :key="item.powerId">
|
<el-collapse-item :name="item.powerId" :key="item.powerId">
|
<template slot="title">
|
{{ item.powerName }}<i class="header-icon el-icon-info"></i>
|
<el-checkbox :id="item.powerId + ''" class="input" type="checkbox" style="position: absolute; right: 25px" v-model="checkedList[item.powerId]" @change="getAll($event, item.powerId, 'power')" />
|
</template>
|
<el-checkbox class="checkBox-item" v-for="el in item.btnInfos" @change="getAll($event, el.code, 'btn')" v-model="gnCheckedList[el.code]" :key="el.code" :label="el.code" :id="el.code + ''">{{ el.name }}</el-checkbox>
|
</el-collapse-item>
|
</el-collapse>
|
<div class="btn-box">
|
<el-checkbox v-model="allChecked" type="checkbox" @change="allCheck">
|
全选
|
</el-checkbox>
|
<el-button type="primary" style="margin-left: 20px" size="small" :loading="btnLoading" @click="submitFn">保存</el-button>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
<!--新增模态窗-->
|
<el-dialog title="新增角色" width="500px" :visible.sync="addRoleModel" @on-visible-change="clearVal" class-name="vertical-center-modal">
|
<div>
|
<el-input v-model="addRoleVal" :maxlength="32" placeholder="请输入角色名称" style="width: 100%"></el-input>
|
</div>
|
<div slot="footer">
|
<el-button type="primary" size="small" :loading="roleAddModalLoading" @click="addRoleBut">新增</el-button>
|
<el-button size="small" @click="addRoleModel = false">取消</el-button>
|
</div>
|
</el-dialog>
|
<!--编辑模态窗-->
|
<el-dialog title="编辑角色" width="500px" :visible.sync="editRoleModel" @on-visible-change="clearVal" class-name="vertical-center-modal">
|
<div>
|
<el-input v-model="editRoleVal" placeholder="请输入角色名称" style="width: 100%"></el-input>
|
</div>
|
<div slot="footer">
|
<el-button type="primary" size="small" :loading="roleEditModalLoading" @click="editRoleBut">保存</el-button>
|
<el-button size="small" @click="editRoleModel = false">取消</el-button>
|
</div>
|
</el-dialog>
|
<!--删除模态窗-->
|
<el-dialog :visible.sync="removeModel" width="400px" class-name="vertical-center-modal">
|
<p slot="title">删除角色</p>
|
<div style="display: flex; align-items: center">
|
<i class="el-icon-info" style="color: red; font-size: 26px"></i>
|
<span style="margin-left: 20px">删除角色后无法恢复，请问是否确认？</span>
|
</div>
|
<div slot="footer">
|
<el-button type="primary" size="small" :loading="roleEditModalLoading" @click="removeFn">确认</el-button>
|
<el-button size="small" @click="removeModel = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
setInit,
|
setPower,
|
roleAdd,
|
roleUpdate,
|
roleDel,
|
roleInitUpdate,
|
} from "@/api/user";
|
|
import Etable from "../../components/table.vue";
|
export default {
|
name: "role-management",
|
components: { Etable },
|
data() {
|
return {
|
roleType: 1, //数据权限产品区分
|
gnCheckedList: {}, //功能选项选中
|
checkedList: {}, //控制主菜单的选中
|
allChecked: false, //全选
|
btnLoading: false,
|
loading: false,
|
initList: [], //初始化渲染list
|
btnList: [], //按钮权限
|
powerList: [], //菜单权限
|
addRoleVal: "", //新增角色名称
|
roleId: "", //被编辑的角色ID
|
editRoleVal: "", //编辑角色名称
|
addRoleModel: false, // 新增角色模态窗
|
editRoleModel: false, // 编辑模态窗
|
removeModel: false, //删除模态窗
|
removeRoleModel: false, //删除莫泰传
|
roleAddModalLoading: false,
|
roleEditModalLoading: false,
|
list: [],
|
columns: [
|
{
|
lable: "角色名称",
|
prop: "roleName",
|
},
|
{
|
lable: "",
|
align: "right",
|
render: (h, params) => {
|
return h(
|
"div",
|
{
|
style:
|
"display:flex;align-items:center;justify-content:flex-end;",
|
},
|
[
|
//编辑
|
h(
|
"div",
|
{
|
on: {
|
click: (e) => {
|
e.stopPropagation();
|
this.editRoleVal = params.row.roleName;
|
this.editRoleModel = true;
|
this.roleId = params.row.roleId;
|
},
|
},
|
},
|
[
|
h("i", {
|
class: "el-icon-edit",
|
style: "margin-right:15px;cursor:pointer;font-size:16px;",
|
}),
|
]
|
),
|
//删除
|
h(
|
"div",
|
{
|
on: {
|
click: (e) => {
|
e.stopPropagation();
|
this.removeModel = true;
|
this.roleId = params.row.roleId;
|
},
|
},
|
},
|
[
|
h("i", {
|
class: "el-icon-delete",
|
style: "cursor:pointer;font-size:16px;",
|
}),
|
]
|
),
|
]
|
);
|
},
|
},
|
],
|
searchData: {},
|
};
|
},
|
methods: {
|
//全选
|
allCheck(e) {
|
// 按钮权限
|
for (let key in this.gnCheckedList) {
|
this.gnCheckedList[key] = this.allChecked;
|
}
|
Object.keys(this.gnCheckedList).map((item) =>
|
this.btnList.indexOf(Number(item)) < 0
|
? this.btnList.push(Number(item))
|
: ""
|
);
|
// // ===================
|
for (let key in this.checkedList) {
|
this.checkedList[key] = this.allChecked;
|
}
|
Object.keys(this.checkedList).map((item) =>
|
this.powerList.indexOf(Number(item)) < 0
|
? this.powerList.push(Number(item))
|
: ""
|
);
|
if (!this.allChecked) {
|
this.btnList = [];
|
this.powerList = [];
|
}
|
this.$forceUpdate();
|
},
|
//选择角色
|
powerInit(params) {
|
this.roleId = params.roleId;
|
let obj = { roleId: params.roleId };
|
setInit(obj).then((res) => {
|
if (res.body.btnList) {
|
this.btnList = res.body.btnList;
|
this.$forceUpdate();
|
Object.keys(this.gnCheckedList).forEach((item) => {
|
this.gnCheckedList[item] = false;
|
this.btnList.forEach((el) => {
|
if (item == el) {
|
this.gnCheckedList[item] = true;
|
}
|
});
|
});
|
}
|
if (res.body.powerList) {
|
this.powerList = res.body.powerList;
|
Object.keys(this.checkedList).forEach((item) => {
|
this.checkedList[item] = false;
|
this.powerList.forEach((el) => {
|
if (item == el) {
|
this.checkedList[item] = true;
|
}
|
});
|
});
|
}
|
this.allChecked = Object.values(this.checkedList).every(
|
(item) => item == true
|
);
|
});
|
},
|
clearVal() {
|
this.addRoleVal = "";
|
},
|
submitFn() {
|
if (!this.roleId) {
|
this.$message({
|
message: "请先选择角色后再提交!",
|
type: "error",
|
});
|
return;
|
}
|
let obj = {
|
powerList: this.powerList,
|
btnList: this.btnList,
|
roleId: this.roleId,
|
};
|
setPower(obj).then(
|
(res) => {
|
this.$message({
|
message: "保存成功",
|
type: "success",
|
});
|
this.btnLoading = false;
|
},
|
(err) => {
|
this.btnLoading = false;
|
}
|
);
|
},
|
//主菜单增加或者删除
|
getAll(e, i, def) {
|
// 菜单权限
|
if (def == "power") {
|
if (this.checkedList[i]) {
|
if (this.powerList.indexOf(i) < 0) {
|
this.powerList.push(i);
|
}
|
} else {
|
this.powerList.splice(this.powerList.indexOf(i), 1);//删除菜单ID
|
let str = `${i}`.substring(0,2);//要删除的id前两位
|
let idArr = [];
|
this.powerList.forEach(m=>{
|
let powerStr =`${m}`.substring(0,2);
|
if(str == powerStr ){
|
idArr.push(m);
|
}
|
})
|
if(idArr.length==1&&idArr[0]==`${str}00`){
|
this.powerList.splice(this.powerList.indexOf(idArr[0]), 1);
|
}
|
}
|
}
|
// 按钮权限
|
if (def == "btn") {
|
if (this.gnCheckedList[i]) {
|
if (this.btnList.indexOf(i) < 0) this.btnList.push(i);
|
} else {
|
this.btnList.splice(this.btnList.indexOf(i), 1);
|
}
|
}
|
this.$forceUpdate();
|
// 选中所有
|
this.allChecked = Object.values(this.checkedList).every(
|
(item) => item == true
|
);
|
},
|
//全选按钮
|
addRoleBut() {
|
if (!this.addRoleVal) {
|
this.$Message.error("请输入角色名称!");
|
return;
|
}
|
let reg = /^[\u4e00-\u9fa50-9a-zA-Z]{1,32}$/;
|
if (!reg.test(this.addRoleVal)) {
|
this.$Message.error("请输入正确的角色名称!");
|
return;
|
}
|
let obj = {
|
roleName: this.addRoleVal,
|
};
|
roleAdd(obj).then(
|
(res) => {
|
this.$message({
|
message: "新建角色成功!",
|
type: "success",
|
});
|
this.initList = [];
|
this.addRoleModel = false;
|
this.addRoleVal = "";
|
this.searchData = { ...{} };
|
this.init();
|
},
|
(err) => { }
|
);
|
},
|
editRoleBut() {
|
if (!this.editRoleVal) {
|
this.$Message.error("请输入角色名称!");
|
return;
|
}
|
let reg = /^[\u4e00-\u9fa50-9a-zA-Z]{1,32}$/;
|
if (!reg.test(this.editRoleVal)) {
|
this.$Message.error("请输入正确的角色名称!");
|
return;
|
}
|
let obj = {
|
roleName: this.editRoleVal,
|
roleId: this.roleId,
|
};
|
|
roleUpdate(obj).then(
|
() => {
|
this.$message({
|
message: "保存成功！",
|
type: "success",
|
});
|
this.initList = [];
|
this.editRoleModel = false;
|
this.editRoleVal = "";
|
this.roleId = "";
|
this.searchData = { ...{} };
|
this.init();
|
},
|
(err) => {
|
// codeManage.showTipOfStatuCode(err, this);(err, this);
|
}
|
);
|
},
|
removeFn() {
|
this.removeModel = false;
|
let obj = {
|
roleId: this.roleId,
|
};
|
roleDel(obj).then(
|
() => {
|
this.$message({
|
message: "删除成功！",
|
type: "success",
|
});
|
this.initList = [];
|
this.searchData = { ...{} };
|
this.init();
|
},
|
(err) => {
|
// codeManage.showTipOfStatuCode(err, this);(err, this);
|
}
|
);
|
},
|
init() {
|
roleInitUpdate().then((res) => {
|
this.setCheckedList(res.body.powerInfos);
|
});
|
},
|
setCheckedList(powerInfos, fatherItem) {
|
// this.checkedList = [];
|
powerInfos.forEach((item, index) => {
|
this.checkedList[item.powerId] = false;
|
if (item.btnInfos) {
|
item.btnInfos.forEach((ite) => {
|
this.gnCheckedList[ite.code] = false;
|
});
|
}
|
if (item.btnInfos) {
|
item.btnInfos.forEach((btn) => {
|
this.gnCheckedList[btn.code] = false;
|
});
|
}
|
|
if (item.childPowerInfos) {
|
this.setCheckedList(item.childPowerInfos, item);
|
}
|
if (fatherItem) {
|
let arrItem = item;
|
arrItem.powerName = fatherItem.powerName + "——" + item.powerName;
|
this.initList.push(arrItem);
|
} else {
|
if (!item.childPowerInfos || item.childPowerInfos.length == 0) {
|
this.initList.push(item);
|
}
|
}
|
});
|
// console.log(this.initList);
|
this.loading = true;
|
},
|
operateDo() { },
|
},
|
created() {
|
this.init();
|
},
|
};
|
</script>
|
<style lang="scss">
|
.ivu-modal-content {
|
width: auto !important;
|
}
|
.el-collapse-item__header {
|
height: 38px;
|
line-height: 38px;
|
padding-left: 32px;
|
background-color: #f7f7f7;
|
}
|
.title_box {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-right: 15px;
|
}
|
.ivu-modal-body {
|
width: auto !important;
|
}
|
// .line {
|
// width: 100%;
|
// padding-left: 25px;
|
// border-bottom: 1px solid #dddee1;
|
// }
|
.box {
|
width: 100%;
|
margin-bottom: 15px;
|
background: #e9e9e9;
|
}
|
.ivu-checkbox-group {
|
padding-top: 15px;
|
padding-left: 25px;
|
}
|
.role-control-page {
|
.ivu-collapse-content > .ivu-collapse-content-box {
|
padding-bottom: 10px;
|
}
|
// .ivu-collapse-content {
|
// // padding: 0 16px;
|
// }
|
.role-list-title {
|
display: flex;
|
display: -webkit-flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #dddee1;
|
}
|
.role-list-table {
|
margin-top: 20px;
|
}
|
.ivu-card {
|
height: 90vh;
|
overflow-y: scroll;
|
}
|
.flex-layout {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
.ivu-checkbox-wrapper {
|
width: 120px;
|
margin-right: 13%;
|
margin-bottom: 20px;
|
}
|
.btn-box {
|
margin-top: 20px;
|
display: flex;
|
display: -webkit-flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
.dataPower-item {
|
border-bottom: 1px solid #dddee1;
|
padding-bottom: 20px;
|
margin-bottom: 80px;
|
}
|
.el-collapse-item__content {
|
padding: 12px 16px;
|
}
|
}
|
</style>
|
