feat：【mall 商城】分销提现的迁移（ele 100%）

apps/web-antd/src/views/mall/trade/brokerage/withdraw/data.ts

@@ -73,7 +73,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         allowClear: true,
-        placeholder: ['开始时间', '结束时间'],
       },
     },
   ];

apps/web-antd/src/views/mall/trade/brokerage/withdraw/index.vue

@@ -65,7 +65,7 @@ function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
   }).then(async (val) => {
     if (val) {
       await rejectBrokerageWithdraw({
-        id: row.id as number,
+        id: row.id!,
         auditReason: val,
       });
       handleRefresh();
@@ -189,7 +189,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: '通过',
-              type: 'link' as const,
+              type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['trade:brokerage-withdraw:audit'],
               ifShow:
@@ -199,7 +199,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '驳回',
-              type: 'link' as const,
+              type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['trade:brokerage-withdraw:audit'],
@@ -210,7 +210,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '重新转账',
-              type: 'link' as const,
+              type: 'link',
               icon: ACTION_ICON.REFRESH,
               auth: ['trade:brokerage-withdraw:audit'],
               ifShow:

apps/web-ele/src/views/mall/trade/brokerage/withdraw/data.ts

@@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入用户编号',
-        clearable: true,
+        allowClear: true,
       },
     },
     {
@@ -24,7 +24,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         placeholder: '请选择提现类型',
-        clearable: true,
+        allowClear: true,
         options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, 'number'),
       },
     },
@@ -34,16 +34,16 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入账号',
-        clearable: true,
+        allowClear: true,
       },
     },
     {
       fieldName: 'userName',
-      label: '真实名字',
+      label: '真实姓名',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入真实名字',
+        placeholder: '请输入真实姓名',
-        clearable: true,
+        allowClear: true,
       },
     },
     {
@@ -52,7 +52,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         placeholder: '请选择提现银行',
-        clearable: true,
+        allowClear: true,
         options: getDictOptions(DICT_TYPE.BROKERAGE_BANK_NAME, 'string'),
       },
     },
@@ -62,7 +62,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         placeholder: '请选择状态',
-        clearable: true,
+        allowClear: true,
         options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_STATUS, 'number'),
       },
     },
@@ -72,7 +72,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        clearable: true,
+        allowClear: true,
       },
     },
   ];
@@ -88,25 +88,25 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       field: 'userId',
-      title: '用户编号：',
+      title: '用户编号',
       minWidth: 80,
     },
     {
       field: 'userNickname',
-      title: '用户昵称：',
+      title: '用户昵称',
       minWidth: 80,
     },
     {
       field: 'price',
       title: '提现金额',
       minWidth: 80,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'feePrice',
       title: '提现手续费',
       minWidth: 80,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'type',

apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue

@@ -12,7 +12,7 @@ import {
 } from '@vben/constants';
 import { formatDateTime } from '@vben/utils';
 
-import { ElInput, ElMessage } from 'element-plus';
+import { ElInput, ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -29,16 +29,23 @@ import { useGridColumns, useGridFormSchema } from './data';
 defineOptions({ name: 'BrokerageWithdraw' });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 /** 审核通过 */
 async function handleApprove(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
   await confirm('确定要审核通过吗？');
-  await approveBrokerageWithdraw(row.id);
+  const loadingInstance = ElLoading.service({
-  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    text: '审核通过中...',
-  onRefresh();
+  });
+  try {
+    await approveBrokerageWithdraw(row.id);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 审核驳回 */
@@ -56,11 +63,19 @@ function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
     modelPropName: 'value',
   }).then(async (val) => {
     if (val) {
-      await rejectBrokerageWithdraw({
+      const loadingInstance = ElLoading.service({
-        id: row.id as number,
+        text: '审核驳回中...',
-        auditReason: val,
       });
-      onRefresh();
+      try {
+        await rejectBrokerageWithdraw({
+          id: row.id!,
+          auditReason: val,
+        });
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        handleRefresh();
+      } finally {
+        loadingInstance.close();
+      }
     }
   });
 }
@@ -70,9 +85,16 @@ async function handleRetryTransfer(
   row: MallBrokerageWithdrawApi.BrokerageWithdraw,
 ) {
   await confirm('确定要重新转账吗？');
-  await approveBrokerageWithdraw(row.id);
+  const loadingInstance = ElLoading.service({
-  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    text: '重新转账中...',
-  onRefresh();
+  });
+  try {
+    await approveBrokerageWithdraw(row.id);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -84,7 +106,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     height: 'auto',
     keepSource: true,
     cellConfig: {
-      height: 80,
+      height: 90,
     },
     proxyConfig: {
       ajax: {
@@ -99,6 +121,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -112,45 +135,67 @@ const [Grid, gridApi] = useVbenVxeGrid({
   <Page auto-content-height>
     <Grid table-title="佣金提现列表">
       <template #withdraw-info="{ row }">
-        <div v-if="row.type === BrokerageWithdrawTypeEnum.WALLET.type">-</div>
+        <div
-        <div v-else>
+          v-if="row.type === BrokerageWithdrawTypeEnum.WALLET.type"
-          <div v-if="row.userAccount">账号：{{ row.userAccount }}</div>
+          class="text-left"
-          <div v-if="row.userName">真实姓名：{{ row.userName }}</div>
+        >
+          -
+        </div>
+        <div v-else class="text-left">
+          <div v-if="row.userAccount" class="text-left">
+            账号：{{ row.userAccount }}
+          </div>
+          <div v-if="row.userName" class="text-left">
+            真实姓名：{{ row.userName }}
+          </div>
           <template v-if="row.type === BrokerageWithdrawTypeEnum.BANK.type">
-            <div v-if="row.bankName">银行名称：{{ row.bankName }}</div>
+            <div v-if="row.bankName" class="text-left">
-            <div v-if="row.bankAddress">开户地址：{{ row.bankAddress }}</div>
+              银行名称：{{ row.bankName }}
+            </div>
+            <div v-if="row.bankAddress" class="text-left">
+              开户地址：{{ row.bankAddress }}
+            </div>
           </template>
-          <div v-if="row.qrCodeUrl" class="mt-2">
+          <div v-if="row.qrCodeUrl" class="mt-2 text-left">
-            <div>收款码：</div>
+            <div class="flex items-start gap-2">
-            <img :src="row.qrCodeUrl" class="mt-1 h-10 w-10" />
+              <span class="flex-shrink-0">收款码：</span>
+              <img :src="row.qrCodeUrl" class="h-10 w-10 flex-shrink-0" />
+            </div>
           </div>
         </div>
       </template>
-
       <template #status-info="{ row }">
-        <div>
+        <div class="text-left">
           <DictTag
             :value="row.status"
             :type="DICT_TYPE.BROKERAGE_WITHDRAW_STATUS"
           />
-          <div v-if="row.auditTime" class="mt-1 text-xs text-gray-500">
+          <div
+            v-if="row.auditTime"
+            class="mt-1 text-left text-xs text-gray-500"
+          >
             时间：{{ formatDateTime(row.auditTime) }}
           </div>
-          <div v-if="row.auditReason" class="mt-1 text-xs text-gray-500">
+          <div
+            v-if="row.auditReason"
+            class="mt-1 text-left text-xs text-gray-500"
+          >
             审核原因：{{ row.auditReason }}
           </div>
-          <div v-if="row.transferErrorMsg" class="mt-1 text-xs text-red-500">
+          <div
+            v-if="row.transferErrorMsg"
+            class="mt-1 text-left text-xs text-red-500"
+          >
             转账失败原因：{{ row.transferErrorMsg }}
           </div>
         </div>
       </template>
-
       <template #actions="{ row }">
         <TableAction
           :actions="[
-            // 审核中状态且没有支付转账编号，显示通过和驳回按钮
             {
               label: '通过',
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['trade:brokerage-withdraw:audit'],
@@ -172,6 +217,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '重新转账',
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.REFRESH,
               auth: ['trade:brokerage-withdraw:audit'],