zhenghuang
/
bsdgy-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge remote-tracking branch 'origin/feature/20200402_init_dev' into feature/20200402_init_dev

Browse Source
master
Caps 6 years ago
parent 5180a227ac a9bacb5e27
commit f7b69ae7fa
1 changed files with 284 additions and 83 deletions
Show Stats Download Patch File Download Diff File

367
kiisoo-ic-ui/src/pages/user/RoleManager.vue
Unescape Escape View File

@ -25,16 +25,22 @@
width: 12px; width: 12px;
display: inline-block; display: inline-block;
margin-right: 9px; margin-right: 9px;
margin-left: 7px;
} }
/deep/.system-role-name-selected { /deep/.system-role-name-selected {
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
color: #2074E2; color: #2074E2;
cursor: default;
} }
/deep/.system-role-name-un-select { /deep/.system-role-name-un-select {
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
color: #535353; color: #535353;
cursor: default;
}
/deep/.system-role-name-un-select:hover {
color: #2074E2;
} }
/deep/.system-role-number-selected { /deep/.system-role-number-selected {
font-size: 13px; font-size: 13px;
@ -42,6 +48,7 @@
color: #2074E2; color: #2074E2;
float: right; float: right;
margin-right: 11px; margin-right: 11px;
cursor: pointer;
} }
/deep/.system-role-number-un-select { /deep/.system-role-number-un-select {
font-size: 13px; font-size: 13px;
@ -49,12 +56,24 @@
color: #535353; color: #535353;
float: right; float: right;
margin-right: 11px; margin-right: 11px;
cursor: pointer;
}
/deep/.ivu-checkbox {
margin-right: 13px;
}
/deep/.ivu-checkbox-checked .ivu-checkbox-inner {
border-color: #2074E2;
background-color: #2074E2;
}
/deep/.ivu-checkbox-indeterminate .ivu-checkbox-inner {
border-color: #2074E2;
background-color: #2074E2;
} }
</style> </style>
<template> <template>
<div> <div style="height: 100%;">
<Row> <Row style="height: 100%;">
<i-col span="6"> <i-col span="6" style="height: 100%;">
<div style="border: 1px solid #EDEFF1"> <div style="border: 1px solid #EDEFF1">
<div style="margin: 15px 0 15px 15px"> <div style="margin: 15px 0 15px 15px">
<span style="color: #697882;font-size: 12px;font-weight: 700">系统角色</span> <span style="color: #697882;font-size: 12px;font-weight: 700">系统角色</span>
@ -62,28 +81,58 @@
</div> </div>
<div> <div>
<div class="system-role-div" v-for="item in roleList" :value="item.index" :key="item.id"> <div class="system-role-div" v-for="item in roleList" :value="item.index" :key="item.id">
<img :src="roleSelectId === item.id ? '../../../static/img/role-selected.png' : '../../../static/img/role-un-select.png'" class="system-role-img"/> <img :src="item.imgUrl" class="system-role-img"/>
<span :class="roleSelectId === item.id ? 'system-role-name-selected' : 'system-role-name-un-select'">{{item.name}}</span> <span :class="item.selectFlag === 'selected' ? 'system-role-name-selected' : 'system-role-name-un-select'"
<span :class="roleSelectId === item.id ? 'system-role-number-selected' : 'system-role-number-un-select'" @click="goToAccManagerPage">{{item.number}}</span> @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>
<!--<div class="system-role-div">
<img src="../../../static/img/role-un-select.png" class="system-role-img"/>
<span class="system-role-name-un-select">运营人员</span>
<span class="system-role-number-un-select">18</span>
</div>-->
</div> </div>
</i-col> </i-col>
<!--权限多选--> <!--权限多选-->
<i-col span="18"> <i-col span="18" style="height: 100%;">
<div v-for="(item,index) in permissionList" :key="item.id" style="margin-top: 25px"> <div style="border: 1px solid #EDEFF1">
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> <div style="margin: 15px 0 15px 15px">
<Checkbox :indeterminate="item.indeterminate" :value="item.check" <span style="color: #697882;font-size: 12px;font-weight: 700">角色权限</span>
@click.prevent.native="handleCheckAll(index)" style="color:#697882">{{item.name}}</Checkbox>
</div> </div>
<CheckboxGroup v-model="item.checkArr" @on-change="checkAllGroupChange(item)"> </div>
<Checkbox v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="margin-left: 30px;color:#697882" :label="itemSon.id" >{{itemSon.name}}</Checkbox> <div style="padding-left: 15px;">
</CheckboxGroup> <!--1-->
<div v-for="item in permissionList" :key="item.id">
<div style="border-bottom: 1px solid #e9e9e9;height: 49px;line-height: 49px;">
<Checkbox :indeterminate="item.indeterminate" :value="item.check"
@click.prevent.native="handleCheckAll(item)" style="color:#697882;margin-right: 20px;">{{item.name}}</Checkbox>
</div>
<!--2-->
<CheckboxGroup v-model="item.checkArr">
<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;">
<Checkbox style="margin-left: 30px;color:#697882" :label="itemSon.id"
@click.prevent.native="handleSonCheckAll(itemSon, item)" :key="itemSon.id"
:indeterminate="itemSon.indeterminate" :value="itemSon.check">
{{itemSon.name}}
</Checkbox>
</div>
<!--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>
</CheckboxGroup>
</div>
</div>
<div style="top: 76%;border-top: 1px solid #E4E9F1;width: 100%;padding-top: 20px;position: absolute;text-align: center;">
<Button type="text" style="width: 70px;border: 1px solid #BBBBBB;height: 32px;color: #333333;margin-right: 35px;line-height: 32px;" @click="cancelEdit()">取消</Button>
<Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;" @click="savePermission()">确定</Button>
</div> </div>
</i-col> </i-col>
</Row> </Row>
@ -91,6 +140,8 @@
</template> </template>
<script> <script>
// import RoleManager from '../../services/user/RoleManager' // import RoleManager from '../../services/user/RoleManager'
import roleSelectedImg from '../../../static/img/role-selected.png'
import roleUnSelectImg from '../../../static/img/role-un-select.png'
export default { export default {
data() { data() {
return { return {
@ -102,66 +153,138 @@
{ {
id: 1, id: 1,
name: "系统管理员", name: "系统管理员",
number: 6 number: 6,
imgUrl: roleSelectedImg,
selectFlag: 'selected'
}, },
{ {
id: 2, id: 2,
name: "运营人员", name: "运营人员",
number: 18 number: 18,
imgUrl: roleUnSelectImg,
selectFlag: "unSelect"
}, },
{ {
id: 3, id: 3,
name: "店长", name: "店长",
number: 123 number: 123,
imgUrl: roleUnSelectImg,
selectFlag: "unSelect"
}, },
{ {
id: 4, id: 4,
name: "导购", name: "导购",
number: 423 number: 423,
imgUrl: roleUnSelectImg,
selectFlag: "unSelect"
}, },
], ],
//权限集合 //权限集合
permissionList: [ permissionList: [
{ {
id: 1, id: 1,
name: '大权限', name: '一级权限a',
level: 1, level: 1,
//选中1个：false，全部选中：true，全未选：false //选中1个：false，全部选中：true，全未选：false
check: false, check: false,
//选中1个：true，全部选中：true，全未选：false //选中1个：true，全部选中：true，全未选：false
indeterminate: false, indeterminate: false,
//选中的子权限 //选中的子权限
checkArr:[2, 3], checkArr:[],
sonPermissionList:[ sonPermissionList:[
{ {
id: 2, id: 2,
name: '小权限1', name: '二级权限a',
level: 2, level: 2,
}, //选中1个：false，全部选中：true，全未选：false
{ check: false,
id: 3, //选中1个：true，全部选中：true，全未选：false
name: '小权限2', indeterminate: false,
level: 2, checkArr:[],
} sonPermissionList:[
]},{ {
id: 4, id: 7,
name: '大权限', name: '三级权限a',
level: 1, level: 3,
check: false, },
checkArr:[], {
indeterminate: false, id: 8,
sonPermissionList:[ name: '三级权限b',
{ level: 3,
id: 5, }
name: '小权限3', ]
level: 2, },
}, {
{ id: 3,
id: 6, name: '二级权限b',
name: '小权限4', level: 2,
level: 2, //选中1个：false，全部选中：true，全未选：false
} check: false,
]}, //选中1个：true，全部选中：true，全未选：false
indeterminate: false,
checkArr:[],
sonPermissionList:[
{
id: 9,
name: '三级权限c',
level: 3,
},
{
id: 10,
name: '三级权限d',
level: 3,
}
]
}
]},{
id: 4,
name: '一级权限b',
level: 1,
check: false,
checkArr:[],
indeterminate: false,
sonPermissionList:[
{
id: 5,
name: '二级权限c',
level: 2,
check: false,
checkArr:[],
indeterminate: false,
sonPermissionList:[
{
id: 11,
name: '三级权限e',
level: 3,
},
{
id: 12,
name: '三级权限f',
level: 3,
}
]
},
{
id: 6,
name: '二级权限d',
level: 2,
check: false,
checkArr:[],
indeterminate: false,
sonPermissionList:[
{
id: 13,
name: '三级权限g',
level: 3,
},
{
id: 14,
name: '三级权限h',
level: 3,
}
]
}
]},
] ]
} }
@ -170,16 +293,15 @@
}, },
methods: { methods: {
//父权限-点击 //一级权限-点击事件
handleCheckAll (index) { handleCheckAll (item) {
let item = this.permissionList[index];
item.indeterminate = false;
if (item.indeterminate) { if (item.indeterminate) {
item.check = false; item.check = false;
} else { } else {
item.check = !item.check; item.check = !item.check;
} }
item.indeterminate = false; item.indeterminate = false;
//二级权限全选
if (item.check) { if (item.check) {
//全选 //全选
item.checkArr = []; item.checkArr = [];
@ -190,32 +312,111 @@
//取消全部选择 //取消全部选择
item.checkArr = []; item.checkArr = [];
} }
//三级权限全选
let sonPermission = item.sonPermissionList;
if (item.check) {
//全选
sonPermission.forEach(function (sonItem) {
let grandsonPermissionList = sonItem.sonPermissionList;
grandsonPermissionList.forEach(function (grandsonItem) {
sonItem.checkArr.push(grandsonItem.id);
})
})
} else {
//取消全部选择
sonPermission.checkArr = [];
}
// this.saveRolePermissionApi(); // this.saveRolePermissionApi();
}, },
//子全选点击 //二级权限-点击事件
checkAllGroupChange (data) { handleSonCheckAll(itemSon, item) {
let sonPermissionCount = data.sonPermissionList.length; if (itemSon.indeterminate) {
if (data.checkArr.length === sonPermissionCount) { itemSon.check = false;
data.indeterminate = false;
data.check = true;
} else if (data.checkArr.length > 0) {
data.indeterminate = true;
data.check = false;
} else { } else {
data.indeterminate = false; itemSon.check = !itemSon.check;
data.check = false; }
itemSon.indeterminate = false;
//三级权限全选
let sonPermission = itemSon.sonPermissionList;
if (itemSon.check) {
//全选
itemSon.checkArr = [];
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 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;
}
},
//三级权限-点击事件
handleGrandSonCheckChange (itemSon, item) {
let sonPermissionCount = itemSon.sonPermissionList.length;
if (itemSon.checkArr.length === sonPermissionCount) {
itemSon.indeterminate = false;
itemSon.check = true;
} else if (itemSon.checkArr.length > 0) {
itemSon.indeterminate = true;
itemSon.check = false;
} else {
itemSon.indeterminate = false;
itemSon.check = false;
}
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;
} }
// this.saveRolePermissionApi();
}, },
addRoleModalShow: function() { //点击角色数字跳转到账号管理页面
goToAccManagerPage: function () {
}, },
removeRoleModalShow: function () { //选中角色
selectRole: function (id) {
let curId = id;
let that = this;
that.roleList.forEach(function (item) {
if (item.id === curId) {
item.imgUrl = roleSelectedImg;
item.selectFlag = "selected";
} else {
item.imgUrl = roleUnSelectImg;
item.selectFlag = "unSelect";
}
});
}, },
//点击角色数字跳转到账号管理页面 todo //取消选中
goToAccManagerPage: function () { cancelEdit: function () {
this.$Message.info("进入账号管理！");
},
//保存
savePermission: function () {
} }
} }

Write Preview
Loading…
Cancel
Save