feat：【antd】【ele】【pay 支付】order/refund/transfer 导出的缺失补全

apps/web-antd/src/views/pay/order/index.vue

@@ -3,11 +3,12 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayOrderApi } from '#/api/pay/order';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getOrderPage } from '#/api/pay/order';
+import { exportOrder, getOrderPage } from '#/api/pay/order';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -23,6 +24,12 @@ function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出支付订单 */
+async function handleExport() {
+  const data = await exportOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '支付订单.xls', source: data });
+}
+
 /** 查看详情 */
 function handleDetail(row: PayOrderApi.Order) {
   detailModalApi.setData(row).open();
@@ -80,6 +87,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
     <DetailModal @success="handleRefresh" />
     <Grid table-title="支付订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export', ['支付订单']),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/pay/refund/index.vue

@@ -3,11 +3,12 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayRefundApi } from '#/api/pay/refund';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getRefundPage } from '#/api/pay/refund';
+import { exportRefund, getRefundPage } from '#/api/pay/refund';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -23,6 +24,12 @@ function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出退款订单 */
+async function handleExport() {
+  const data = await exportRefund(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '退款订单.xls', source: data });
+}
+
 /** 查看详情 */
 function handleDetail(row: PayRefundApi.Refund) {
   detailModalApi.setData(row).open();
@@ -71,6 +78,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
     <DetailModal @success="handleRefresh" />
     <Grid table-title="支付退款列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export', ['退款订单']),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:refund:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

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

@@ -192,13 +192,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'merchantTransferId',
       label: '商户单号',
       content: (data: PayTransferApi.Transfer) =>
-        h(Tag, {}, () => data?.merchantTransferId || '-'),
+        h(Tag, {}, () => data?.merchantTransferId),
     },
     {
       field: 'no',
       label: '转账单号',
       content: (data: PayTransferApi.Transfer) =>
-        h(Tag, { color: 'orange' }, () => data?.no || '-'),
+        h(Tag, { color: 'orange' }, () => data?.no),
     },
     {
       field: 'appId',

apps/web-antd/src/views/pay/transfer/index.vue

@@ -3,11 +3,12 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayTransferApi } from '#/api/pay/transfer';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getTransferPage } from '#/api/pay/transfer';
+import { exportTransfer, getTransferPage } from '#/api/pay/transfer';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -23,6 +24,12 @@ function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出转账单 */
+async function handleExport() {
+  const data = await exportTransfer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '转账单.xls', source: data });
+}
+
 /** 查看转账详情 */
 function handleDetail(row: PayTransferApi.Transfer) {
   detailModalApi.setData(row).open();
@@ -70,6 +77,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <DetailModal @success="handleRefresh" />
     <Grid table-title="转账单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export', ['转账单']),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:transfer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/pay/transfer/modules/detail.vue

@@ -12,6 +12,15 @@ import { useDetailSchema } from '../data';
 
 const formData = ref<PayTransferApi.Transfer>();
 
+const [Descriptions] = useDescription({
+  componentProps: {
+    bordered: true,
+    column: 2,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
@@ -31,15 +40,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
-  schema: useDetailSchema(),
-});
 </script>
 
 <template>