From 14335836c72a383636e7896e5c03b61f6a904a3f Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Mon, 21 Apr 2025 17:48:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(vben5):=20=E5=A2=9E=E5=8A=A0Webhook?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E8=AE=B0=E5=BD=95=E5=88=97=E8=A1=A8=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-antd/src/locales/langs/en-US/abp.json |   3 +-
 .../app-antd/src/locales/langs/zh-CN/abp.json |   3 +-
 .../app-antd/src/router/routes/modules/abp.ts |   9 +
 .../views/webhooks/send-attempts/index.vue    |  15 ++
 .../packages/@abp/webhooks/src/api/index.ts   |   1 +
 .../webhooks/src/api/useSendAttemptsApi.ts    |  93 +++++++
 .../@abp/webhooks/src/components/index.ts     |   1 +
 .../send-attempts/WebhookSendAttemptTable.vue | 253 ++++++++++++++++++
 .../WebhookSubscriptionTable.vue              |   4 +-
 .../packages/@abp/webhooks/src/types/index.ts |   1 +
 .../@abp/webhooks/src/types/sendAttempts.ts   |  51 ++++
 11 files changed, 430 insertions(+), 4 deletions(-)
 create mode 100644 apps/vben5/apps/app-antd/src/views/webhooks/send-attempts/index.vue
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/api/useSendAttemptsApi.ts
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts

diff --git 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
index 6de53754e..2bda6ce06 100644
--- 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
@@ -118,6 +118,7 @@
     "title": "Webhooks",
     "groups": "Groups",
     "definitions": "Definitions",
-    "subscriptions": "Subscriptions"
+    "subscriptions": "Subscriptions",
+    "sendAttempts": "Send Attempts"
   }
 }
diff --git 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
index 08ff8f8e5..5efb8914d 100644
--- 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
@@ -118,6 +118,7 @@
     "title": "Webhook管理",
     "groups": "Webhook分组",
     "definitions": "Webhook定义",
-    "subscriptions": "管理订阅"
+    "subscriptions": "管理订阅",
+    "sendAttempts": "发送记录"
   }
 }
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
index 2ec6407a1..11889b8f0 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@@ -485,6 +485,15 @@ const routes: RouteRecordRaw[] = [
             path: '/webhooks/subscriptions',
             component: () => import('#/views/webhooks/subscriptions/index.vue'),
           },
+          {
+            meta: {
+              title: $t('abp.webhooks.sendAttempts'),
+              icon: 'material-symbols:history',
+            },
+            name: 'WebhookSendAttempts',
+            path: '/webhooks/send-attempts',
+            component: () => import('#/views/webhooks/send-attempts/index.vue'),
+          },
         ],
       },
       {
diff --git a/apps/vben5/apps/app-antd/src/views/webhooks/send-attempts/index.vue b/apps/vben5/apps/app-antd/src/views/webhooks/send-attempts/index.vue
new file mode 100644
index 000000000..c4ba9230d
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/webhooks/send-attempts/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { WebhookSendAttemptTable } from '@abp/webhooks';
+
+defineOptions({
+  name: 'WebhookSendAttempts',
+});
+</script>
+
+<template>
+  <Page>
+    <WebhookSendAttemptTable />
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/webhooks/src/api/index.ts b/apps/vben5/packages/@abp/webhooks/src/api/index.ts
index 0a30bdd2a..acbff7f7e 100644
--- a/apps/vben5/packages/@abp/webhooks/src/api/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/api/index.ts
@@ -1,3 +1,4 @@
+export * from './useSendAttemptsApi';
 export * from './useSubscriptionsApi';
 export * from './useWebhookDefinitionsApi';
 export * from './useWebhookGroupDefinitionsApi';
diff --git a/apps/vben5/packages/@abp/webhooks/src/api/useSendAttemptsApi.ts b/apps/vben5/packages/@abp/webhooks/src/api/useSendAttemptsApi.ts
new file mode 100644
index 000000000..5cf292be5
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/api/useSendAttemptsApi.ts
@@ -0,0 +1,93 @@
+import type { PagedResultDto } from '@abp/core';
+
+import type {
+  WebhookSendRecordDeleteManyInput,
+  WebhookSendRecordDto,
+  WebhookSendRecordGetListInput,
+  WebhookSendRecordResendManyInput,
+} from '../types/sendAttempts';
+
+import { useRequest } from '@abp/request';
+
+export function useSendAttemptsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 查询发送记录
+   * @param id 记录Id
+   * @returns 发送记录Dto
+   */
+  function getApi(id: string): Promise<WebhookSendRecordDto> {
+    return request<WebhookSendRecordDto>(`/api/webhooks/send-attempts/${id}`, {
+      method: 'GET',
+    });
+  }
+  /**
+   * 删除发送记录
+   * @param id 记录Id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/webhooks/send-attempts/${id}`, {
+      method: 'DELETE',
+    });
+  }
+  /**
+   * 批量删除发送记录
+   * @param input 参数
+   */
+  function bulkDeleteApi(
+    input: WebhookSendRecordDeleteManyInput,
+  ): Promise<void> {
+    return request(`/api/webhooks/send-attempts/delete-many`, {
+      data: input,
+      method: 'DELETE',
+    });
+  }
+  /**
+   * 查询发送记录分页列表
+   * @param input 过滤参数
+   * @returns 发送记录Dto分页列表
+   */
+  function getPagedListApi(
+    input: WebhookSendRecordGetListInput,
+  ): Promise<PagedResultDto<WebhookSendRecordDto>> {
+    return request<PagedResultDto<WebhookSendRecordDto>>(
+      `/api/webhooks/send-attempts`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+  /**
+   * 重新发送
+   * @param id 记录Id
+   */
+  function reSendApi(id: string): Promise<void> {
+    return request(`/api/webhooks/send-attempts/${id}/resend`, {
+      method: 'POST',
+    });
+  }
+  /**
+   * 批量重新发送
+   * @param input 参数
+   */
+  function bulkReSendApi(
+    input: WebhookSendRecordResendManyInput,
+  ): Promise<void> {
+    return request(`/api/webhooks/send-attempts/resend-many`, {
+      data: input,
+      method: 'POST',
+    });
+  }
+
+  return {
+    bulkDeleteApi,
+    bulkReSendApi,
+    cancel,
+    deleteApi,
+    getApi,
+    getPagedListApi,
+    reSendApi,
+  };
+}
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/index.ts b/apps/vben5/packages/@abp/webhooks/src/components/index.ts
index 41763338c..55dd81137 100644
--- a/apps/vben5/packages/@abp/webhooks/src/components/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as WebhookGroupDefinitionTable } from './definitions/groups/WebhookGroupDefinitionTable.vue';
 export { default as WebhookDefinitionTable } from './definitions/webhooks/WebhookDefinitionTable.vue';
+export { default as WebhookSendAttemptTable } from './send-attempts/WebhookSendAttemptTable.vue';
 export { default as WebhookSubscriptionTable } from './subscriptions/WebhookSubscriptionTable.vue';
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue b/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue
new file mode 100644
index 000000000..13a1585a8
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { WebhookSendRecordDto } from '../../types/sendAttempts';
+
+import { h, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { formatToDateTime } from '@abp/core';
+import { useHttpStatusCodeMap } from '@abp/request';
+import { useTenantsApi } from '@abp/saas';
+import { useVbenVxeGrid } from '@abp/ui';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { Button, message, Modal, Tag } from 'ant-design-vue';
+import debounce from 'lodash.debounce';
+
+import { useSendAttemptsApi } from '../../api/useSendAttemptsApi';
+
+defineOptions({
+  name: 'WebhookSendAttemptTable',
+});
+
+const { getPagedListApi: getTenantsApi } = useTenantsApi();
+const { cancel, deleteApi, getPagedListApi } = useSendAttemptsApi();
+const { getHttpStatusColor, httpStatusCodeMap } = useHttpStatusCodeMap();
+
+const tenantFilter = ref<string>();
+const selectedKeys = ref<string[]>([]);
+
+const httpStatusOptions = Object.keys(httpStatusCodeMap).map((key) => {
+  return {
+    label: httpStatusCodeMap[Number(key)],
+    value: key,
+  };
+});
+
+const formOptions: VbenFormProps = {
+  collapsed: true,
+  collapsedRows: 3,
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  fieldMappingTime: [
+    [
+      'creationTime',
+      ['beginCreationTime', 'endCreationTime'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+  schema: [
+    {
+      component: 'ApiSelect',
+      componentProps: () => {
+        return {
+          allowClear: true,
+          api: getTenantsApi,
+          filterOption: false,
+          labelField: 'normalizedName',
+          onSearch: debounce((filter?: string) => {
+            tenantFilter.value = filter;
+          }, 500),
+          params: {
+            filter: tenantFilter.value || undefined,
+          },
+          resultField: 'items',
+          showSearch: true,
+          valueField: 'id',
+        };
+      },
+      fieldName: 'tenantId',
+      label: $t('WebhooksManagement.DisplayName:TenantId'),
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'creationTime',
+      label: $t('WebhooksManagement.DisplayName:CreationTime'),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: $t('WebhooksManagement.ResponseState:Successed'),
+            value: true,
+          },
+          {
+            label: $t('WebhooksManagement.ResponseState:Failed'),
+            value: false,
+          },
+        ],
+      },
+      fieldName: 'state',
+      label: $t('WebhooksManagement.DisplayName:State'),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: httpStatusOptions,
+      },
+      fieldName: 'responseStatusCode',
+      label: $t('WebhooksManagement.DisplayName:ResponseStatusCode'),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+      },
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
+  columns: [
+    {
+      align: 'center',
+      type: 'checkbox',
+      width: 40,
+    },
+    {
+      align: 'left',
+      field: 'tenantId',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:TenantId'),
+    },
+    {
+      align: 'left',
+      field: 'responseStatusCode',
+      minWidth: 150,
+      slots: { default: 'responseStatusCode' },
+      title: $t('WebhooksManagement.DisplayName:ResponseStatusCode'),
+    },
+    {
+      align: 'left',
+      field: 'creationTime',
+      formatter({ cellValue }) {
+        return cellValue ? formatToDateTime(cellValue) : '';
+      },
+      minWidth: 120,
+      title: $t('WebhooksManagement.DisplayName:CreationTime'),
+    },
+    {
+      align: 'center',
+      field: 'response',
+      minWidth: 300,
+      title: $t('WebhooksManagement.DisplayName:Response'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 200,
+    },
+  ],
+  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 gridEvents: VxeGridListeners<WebhookSendRecordDto> = {
+  checkboxAll: (params) => {
+    selectedKeys.value = params.records.map((record) => record.id);
+  },
+  checkboxChange: (params) => {
+    selectedKeys.value = params.records.map((record) => record.id);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+function onUpdate(_row: WebhookSendRecordDto) {}
+
+function onDelete(row: WebhookSendRecordDto) {
+  Modal.confirm({
+    centered: true,
+    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.title]),
+    onCancel: () => {
+      cancel();
+    },
+    onOk: async () => {
+      await deleteApi(row.id);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      await gridApi.query();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+</script>
+
+<template>
+  <Grid :table-title="$t('WebhooksManagement.SendAttempts')">
+    <template #responseStatusCode="{ row }">
+      <Tag :color="getHttpStatusColor(row.responseStatusCode)">
+        {{ httpStatusCodeMap[row.responseStatusCode] }}
+      </Tag>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <Button :icon="h(EditOutlined)" type="link" @click="onUpdate(row)">
+          {{ $t('AbpUi.Edit') }}
+        </Button>
+        <Button
+          :icon="h(DeleteOutlined)"
+          danger
+          type="link"
+          @click="onDelete(row)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+      </div>
+    </template>
+  </Grid>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue b/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue
index 46e1f9474..d96f61d43 100644
--- a/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue
+++ b/apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue
@@ -168,9 +168,9 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
       title: $t('WebhooksManagement.DisplayName:CreationTime'),
     },
     {
-      align: 'left',
+      align: 'center',
       field: 'webhooks',
-      minWidth: 150,
+      minWidth: 300,
       slots: { default: 'webhooks' },
       title: $t('WebhooksManagement.DisplayName:Webhooks'),
     },
diff --git a/apps/vben5/packages/@abp/webhooks/src/types/index.ts b/apps/vben5/packages/@abp/webhooks/src/types/index.ts
index 2815a630b..371b52ee2 100644
--- a/apps/vben5/packages/@abp/webhooks/src/types/index.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/types/index.ts
@@ -1,3 +1,4 @@
 export * from './definitions';
 export * from './groups';
+export * from './sendAttempts';
 export * from './subscriptions';
diff --git a/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts b/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts
new file mode 100644
index 000000000..582e0e3c2
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts
@@ -0,0 +1,51 @@
+import type { EntityDto, PagedAndSortedResultRequestDto } from '@abp/core';
+
+import { HttpStatusCode } from '@abp/request';
+
+interface WebhookEventRecordDto extends EntityDto<string> {
+  creationTime: Date;
+  data?: string;
+  tenantId?: string;
+  webhookName: string;
+}
+
+interface WebhookSendRecordDto extends EntityDto<string> {
+  creationTime: Date;
+  lastModificationTime?: Date;
+  requestHeaders?: Record<string, string>;
+  response?: string;
+  responseHeaders?: Record<string, string>;
+  responseStatusCode?: HttpStatusCode;
+  sendExactSameData: boolean;
+  tenantId?: string;
+  webhookEvent: WebhookEventRecordDto;
+  webhookEventId: string;
+  webhookSubscriptionId: string;
+}
+
+interface WebhookSendRecordDeleteManyInput {
+  recordIds: string[];
+}
+
+interface WebhookSendRecordResendManyInput {
+  recordIds: string[];
+}
+
+interface WebhookSendRecordGetListInput extends PagedAndSortedResultRequestDto {
+  beginCreationTime?: Date;
+  endCreationTime?: Date;
+  filter?: string;
+  responseStatusCode?: HttpStatusCode;
+  state?: boolean;
+  subscriptionId?: string;
+  tenantId?: string;
+  webhookEventId?: string;
+}
+
+export type {
+  WebhookEventRecordDto,
+  WebhookSendRecordDeleteManyInput,
+  WebhookSendRecordDto,
+  WebhookSendRecordGetListInput,
+  WebhookSendRecordResendManyInput,
+};