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

角色管理

Browse Source
master
Caps 6 years ago
parent b377571d8c
commit 3a44a65398
2 changed files with 179 additions and 66 deletions
Show Stats Download Patch File Download Diff File

214
src/pages/user/RoleManager.vue
Unescape Escape View File

@ -1,48 +1,57 @@
<style scoped> <style scoped>
/deep/.addButton { /deep/ .addButton {
background: #3496EB; background: #3496EB;
} }
/deep/.deleteButton {
border:1px solid #3496EB; /deep/ .deleteButton {
border: 1px solid #3496EB;
color: #3496EB; color: #3496EB;
background: white; background: white;
} }
/deep/.role-select-radio-group {
/deep/ .role-select-radio-group {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
color: #637182; color: #637182;
border: 1px solid #EDEFF1; border: 1px solid #EDEFF1;
} }
/deep/.ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
color: #2d8cf0; color: #2d8cf0;
} }
/deep/.system-role-div {
/deep/ .system-role-div {
height: 39px; height: 39px;
padding: 10px; padding: 10px;
} }
/deep/.system-role-img {
/deep/ .system-role-img {
height: 12px; height: 12px;
width: 12px; width: 12px;
display: inline-block; display: inline-block;
margin-right: 9px; margin-right: 9px;
margin-left: 7px; 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; 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; cursor: default;
} }
/deep/.system-role-name-un-select:hover {
/deep/ .system-role-name-un-select:hover {
color: #2074E2; color: #2074E2;
} }
/deep/.system-role-number-selected {
/deep/ .system-role-number-selected {
font-size: 13px; font-size: 13px;
display: inline-block; display: inline-block;
color: #2074E2; color: #2074E2;
@ -50,7 +59,8 @@
margin-right: 11px; margin-right: 11px;
cursor: pointer; cursor: pointer;
} }
/deep/.system-role-number-un-select {
/deep/ .system-role-number-un-select {
font-size: 13px; font-size: 13px;
display: inline-block; display: inline-block;
color: #535353; color: #535353;
@ -58,14 +68,17 @@
margin-right: 11px; margin-right: 11px;
cursor: pointer; cursor: pointer;
} }
/deep/.ivu-checkbox {
/deep/ .ivu-checkbox {
margin-right: 13px; margin-right: 13px;
} }
/deep/.ivu-checkbox-checked .ivu-checkbox-inner {
/deep/ .ivu-checkbox-checked .ivu-checkbox-inner {
border-color: #2074E2; border-color: #2074E2;
background-color: #2074E2; background-color: #2074E2;
} }
/deep/.ivu-checkbox-indeterminate .ivu-checkbox-inner {
/deep/ .ivu-checkbox-indeterminate .ivu-checkbox-inner {
border-color: #2074E2; border-color: #2074E2;
background-color: #2074E2; background-color: #2074E2;
} }
@ -89,7 +102,7 @@
</div> </div>
</div> </div>
</i-col> </i-col>
<i-col span="1"style="max-width: 5px;background-color: #EFF3F8;height: 100%;"> <i-col span="1" style="max-width: 5px;background-color: #EFF3F8;height: 100%;">
</i-col> </i-col>
<!--权限多选--> <!--权限多选-->
<i-col span="18" style="height: 100%;"> <i-col span="18" style="height: 100%;">
@ -103,12 +116,14 @@
<div v-for="item in permissionList" :key="item.id"> <div v-for="item in permissionList" :key="item.id">
<div style="border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;background-color: #F7F8FA;"> <div style="border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;background-color: #F7F8FA;">
<Checkbox :indeterminate="item.indeterminate" :value="item.check" <Checkbox :indeterminate="item.indeterminate" :value="item.check"
@click.prevent.native="handleItemCheckAll(item)" style="height: 95%;color:#697882;background-color: #F7F8FA;">{{item.name}}</Checkbox> @click.prevent.native="handleItemCheckAll(item)"
style="height: 95%;color:#697882;background-color: #F7F8FA;">{{item.name}}
</Checkbox>
</div> </div>
<!--2--> <!--2-->
<div v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="height: 49px;"> <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;"> <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"> <CheckboxGroup v-model="item.checkArr">
<Checkbox style="margin-left: 30px;color:#697882" :label="itemSon.id" <Checkbox style="margin-left: 30px;color:#697882" :label="itemSon.id"
@click.prevent.native="handleItemSonCheckAll(itemSon, item)" @click.prevent.native="handleItemSonCheckAll(itemSon, item)"
@ -116,35 +131,39 @@
:indeterminate="itemSon.indeterminate" :value="itemSon.check"> :indeterminate="itemSon.indeterminate" :value="itemSon.check">
{{itemSon.name}} {{itemSon.name}}
</Checkbox> </Checkbox>
</CheckboxGroup> </CheckboxGroup>
</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> </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>
</div> </div>
</div> </div>
<div style="top: 76%;border-top: 1px solid #E4E9F1;width: 100%;padding-top: 20px;position: absolute;text-align: center;"> <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;"
<Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;" @click="savePermission()">确定</Button> @click="savePermission()">保存
</Button>
</div> </div>
</i-col> </i-col>
</Row> </Row>
</div> </div>
</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 roleSelectedImg from '../../../static/img/role-selected.png'
import roleUnSelectImg from '../../../static/img/role-un-select.png' import roleUnSelectImg from '../../../static/img/role-un-select.png'
export default { export default {
data() { data() {
return { return {
@ -152,7 +171,7 @@
//当前选中角色id //当前选中角色id
roleSelectId: 1, roleSelectId: 1,
//角色集合 //角色集合
roleList:[ roleList: [
{ {
id: 1, id: 1,
name: "系统管理员", name: "系统管理员",
@ -193,8 +212,8 @@
//选中1个：true，全部选中：true，全未选：false //选中1个：true，全部选中：true，全未选：false
indeterminate: false, indeterminate: false,
//选中的子权限 //选中的子权限
checkArr:[], checkArr: [],
sonPermissionList:[ sonPermissionList: [
{ {
id: 2, id: 2,
name: '二级权限a', name: '二级权限a',
@ -203,8 +222,8 @@
check: false, check: false,
//选中1个：true，全部选中：true，全未选：false //选中1个：true，全部选中：true，全未选：false
indeterminate: false, indeterminate: false,
checkArr:[], checkArr: [],
sonPermissionList:[ sonPermissionList: [
{ {
id: 7, id: 7,
name: '三级权限a', name: '三级权限a',
@ -225,8 +244,8 @@
check: false, check: false,
//选中1个：true，全部选中：true，全未选：false //选中1个：true，全部选中：true，全未选：false
indeterminate: false, indeterminate: false,
checkArr:[], checkArr: [],
sonPermissionList:[ sonPermissionList: [
{ {
id: 9, id: 9,
name: '三级权限c', name: '三级权限c',
@ -239,22 +258,23 @@
} }
] ]
} }
]},{ ]
}, {
id: 4, id: 4,
name: '一级权限b', name: '一级权限b',
level: 1, level: 1,
check: false, check: false,
checkArr:[], checkArr: [],
indeterminate: false, indeterminate: false,
sonPermissionList:[ sonPermissionList: [
{ {
id: 5, id: 5,
name: '二级权限c', name: '二级权限c',
level: 2, level: 2,
check: false, check: false,
checkArr:[], checkArr: [],
indeterminate: false, indeterminate: false,
sonPermissionList:[ sonPermissionList: [
{ {
id: 11, id: 11,
name: '三级权限e', name: '三级权限e',
@ -272,9 +292,9 @@
name: '二级权限d', name: '二级权限d',
level: 2, level: 2,
check: false, check: false,
checkArr:[], checkArr: [],
indeterminate: false, indeterminate: false,
sonPermissionList:[ sonPermissionList: [
{ {
id: 13, id: 13,
name: '三级权限g', name: '三级权限g',
@ -287,17 +307,18 @@
} }
] ]
} }
]}, ]
},
] ]
} }
}, },
mounted: function () { mounted: function () {
this.roleInit();
}, },
methods: { methods: {
//一级权限-点击事件 //一级权限-点击事件
handleItemCheckAll (item) { handleItemCheckAll(item) {
// let item = this.permissionList[index]; // let item = this.permissionList[index];
if (item.indeterminate) { if (item.indeterminate) {
item.check = false; item.check = false;
@ -372,7 +393,7 @@
console.log(item); console.log(item);
}, },
//三级权限-点击事件 //三级权限-点击事件
handleGrandSonCheckChange (itemSon, item) { handleGrandSonCheckChange(itemSon, item) {
/*let item = this.permissionList[index]; /*let item = this.permissionList[index];
let itemSon = this.permissionList[index].sonPermissionList[itemSonIndex];*/ let itemSon = this.permissionList[index].sonPermissionList[itemSonIndex];*/
let sonPermissionCount = itemSon.sonPermissionList.length; let sonPermissionCount = itemSon.sonPermissionList.length;
@ -404,7 +425,7 @@
}, },
//点击角色数字跳转到账号管理页面 //点击角色数字跳转到账号管理页面
goToAccManagerPage: function () { goToAccManagerPage: function () {
this.$router.push({path: '/account/manager'});
}, },
//选中角色 //选中角色
selectRole: function (id) { selectRole: function (id) {
@ -414,23 +435,94 @@
if (item.id === curId) { if (item.id === curId) {
item.imgUrl = roleSelectedImg; item.imgUrl = roleSelectedImg;
item.selectFlag = "selected"; item.selectFlag = "selected";
that.roleSelectId = item.id;
} else { } else {
item.imgUrl = roleUnSelectImg; item.imgUrl = roleUnSelectImg;
item.selectFlag = "unSelect"; item.selectFlag = "unSelect";
} }
}); });
that.rolePermissionList();
},
//取消选中
cancelEdit: function () {
}, },
//保存 //保存
savePermission: function () { savePermission: function () {
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);
}
}
});
} }
} }
} }
</script> </script>

31
src/services/user/RoleManager.js
Unescape Escape View File

@ -11,11 +11,32 @@ import http from '../CommonHttp'
* @param call * @param call
* @returns {Promise<any | never>} * @returns {Promise<any | never>}
*/ */
/*export function listRoleInfoApi(params, call) { export function listRoleInfoApi(params, call) {
return http.post('', params).then(call); return http.get('/role/role/account/count', params).then(call);
}*/ }
export default { /**
// listRoleInfoApi * 查询角色权限
* @param params
* @param call
* @returns {Promise<any | never>}
*/
export function rolePermissionList(params, call) {
return http.post('/permission/role/list', params).then(call);
}
/**
* 保存角色
* @param params
* @param call
* @returns {Promise<any | never>}
*/
export function saveRolePermission(params, call) {
return http.post('/permission/role/save', params).then(call);
}
export default {
listRoleInfoApi,
rolePermissionList,
saveRolePermission
} }

Write Preview
Loading…
Cancel
Save