yx lin
1 year ago
committed by
GitHub
GitHub
12 changed files with 445 additions and 194 deletions
@ -0,0 +1,156 @@ |
|||
<script setup lang="ts"> |
|||
import type { VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { IdentityClaimDto } from '../../types/claims'; |
|||
import type { ClaimModalEvents, ClaimModalProps } from './types'; |
|||
|
|||
import { defineAsyncComponent, h } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { useVbenVxeGrid } from '@abp/ui'; |
|||
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue'; |
|||
import { Button, Popconfirm } from 'ant-design-vue'; |
|||
|
|||
defineOptions({ |
|||
name: 'ClaimTable', |
|||
}); |
|||
|
|||
const { |
|||
createApi, |
|||
createPolicy, |
|||
deleteApi, |
|||
deletePolicy, |
|||
getApi, |
|||
updateApi, |
|||
updatePolicy, |
|||
} = defineProps<ClaimModalProps>(); |
|||
const emits = defineEmits<ClaimModalEvents>(); |
|||
|
|||
const ClaimModal = defineAsyncComponent(() => import('./ClaimModal.vue')); |
|||
|
|||
const gridOptions: VxeGridProps<IdentityClaimDto> = { |
|||
columns: [ |
|||
{ |
|||
field: 'claimType', |
|||
minWidth: 120, |
|||
title: $t('AbpIdentity.DisplayName:ClaimType'), |
|||
}, |
|||
{ |
|||
field: 'claimValue', |
|||
title: $t('AbpIdentity.DisplayName:ClaimValue'), |
|||
width: 'auto', |
|||
}, |
|||
{ |
|||
field: 'action', |
|||
fixed: 'right', |
|||
slots: { default: 'action' }, |
|||
title: $t('AbpUi.Actions'), |
|||
width: 180, |
|||
}, |
|||
], |
|||
exportConfig: {}, |
|||
keepSource: true, |
|||
pagerConfig: { |
|||
enabled: false, |
|||
}, |
|||
proxyConfig: { |
|||
ajax: { |
|||
query: async () => { |
|||
return await getApi(); |
|||
}, |
|||
}, |
|||
response: { |
|||
total: 'totalCount', |
|||
list: 'items', |
|||
}, |
|||
}, |
|||
toolbarConfig: { |
|||
custom: true, |
|||
export: true, |
|||
// import: true, |
|||
refresh: true, |
|||
zoom: true, |
|||
}, |
|||
}; |
|||
const [Grid, { query }] = useVbenVxeGrid({ |
|||
gridOptions, |
|||
}); |
|||
|
|||
const [ClaimEditModal, editModalApi] = useVbenModal({ |
|||
connectedComponent: ClaimModal, |
|||
}); |
|||
function onCreate() { |
|||
editModalApi.setData({}); |
|||
editModalApi.open(); |
|||
} |
|||
|
|||
async function onDelete(row: IdentityClaimDto) { |
|||
await deleteApi({ |
|||
claimType: row.claimType, |
|||
claimValue: row.claimValue, |
|||
}); |
|||
query(); |
|||
emits('onDelete'); |
|||
} |
|||
|
|||
function onUpdate(row: IdentityClaimDto) { |
|||
editModalApi.setData(row); |
|||
editModalApi.open(); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Grid> |
|||
<template #toolbar-tools> |
|||
<Button type="primary" v-access:code="[createPolicy]" @click="onCreate"> |
|||
{{ $t('AbpIdentity.AddClaim') }} |
|||
</Button> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<div class="basis-1/2"> |
|||
<Button |
|||
:icon="h(EditOutlined)" |
|||
block |
|||
type="link" |
|||
v-access:code="[updatePolicy]" |
|||
@click="onUpdate(row)" |
|||
> |
|||
{{ $t('AbpUi.Edit') }} |
|||
</Button> |
|||
</div> |
|||
<div class="basis-1/2"> |
|||
<Popconfirm |
|||
:title="$t('AbpIdentity.WillDeleteClaim', [row.claimType])" |
|||
@confirm="onDelete(row)" |
|||
> |
|||
<Button |
|||
:icon="h(DeleteOutlined)" |
|||
block |
|||
danger |
|||
type="link" |
|||
v-access:code="[deletePolicy]" |
|||
> |
|||
{{ $t('AbpUi.Delete') }} |
|||
</Button> |
|||
</Popconfirm> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
<ClaimEditModal |
|||
:create-api="createApi" |
|||
:create-policy="createPolicy" |
|||
:delete-api="deleteApi" |
|||
:delete-policy="deletePolicy" |
|||
:update-api="updateApi" |
|||
:update-policy="updatePolicy" |
|||
@change="() => query()" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,35 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
IdentityClaimCreateDto, |
|||
IdentityClaimDeleteDto, |
|||
IdentityClaimDto, |
|||
IdentityClaimUpdateDto, |
|||
} from '../../types/claims'; |
|||
|
|||
interface ClaimEditModalProps { |
|||
/** 新增声明api */ |
|||
createApi: (input: IdentityClaimCreateDto) => Promise<void>; |
|||
/** 新增声明权限代码 */ |
|||
createPolicy: string; |
|||
/** 删除声明api */ |
|||
deleteApi: (input: IdentityClaimDeleteDto) => Promise<void>; |
|||
/** 删除声明权限代码 */ |
|||
deletePolicy: string; |
|||
/** 更新声明api */ |
|||
updateApi: (input: IdentityClaimUpdateDto) => Promise<void>; |
|||
/** 更新声明权限代码 */ |
|||
updatePolicy: string; |
|||
} |
|||
|
|||
interface ClaimModalProps extends ClaimEditModalProps { |
|||
/** 加载声明列表api */ |
|||
getApi: () => Promise<ListResultDto<IdentityClaimDto>>; |
|||
} |
|||
|
|||
interface ClaimModalEvents { |
|||
(event: 'change', data: IdentityClaimDto): void; |
|||
(event: 'onDelete'): void; |
|||
} |
|||
|
|||
export type { ClaimEditModalProps, ClaimModalEvents, ClaimModalProps }; |
|||
@ -0,0 +1,81 @@ |
|||
<script setup lang="ts"> |
|||
import type { IdentityRoleDto } from '../../types'; |
|||
import type { |
|||
IdentityClaimCreateDto, |
|||
IdentityClaimDeleteDto, |
|||
IdentityClaimUpdateDto, |
|||
} from '../../types/claims'; |
|||
|
|||
import { defineAsyncComponent } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { |
|||
createClaimApi, |
|||
deleteClaimApi, |
|||
getClaimsApi, |
|||
updateClaimApi, |
|||
} from '../../api/roles'; |
|||
import { IdentityRolePermissions } from '../../constants/permissions'; |
|||
|
|||
defineOptions({ |
|||
name: 'RoleClaimModal', |
|||
}); |
|||
|
|||
const ClaimTable = defineAsyncComponent( |
|||
() => import('../claims/ClaimTable.vue'), |
|||
); |
|||
|
|||
const [Modal, modalApi] = useVbenModal({ |
|||
draggable: true, |
|||
fullscreenButton: false, |
|||
onCancel() { |
|||
modalApi.close(); |
|||
}, |
|||
onConfirm: async () => {}, |
|||
showCancelButton: false, |
|||
showConfirmButton: false, |
|||
title: $t('AbpIdentity.ManageClaim'), |
|||
}); |
|||
|
|||
async function onGet() { |
|||
const { id } = modalApi.getData<IdentityRoleDto>(); |
|||
return await getClaimsApi(id); |
|||
} |
|||
|
|||
async function onCreate(input: IdentityClaimCreateDto) { |
|||
const { id } = modalApi.getData<IdentityRoleDto>(); |
|||
await createClaimApi(id, input); |
|||
} |
|||
|
|||
async function onDelete(input: IdentityClaimDeleteDto) { |
|||
const { id } = modalApi.getData<IdentityRoleDto>(); |
|||
await deleteClaimApi(id, input); |
|||
} |
|||
|
|||
async function onUpdate(input: IdentityClaimUpdateDto) { |
|||
const { id } = modalApi.getData<IdentityRoleDto>(); |
|||
await updateClaimApi(id, input); |
|||
} |
|||
|
|||
defineExpose({ |
|||
modalApi, |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Modal> |
|||
<ClaimTable |
|||
:create-api="onCreate" |
|||
:create-policy="IdentityRolePermissions.ManageClaims" |
|||
:delete-api="onDelete" |
|||
:delete-policy="IdentityRolePermissions.ManageClaims" |
|||
:get-api="onGet" |
|||
:update-api="onUpdate" |
|||
:update-policy="IdentityRolePermissions.ManageClaims" |
|||
/> |
|||
</Modal> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,28 @@ |
|||
interface IdentityClaimDto { |
|||
claimType: string; |
|||
claimValue: string; |
|||
id: string; |
|||
} |
|||
|
|||
interface IdentityClaimDeleteDto { |
|||
claimType: string; |
|||
claimValue: string; |
|||
} |
|||
|
|||
interface IdentityClaimUpdateDto { |
|||
claimType: string; |
|||
claimValue: string; |
|||
newClaimValue: string; |
|||
} |
|||
|
|||
interface IdentityClaimCreateDto { |
|||
claimType: string; |
|||
claimValue: string; |
|||
} |
|||
|
|||
export type { |
|||
IdentityClaimCreateDto, |
|||
IdentityClaimDeleteDto, |
|||
IdentityClaimDto, |
|||
IdentityClaimUpdateDto, |
|||
}; |
|||
Loading…
Reference in new issue