refactor(claims): 重构用户声明弹窗为公共组件.

apps/vben5/packages/@abp/identity/src/api/users.ts

@@ -1,13 +1,15 @@
 import type { ListResultDto, PagedResultDto } from '@abp/core';
 
 import type { IdentityRoleDto, OrganizationUnitDto } from '../types';
+import type {
+  IdentityClaimCreateDto,
+  IdentityClaimDeleteDto,
+  IdentityClaimDto,
+  IdentityClaimUpdateDto,
+} from '../types/claims';
 import type {
   ChangeUserPasswordInput,
   GetUserPagedListInput,
-  IdentityUserClaimCreateDto,
-  IdentityUserClaimDeleteDto,
-  IdentityUserClaimDto,
-  IdentityUserClaimUpdateDto,
   IdentityUserCreateDto,
   IdentityUserDto,
   IdentityUserUpdateDto,
@@ -158,8 +160,8 @@ export function getRolesApi(
  */
 export function getClaimsApi(
   id: string,
-): Promise<ListResultDto<IdentityUserClaimDto>> {
+): Promise<ListResultDto<IdentityClaimDto>> {
-  return requestClient.get<ListResultDto<IdentityUserClaimDto>>(
+  return requestClient.get<ListResultDto<IdentityClaimDto>>(
     `/api/identity/users/${id}/claims`,
   );
 }
@@ -171,7 +173,7 @@ export function getClaimsApi(
  */
 export function deleteClaimApi(
   id: string,
-  input: IdentityUserClaimDeleteDto,
+  input: IdentityClaimDeleteDto,
 ): Promise<void> {
   return requestClient.delete(`/api/identity/users/${id}/claims`, {
     params: input,
@@ -185,7 +187,7 @@ export function deleteClaimApi(
  */
 export function createClaimApi(
   id: string,
-  input: IdentityUserClaimCreateDto,
+  input: IdentityClaimCreateDto,
 ): Promise<void> {
   return requestClient.post(`/api/identity/users/${id}/claims`, input);
 }
@@ -197,7 +199,7 @@ export function createClaimApi(
  */
 export function updateClaimApi(
   id: string,
-  input: IdentityUserClaimUpdateDto,
+  input: IdentityClaimUpdateDto,
 ): Promise<void> {
   return requestClient.put(`/api/identity/users/${id}/claims`, input);
 }

apps/vben5/packages/@abp/identity/src/components/users/UserClaimEditModal.vue → apps/vben5/packages/@abp/identity/src/components/claims/ClaimModal.vue

@@ -1,22 +1,19 @@
 <script setup lang="ts">
-import type { IdentityUserClaimDto } from '../../types/users';
+import type { IdentityClaimDto } from '../../types/claims';
+import type { ClaimEditModalProps } from './types';
 
 import { useVbenForm, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { getAssignableClaimsApi } from '../../api/claim-types';
-import { createClaimApi, updateClaimApi } from '../../api/users';
-
-interface IdentityUserClaimVto extends IdentityUserClaimDto {
-  userId: string;
-}
 
 defineOptions({
-  name: 'UserClaimEditModal',
+  name: 'ClaimModal',
 });
 
+const { createApi, updateApi } = defineProps<ClaimEditModalProps>();
 const emits = defineEmits<{
-  (event: 'change', data: IdentityUserClaimDto): void;
+  (event: 'change', data: IdentityClaimDto): void;
 }>();
 
 const [Form, formApi] = useVbenForm({
@@ -53,20 +50,20 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       try {
         modalApi.setState({ loading: true });
-        const claimVto = modalApi.getData<IdentityUserClaimVto>();
+        const claimDto = modalApi.getData<IdentityClaimDto>();
         formApi.setValues({
-          ...claimVto,
+          ...claimDto,
-          newClaimValue: claimVto.claimValue,
+          newClaimValue: claimDto.claimValue,
         });
         // 新增可选, 修改不可选
         formApi.updateSchema([
           {
-            disabled: !!claimVto.id,
+            disabled: !!claimDto.id,
             fieldName: 'claimType',
           },
         ]);
         // 新增时初始化可选声明
-        !claimVto.id && (await initAssignableClaims());
+        !claimDto.id && (await initAssignableClaims());
       } finally {
         modalApi.setState({ loading: false });
       }
@@ -94,19 +91,19 @@ async function initAssignableClaims() {
 async function onSubmit(values: Record<string, any>) {
   try {
     modalApi.setState({ confirmLoading: true });
-    const claimVto = modalApi.getData<IdentityUserClaimVto>();
+    const claimDto = modalApi.getData<IdentityClaimDto>();
-    const api = claimVto.id
+    const api = claimDto.id
-      ? updateClaimApi(claimVto.userId, {
+      ? updateApi({
-          claimType: claimVto.claimType,
+          claimType: claimDto.claimType,
-          claimValue: claimVto.claimValue,
+          claimValue: claimDto.claimValue,
           newClaimValue: values.claimValue,
         })
-      : createClaimApi(claimVto.userId, {
+      : createApi({
           claimType: values.claimType,
           claimValue: values.claimValue,
         });
     await api;
-    emits('change', values as IdentityUserClaimDto);
+    emits('change', values as IdentityClaimDto);
     modalApi.close();
   } finally {
     modalApi.setState({ confirmLoading: false });

apps/vben5/packages/@abp/identity/src/components/claims/ClaimTable.vue

@@ -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>

apps/vben5/packages/@abp/identity/src/components/claims/types.ts

@@ -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 };

apps/vben5/packages/@abp/identity/src/components/users/UserClaimModal.vue

@@ -1,26 +1,30 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { IdentityUserDto } from '../../types';
+import type {
+  IdentityClaimCreateDto,
+  IdentityClaimDeleteDto,
+  IdentityClaimUpdateDto,
+} from '../../types/claims';
 
-import type { IdentityUserClaimDto, IdentityUserDto } from '../../types';
+import { defineAsyncComponent } from 'vue';
-
-import { defineAsyncComponent, h } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { useVbenVxeGrid } from '@abp/ui';
+import {
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
+  createClaimApi,
-import { Button, Popconfirm } from 'ant-design-vue';
+  deleteClaimApi,
-
+  getClaimsApi,
-import { deleteClaimApi, getClaimsApi } from '../../api/users';
+  updateClaimApi,
+} from '../../api/users';
 import { IdentityUserPermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'UserClaimModal',
 });
 
-const ClaimEditModal = defineAsyncComponent(
+const ClaimTable = defineAsyncComponent(
-  () => import('./UserClaimEditModal.vue'),
+  () => import('../claims/ClaimTable.vue'),
 );
 
 const [Modal, modalApi] = useVbenModal({
@@ -34,129 +38,43 @@ const [Modal, modalApi] = useVbenModal({
   showConfirmButton: false,
   title: $t('AbpIdentity.ManageClaim'),
 });
-const gridOptions: VxeGridProps<IdentityUserClaimDto> = {
-  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 () => {
-        const { id } = modalApi.getData<IdentityUserDto>();
-        return await getClaimsApi(id);
-      },
-    },
-    response: {
-      total: 'totalCount',
-      list: 'items',
-    },
-  },
-  toolbarConfig: {
-    custom: true,
-    export: true,
-    // import: true,
-    refresh: true,
-    zoom: true,
-  },
-};
-const [Grid, { query }] = useVbenVxeGrid({
-  gridOptions,
-});
 
-const [UserClaimEditModal, editModalApi] = useVbenModal({
+async function onGet() {
-  connectedComponent: ClaimEditModal,
+  const { id } = modalApi.getData<IdentityUserDto>();
-});
+  return await getClaimsApi(id);
-function onCreate() {
+}
+
+async function onCreate(input: IdentityClaimCreateDto) {
   const { id } = modalApi.getData<IdentityUserDto>();
-  editModalApi.setData({
+  await createClaimApi(id, input);
-    userId: id,
-  });
-  editModalApi.open();
 }
 
-async function onDelete(row: IdentityUserClaimDto) {
+async function onDelete(input: IdentityClaimDeleteDto) {
   const { id } = modalApi.getData<IdentityUserDto>();
-  await deleteClaimApi(id, {
+  await deleteClaimApi(id, input);
-    claimType: row.claimType,
-    claimValue: row.claimValue,
-  }).then(() => query());
 }
 
-function onUpdate(row: IdentityUserClaimDto) {
+async function onUpdate(input: IdentityClaimUpdateDto) {
   const { id } = modalApi.getData<IdentityUserDto>();
-  editModalApi.setData({
+  await updateClaimApi(id, input);
-    userId: id,
-    ...row,
-  });
-  editModalApi.open();
 }
+
+defineExpose({
+  modalApi,
+});
 </script>
 
 <template>
   <Modal>
-    <Grid>
+    <ClaimTable
-      <template #toolbar-tools>
+      :create-api="onCreate"
-        <Button
+      :create-policy="IdentityUserPermissions.ManageClaims"
-          type="primary"
+      :delete-api="onDelete"
-          v-access:code="[IdentityUserPermissions.ManageClaims]"
+      :delete-policy="IdentityUserPermissions.ManageClaims"
-          @click="onCreate"
+      :get-api="onGet"
-        >
+      :update-api="onUpdate"
-          {{ $t('AbpIdentity.AddClaim') }}
+      :update-policy="IdentityUserPermissions.ManageClaims"
-        </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="[IdentityUserPermissions.ManageClaims]"
-              @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="[IdentityUserPermissions.Delete]"
-              >
-                {{ $t('AbpUi.Delete') }}
-              </Button>
-            </Popconfirm>
-          </div>
-        </div>
-      </template>
-    </Grid>
-    <UserClaimEditModal @change="() => query()" />
   </Modal>
 </template>
 

apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue

@@ -194,6 +194,7 @@ const handleUnlock = async (row: IdentityUserDto) => {
 const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
   switch (info.key) {
     case 'claims': {
+      console.log(claimModalApi);
       claimModalApi.setData(row);
       claimModalApi.open();
       break;

apps/vben5/packages/@abp/identity/src/types/claim-types.ts

@@ -42,28 +42,9 @@ interface GetIdentityClaimTypePagedListInput
   filter?: string;
 }
 
-interface IdentityClaimDto {
-  claimType: string;
-  claimValue: string;
-}
-
-interface IdentityClaimDeleteDto {
-  claimType: string;
-  claimValue: string;
-}
-
-type IdentityClaimCreateDto = IdentityClaimDeleteDto;
-
-interface IdentityClaimUpdateDto extends IdentityClaimDeleteDto {
-  newClaimValue: string;
-}
-
 export type {
   GetIdentityClaimTypePagedListInput,
-  IdentityClaimCreateDto,
-  IdentityClaimDto,
   IdentityClaimTypeCreateDto,
   IdentityClaimTypeDto,
   IdentityClaimTypeUpdateDto,
-  IdentityClaimUpdateDto,
 };

apps/vben5/packages/@abp/identity/src/types/claims.ts

@@ -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,
+};

apps/vben5/packages/@abp/identity/src/types/users.ts

@@ -6,8 +6,6 @@ import type {
   PagedAndSortedResultRequestDto,
 } from '@abp/core';
 
-import type { IdentityClaimDto } from './claim-types';
-
 /** 用户对象接口 */
 interface IUser {
   /** 邮件地址 */
@@ -92,25 +90,10 @@ interface GetUserPagedListInput extends PagedAndSortedResultRequestDto {
 type IdentityUserCreateDto = IdentityUserCreateOrUpdateDto;
 type IdentityUserUpdateDto = IdentityUserCreateOrUpdateDto;
 
-interface IdentityUserClaimDto extends IdentityClaimDto {
-  id: string;
-}
-
-interface IdentityUserClaimUpdateDto extends IdentityClaimDto {
-  newClaimValue: string;
-}
-
-type IdentityUserClaimDeleteDto = IdentityClaimDto;
-type IdentityUserClaimCreateDto = IdentityClaimDto;
-
 export type {
   ChangeMyPasswordInput,
   ChangeUserPasswordInput,
   GetUserPagedListInput,
-  IdentityUserClaimCreateDto,
-  IdentityUserClaimDeleteDto,
-  IdentityUserClaimDto,
-  IdentityUserClaimUpdateDto,
   IdentityUserCreateDto,
   IdentityUserDto,
   IdentityUserOrganizationUnitUpdateDto,