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

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

@@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '应用编号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入应用编号',
       },
     },
@@ -31,7 +31,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '支付渠道',
       component: 'Select',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择支付渠道',
         options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
       },
@@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '商户单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入商户单号',
       },
     },
@@ -50,7 +50,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '支付单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入支付单号',
       },
     },
@@ -59,7 +59,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '渠道单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入渠道单号',
       },
     },
@@ -68,7 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '支付状态',
       component: 'Select',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择支付状态',
         options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
       },
@@ -79,7 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];

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

@@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '应用编号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入应用编号',
       },
     },
@@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '商户单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入商户单号',
       },
     },
@@ -50,7 +50,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '退款单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入退款单号',
       },
     },
@@ -59,7 +59,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '渠道单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入渠道单号',
       },
     },
@@ -68,7 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '渠道退款单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入渠道退款单号',
       },
     },
@@ -77,7 +77,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '退款状态',
       component: 'Select',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择退款状态',
         options: getDictOptions(DICT_TYPE.PAY_REFUND_STATUS, 'number'),
       },
@@ -88,7 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];

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

@@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '转账单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入转账单号',
       },
     },
@@ -32,7 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择支付渠道',
       },
     },
@@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '商户单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入商户单号',
       },
     },
@@ -51,7 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择类型',
       },
     },
@@ -61,7 +61,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择转账状态',
       },
     },
@@ -70,7 +70,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '收款人姓名',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入收款人姓名',
       },
     },
@@ -79,7 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '收款人账号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入收款人账号',
       },
     },
@@ -88,7 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '渠道单号',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入渠道单号',
       },
     },
@@ -98,7 +98,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];

apps/web-ele/src/views/pay/wallet/balance/data.ts

@@ -1,6 +1,7 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+import type { VxeTableGridOptions as VxeTableGridOptionsLegacy } from '@vben/plugins/vxe-table';
 
 import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -8,13 +9,16 @@ import { getDictOptions } from '@vben/hooks';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
-// TODO @霖：少了 placeholder
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'userId',
       label: '用户编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        clearable: true,
+      },
     },
     {
       fieldName: 'userType',
@@ -22,6 +26,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+        clearable: true,
       },
     },
     {
@@ -29,27 +35,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        clearable: true,
         ...getRangePickerDefaultProps(),
+        clearable: true,
       },
     },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptionsLegacy['columns'] {
   return [
     {
       title: '编号',
       field: 'id',
+      minWidth: 100,
     },
     {
       title: '用户编号',
       field: 'userId',
+      minWidth: 120,
     },
     {
       title: '用户类型',
       field: 'userType',
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -58,33 +67,73 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '余额',
       field: 'balance',
-      formatter: 'formatFenToYuanAmount',
+      minWidth: 120,
+      formatter: 'formatAmount2',
     },
     {
       title: '累计支出',
       field: 'totalExpense',
-      formatter: 'formatFenToYuanAmount',
+      minWidth: 120,
+      formatter: 'formatAmount2',
     },
     {
       title: '累计充值',
       field: 'totalRecharge',
-      formatter: 'formatFenToYuanAmount',
+      minWidth: 120,
+      formatter: 'formatAmount2',
     },
     {
       title: '冻结金额',
       field: 'freezePrice',
-      formatter: 'formatFenToYuanAmount',
+      minWidth: 120,
+      formatter: 'formatAmount2',
     },
     {
       title: '创建时间',
       field: 'createTime',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '操作',
       field: 'actions',
+      width: 80,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
+/** 钱包交易记录列表字段 */
+export function useTransactionGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '关联业务标题',
+      minWidth: 200,
+    },
+    {
+      field: 'price',
+      title: '交易金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'balance',
+      title: '钱包余额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'createTime',
+      title: '交易时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}

apps/web-ele/src/views/pay/wallet/balance/index.vue

@@ -9,20 +9,21 @@ import { getWalletPage } from '#/api/pay/wallet/balance';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import WalletDetail from './modules/detail.vue';
+import Detail from './modules/detail.vue';
 
-/** 刷新表格 */
+const [DetailModal, detailModalApi] = useVbenModal({
-function onRefresh() {
+  connectedComponent: Detail,
-  gridApi.query();
-}
-
-const [WalletModal, walletModalApi] = useVbenModal({
-  connectedComponent: WalletDetail,
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看钱包 */
 function handleDetail(row: Required<PayWalletApi.Wallet>) {
-  walletModalApi.setData(row).open();
+  detailModalApi.setData(row).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -46,6 +47,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -61,8 +63,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
     </template>
 
-    <WalletModal @reload="onRefresh" />
+    <DetailModal @reload="handleRefresh" />
-
     <Grid>
       <template #actions="{ row }">
         <TableAction

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

@@ -1,13 +1,40 @@
 <script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayWalletApi } from '#/api/pay/wallet/balance';
+import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
 
-import { ref } from 'vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { useVbenModal } from '@vben/common-ui';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
 
-import WalletTransactionList from '../../transaction/index.vue';
+import { useTransactionGridColumns } from '../data';
 
-const walletId = ref(0);
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useTransactionGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId: modalApi.getData<PayWalletApi.Wallet>().id,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<WalletTransactionApi.Transaction>,
+});
 
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
@@ -15,13 +42,9 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<PayWalletApi.Wallet>();
-    if (!data || !data.id) {
-      return;
-    }
     modalApi.lock();
     try {
-      walletId.value = data.id;
+      await gridApi.query();
     } finally {
       modalApi.unlock();
     }
@@ -31,10 +54,12 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal
     title="钱包交易记录"
-    class="w-2/5"
+    class="w-1/2"
     :show-cancel-button="false"
     :show-confirm-button="false"
   >
-    <WalletTransactionList :wallet-id="walletId" />
+    <Page auto-content-height>
+      <Grid />
+    </Page>
   </Modal>
 </template>

apps/web-ele/src/views/pay/wallet/transaction/data.ts

@@ -1,40 +0,0 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-/** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'id',
-      title: '编号',
-      width: 80,
-    },
-    {
-      field: 'walletId',
-      title: '钱包编号',
-      width: 100,
-    },
-    {
-      field: 'title',
-      title: '关联业务标题',
-      width: 200,
-    },
-    {
-      field: 'price',
-      title: '交易金额',
-      width: 120,
-      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
-    },
-    {
-      field: 'balance',
-      title: '钱包余额',
-      width: 120,
-      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
-    },
-    {
-      field: 'createTime',
-      title: '交易时间',
-      width: 180,
-      formatter: 'formatDateTime',
-    },
-  ];
-}

apps/web-ele/src/views/pay/wallet/transaction/index.vue

@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { Page } from '@vben/common-ui';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getWallet } from '#/api/pay/wallet/balance';
-import { getTransactionPage } from '#/api/pay/wallet/transaction';
-
-import { useGridColumns } from './data';
-
-const props = defineProps({
-  walletId: {
-    type: Number,
-    required: false,
-    default: undefined,
-  },
-  userId: {
-    type: Number,
-    required: false,
-    default: undefined,
-  },
-});
-
-const [Grid] = useVbenVxeGrid({
-  gridOptions: {
-    columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          let walletId = props.walletId;
-          if (props.userId) {
-            const wallet = await getWallet({ userId: props.userId });
-            walletId = wallet.id;
-          }
-          return await getTransactionPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            walletId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-    },
-  } as VxeTableGridOptions<any>,
-});
-</script>
-
-<template>
-  <Page auto-content-height>
-    <Grid />
-  </Page>
-</template>