feat(openiddict): 完善范围管理页面.

1 year ago · faaa5e9dc8
3 changed files with 412 additions and 5 deletions
--- a/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeModal.vue
@ -1,7 +1,212 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { OpenIdConfiguration } from '@abp/core';
+import type { FormInstance } from 'ant-design-vue';
+import type { TransferItem } from 'ant-design-vue/es/transfer';
+
+import type { OpenIddictScopeDto } from '../../types/scopes';
+import type { DisplayNameInfo } from '../display-names/types';
+import type { PropertyInfo } from '../properties/types';
+
+import { computed, defineEmits, defineOptions, ref, toValue } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Form, Input, message, Tabs, Transfer } from 'ant-design-vue';
+
+import { discoveryApi } from '../../api/openid';
+import { createApi, getApi, updateApi } from '../../api/scopes';
+import DisplayNameTable from '../display-names/DisplayNameTable.vue';
+import PropertyTable from '../properties/PropertyTable.vue';
+
+defineOptions({
+  name: 'ScopeModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: OpenIddictScopeDto): void;
+}>();
+
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKeys =
+  | 'authorize'
+  | 'basic'
+  | 'description'
+  | 'dispalyName'
+  | 'props'
+  | 'resource';
+
+const defaultModel = {} as OpenIddictScopeDto;
+
+const form = ref<FormInstance>();
+const formModel = ref<OpenIddictScopeDto>({ ...defaultModel });
+const openIdConfiguration = ref<OpenIdConfiguration>();
+const activeTab = ref<TabKeys>('basic');
+
+const getSupportClaims = computed((): TransferItem[] => {
+  const types = openIdConfiguration.value?.claims_supported ?? [];
+  return types.map((type) => {
+    return {
+      key: type,
+      title: type,
+    };
+  });
+});
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await form.value?.validate();
+    const api = formModel.value.id
+      ? updateApi(formModel.value.id, toValue(formModel))
+      : createApi(toValue(formModel));
+    modalApi.setState({ confirmLoading: true, loading: true });
+    api
+      .then((res) => {
+        message.success($t('AbpUi.SavedSuccessfully'));
+        emits('change', res);
+        modalApi.close();
+      })
+      .finally(() => {
+        modalApi.setState({ confirmLoading: false, loading: false });
+      });
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      activeTab.value = 'basic';
+      formModel.value = { ...defaultModel };
+      modalApi.setState({
+        title: $t('AbpOpenIddict.Scopes:AddNew'),
+      });
+      try {
+        modalApi.setState({ loading: true });
+        await onDiscovery();
+        const { id } = modalApi.getData<OpenIddictScopeDto>();
+        id && (await onGet(id));
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    }
+  },
+  title: $t('AbpOpenIddict.Scopes:AddNew'),
+});
+async function onGet(id: string) {
+  const dto = await getApi(id);
+  formModel.value = dto;
+  modalApi.setState({
+    title: `${$t('AbpOpenIddict.Scopes')} - ${dto.name}`,
+  });
+}
+async function onDiscovery() {
+  openIdConfiguration.value = await discoveryApi();
+}
+function onDescriptionChange(displayName: DisplayNameInfo) {
+  formModel.value.descriptions ??= {};
+  formModel.value.descriptions[displayName.culture] = displayName.displayName;
+}
+function onDescriptionDelete(displayName: DisplayNameInfo) {
+  formModel.value.descriptions ??= {};
+  delete formModel.value.descriptions[displayName.culture];
+}
+function onDisplayNameChange(displayName: DisplayNameInfo) {
+  formModel.value.displayNames ??= {};
+  formModel.value.displayNames[displayName.culture] = displayName.displayName;
+}
+function onDisplayNameDelete(displayName: DisplayNameInfo) {
+  formModel.value.displayNames ??= {};
+  delete formModel.value.displayNames[displayName.culture];
+}
+function onPropChange(prop: PropertyInfo) {
+  formModel.value.properties ??= {};
+  formModel.value.properties[prop.key] = prop.value;
+}
+function onPropDelete(prop: PropertyInfo) {
+  formModel.value.properties ??= {};
+  delete formModel.value.properties[prop.key];
+}
+</script>

 <template>
-  <div></div>
+  <Modal>
+    <Form
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Tabs v-model:active-key="activeTab">
+        <!-- 基本信息 -->
+        <TabPane key="basic" :tab="$t('AbpOpenIddict.BasicInfo')">
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:Name')"
+            name="name"
+            required
+          >
+            <Input v-model:value="formModel.name" autocomplete="off" />
+          </FormItem>
+        </TabPane>
+        <!-- 显示名称 -->
+        <TabPane key="dispalyName" :tab="$t('AbpOpenIddict.DisplayNames')">
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:DefaultDisplayName')"
+            name="displayName"
+          >
+            <Input v-model:value="formModel.displayName" autocomplete="off" />
+          </FormItem>
+          <DisplayNameTable
+            :data="formModel.displayNames"
+            @change="onDisplayNameChange"
+            @delete="onDisplayNameDelete"
+          />
+        </TabPane>
+        <!-- 描述 -->
+        <TabPane key="description" :tab="$t('AbpOpenIddict.Descriptions')">
+          <FormItem
+            :label="$t('AbpOpenIddict.DisplayName:DefaultDescription')"
+            name="description"
+          >
+            <Input v-model:value="formModel.description" autocomplete="off" />
+          </FormItem>
+          <DisplayNameTable
+            :data="formModel.descriptions"
+            @change="onDescriptionChange"
+            @delete="onDescriptionDelete"
+          />
+        </TabPane>
+        <!-- 资源 -->
+        <TabPane key="resource" :tab="$t('AbpOpenIddict.Resources')">
+          <Transfer
+            v-model:target-keys="formModel.resources"
+            :data-source="getSupportClaims"
+            :list-style="{
+              width: '47%',
+              height: '338px',
+            }"
+            :render="(item) => item.title"
+            :titles="[
+              $t('AbpOpenIddict.Assigned'),
+              $t('AbpOpenIddict.Available'),
+            ]"
+            class="tree-transfer"
+          />
+        </TabPane>
+        <!-- 属性 -->
+        <TabPane key="props" :tab="$t('AbpOpenIddict.Propertites')">
+          <PropertyTable
+            :data="formModel.properties"
+            @change="onPropChange"
+            @delete="onPropDelete"
+          />
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
 </template>

 <style scoped></style>
--- a/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue
@ -1,7 +1,199 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { VbenFormProps, VxeGridProps } from '@abp/ui';
+
+import type { OpenIddictScopeDto } from '../../types/scopes';
+
+import { defineAsyncComponent, h } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { createIconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { formatToDateTime } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { deleteApi, getPagedListApi } from '../../api/scopes';
+import { ScopesPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'ScopeTable',
+});
+
+const CheckIcon = createIconifyIcon('ant-design:check-outlined');
+const CloseIcon = createIconifyIcon('ant-design:close-outlined');
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<OpenIddictScopeDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpOpenIddict.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('AbpOpenIddict.DisplayName:DisplayName'),
+    },
+    {
+      align: 'center',
+      field: 'description',
+      minWidth: 200,
+      title: $t('AbpOpenIddict.DisplayName:Description'),
+    },
+    {
+      align: 'center',
+      field: 'creationTime',
+      formatter: ({ cellValue }) => {
+        return cellValue ? formatToDateTime(cellValue) : cellValue;
+      },
+      minWidth: 120,
+      title: $t('AbpOpenIddict.DisplayName:CreationDate'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 220,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getPagedListApi({
+          maxResultCount: page.pageSize,
+          skipCount: (page.currentPage - 1) * page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    // import: true,
+    refresh: true,
+    zoom: true,
+  },
+};
+const [ScopeModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(() => import('./ScopeModal.vue')),
+});
+
+const [Grid, { query }] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const onCreate = () => {
+  modalApi.setData({});
+  modalApi.open();
+};
+
+const onUpdate = (row: OpenIddictScopeDto) => {
+  modalApi.setData(row);
+  modalApi.open();
+};
+
+const onDelete = (row: OpenIddictScopeDto) => {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: () => {
+      return deleteApi(row.id).then(() => {
+        message.success($t('AbpUi.SuccessfullyDeleted'));
+        query();
+      });
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+};
+</script>

 <template>
-  <div></div>
+  <Grid :table-title="$t('AbpOpenIddict.Scopes')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[ScopesPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('AbpOpenIddict.Scopes:AddNew') }}
+      </Button>
+    </template>
+    <template #required="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckIcon v-if="row.required" class="text-green-500" />
+        <CloseIcon v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #static="{ row }">
+      <div class="flex flex-row justify-center">
+        <CheckIcon v-if="row.isStatic" class="text-green-500" />
+        <CloseIcon v-else class="text-red-500" />
+      </div>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <div class="basis-1/3">
+          <Button
+            :icon="h(EditOutlined)"
+            block
+            type="link"
+            v-access:code="[ScopesPermissions.Update]"
+            @click="onUpdate(row)"
+          >
+            {{ $t('AbpUi.Edit') }}
+          </Button>
+        </div>
+        <div class="basis-1/3">
+          <Button
+            :icon="h(DeleteOutlined)"
+            block
+            danger
+            type="link"
+            v-access:code="[ScopesPermissions.Delete]"
+            @click="onDelete(row)"
+          >
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Grid>
+  <ScopeModal @change="() => query()" />
 </template>

-<style scoped></style>
+<style lang="scss" scoped></style>
--- a/apps/vben5/packages/@abp/openiddict/src/constants/permissions.ts
+++ b/apps/vben5/packages/@abp/openiddict/src/constants/permissions.ts
@ -22,3 +22,13 @@ export const AuthorizationsPermissions = {
  /** 删除 */
  Delete: 'AbpOpenIddict.Authorizations.Delete',
 };
+/** 范围权限 */
+export const ScopesPermissions = {
+  /** 新增 */
+  Create: 'AbpOpenIddict.Scopes.Create',
+  Default: 'AbpOpenIddict.Scopes',
+  /** 删除 */
+  Delete: 'AbpOpenIddict.Scopes.Delete',
+  /** 更新 */
+  Update: 'AbpOpenIddict.Scopes.Update',
+};