feat(vben5): 增加webhook定义列表视图

1 year ago · 7d18d00b3b
11 changed files with 502 additions and 2 deletions
--- a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
@ -116,6 +116,7 @@
  },
  "webhooks": {
    "title": "Webhooks",
-    "groups": "Groups"
+    "groups": "Groups",
+    "definitions": "Definitions"
  }
 }
--- a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
@ -116,6 +116,7 @@
  },
  "webhooks": {
    "title": "Webhook管理",
-    "groups": "Webhook分组"
+    "groups": "Webhook分组",
+    "definitions": "Webhook定义"
  }
 }
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@ -467,6 +467,15 @@ const routes: RouteRecordRaw[] = [
            path: '/webhooks/groups',
            component: () => import('#/views/webhooks/groups/index.vue'),
          },
+          {
+            meta: {
+              title: $t('abp.webhooks.definitions'),
+              icon: 'material-symbols:webhook',
+            },
+            name: 'WebhookDefinitions',
+            path: '/webhooks/definitions',
+            component: () => import('#/views/webhooks/definitions/index.vue'),
+          },
        ],
      },
      {
--- a/apps/vben5/apps/app-antd/src/views/webhooks/definitions/index.vue
+++ b/apps/vben5/apps/app-antd/src/views/webhooks/definitions/index.vue
@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { WebhookDefinitionTable } from '@abp/webhooks';
+
+defineOptions({
+  name: 'WebhookDefinitions',
+});
+</script>
+
+<template>
+  <Page>
+    <WebhookDefinitionTable />
+  </Page>
+</template>
--- a/apps/vben5/packages/@abp/webhooks/src/api/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/api/index.ts
@ -0,0 +1,2 @@
+export * from './useWebhookDefinitionsApi';
+export * from './useWebhookGroupDefinitionsApi';
--- a/apps/vben5/packages/@abp/webhooks/src/api/useWebhookDefinitionsApi.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/api/useWebhookDefinitionsApi.ts
@ -0,0 +1,91 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  WebhookDefinitionCreateDto,
+  WebhookDefinitionDto,
+  WebhookDefinitionGetListInput,
+  WebhookDefinitionUpdateDto,
+} from '../types/definitions';
+
+import { useRequest } from '@abp/request';
+
+export function useWebhookDefinitionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 删除Webhook定义
+   * @param name Webhook名称
+   */
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/webhooks/definitions/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询Webhook定义
+   * @param name Webhook名称
+   * @returns Webhook定义数据传输对象
+   */
+  function getApi(name: string): Promise<WebhookDefinitionDto> {
+    return request<WebhookDefinitionDto>(`/api/webhooks/definitions/${name}`, {
+      method: 'GET',
+    });
+  }
+
+  /**
+   * 查询Webhook定义列表
+   * @param input Webhook过滤条件
+   * @returns Webhook定义数据传输对象列表
+   */
+  function getListApi(
+    input?: WebhookDefinitionGetListInput,
+  ): Promise<ListResultDto<WebhookDefinitionDto>> {
+    return request<ListResultDto<WebhookDefinitionDto>>(
+      `/api/webhooks/definitions`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  /**
+   * 创建Webhook定义
+   * @param input Webhook定义参数
+   * @returns Webhook定义数据传输对象
+   */
+  function createApi(
+    input: WebhookDefinitionCreateDto,
+  ): Promise<WebhookDefinitionDto> {
+    return request<WebhookDefinitionDto>('/api/webhooks/definitions', {
+      data: input,
+      method: 'POST',
+    });
+  }
+
+  /**
+   * 更新Webhook定义
+   * @param name Webhook名称
+   * @param input Webhook定义参数
+   * @returns Webhook定义数据传输对象
+   */
+  function updateApi(
+    name: string,
+    input: WebhookDefinitionUpdateDto,
+  ): Promise<WebhookDefinitionDto> {
+    return request<WebhookDefinitionDto>(`/api/webhooks/definitions/${name}`, {
+      data: input,
+      method: 'PUT',
+    });
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+    updateApi,
+  };
+}
--- a/apps/vben5/packages/@abp/webhooks/src/components/definitions/webhooks/WebhookDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/webhooks/src/components/definitions/webhooks/WebhookDefinitionTable.vue
@ -0,0 +1,328 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { WebhookDefinitionDto } from '../../../types/definitions';
+import type { WebhookGroupDefinitionDto } from '../../../types/groups';
+
+import { h, onMounted, reactive, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  listToTree,
+  useLocalization,
+  useLocalizationSerializer,
+} from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal, Tag } from 'ant-design-vue';
+import { VxeGrid } from 'vxe-table';
+
+import { useWebhookDefinitionsApi } from '../../../api/useWebhookDefinitionsApi';
+import { useWebhookGroupDefinitionsApi } from '../../../api/useWebhookGroupDefinitionsApi';
+import { WebhookDefinitionsPermissions } from '../../../constants/permissions';
+
+defineOptions({
+  name: 'WebhookDefinitionTable',
+});
+
+interface DefinitionItem {
+  children: DefinitionItem[];
+  description?: string;
+  displayName: string;
+  groupName: string;
+  isEnabled: boolean;
+  isStatic: boolean;
+  name: string;
+  requiredFeatures?: string[];
+}
+interface DefinitionGroup {
+  displayName: string;
+  items: DefinitionItem[];
+  name: string;
+}
+
+const { Lr } = useLocalization();
+const { deserialize } = useLocalizationSerializer();
+const { getListApi: getGroupsApi } = useWebhookGroupDefinitionsApi();
+const { deleteApi, getListApi: getDefinitionsApi } = useWebhookDefinitionsApi();
+
+const definitionGroups = ref<DefinitionGroup[]>([]);
+const pageState = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  handleReset: onReset,
+  async handleSubmit(params) {
+    pageState.current = 1;
+    await onGet(params);
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
+  columns: [
+    {
+      align: 'center',
+      type: 'seq',
+      width: 50,
+    },
+    {
+      align: 'left',
+      field: 'group',
+      slots: { content: 'group' },
+      type: 'expand',
+      width: 50,
+    },
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:DisplayName'),
+    },
+  ],
+  expandConfig: {
+    padding: true,
+    trigger: 'row',
+  },
+  exportConfig: {},
+  keepSource: true,
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: false,
+    zoom: true,
+  },
+};
+const subGridColumns: VxeGridProps<WebhookDefinitionDto>['columns'] = [
+  {
+    align: 'center',
+    type: 'seq',
+    width: 50,
+  },
+  {
+    align: 'left',
+    field: 'isEnabled',
+    minWidth: 120,
+    slots: { default: 'isEnabled' },
+    title: $t('WebhooksManagement.DisplayName:IsEnabled'),
+  },
+  {
+    align: 'left',
+    field: 'name',
+    minWidth: 150,
+    title: $t('WebhooksManagement.DisplayName:Name'),
+    treeNode: true,
+  },
+  {
+    align: 'left',
+    field: 'displayName',
+    minWidth: 120,
+    title: $t('WebhooksManagement.DisplayName:DisplayName'),
+  },
+  {
+    align: 'left',
+    field: 'description',
+    minWidth: 120,
+    title: $t('WebhooksManagement.DisplayName:Description'),
+  },
+  {
+    align: 'left',
+    field: 'features',
+    minWidth: 150,
+    slots: { default: 'features' },
+    title: $t('WebhooksManagement.DisplayName:RequiredFeatures'),
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: $t('AbpUi.Actions'),
+    width: 220,
+  },
+];
+
+const gridEvents: VxeGridListeners<WebhookGroupDefinitionDto> = {
+  pageChange(params) {
+    pageState.current = params.currentPage;
+    pageState.size = params.pageSize;
+    onPageChange();
+  },
+};
+
+const [GroupGrid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+async function onGet(input?: Record<string, string>) {
+  try {
+    gridApi.setLoading(true);
+    const groupRes = await getGroupsApi(input);
+    const definitionRes = await getDefinitionsApi(input);
+    pageState.total = groupRes.items.length;
+    definitionGroups.value = groupRes.items.map((group) => {
+      const localizableGroup = deserialize(group.displayName);
+      const definitions = definitionRes.items
+        .filter((definition) => definition.groupName === group.name)
+        .map((definition) => {
+          const displayName = deserialize(definition.displayName);
+          const description = deserialize(definition.displayName);
+          return {
+            ...definition,
+            description: Lr(description.resourceName, description.name),
+            displayName: Lr(displayName.resourceName, displayName.name),
+          };
+        });
+      return {
+        ...group,
+        displayName: Lr(localizableGroup.resourceName, localizableGroup.name),
+        items: listToTree(definitions, {
+          id: 'name',
+          pid: 'parentName',
+        }),
+      };
+    });
+    onPageChange();
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+async function onReset() {
+  await gridApi.formApi.resetForm();
+  const input = await gridApi.formApi.getValues();
+  await onGet(input);
+}
+
+function onPageChange() {
+  const items = definitionGroups.value.slice(
+    (pageState.current - 1) * pageState.size,
+    pageState.current * pageState.size,
+  );
+  gridApi.setGridOptions({
+    data: items,
+    pagerConfig: {
+      currentPage: pageState.current,
+      pageSize: pageState.size,
+      total: pageState.total,
+    },
+  });
+}
+
+function onCreate() {}
+
+function onUpdate(_row: WebhookDefinitionDto) {}
+
+function onDelete(row: WebhookDefinitionDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      onGet();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+onMounted(onGet);
+</script>
+
+<template>
+  <GroupGrid :table-title="$t('WebhooksManagement.WebhookDefinitions')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[WebhookDefinitionsPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('WebhooksManagement.Webhooks:AddNew') }}
+      </Button>
+    </template>
+    <template #group="{ row: group }">
+      <VxeGrid
+        :columns="subGridColumns"
+        :data="group.items"
+        :tree-config="{
+          trigger: 'row',
+          rowField: 'name',
+          childrenField: 'children',
+        }"
+      >
+        <template #isEnabled="{ row }">
+          <div class="flex flex-row justify-center">
+            <CheckOutlined v-if="row.isEnabled" class="text-green-500" />
+            <CloseOutlined v-else class="text-red-500" />
+          </div>
+        </template>
+        <template #features="{ row }">
+          <div class="flex flex-row justify-center gap-1">
+            <template v-for="feature in row.features" :key="feature">
+              <Tag color="blue">{{ feature }}</Tag>
+            </template>
+          </div>
+        </template>
+        <template #action="{ row: definition }">
+          <div class="flex flex-row">
+            <Button
+              :icon="h(EditOutlined)"
+              block
+              type="link"
+              v-access:code="[WebhookDefinitionsPermissions.Update]"
+              @click="onUpdate(definition)"
+            >
+              {{ $t('AbpUi.Edit') }}
+            </Button>
+            <Button
+              v-if="!definition.isStatic"
+              :icon="h(DeleteOutlined)"
+              block
+              danger
+              type="link"
+              v-access:code="[WebhookDefinitionsPermissions.Delete]"
+              @click="onDelete(definition)"
+            >
+              {{ $t('AbpUi.Delete') }}
+            </Button>
+          </div>
+        </template>
+      </VxeGrid>
+    </template>
+  </GroupGrid>
+</template>
+
+<style scoped></style>
--- a/apps/vben5/packages/@abp/webhooks/src/components/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/components/index.ts
@ -1 +1,2 @@
 export { default as WebhookGroupDefinitionTable } from './definitions/groups/WebhookGroupDefinitionTable.vue';
+export { default as WebhookDefinitionTable } from './definitions/webhooks/WebhookDefinitionTable.vue';
--- a/apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts
@ -8,3 +8,14 @@ export const GroupDefinitionsPermissions = {
  /** 更新 */
  Update: 'AbpWebhooks.GroupDefinitions.Update',
 };
+
+/** Webhook定义权限 */
+export const WebhookDefinitionsPermissions = {
+  /** 新增 */
+  Create: 'AbpWebhooks.Definitions.Create',
+  Default: 'AbpWebhooks.Definitions',
+  /** 删除 */
+  Delete: 'AbpWebhooks.Definitions.Delete',
+  /** 更新 */
+  Update: 'AbpWebhooks.Definitions.Update',
+};
--- a/apps/vben5/packages/@abp/webhooks/src/types/definitions.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/types/definitions.ts
@ -0,0 +1,40 @@
+import type { IHasConcurrencyStamp, IHasExtraProperties } from '@abp/core';
+
+interface WebhookDefinitionDto extends IHasExtraProperties {
+  description?: string;
+  displayName: string;
+  groupName: string;
+  isEnabled: boolean;
+  isStatic: boolean;
+  name: string;
+  requiredFeatures?: string[];
+}
+
+interface WebhookDefinitionCreateOrUpdateDto extends IHasExtraProperties {
+  description?: string;
+  displayName: string;
+  isEnabled: boolean;
+  requiredFeatures?: string[];
+}
+
+interface WebhookDefinitionCreateDto
+  extends WebhookDefinitionCreateOrUpdateDto {
+  groupName: string;
+  name: string;
+}
+
+interface WebhookDefinitionUpdateDto
+  extends IHasConcurrencyStamp,
+    WebhookDefinitionCreateOrUpdateDto {}
+
+interface WebhookDefinitionGetListInput {
+  filter?: string;
+  groupName?: string;
+}
+
+export type {
+  WebhookDefinitionCreateDto,
+  WebhookDefinitionDto,
+  WebhookDefinitionGetListInput,
+  WebhookDefinitionUpdateDto,
+};
--- a/apps/vben5/packages/@abp/webhooks/src/types/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/types/index.ts
@ -1 +1,2 @@
+export * from './definitions';
 export * from './groups';