<template>
|
<el-dialog
|
custom-class="sy-modal"
|
|
:title="title"
|
:close-on-click-modal="false"
|
width="600px"
|
:before-close="onClose"
|
>
|
<div class="roles-management-authority-modal-conatinter" v-loading="loading">
|
<el-scrollbar>
|
<el-tree
|
ref="tree"
|
:data="roleTree"
|
default-expand-all
|
show-checkbox
|
node-key="value"
|
/>
|
</el-scrollbar>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="onClose">取 消</el-button>
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name:'rolesManagementAuthorityModalCompontent',
|
props:{
|
visible:{
|
type:Boolean,
|
default:false
|
},
|
role:{
|
type:Object,
|
default:function(){
|
return {}
|
}
|
}
|
},
|
data(){
|
return {
|
title:'',
|
loading:false,
|
roleTree:[],
|
treeLoaded:false
|
}
|
},
|
watch:{
|
visible(newVal,oldVal){
|
if (newVal!==oldVal) {
|
if (newVal) {
|
this.initForm();
|
} else {
|
|
}
|
}
|
}
|
},
|
methods:{
|
initForm(){
|
this.title = '角色['+this.role.Name+']的权限'
|
if (!this.role.Id) return false;
|
/* 一下加载数据 */
|
this.loading = true;
|
this.getRolesTree((f1)=>{
|
if (f1) {
|
this.$nextTick(()=>{
|
this.getRolePermissions(()=>{
|
this.loading = false;
|
})
|
})
|
} else {
|
this.loading = false;
|
}
|
})
|
},
|
getRolesTree(callback){
|
if (this.treeLoaded) {
|
callback && callback(true)
|
} else {
|
this.$api.get('GetPermissionTree',{needbtn:false},{block:'permission'}).then((d)=>{
|
this.roleTree = d.children || []
|
this.treeLoaded = true;
|
callback && callback(true)
|
}).catch(err=>{
|
callback && callback(false)
|
})
|
}
|
},
|
getRolePermissions(callback){
|
this.$api.get('GetPermissionIdByRoleId',{rid:this.role.Id},{block:'permission'}).then((d)=>{
|
let _arr = this.filterRealCheckedNodes(d.permissionids)
|
this.$refs.tree.setCheckedKeys(_arr)
|
/* permissionids */
|
callback && callback(true)
|
}).catch(err=>{
|
callback && callback(false)
|
})
|
},
|
/* 过滤节点，将非全选子节点的父节点过滤出去，剩下的是节点数显示勾选真正需要的 */
|
/* 之所以要再次重新计算树的勾选节点，一是为了清理垃圾数据，二是处理原先全选子节点的父节点在新增子节点后显示不正确的问题 */
|
filterRealCheckedNodes(nodeKeys){
|
let res = [];
|
for (let i=0;i<nodeKeys.length;i++) {
|
let obj = this.getTreeFullNodeByNodekey(nodeKeys[i],this.roleTree);
|
if (this.judgeRealCheckedNode(obj,nodeKeys)) {
|
res.push(nodeKeys[i])
|
}
|
}
|
return res;
|
},
|
/* 根据节点key获取该key在节点树中的完整节点 */
|
getTreeFullNodeByNodekey(nodeKey,tree){
|
let res = null;
|
for (let i=0;i<tree.length;i++) {
|
if (tree[i].value === nodeKey) {
|
res = tree[i];
|
break;
|
}
|
if (tree[i].children && (tree[i].children instanceof Array) && tree[i].children.length>0) {
|
res = this.getTreeFullNodeByNodekey(nodeKey,tree[i].children);
|
if (res) {
|
break;
|
}
|
}
|
}
|
return res;
|
},
|
/* 判断是否是半节点树显示真正需要的节点，排除非全选子节点的父节点 */
|
judgeRealCheckedNode(node,nodeKeys){
|
let res = true;
|
if (node) {
|
if (node.children && (node.children instanceof Array) && node.children.length>0) {
|
for (let i=0;i<node.children.length;i++) {
|
let val = node.children[i].value;
|
if (nodeKeys.indexOf(val)<0) {
|
res = false;
|
break;
|
}
|
}
|
}
|
} else {
|
res = false;
|
}
|
return res;
|
},
|
close(){
|
this.$emit('update:visible',false)
|
},
|
onClose(){
|
this.close();
|
},
|
onSubmit(){
|
let checkeds = this.$refs.tree.getCheckedKeys()
|
let halfs = this.$refs.tree.getHalfCheckedKeys();
|
let params = {
|
pids:[...checkeds,...halfs],
|
rid:this.role.Id
|
}
|
this.loading = true;
|
this.$api.post('Assign',params,{block:'permission'}).then((d)=>{
|
this.loading = false;
|
this.$message.success('角色权限保存成功！')
|
this.close()
|
}).catch(err=>{
|
this.loading = false;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.roles-management-authority-modal-conatinter{
|
height: 500px;
|
box-sizing: border-box;
|
padding: 12px;
|
}
|
</style>
|
