feat：【antd】【ele】【pay 支付】pay/notify 迁移 ele 版本

apps/web-antd/src/views/pay/notify/data.ts

@@ -161,13 +161,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'notifyTimes',
       title: '通知次数',
       minWidth: 120,
-      cellRender: {
+      formatter: ({ row }) => `${row.notifyTimes} / ${row.maxNotifyTimes}`,
-        name: 'CellTag',
-        props: {
-          type: 'success',
-          content: '{notifyTimes} / {maxNotifyTimes}',
-        },
-      },
     },
     {
       title: '操作',

apps/web-ele/src/api/pay/notify/index.ts

@@ -1,15 +1,52 @@
-import type { PageParam } from '@vben/request';
+import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+export namespace PayNotifyApi {
+  /** 支付通知任务 */
+  export interface NotifyTask {
+    id: number;
+    appId: number;
+    appName: string;
+    type: number;
+    dataId: number;
+    status: number;
+    merchantOrderId: string;
+    merchantRefundId?: string;
+    merchantTransferId?: string;
+    lastExecuteTime: Date;
+    nextNotifyTime: Date;
+    notifyTimes: number;
+    maxNotifyTimes: number;
+    createTime: Date;
+    updateTime: Date;
+    logs?: any[];
+  }
+
+  /** 支付通知任务分页请求 */
+  export interface NotifyTaskPageReqVO extends PageParam {
+    appId?: number;
+    type?: number;
+    dataId?: number;
+    status?: number;
+    merchantOrderId?: string;
+    merchantRefundId?: string;
+    merchantTransferId?: string;
+    createTime?: Date[];
+  }
+}
+
 /** 获得支付通知明细 */
 export function getNotifyTaskDetail(id: number) {
   return requestClient.get(`/pay/notify/get-detail?id=${id}`);
 }
 
 /** 获得支付通知分页 */
-export function getNotifyTaskPage(params: PageParam) {
+export function getNotifyTaskPage(params: PayNotifyApi.NotifyTaskPageReqVO) {
-  return requestClient.get('/pay/notify/page', {
+  return requestClient.get<PageResult<PayNotifyApi.NotifyTask>>(
+    '/pay/notify/page',
+    {
       params,
-  });
+    },
+  );
 }

apps/web-ele/src/views/pay/notify/data.ts

@@ -1,14 +1,19 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayNotifyApi } from '#/api/pay/notify';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
 
-import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
 
+import { getAppList } from '#/api/pay/app';
+import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
-// TODO @霖：缺少 placeholder
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -24,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
           }));
         },
         autoSelect: 'first',
-        placeholder: '请选择数据源',
+        placeholder: '请选择应用编号',
       },
     },
     {
@@ -34,12 +39,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         clearable: true,
         options: getDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE, 'number'),
+        placeholder: '请选择通知类型',
       },
     },
     {
       fieldName: 'dataId',
       label: '关联编号',
       component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入关联编号',
+      },
     },
     {
       fieldName: 'status',
@@ -48,12 +58,35 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         clearable: true,
         options: getDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS, 'number'),
+        placeholder: '请选择通知状态',
       },
     },
     {
       fieldName: 'merchantOrderId',
       label: '商户订单编号',
       component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户订单编号',
+      },
+    },
+    {
+      fieldName: 'merchantRefundId',
+      label: '商户退款编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户退款编号',
+      },
+    },
+    {
+      fieldName: 'merchantTransferId',
+      label: '商户转账编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户转账编号',
+      },
     },
     {
       fieldName: 'createTime',
@@ -62,6 +95,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         clearable: true,
+        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];
@@ -73,18 +107,25 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '任务编号',
+      minWidth: 100,
     },
     {
       field: 'appName',
-      title: '应用编号',
+      title: '应用名称',
+      minWidth: 150,
     },
     {
-      field: 'merchantOrderId',
+      field: 'merchantInfo',
-      title: '商户订单编号',
+      title: '商户单信息',
+      minWidth: 240,
+      slots: {
+        default: 'merchantInfo',
+      },
     },
     {
       field: 'type',
       title: '通知类型',
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
@@ -93,10 +134,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'dataId',
       title: '关联编号',
+      minWidth: 120,
     },
     {
       field: 'status',
       title: '通知状态',
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
@@ -105,23 +148,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'lastExecuteTime',
       title: '最后通知时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'nextNotifyTime',
       title: '下次通知时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'notifyTimes',
       title: '通知次数',
-      cellRender: {
+      minWidth: 120,
-        name: 'CellTag',
+      formatter: ({ row }) => `${row.notifyTimes} / ${row.maxNotifyTimes}`,
-        props: {
-          type: 'success',
-          content: '{notifyTimes} / {maxNotifyTimes}',
-        },
-      },
     },
     {
       title: '操作',
@@ -132,41 +172,110 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
-/** 详情列表的字段 */
+/** 详情的字段 */
-export const detailColumns = [
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
     {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'type',
+      label: '通知类型',
+      content: (data: PayNotifyApi.NotifyTask) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_NOTIFY_TYPE,
+          value: data?.type,
+        }),
+    },
+    {
+      field: 'dataId',
+      label: '关联编号',
+    },
+    {
+      field: 'status',
+      label: '通知状态',
+      content: (data: PayNotifyApi.NotifyTask) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_NOTIFY_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'merchantOrderId',
+      label: '商户订单编号',
+    },
+    {
+      field: 'lastExecuteTime',
+      label: '最后通知时间',
+      content: (data: PayNotifyApi.NotifyTask) =>
+        formatDateTime(data?.lastExecuteTime) as string,
+    },
+    {
+      field: 'nextNotifyTime',
+      label: '下次通知时间',
+      content: (data: PayNotifyApi.NotifyTask) =>
+        formatDateTime(data?.nextNotifyTime) as string,
+    },
+    {
+      field: 'notifyTimes',
+      label: '通知次数',
+    },
+    {
+      field: 'maxNotifyTimes',
+      label: '最大通知次数',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data: PayNotifyApi.NotifyTask) =>
+        formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data: PayNotifyApi.NotifyTask) =>
+        formatDateTime(data?.updateTime) as string,
+    },
+  ];
+}
+
+/** 详情的日志字段 */
+export function useDetailLogColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
       title: '日志编号',
-    dataIndex: 'id',
+      minWidth: 120,
-    key: 'id',
-    width: 120,
-    ellipsis: false,
     },
     {
+      field: 'status',
       title: '通知状态',
-    dataIndex: 'status',
+      minWidth: 120,
-    key: 'status',
+      cellRender: {
-    width: 120,
+        name: 'CellDict',
-    ellipsis: false,
+        props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
+      },
     },
     {
+      field: 'notifyTimes',
       title: '通知次数',
-    dataIndex: 'notifyTimes',
+      minWidth: 120,
-    key: 'notifyTimes',
-    width: 120,
-    ellipsis: false,
     },
     {
+      field: 'createTime',
       title: '通知时间',
-    dataIndex: 'lastExecuteTime',
+      minWidth: 180,
-    key: 'lastExecuteTime',
+      formatter: 'formatDateTime',
-    width: 120,
-    ellipsis: false,
     },
     {
+      field: 'response',
       title: '响应结果',
-    dataIndex: 'response',
+      minWidth: 200,
-    key: 'response',
-    width: 120,
-    ellipsis: false,
     },
-];
+  ];
+}

apps/web-ele/src/views/pay/notify/index.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayNotifyApi } from '#/api/pay/notify';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { ElTag } from 'element-plus';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getNotifyTaskPage } from '#/api/pay/notify';
 
@@ -16,12 +19,12 @@ const [DetailModal, detailModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 /** 查看详情 */
-function handleDetail(row: any) {
+function handleDetail(row: PayNotifyApi.NotifyTask) {
   detailModalApi.setData(row).open();
 }
 
@@ -30,6 +33,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
@@ -46,12 +52,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<PayNotifyApi.NotifyTask>,
 });
 </script>
 <template>
@@ -60,8 +67,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
 
-    <DetailModal @success="onRefresh" />
+    <DetailModal @success="handleRefresh" />
-    <Grid table-title="支付通知列表">
+    <Grid table-title="通知列表">
+      <template #merchantInfo="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm" v-if="row.merchantOrderId">
+            <ElTag size="small" type="primary">商户订单编号</ElTag>
+            {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.merchantRefundId">
+            <ElTag size="small" type="warning">商户退款编号</ElTag>
+            {{ row.merchantRefundId }}
+          </p>
+          <p class="text-sm" v-if="row.merchantTransferId">
+            <ElTag size="small" type="success">商户转账编号</ElTag>
+            {{ row.merchantTransferId }}
+          </p>
+        </div>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-ele/src/views/pay/notify/modules/detail.vue

@@ -1,24 +1,51 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayNotifyApi } from '#/api/pay/notify';
+
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { formatDateTime } from '@vben/utils';
 
-import {
+import { ElDivider } from 'element-plus';
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElDivider,
-  ElTable,
-  ElTag,
-} from 'element-plus';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getNotifyTaskDetail } from '#/api/pay/notify';
-import { DictTag } from '#/components/dict-tag';
+import { useDescription } from '#/components/description';
 
-import { detailColumns } from '../data';
+import { useDetailLogColumns, useDetailSchema } from '../data';
 
-const formData = ref();
+const formData = ref<PayNotifyApi.NotifyTask>();
+
+const [Description] = useDescription({
+  componentProps: {
+    border: true,
+    column: 2,
+    direction: 'horizontal',
+    labelWidth: 140,
+    title: '',
+    extra: '',
+  },
+  schema: useDetailSchema(),
+});
+
+const [LogGrid, logGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailLogColumns(),
+    height: 'auto',
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: true,
+      refresh: true,
+    },
+  } as VxeTableGridOptions,
+});
 
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
@@ -27,13 +54,14 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData();
+    const data = modalApi.getData<PayNotifyApi.NotifyTask>();
     if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
       formData.value = await getNotifyTaskDetail(data.id);
+      logGridApi.grid?.reloadData(formData.value?.logs || []);
     } finally {
       modalApi.unlock();
     }
@@ -48,60 +76,10 @@ const [Modal, modalApi] = useVbenModal({
     :show-cancel-button="false"
     :show-confirm-button="false"
   >
-    <ElDescriptions border :column="2" class="mx-4">
+    <Description :data="formData" />
-      <ElDescriptionsItem label="商户订单编号">
-        <ElTag>{{ formData?.merchantOrderId }}</ElTag>
-      </ElDescriptionsItem>
-      <ElDescriptionsItem label="通知状态">
-        <DictTag
-          :type="DICT_TYPE.PAY_NOTIFY_STATUS"
-          :value="formData?.status"
-        />
-      </ElDescriptionsItem>
-
-      <ElDescriptionsItem label="应用编号">
-        {{ formData?.appId }}
-      </ElDescriptionsItem>
-      <ElDescriptionsItem label="应用名称">
-        {{ formData?.appName }}
-      </ElDescriptionsItem>
-
-      <ElDescriptionsItem label="关联编号">
-        {{ formData?.dataId }}
-      </ElDescriptionsItem>
-      <ElDescriptionsItem label="通知类型">
-        <DictTag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="formData?.type" />
-      </ElDescriptionsItem>
-
-      <ElDescriptionsItem label="通知次数">
-        {{ formData?.notifyTimes }}
-      </ElDescriptionsItem>
-      <ElDescriptionsItem label="最大通知次数">
-        {{ formData?.maxNotifyTimes }}
-      </ElDescriptionsItem>
-
-      <ElDescriptionsItem label="最后通知时间">
-        {{ formatDateTime(formData?.lastExecuteTime || '') }}
-      </ElDescriptionsItem>
-
-      <ElDescriptionsItem label="创建时间">
-        {{ formatDateTime(formData?.createTime || '') }}
-      </ElDescriptionsItem>
-      <ElDescriptionsItem label="更新时间">
-        {{ formatDateTime(formData?.updateTime || '') }}
-      </ElDescriptionsItem>
-    </ElDescriptions>
 
     <ElDivider />
 
-    <ElDescriptions border :column="1" class="mx-4">
+    <LogGrid table-title="支付通知列表" />
-      <ElDescriptionsItem label="回调日志">
-        <ElTable
-          v-if="formData"
-          :data-source="formData.logs"
-          :columns="detailColumns"
-        />
-      </ElDescriptionsItem>
-    </ElDescriptions>
   </Modal>
 </template>