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

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>
+</template>