cKey
5 years ago
20 changed files with 928 additions and 763 deletions
@ -1,9 +0,0 @@ |
|||
using Volo.Abp.Application.Dtos; |
|||
|
|||
namespace LINGYUN.Abp.IdentityServer.Clients |
|||
{ |
|||
public class ClientCorsOriginDto : EntityDto |
|||
{ |
|||
public string Origin { get; set; } |
|||
} |
|||
} |
|||
Binary file not shown.
@ -0,0 +1,466 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-el-draggable-dialog |
|||
width="800px" |
|||
:visible="showDialog" |
|||
:title="$t('AbpPermissionManagement.Permissions') + '-' + entityDisplayName" |
|||
custom-class="modal-form" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@close="onFormClosed" |
|||
> |
|||
<el-form> |
|||
<el-checkbox |
|||
:disabled="readonly" |
|||
:value="grantAllCheckBoxCheckAll" |
|||
:indeterminate="grantAllCheckBoxForward" |
|||
@change="onGrantAllClicked" |
|||
> |
|||
{{ $t('AbpPermissionManagement.SelectAllInAllTabs') }} |
|||
</el-checkbox> |
|||
<el-divider /> |
|||
<el-tabs |
|||
tab-position="left" |
|||
type="card" |
|||
> |
|||
<el-tab-pane |
|||
v-for="group in permissionGroups" |
|||
:key="group.name" |
|||
:label="group.displayName + ' (' + grantedCount(group) + ')'" |
|||
:name="group.name" |
|||
> |
|||
<el-card shadow="never"> |
|||
<div |
|||
slot="header" |
|||
class="clearfix" |
|||
> |
|||
<h3>{{ group.displayName }}</h3> |
|||
</div> |
|||
<el-checkbox |
|||
:disabled="readonly" |
|||
:value="scopeCheckBoxCheckAll(group)" |
|||
:indeterminate="scopeCheckBoxForward(group)" |
|||
@change="(checked) => onCheckScopeAllClicked(checked, group, 'permissionTree-' + group.name)" |
|||
> |
|||
{{ $t('AbpPermissionManagement.SelectAllInThisTab') }} |
|||
</el-checkbox> |
|||
<el-divider /> |
|||
<el-tree |
|||
:ref="'permissionTree-' + group.name" |
|||
show-checkbox |
|||
:check-strictly="true" |
|||
node-key="id" |
|||
:data="group.permissions" |
|||
:default-checked-keys="grantedPermissionKeys(group)" |
|||
@check-change="(permission, checked) => onPermissionTreeNodeCheckChanged(permission, checked, group, 'permissionTree-' + group.name)" |
|||
/> |
|||
</el-card> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
<el-divider /> |
|||
<el-form-item> |
|||
<el-button |
|||
class="cancel" |
|||
type="info" |
|||
style="width:100px" |
|||
@click="onFormClosed" |
|||
> |
|||
{{ $t('AbpPermissionManagement.Cancel') }} |
|||
</el-button> |
|||
<el-button |
|||
:disabled="readonly" |
|||
class="confirm" |
|||
type="primary" |
|||
style="width:100px" |
|||
icon="el-icon-check" |
|||
:loading="confirmButtonBusy" |
|||
@click="onSave" |
|||
> |
|||
{{ confirmButtonTitle }} |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|||
import PermissionApiService, { Permission, UpdatePermissionsDto } from '@/api/permission' |
|||
import { Tree } from 'element-ui' |
|||
|
|||
/** element权限树 */ |
|||
export class PermissionItem { |
|||
/** 权限标识 */ |
|||
id = '' |
|||
/** 显示名称 */ |
|||
label = '' |
|||
/** 是否授权 */ |
|||
isGrant = false |
|||
/** 是否禁用 */ |
|||
disabled = false |
|||
/** 子节点 */ |
|||
children = new Array<PermissionItem>() |
|||
/** 父节点 */ |
|||
parent?: PermissionItem |
|||
|
|||
constructor( |
|||
id: string, |
|||
label: string, |
|||
isGrant: boolean |
|||
) { |
|||
this.id = id |
|||
this.label = label |
|||
this.isGrant = isGrant |
|||
} |
|||
|
|||
public createChildren(permission: PermissionItem) { |
|||
permission.parent = this |
|||
this.children.push(permission) |
|||
} |
|||
|
|||
public setGrant(grant: boolean) { |
|||
this.isGrant = grant |
|||
if (this.parent) { |
|||
this.parent.setGrant(grant) |
|||
} |
|||
} |
|||
|
|||
public static setPermissionGrant(grant: boolean, permission: PermissionItem) { |
|||
permission.setGrant(grant) |
|||
if (!grant) { |
|||
permission.children.map(p => { |
|||
PermissionItem.setPermissionGrant(false, p) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
public static setAllPermissionGrant(grant: boolean, permission: PermissionItem) { |
|||
permission.setGrant(grant) |
|||
permission.children.map(p => { |
|||
PermissionItem.setAllPermissionGrant(grant, p) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
export class PermissionGroup { |
|||
name = '' |
|||
displayName = '' |
|||
permissions = new Array<PermissionItem>() |
|||
|
|||
constructor( |
|||
name: string, |
|||
displayName: string |
|||
) { |
|||
this.name = name |
|||
this.displayName = displayName |
|||
} |
|||
|
|||
public permissionCount() { |
|||
let count = 0 |
|||
count += this.deepPermissionCount(this.permissions) |
|||
return count |
|||
} |
|||
|
|||
public addPermission(permission: PermissionItem) { |
|||
this.permissions.push(permission) |
|||
} |
|||
|
|||
public setAllGrant(grant: boolean) { |
|||
this.permissions.map(p => { |
|||
PermissionItem.setAllPermissionGrant(grant, p) |
|||
}) |
|||
} |
|||
|
|||
public grantedPermissionKeys() { |
|||
const keys = new Array<string>() |
|||
this.deepGrantedPermissionKeys(keys, this.permissions) |
|||
return keys |
|||
} |
|||
|
|||
public grantedCount() { |
|||
let count = 0 |
|||
count += this.deepGrantedCount(this.permissions) |
|||
return count |
|||
} |
|||
|
|||
private deepGrantedCount(permissions: PermissionItem[]) { |
|||
let count = 0 |
|||
count += permissions.filter(p => p.isGrant).length |
|||
permissions.forEach(p => { |
|||
count += this.deepGrantedCount(p.children) |
|||
}) |
|||
return count |
|||
} |
|||
|
|||
private deepGrantedPermissionKeys(keys: string[], permissions: PermissionItem[]) { |
|||
permissions.forEach(p => { |
|||
if (p.isGrant) { |
|||
keys.push(p.id) |
|||
} |
|||
this.deepGrantedPermissionKeys(keys, p.children) |
|||
}) |
|||
} |
|||
|
|||
private deepPermissionCount(permissions: PermissionItem[]) { |
|||
let count = 0 |
|||
count += permissions.length |
|||
permissions.forEach(p => { |
|||
count += this.deepPermissionCount(p.children) |
|||
}) |
|||
return count |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 权限编辑组件 |
|||
* 大量的计算属性与事件响应,还能再优化 |
|||
*/ |
|||
@Component({ |
|||
name: 'PermissionForm' |
|||
}) |
|||
export default class PermissionForm extends Vue { |
|||
/** 权限提供者名称 */ |
|||
@Prop({ default: '' }) |
|||
private providerName!: string |
|||
|
|||
/** 权限提供者标识 */ |
|||
@Prop({ default: '' }) |
|||
private providerKey!: string |
|||
|
|||
/** 是否展示权限编辑组件 */ |
|||
@Prop({ default: false }) |
|||
private showDialog!: boolean |
|||
|
|||
/** 权限节点是否只读 */ |
|||
@Prop({ default: false }) |
|||
private readonly!: boolean |
|||
|
|||
/** 确认按钮忙碌状态 */ |
|||
private confirmButtonBusy = false |
|||
/** 当前编辑权限实体名称 */ |
|||
private entityDisplayName = '' |
|||
/** 得到的权限组集合 */ |
|||
private permissionGroups = new Array<PermissionGroup>() |
|||
|
|||
/** 某个权限组已授权数量 |
|||
* 用于显示已授权数量 |
|||
*/ |
|||
get grantedCount() { |
|||
return (group: PermissionGroup) => { |
|||
return group.grantedCount() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 所有已授权数量 |
|||
*/ |
|||
get grantAllCount() { |
|||
let count = 0 |
|||
this.permissionGroups.forEach(group => { |
|||
count += group.grantedCount() |
|||
}) |
|||
return count |
|||
} |
|||
|
|||
/** 某个权限组已授权节点 |
|||
* 用于勾选TreeNode |
|||
*/ |
|||
get grantedPermissionKeys() { |
|||
return (group: PermissionGroup) => { |
|||
return group.grantedPermissionKeys() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 某个权限组权限数量 |
|||
* 用于设定单个Tree的全选CheckBox状态 |
|||
*/ |
|||
get permissionCount() { |
|||
return (group: PermissionGroup) => { |
|||
return group.permissionCount() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 所有权限数量 |
|||
*/ |
|||
get permissionAllCount() { |
|||
let count = 0 |
|||
this.permissionGroups.forEach(group => { |
|||
count += group.permissionCount() |
|||
}) |
|||
return count |
|||
} |
|||
|
|||
/** |
|||
* 单个Tree的全选CheckBox是否为选中状态 |
|||
*/ |
|||
get scopeCheckBoxCheckAll() { |
|||
return (group: PermissionGroup) => { |
|||
const grantCount = group.grantedCount() |
|||
return grantCount === group.permissionCount() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 单个Tree的全选CheckBox状态是否为预选状态 |
|||
*/ |
|||
get scopeCheckBoxForward() { |
|||
return (group: PermissionGroup) => { |
|||
const grantCount = group.grantedCount() |
|||
return grantCount > 0 && grantCount < group.permissionCount() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 授权所有CheckBox是否为选中状态 |
|||
*/ |
|||
get grantAllCheckBoxCheckAll() { |
|||
return this.grantAllCount === this.permissionAllCount |
|||
} |
|||
|
|||
/** |
|||
* 授权所有CheckBox状态是否为预选状态 |
|||
*/ |
|||
get grantAllCheckBoxForward() { |
|||
const grantCount = this.grantAllCount |
|||
return grantCount > 0 && grantCount < this.permissionAllCount |
|||
} |
|||
|
|||
/** |
|||
* 确认按钮标题 |
|||
*/ |
|||
get confirmButtonTitle() { |
|||
if (this.confirmButtonBusy) { |
|||
return this.$t('AbpPermissionManagement.SavingWithThreeDot') |
|||
} |
|||
return this.$t('AbpPermissionManagement.Save') |
|||
} |
|||
|
|||
/** |
|||
* 响应组件可视事件 |
|||
*/ |
|||
@Watch('showDialog', { immediate: true }) |
|||
private onShowDialogChanged() { |
|||
this.handleGetPermissions() |
|||
} |
|||
|
|||
/** |
|||
* 获取权限集合 |
|||
*/ |
|||
private handleGetPermissions() { |
|||
this.permissionGroups.length = 0 |
|||
if (this.showDialog && this.providerName) { |
|||
PermissionApiService.getPermissionsByKey(this.providerName, this.providerKey).then(res => { |
|||
this.entityDisplayName = res.entityDisplayName |
|||
res.groups.map(g => { |
|||
const group = new PermissionGroup(g.name, g.displayName) |
|||
const parents = g.permissions.filter(p => p.parentName === null) |
|||
parents.forEach(parent => { |
|||
const permission = new PermissionItem(parent.name, parent.displayName, parent.isGranted) |
|||
permission.disabled = this.readonly |
|||
const subPermissions = g.permissions.filter(p => p.parentName?.startsWith(parent.name)) |
|||
this.generatePermission(permission, subPermissions) |
|||
group.addPermission(permission) |
|||
}) |
|||
this.permissionGroups.push(group) |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
/** 递归生成子节点 |
|||
* @param permissionTree 二级权限树 |
|||
* @param permissions 权限列表 |
|||
*/ |
|||
private generatePermission(permission: PermissionItem, permissions: Permission[]) { |
|||
const subPermissions = permissions.filter(p => p.parentName !== permission.id) |
|||
permissions = permissions.filter(p => p.parentName === permission.id) |
|||
permissions.forEach(p => { |
|||
const children = new PermissionItem(p.name, p.displayName, p.isGranted) |
|||
children.disabled = this.readonly |
|||
const itemSubPermissions = subPermissions.filter(sp => sp.parentName === p.name) |
|||
if (itemSubPermissions.length > 0) { |
|||
this.generatePermission(children, itemSubPermissions) |
|||
} |
|||
permission.createChildren(children) |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* 保存权限 |
|||
*/ |
|||
private onSave() { |
|||
const updatePermission = new UpdatePermissionsDto() |
|||
this.permissionGroups.forEach(group => { |
|||
this.updatePermissionByInput(updatePermission, group.permissions) |
|||
}) |
|||
this.confirmButtonBusy = true |
|||
PermissionApiService |
|||
.setPermissionsByKey(this.providerName, this.providerKey, updatePermission) |
|||
.then(() => { |
|||
this.$message.success(this.$t('global.successful').toString()) |
|||
}) |
|||
.finally(() => { |
|||
this.confirmButtonBusy = false |
|||
}) |
|||
} |
|||
|
|||
private updatePermissionByInput(permissions: UpdatePermissionsDto, items: PermissionItem[]) { |
|||
items.forEach(p => { |
|||
permissions.addPermission(p.id, p.isGrant) |
|||
this.updatePermissionByInput(permissions, p.children) |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* 窗口关闭事件 |
|||
*/ |
|||
private onFormClosed() { |
|||
this.$emit('closed') |
|||
} |
|||
|
|||
/** |
|||
* 授予所有权限 按钮事件 |
|||
*/ |
|||
private onGrantAllClicked(checked: boolean) { |
|||
this.permissionGroups.forEach(group => { |
|||
group.setAllGrant(checked) |
|||
const trees = this.$refs['permissionTree-' + group.name] as Tree[] |
|||
trees[0].setCheckedKeys(this.grantedPermissionKeys(group)) |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* Permission Tree 全选按钮事件 |
|||
*/ |
|||
private onCheckScopeAllClicked(checked: boolean, group: PermissionGroup, treeRef: any) { |
|||
group.setAllGrant(checked) |
|||
const trees = this.$refs[treeRef] as Tree[] |
|||
trees[0].setCheckedKeys(this.grantedPermissionKeys(group)) |
|||
} |
|||
|
|||
/** |
|||
* Permission TreeNode 变更事件 |
|||
*/ |
|||
private onPermissionTreeNodeCheckChanged(permission: PermissionItem, checked: boolean, group: PermissionGroup, treeRef: any) { |
|||
PermissionItem.setPermissionGrant(checked, permission) |
|||
if (permission.children.length > 0) { |
|||
const trees = this.$refs[treeRef] as Tree[] |
|||
trees[0].setCheckedKeys(this.grantedPermissionKeys(group)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.confirm { |
|||
position: absolute; |
|||
right: 10px; |
|||
} |
|||
.cancel { |
|||
position: absolute; |
|||
right: 120px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue