From ae7b5498797ce99b16b03b594383cfde5127c8ce Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 26 May 2025 17:22:09 +0800
Subject: [PATCH] refactor: pay

---
 apps/web-antd/src/views/pay/notify/data.ts    |  27 +-
 apps/web-antd/src/views/pay/notify/index.vue  |  47 ++--
 .../src/views/pay/notify/modules/detail.vue   |   7 -
 apps/web-antd/src/views/pay/order/data.ts     | 259 +++++++++---------
 apps/web-antd/src/views/pay/order/index.vue   | 164 +++++------
 .../modules/{order-detail.vue => detail.vue}  |  43 +--
 apps/web-antd/src/views/pay/refund/data.ts    |  28 +-
 apps/web-antd/src/views/pay/refund/index.vue  |  59 ++--
 .../src/views/pay/refund/modules/detail.vue   |   7 -
 9 files changed, 285 insertions(+), 356 deletions(-)
 rename apps/web-antd/src/views/pay/order/modules/{order-detail.vue => detail.vue} (85%)

diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index 48798588..adb41957 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -1,13 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { useAccess } from '@vben/access';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -69,9 +65,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = any>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -136,23 +130,10 @@ export function useGridColumns<T = any>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 100,
-      align: 'center',
+      width: 80,
       fixed: 'right',
-      cellRender: {
-        attrs: {
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            show: hasAccessByCodes(['pay:notify:query']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/pay/notify/index.vue b/apps/web-antd/src/views/pay/notify/index.vue
index ae5ec8ca..c640882e 100644
--- a/apps/web-antd/src/views/pay/notify/index.vue
+++ b/apps/web-antd/src/views/pay/notify/index.vue
@@ -1,19 +1,16 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as PayNotifyApi from '#/api/pay/notify';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyTaskPage } from '#/api/pay/notify';
 import { DocAlert } from '#/components/doc-alert';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';
 
-const [NotifyDetailModal, notifyDetailModalApi] = useVbenModal({
+const [DetailModal, detailModalApi] = useVbenModal({
   connectedComponent: Detail,
   destroyOnClose: true,
 });
@@ -24,18 +21,8 @@ function onRefresh() {
 }
 
 /** 查看详情 */
-function onDetail(row: any) {
-  notifyDetailModalApi.setData(row).open();
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<any>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
+function handleDetail(row: any) {
+  detailModalApi.setData(row).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -43,13 +30,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await PayNotifyApi.getNotifyTaskPage({
+          return await getNotifyTaskPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -72,7 +59,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <template #doc>
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
-    <NotifyDetailModal @success="onRefresh" />
-    <Grid table-title="支付通知列表" />
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付通知列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:notify:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/notify/modules/detail.vue b/apps/web-antd/src/views/pay/notify/modules/detail.vue
index 1649533e..66f6efb6 100644
--- a/apps/web-antd/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/notify/modules/detail.vue
@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 打开弹窗 */
-const open = (id: number) => {
-  modalApi.setData({ id }).open();
-};
-
-defineExpose({ open });
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
index 6874bed0..bbb462fd 100644
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -1,144 +1,137 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { DICT_TYPE, getDictOptions } from '#/utils';
 
-export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'appId',
-    label: '应用编号',
-    componentProps: {
-      placeholder: '请输入应用编号',
-    },
-  },
-  {
-    component: 'Select',
-    fieldName: 'channelCode',
-    label: '支付渠道',
-    componentProps: {
-      placeholder: '请选择开启状态',
-      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'merchantOrderId',
-    label: '商户单号',
-    componentProps: {
-      placeholder: '请输入商户单号',
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'no',
-    label: '支付单号',
-    componentProps: {
-      placeholder: '请输入支付单号',
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'channelOrderNo',
-    label: '渠道单号',
-    componentProps: {
-      placeholder: '请输入渠道单号',
-    },
-  },
-  {
-    component: 'Select',
-    fieldName: 'status',
-    label: '支付状态',
-    componentProps: {
-      placeholder: '请选择支付状态',
-      options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
-    },
-  },
-  {
-    component: 'RangePicker',
-    fieldName: 'createTime',
-    label: '创建时间',
-    componentProps: {
-      placeholder: ['开始日期', '结束日期'],
-    },
-  },
-];
-
-export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
-  {
-    title: '编号',
-    field: 'id',
-  },
-  {
-    title: '支付金额',
-    field: 'price',
-    slots: {
-      default: ({ row }) => {
-        return `￥${(row.price || 0 / 100).toFixed(2)}`;
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'appId',
+      label: '应用编号',
+      componentProps: {
+        placeholder: '请输入应用编号',
       },
     },
-  },
-  {
-    title: '退款金额',
-    field: 'refundPrice',
-    slots: {
-      default: ({ row }) => {
-        return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
+    {
+      component: 'Select',
+      fieldName: 'channelCode',
+      label: '支付渠道',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
       },
     },
-  },
-  {
-    title: '手续金额',
-    field: 'channelFeePrice',
-    slots: {
-      default: ({ row }) => {
-        return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
+    {
+      component: 'Input',
+      fieldName: 'merchantOrderId',
+      label: '商户单号',
+      componentProps: {
+        placeholder: '请输入商户单号',
       },
     },
-  },
-  {
-    title: '订单号',
-    field: 'no',
-    slots: {
-      default: 'no',
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '支付单号',
+      componentProps: {
+        placeholder: '请输入支付单号',
+      },
     },
-  },
-  {
-    title: '支付状态',
-    field: 'status',
-    cellRender: {
-      name: 'CellDict',
-      props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+    {
+      component: 'Input',
+      fieldName: 'channelOrderNo',
+      label: '渠道单号',
+      componentProps: {
+        placeholder: '请输入渠道单号',
+      },
     },
-  },
-  {
-    title: '支付渠道',
-    field: 'channelCode',
-    cellRender: {
-      name: 'CellDict',
-      props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '支付状态',
+      componentProps: {
+        placeholder: '请选择支付状态',
+        options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+      },
     },
-  },
-  {
-    title: '支付时间',
-    field: 'successTime',
-    minWidth: 180,
-    formatter: 'formatDateTime',
-  },
-  {
-    title: '支付应用',
-    field: 'appName',
-  },
-  {
-    title: '商品标题',
-    field: 'subject',
-  },
-  {
-    field: 'action',
-    fixed: 'right',
-    slots: { default: 'action' },
-    title: '操作',
-    minWidth: 80,
-  },
-];
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '支付金额',
+      field: 'price',
+      formatter: 'formatAmount',
+    },
+    {
+      title: '退款金额',
+      field: 'refundPrice',
+      formatter: 'formatAmount',
+    },
+    {
+      title: '手续金额',
+      field: 'channelFeePrice',
+      formatter: 'formatAmount',
+    },
+    {
+      title: '订单号',
+      field: 'no',
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      title: '支付状态',
+      field: 'status',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+      },
+    },
+    {
+      title: '支付渠道',
+      field: 'channelCode',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      title: '支付时间',
+      field: 'successTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '支付应用',
+      field: 'appName',
+    },
+    {
+      title: '商品标题',
+      field: 'subject',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index acb53f3d..d8e09428 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -1,110 +1,93 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben/common-ui';
-
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayOrderApi } from '#/api/pay/order';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Tag } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as OrderApi from '#/api/pay/order';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
 
-import { columns, querySchema } from './data';
-import detailFrom from './modules/order-detail.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
 
-const formOptions: VbenFormProps = {
-  commonConfig: {
-    labelWidth: 100,
-    componentProps: {
-      allowClear: true,
-    },
-  },
-  schema: querySchema(),
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
-};
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
 
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    // trigger: 'row',
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: PayOrderApi.Order) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
   },
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues = {}) => {
-        return await OrderApi.getOrderPage({
-          pageNum: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-  },
-  rowConfig: {
-    keyField: 'id',
-  },
-  // 表格全局唯一表示 保存列配置需要用到
-  id: 'pay-order-index',
-};
-
-const [BasicTable] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayOrderApi.Order>,
 });
-
-const [DetailModal, modalDetailApi] = useVbenModal({
-  connectedComponent: detailFrom,
-});
-
-const openDetail = (id: number) => {
-  modalDetailApi.setData({
-    id,
-  });
-  modalDetailApi.open();
-};
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <DocAlert
-      title="支付宝支付接入"
-      url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
-    />
-    <DocAlert
-      title="微信公众号支付接入"
-      url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
-    />
-    <DocAlert
-      title="微信小程序支付接入"
-      url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
-    />
-    <BasicTable>
-      <template #action="{ row }">
-        <a-button
-          type="link"
-          v-access:code="['pay:order:query']"
-          @click="openDetail(row.id)"
-        >
-          {{ $t('ui.actionTitle.detail') }}
-        </a-button>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付订单列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
       </template>
       <template #no="{ row }">
         <p class="order-font">
@@ -118,7 +101,6 @@ const openDetail = (id: number) => {
           {{ row.channelOrderNo }}
         </p>
       </template>
-    </BasicTable>
-    <DetailModal />
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/order/modules/order-detail.vue b/apps/web-antd/src/views/pay/order/modules/detail.vue
similarity index 85%
rename from apps/web-antd/src/views/pay/order/modules/order-detail.vue
rename to apps/web-antd/src/views/pay/order/modules/detail.vue
index e76be463..8da61c91 100644
--- a/apps/web-antd/src/views/pay/order/modules/order-detail.vue
+++ b/apps/web-antd/src/views/pay/order/modules/detail.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -6,34 +8,39 @@ import { formatDateTime } from '@vben/utils';
 
 import { Descriptions, Divider, Tag } from 'ant-design-vue';
 
-import * as OrderApi from '#/api/pay/order';
+import { getOrder } from '#/api/pay/order';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE } from '#/utils/dict';
 
-const detailData = ref<OrderApi.PayOrderApi.Order>();
+const detailData = ref<PayOrderApi.Order>();
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  showCancelButton: false,
-  showConfirmButton: false,
+const [Modal, modalApi] = useVbenModal({
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
-      return null;
+      detailData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      detailData.value = await getOrder(data.id);
+    } finally {
+      modalApi.unlock();
     }
-    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as {
-      id: number;
-    };
-
-    detailData.value = await OrderApi.getOrderDetail(id);
-
-    modalApi.modalLoading(false);
   },
 });
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
+  <Modal
+    title="订单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
     <Descriptions :column="2">
       <Descriptions.Item label="商户单号">
         {{ detailData?.merchantOrderId }}
@@ -121,5 +128,5 @@ const [BasicModal, modalApi] = useVbenModal({
         {{ detailData?.channelNotifyData }}
       </Descriptions.Item>
     </Descriptions>
-  </BasicModal>
+  </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/refund/data.ts b/apps/web-antd/src/views/pay/refund/data.ts
index 73928585..01077746 100644
--- a/apps/web-antd/src/views/pay/refund/data.ts
+++ b/apps/web-antd/src/views/pay/refund/data.ts
@@ -1,14 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
-
-import { useAccess } from '@vben/access';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -80,9 +75,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = PayRefundApi.Refund>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -155,23 +148,10 @@ export function useGridColumns<T = PayRefundApi.Refund>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 100,
-      align: 'center',
+      width: 80,
       fixed: 'right',
-      cellRender: {
-        attrs: {
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            show: hasAccessByCodes(['pay:refund:query']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/pay/refund/index.vue b/apps/web-antd/src/views/pay/refund/index.vue
index cbf80df0..6af0d780 100644
--- a/apps/web-antd/src/views/pay/refund/index.vue
+++ b/apps/web-antd/src/views/pay/refund/index.vue
@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as RefundApi from '#/api/pay/refund';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -29,32 +23,22 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
 }
 
 /** 查看详情 */
-function onDetail(row: any) {
+function handleDetail(row: any) {
   refundDetailModalApi.setData(row).open();
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<any>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -89,15 +73,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <RefundDetailModal @success="onRefresh" />
     <Grid table-title="支付退款列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['pay:refund:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:refund:query'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:refund:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-antd/src/views/pay/refund/modules/detail.vue b/apps/web-antd/src/views/pay/refund/modules/detail.vue
index 82d0d910..d7f2a8c9 100644
--- a/apps/web-antd/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/refund/modules/detail.vue
@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 打开弹窗 */
-const open = (id: number) => {
-  modalApi.setData({ id }).open();
-};
-
-defineExpose({ open });
 </script>
 
 <template>