You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bsdgy-front/src/pages/user/RoleManager.vue

532 lines
22 KiB
Vue

6 years ago
<style scoped>
6 years ago
/deep/ .addButton {
6 years ago
background: #3496EB;
}
6 years ago
/deep/ .deleteButton {
border: 1px solid #3496EB;
6 years ago
color: #3496EB;
background: white;
}
6 years ago
/deep/ .role-select-radio-group {
6 years ago
height: 24px;
line-height: 24px;
color: #637182;
border: 1px solid #EDEFF1;
}
6 years ago
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
6 years ago
color: #2d8cf0;
}
6 years ago
/deep/ .system-role-div {
6 years ago
height: 39px;
padding: 10px;
}
6 years ago
/deep/ .system-role-img {
6 years ago
height: 12px;
width: 12px;
display: inline-block;
margin-right: 9px;
margin-left: 7px;
}
6 years ago
/deep/ .system-role-name-selected {
6 years ago
font-size: 14px;
display: inline-block;
color: #2074E2;
cursor: default;
}
6 years ago
/deep/ .system-role-name-un-select {
6 years ago
font-size: 14px;
display: inline-block;
color: #535353;
cursor: default;
}
6 years ago
/deep/ .system-role-name-un-select:hover {
6 years ago
color: #2074E2;
}
6 years ago
/deep/ .system-role-number-selected {
6 years ago
font-size: 13px;
display: inline-block;
color: #2074E2;
float: right;
margin-right: 11px;
cursor: pointer;
}
6 years ago
/deep/ .system-role-number-un-select {
6 years ago
font-size: 13px;
display: inline-block;
color: #535353;
float: right;
margin-right: 11px;
cursor: pointer;
}
6 years ago
/deep/ .ivu-checkbox {
6 years ago
margin-right: 13px;
}
6 years ago
/deep/ .ivu-checkbox-checked .ivu-checkbox-inner {
6 years ago
border-color: #2074E2;
background-color: #2074E2;
}
6 years ago
/deep/ .ivu-checkbox-indeterminate .ivu-checkbox-inner {
6 years ago
border-color: #2074E2;
background-color: #2074E2;
}
</style>
<template>
<div style="height: 100%;">
<Row style="height: 100%;">
<i-col span="5" style="height: 100%;">
<div style="border-bottom: 1px solid #EDEFF1">
6 years ago
<div style="margin: 15px 0 15px 15px">
<span style="color: #697882;font-size: 12px;font-weight: 700">系统角色</span>
</div>
</div>
<div>
<div class="system-role-div" v-for="item in roleList" :value="item.index" :key="item.id">
<img :src="item.imgUrl" class="system-role-img"/>
<span :class="item.selectFlag === 'selected' ? 'system-role-name-selected' : 'system-role-name-un-select'"
@click="selectRole(item.id)" :value="item.id">{{item.name}}</span>
<span :class="item.selectFlag === 'selected' ? 'system-role-number-selected' : 'system-role-number-un-select'"
@click="goToAccManagerPage">{{item.number}}</span>
</div>
</div>
</i-col>
6 years ago
<i-col span="1" style="max-width: 5px;background-color: #EFF3F8;height: 100%;">
</i-col>
6 years ago
<!--权限多选-->
<i-col span="18" style="height: 100%;">
<div style="border-bottom: 1px solid #EDEFF1;margin-left: 17px;">
<div style="margin: 15px 0 15px 0">
6 years ago
<span style="color: #697882;font-size: 12px;font-weight: 700">角色权限</span>
</div>
</div>
<div style="margin-left: 30px;margin-top: 39px;border-top: 1px solid #E4E9F1;">
6 years ago
<!--1-->
<div v-for="item in permissionList" :key="item.id">
<div style="border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;background-color: #F7F8FA;">
6 years ago
<Checkbox :indeterminate="item.indeterminate" :value="item.check"
6 years ago
@click.prevent.native="handleItemCheckAll(item)"
style="height: 95%;color:#697882;background-color: #F7F8FA;">{{item.name}}
</Checkbox>
6 years ago
</div>
<!--2-->
6 years ago
<div v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="height: 49px;">
<div style="float: left;width: 20%;border-right: 1px solid #E4E9F1;border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;">
<CheckboxGroup v-model="item.checkArr">
6 years ago
<Checkbox style="margin-left: 30px;color:#697882" :label="itemSon.id"
@click.prevent.native="handleItemSonCheckAll(itemSon, item)"
:key="itemSon.id"
:indeterminate="itemSon.indeterminate" :value="itemSon.check">
{{itemSon.name}}
</Checkbox>
6 years ago
</CheckboxGroup>
6 years ago
</div>
6 years ago
<!--3-->
<div style="float: left;width: 80%;height: 49px;line-height: 49px;border-bottom: 1px solid #E4E9F1;">
<CheckboxGroup v-model="itemSon.checkArr"
@on-change="handleGrandSonCheckChange(itemSon, item)">
<Checkbox v-for="itemGrandson in itemSon.sonPermissionList"
:key="itemGrandson.id"
style="margin-left: 30px;color:#697882" :label="itemGrandson.id"
:value="itemGrandson.check">
{{itemGrandson.name}}
</Checkbox>
</CheckboxGroup>
</div>
</div>
6 years ago
</div>
</div>
<div style="top: 76%;border-top: 1px solid #E4E9F1;width: 100%;padding-top: 20px;position: absolute;text-align: center;">
6 years ago
<Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;"
@click="savePermission()">保存
</Button>
6 years ago
</div>
</i-col>
</Row>
</div>
</template>
<script>
6 years ago
import RoleManager from '../../services/user/RoleManager'
6 years ago
import roleSelectedImg from '../../../static/img/role-selected.png'
import roleUnSelectImg from '../../../static/img/role-un-select.png'
6 years ago
6 years ago
export default {
data() {
return {
name: "RoleManager",
//当前选中角色id
roleSelectId: 1,
//角色集合
6 years ago
roleList: [
6 years ago
{
id: 1,
name: "系统管理员",
number: 6,
imgUrl: roleSelectedImg,
selectFlag: 'selected'
},
{
id: 2,
name: "运营人员",
number: 18,
imgUrl: roleUnSelectImg,
selectFlag: "unSelect"
},
{
id: 3,
name: "店长",
number: 123,
imgUrl: roleUnSelectImg,
selectFlag: "unSelect"
},
{
id: 4,
name: "导购",
number: 423,
imgUrl: roleUnSelectImg,
selectFlag: "unSelect"
},
],
//权限集合
permissionList: [
{
id: 1,
name: '一级权限a',
level: 1,
//选中1个false全部选中true全未选false
check: false,
//选中1个true全部选中true全未选false
indeterminate: false,
//选中的子权限
6 years ago
checkArr: [],
sonPermissionList: [
6 years ago
{
id: 2,
name: '二级权限a',
level: 2,
//选中1个false全部选中true全未选false
check: false,
//选中1个true全部选中true全未选false
indeterminate: false,
6 years ago
checkArr: [],
sonPermissionList: [
6 years ago
{
id: 7,
name: '三级权限a',
level: 3,
},
{
id: 8,
name: '三级权限b',
level: 3,
}
]
},
{
id: 3,
name: '二级权限b',
level: 2,
//选中1个false全部选中true全未选false
check: false,
//选中1个true全部选中true全未选false
indeterminate: false,
6 years ago
checkArr: [],
sonPermissionList: [
6 years ago
{
id: 9,
name: '三级权限c',
level: 3,
},
{
id: 10,
name: '三级权限d',
level: 3,
}
]
}
6 years ago
]
}, {
6 years ago
id: 4,
name: '一级权限b',
level: 1,
check: false,
6 years ago
checkArr: [],
6 years ago
indeterminate: false,
6 years ago
sonPermissionList: [
6 years ago
{
id: 5,
name: '二级权限c',
level: 2,
check: false,
6 years ago
checkArr: [],
6 years ago
indeterminate: false,
6 years ago
sonPermissionList: [
6 years ago
{
id: 11,
name: '三级权限e',
level: 3
},
{
id: 12,
name: '三级权限f',
level: 3
}
]
},
{
id: 6,
name: '二级权限d',
level: 2,
check: false,
6 years ago
checkArr: [],
6 years ago
indeterminate: false,
6 years ago
sonPermissionList: [
6 years ago
{
id: 13,
name: '三级权限g',
level: 3
},
{
id: 14,
name: '三级权限h',
level: 3
}
]
}
6 years ago
]
},
6 years ago
]
}
},
mounted: function () {
6 years ago
this.roleInit();
6 years ago
},
methods: {
//一级权限-点击事件
6 years ago
handleItemCheckAll(item) {
6 years ago
// let item = this.permissionList[index];
if (item.indeterminate) {
item.check = false;
} else {
item.check = !item.check;
}
item.indeterminate = false;
//二级权限全选
if (item.check) {
//全选
item.sonPermissionList.forEach(function (itemSon) {
itemSon.check = true;
item.checkArr.push(itemSon.id);
//三级权限全选
let itemGrandsonList = itemSon.sonPermissionList;
itemGrandsonList.forEach(function (grandson) {
itemSon.checkArr.push(grandson.id);
})
});
} else {
//取消全部选择
item.checkArr = [];
item.sonPermissionList.forEach(function (itemSon) {
itemSon.check = false;
itemSon.checkArr = [];
});
}
},
//二级权限-点击事件
handleItemSonCheckAll(itemSon, item) {
/*let item = this.permissionList[index];
let itemSon = this.permissionList[index].sonPermissionList[itemSonIndex];*/
if (itemSon.indeterminate) {
itemSon.check = false;
} else {
itemSon.check = !itemSon.check;
}
itemSon.indeterminate = false;
//三级权限全选
let sonPermission = itemSon.sonPermissionList;
if (itemSon.check) {
//全选
sonPermission.forEach(function (sonItem) {
if (itemSon.checkArr.indexOf(sonItem.id) < 0) {
itemSon.checkArr.push(sonItem.id);
}
});
if (item.checkArr.indexOf(itemSon.id) < 0) {
item.checkArr.push(itemSon.id);
}
} else {
//取消三级全部选择
itemSon.checkArr = [];
//从二级选中数组中移除当前二级权限
let curItemSonIndex = item.checkArr.indexOf(itemSon.id);
item.checkArr.splice(curItemSonIndex, curItemSonIndex + 1);
}
//处理一级权限勾选图标
let sonPermissionCount = this.permissionList.length;
if (item.checkArr.length === sonPermissionCount) {
item.indeterminate = false;
item.check = true;
} else if (item.checkArr.length > 0) {
item.indeterminate = true;
item.check = false;
} else {
item.indeterminate = false;
item.check = false;
}
console.log("click");
console.log(item);
},
//三级权限-点击事件
6 years ago
handleGrandSonCheckChange(itemSon, item) {
6 years ago
/*let item = this.permissionList[index];
let itemSon = this.permissionList[index].sonPermissionList[itemSonIndex];*/
let sonPermissionCount = itemSon.sonPermissionList.length;
if (itemSon.checkArr.length === sonPermissionCount) {
itemSon.indeterminate = false;
itemSon.check = true;
item.checkArr.push(itemSon.id);
} else if (itemSon.checkArr.length > 0) {
itemSon.indeterminate = true;
itemSon.check = false;
} else {
itemSon.indeterminate = false;
itemSon.check = false;
//从二级选中数组中移除当前二级权限
let curItemSonIndex = item.checkArr.indexOf(itemSon.id);
item.checkArr.splice(curItemSonIndex, curItemSonIndex + 1);
}
let parentPermissionCount = item.sonPermissionList.length;
if (item.checkArr.length === parentPermissionCount) {
item.indeterminate = false;
item.check = true;
} else if (item.checkArr.length > 0) {
item.indeterminate = true;
item.check = false;
} else {
item.indeterminate = false;
item.check = false;
}
},
//点击角色数字跳转到账号管理页面
goToAccManagerPage: function () {
6 years ago
this.$router.push({path: '/account/manager'});
6 years ago
},
//选中角色
selectRole: function (id) {
let curId = id;
let that = this;
that.roleList.forEach(function (item) {
if (item.id === curId) {
item.imgUrl = roleSelectedImg;
item.selectFlag = "selected";
6 years ago
that.roleSelectId = item.id;
6 years ago
} else {
item.imgUrl = roleUnSelectImg;
item.selectFlag = "unSelect";
}
});
6 years ago
that.rolePermissionList();
6 years ago
},
//保存
savePermission: function () {
6 years ago
let request = {
roleId: this.roleSelectId,
permissionJson:JSON.stringify(this.permissionList)
};
let that = this;
RoleManager.saveRolePermission(request, function (data) {
data = data.data;
if (data.code === '9999') {
that.$router.push('/login');
that.$Message.error("会话超时请重新登陆!");
}
if (data.code === '0001') {
that.$Message.error("保存角色失败!");
return;
}
if (data.code === '0000') {
that.$Message.info("保存角色权限成功!");
}
})
},
//查询角色
roleInit: function () {
let that = this;
that.roleList = [];
RoleManager.listRoleInfoApi({}, function (data) {
data = data.data;
if (data.code === '9999') {
that.$router.push('/login');
that.$Message.error("会话超时请重新登陆!");
}
if (data.code === '0001') {
that.$Message.error("查询角色失败!");
return;
}
if (data.code === '0000') {
data = data.results;
for (let i = 0; i < data.length; i++) {
let row = data[i];
row.imgUrl = roleUnSelectImg;
if (i === 0) {
row.selectFlag = "selected";
} else {
row.selectFlag = "unSelect";
}
that.roleList.push(row);
}
that.roleSelectId = that.roleList[0].id;
that.rolePermissionList();
}
})
},
//查询角色的所有权限
rolePermissionList: function () {
let request = {
roleId: this.roleSelectId
};
this.permissionList = [];
let that = this;
RoleManager.rolePermissionList(request, function (data) {
data = data.data;
if (data.code === '9999') {
that.$router.push('/login');
that.$Message.error("会话超时请重新登陆!");
}
if (data.code === '0001') {
that.$Message.error("查询角色权限失败!");
return;
}
if (data.code === '0000') {
data = data.results;
for (let i = 0; i < data.length; i++) {
let row = data[i];
that.permissionList.push(row);
}
}
});
6 years ago
}
}
}
</script>
<style scoped>
</style>