cKey
5 years ago
2 changed files with 6 additions and 242 deletions
@ -1,236 +0,0 @@ |
|||
<template> |
|||
<el-tree |
|||
ref="tree" |
|||
show-checkbox |
|||
node-key="id" |
|||
:data="permissionTreeData" |
|||
:default-checked-keys="[]" |
|||
:render-content="renderContent" |
|||
:default-expanded-keys="permissionExpandedKeys" |
|||
@check="handlePermissionChecked" |
|||
@node-expand="handleNodeExpand" |
|||
/> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { IPermission } from '@/api/types' |
|||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|||
import { PermissionDto, PermissionGroup, Permission } from '@/api/permission' |
|||
|
|||
/** element权限树 */ |
|||
export class PermissionTree { |
|||
/** 权限标识 */ |
|||
id!: string |
|||
/** 显示名称 */ |
|||
label!: string |
|||
/** 是否禁用 */ |
|||
disabled!: boolean |
|||
/** 父节点 */ |
|||
parent!: string |
|||
/** 子节点 */ |
|||
children!: PermissionTree[] |
|||
|
|||
constructor() { |
|||
this.disabled = false |
|||
this.children = new Array<PermissionTree>() |
|||
} |
|||
} |
|||
|
|||
/** 权限树组件 */ |
|||
@Component({ |
|||
name: 'PermissionTree' |
|||
}) |
|||
export default class extends Vue { |
|||
/** 是否只读 */ |
|||
@Prop({ default: false }) private readonly!: boolean |
|||
/** 是否展开权限树 */ |
|||
@Prop({ default: false }) private expanded!: boolean |
|||
/** 是否水平排列 |
|||
* @description 功能实现来自：https://www.jianshu.com/p/f740e8c9fca6 |
|||
*/ |
|||
@Prop({ default: false }) private horizontally!: boolean |
|||
/** 权限列表 */ |
|||
@Prop({ default: () => new PermissionDto() }) private permission!: PermissionDto |
|||
/** 权限树 */ |
|||
private permissionTreeData: PermissionTree[] |
|||
/** 权限树选中节点 */ |
|||
private permissionCheckedKeys: string[] |
|||
/** 权限树展开节点 */ |
|||
private permissionExpandedKeys: string[] |
|||
/** 授权接口集合 */ |
|||
private permissionEditData: IPermission[] |
|||
|
|||
constructor() { |
|||
super() |
|||
this.permissionTreeData = new Array<PermissionTree>() |
|||
this.permissionCheckedKeys = new Array<string>() |
|||
this.permissionExpandedKeys = new Array<string>() |
|||
this.permissionEditData = new Array<IPermission>() |
|||
} |
|||
|
|||
@Watch('permission', { immediate: true }) |
|||
private onPermissionChanged(permission: PermissionDto) { |
|||
this.initilzePermissionTree(permission) |
|||
setTimeout(() => { |
|||
const treeControl = this.$refs.tree as any |
|||
treeControl.setCheckedKeys(this.permissionCheckedKeys) |
|||
}, 10) |
|||
} |
|||
|
|||
/** 重置权限树 */ |
|||
public resetPermissions() { |
|||
this.permissionTreeData.splice(0) |
|||
this.permissionCheckedKeys.splice(0) |
|||
this.permissionExpandedKeys.splice(0) |
|||
this.permissionEditData.splice(0) |
|||
} |
|||
|
|||
/** 初始化权限树 |
|||
* @param permission 权限数据 |
|||
*/ |
|||
private initilzePermissionTree(permission: PermissionDto) { |
|||
this.resetPermissions() |
|||
const permissionTree = new PermissionTree() |
|||
permissionTree.id = permission.entityDisplayName |
|||
permissionTree.label = '权限设置' |
|||
permissionTree.disabled = this.readonly |
|||
this.generatePermissionGroup(permissionTree, permission.groups) |
|||
this.permissionTreeData.push(permissionTree) |
|||
this.permissionExpandedKeys.push(permissionTree.id) |
|||
} |
|||
|
|||
/** 根据权限组生成二级权限树 |
|||
* @param permissionTree 根权限树 |
|||
* @param permissionGroups 根权限组 |
|||
*/ |
|||
private generatePermissionGroup(permissionTree: PermissionTree, permissionGroups: PermissionGroup[]) { |
|||
permissionGroups.forEach((group) => { |
|||
const permissionTreeItem = new PermissionTree() |
|||
permissionTreeItem.id = group.name |
|||
permissionTreeItem.label = group.displayName |
|||
permissionTreeItem.disabled = this.readonly |
|||
// 父节点是否全部展开 |
|||
if (this.expanded) { |
|||
this.permissionExpandedKeys.push(group.name) |
|||
} |
|||
this.generatePermission(permissionTreeItem, group.permissions) |
|||
permissionTree.children.push(permissionTreeItem) |
|||
// 父权限加入编辑权限列表 |
|||
// 按照abp框架的授权规则,Group（也就是二级权限数据）是不允许赋值的,要么后台过滤,要么前台不传,这里采用前台不传 |
|||
// this.permissionEditData.push({ name: group.name, isGranted: group.permissions.some(p => p.isGranted) }) |
|||
}) |
|||
} |
|||
|
|||
/** 根据权限列表生成三级权限树 |
|||
* @param permissionTree 二级权限树 |
|||
* @param permissions 权限列表 |
|||
*/ |
|||
private generatePermission(permissionTree: PermissionTree, permissions: Permission[]) { |
|||
const parentPermissions = permissions.filter(p => !p.parentName) |
|||
parentPermissions.forEach((permission) => { |
|||
const permissionTreeItem = new PermissionTree() |
|||
permissionTreeItem.id = permission.name |
|||
permissionTreeItem.label = permission.displayName |
|||
permissionTreeItem.disabled = this.readonly |
|||
this.permissionEditData.push(permission) |
|||
const subPermissions = permissions.filter(p => p.parentName === permission.name) |
|||
// 2020-08-28 如果这个权限没有子节点且已经授权,则选中节点 |
|||
if (subPermissions.length === 0) { |
|||
if (permission.isGranted) { |
|||
this.permissionCheckedKeys.push(permissionTreeItem.id) |
|||
} |
|||
} else { |
|||
this.generateSubPermission(permissionTreeItem, subPermissions, permissions) |
|||
} |
|||
permissionTree.children.push(permissionTreeItem) |
|||
}) |
|||
} |
|||
|
|||
/** 递归生成子节点权限树 |
|||
* @param permissionTree 父权限树 |
|||
* @param permissions 当前遍历权限节点 |
|||
* @param parentPermissions 当前遍历权限的父权限节点 |
|||
* @description abp框架定义所有子节点都在第三级里面.所以需要传递父节点来判断当前循环的权限的子权限节点 |
|||
*/ |
|||
private generateSubPermission(permissionTree: PermissionTree, permissions: Permission[], parentPermissions: Permission[]) { |
|||
permissions.forEach((permission) => { |
|||
const permissionTreeItem = new PermissionTree() |
|||
permissionTreeItem.id = permission.name |
|||
permissionTreeItem.label = permission.displayName |
|||
permissionTreeItem.disabled = this.readonly |
|||
this.permissionEditData.push(permission) |
|||
// 查询当前权限里面的子节点 |
|||
const subPermissions = parentPermissions.filter(p => p.parentName === permission.name) |
|||
// 生成下一级权限树 |
|||
if (subPermissions.length > 0) { |
|||
this.generateSubPermission(permissionTreeItem, subPermissions, permissions) |
|||
} else { // 如果存在下一级权限，那么在下一级循环里面添加选中,避免选中当前根节点 |
|||
if (permission.isGranted) { |
|||
this.permissionCheckedKeys.push(permissionTreeItem.id) |
|||
} |
|||
} |
|||
permissionTree.children.push(permissionTreeItem) |
|||
}) |
|||
} |
|||
|
|||
/** 权限树选择相应事件 */ |
|||
private handlePermissionChecked(data: any, treeCheckData: any) { |
|||
this.permissionEditData.forEach((permission: IPermission) => { |
|||
permission.isGranted = treeCheckData.checkedKeys.some((k: string) => k.indexOf(permission.name) !== -1) |
|||
}) |
|||
// 传递权限变更事件,事件参数为授权接口集合 |
|||
this.$emit('onPermissionChanged', this.permissionEditData) |
|||
} |
|||
|
|||
/** 节点展开事件 |
|||
* @description 监听节点展开完毕事件,刷新子节点样式 |
|||
*/ |
|||
private handleNodeExpand() { |
|||
this.$nextTick().then(() => { |
|||
this.changeTree() |
|||
}) |
|||
} |
|||
|
|||
/** 自定义权限树子节点渲染 */ |
|||
private renderContent(h: any, context: { node: any, data: PermissionTree}) { |
|||
if (this.horizontally) { |
|||
if (context.data.children.length > 0) { |
|||
return h( |
|||
'span', |
|||
{ class: 'el-tree-node__label' }, |
|||
[context.node.label] |
|||
) |
|||
} else { |
|||
return h( |
|||
'div', |
|||
{ class: 'horizontally' }, |
|||
[context.node.label]) |
|||
} |
|||
} |
|||
return h( |
|||
'span', |
|||
{ class: 'el-tree-node__label' }, |
|||
[context.node.label] |
|||
) |
|||
} |
|||
|
|||
/** 变更权限树样式 |
|||
* @description https://www.jianshu.com/p/f740e8c9fca6 |
|||
*/ |
|||
private changeTree() { |
|||
const classDomList = document.getElementsByClassName('horizontally') |
|||
for (let i = 0; i < classDomList.length; i++) { |
|||
const parentNode = classDomList[i].parentNode as any |
|||
parentNode.style.cssText = 'float: left' |
|||
parentNode.className = 'el-tree-node__content option-wrapper' |
|||
parentNode.parentNode.style.marginLeft = '70px' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.option-wrapper { |
|||
padding: 0 !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue