Refactor: 优化骑手提现审核页表格滚动与固定列样式，补充 rider.withdraw 菜单图标映射。

shaofan
1 parent 5033c063
Showing 2 changed files with 58 additions and 18 deletions
src/components/AppMenuTree.vue
src/views/rider/RiderWithdrawAudit.vue
@@ -33,6 +33,7 @@ import {
   TrophyOutlined,
   UnorderedListOutlined,
   UserOutlined,
+  WalletOutlined,
 } from '@ant-design/icons-vue'
 withDefaults(defineProps<{ menus: MenuNode[] }>(), {
@@ -53,11 +54,13 @@ const iconMap: Record&lt;string, Component&gt; = {
   TrophyOutlined,
   SettingOutlined,
   MessageOutlined,
+  WalletOutlined,
 }
 const codeIconMap: Record<string, Component> = {
   'substation.user': TeamOutlined,
   'rider.level': TrophyOutlined,
+  'rider.withdraw': WalletOutlined,
   'system.sub_root': SettingOutlined,
   'system.sub_role': TeamOutlined,
   'system.sub_role_menu': SettingOutlined,
 <template>
   <div>
     <a-card title="骑手提现审核" :bordered="false" class="list-table-card">
-      <div class="soft-page-stack">
+      <div class="soft-page-stack withdraw-audit-stack">
         <div class="soft-note-card">
           <strong>审核说明</strong>
           <p>骑手申请提现时会先冻结可用余额；审核拒绝后解冻，审核通过后进入待打款，标记已打款后扣减冻结金额并写入提现流水。</p>
@@ -26,19 +26,21 @@
               <a-select-option :value="3">已打款</a-select-option>
               <a-select-option :value="4">打款失败</a-select-option>
             </a-select>
-            <a-date-picker v-model:value="startDate" value-format="YYYY-MM-DD" placeholder="申请开始日期" class="list-filter" @change="handleFilterChange" />
-            <a-date-picker v-model:value="endDate" value-format="YYYY-MM-DD" placeholder="申请结束日期" class="list-filter" @change="handleFilterChange" />
+            <a-date-picker v-model:value="startDate" value-format="YYYY-MM-DD" placeholder="开始日期" class="list-filter" @change="handleFilterChange" />
+            <a-date-picker v-model:value="endDate" value-format="YYYY-MM-DD" placeholder="结束日期" class="list-filter" @change="handleFilterChange" />
             <a-input-search v-model:value="keyword" placeholder="搜索提现单号/骑手姓名/手机号" class="list-search" @search="handleKeywordSearch" />
           </div>
         </div>
         <a-table
+          class="withdraw-table"
           :dataSource="list"
           :columns="columns"
           :loading="loading"
           rowKey="id"
           :pagination="pagination"
-          :scroll="{ x: 1500 }"
+          sticky
+          :scroll="{ x: tableScrollX, y: 560 }"
           @change="handleTableChange"
         >
           <template #bodyCell="{ column, record }">
@@ -64,8 +66,8 @@
               <a-space>
                 <a @click="openDetail(record)">详情</a>
                 <template v-if="record.status === 0">
-                  <a @click="openAction('approve', record)" style="color:green">通过</a>
-                  <a @click="openAction('reject', record)" style="color:red">拒绝</a>
+                  <a @click="openAction('approve', record)" style="color: green">通过</a>
+                  <a @click="openAction('reject', record)" style="color: red">拒绝</a>
                 </template>
                 <template v-else-if="record.status === 1">
                   <a @click="openAction('paid', record)">标记已打款</a>
@@ -151,6 +153,8 @@ const keyword = ref(&#39;&#39;)
 const actionForm = reactive({ remark: '', transferNo: '' })
 const { isAdmin, managedCityId, cityList, loadCities, getCityName } = useRoleCityList()
+const tableScrollX = computed(() => (isAdmin.value ? 1780 : 1660))
+
 const statusMap: Record<number, string> = {
   0: '待审核',
   1: '待打款',
@@ -175,19 +179,19 @@ const accountTypeMap: Record&lt;number, string&gt; = {
 const columns = computed(() => {
   const base = [
-    { title: '提现单号', dataIndex: 'withdrawNo', ellipsis: true, width: 180 },
-    { title: '骑手', dataIndex: 'riderName', width: 120 },
-    { title: '手机号', dataIndex: 'mobile', width: 130 },
-    { title: '提现金额', key: 'amount', width: 110 },
-    { title: '状态', key: 'status', width: 100 },
-    { title: '账户类型', key: 'accountType', width: 100 },
-    { title: '收款人', dataIndex: 'accountName', width: 110 },
+    { title: '提现单号', dataIndex: 'withdrawNo', ellipsis: true, width: 160 },
+    { title: '骑手', dataIndex: 'riderName', width: 100 },
+    { title: '手机号', dataIndex: 'mobile', width: 120 },
+    { title: '提现金额', key: 'amount', width: 100 },
+    { title: '状态', key: 'status', width: 90 },
+    { title: '账户类型', key: 'accountType', width: 90 },
+    { title: '收款人', dataIndex: 'accountName', width: 100 },
     { title: '收款账号', key: 'accountNo', width: 140 },
-    { title: '可用余额', key: 'riderBalance', width: 110 },
-    { title: '冻结余额', key: 'riderFrozenBalance', width: 110 },
-    { title: '申请时间', key: 'applyTime', width: 160 },
-    { title: '审核人', dataIndex: 'auditorName', width: 120 },
-    { title: '审核时间', key: 'auditTime', width: 160 },
+    { title: '可用余额', key: 'riderBalance', width: 100 },
+    { title: '冻结余额', key: 'riderFrozenBalance', width: 100 },
+    { title: '申请时间', key: 'applyTime', width: 150 },
+    { title: '审核人', dataIndex: 'auditorName', width: 100 },
+    { title: '审核时间', key: 'auditTime', width: 150 },
     { title: '操作', key: 'action', fixed: 'right', width: 180 },
   ]
   return isAdmin.value ? [{ title: '租户', key: 'cityName', width: 120 }, ...base] : base
@@ -322,3 +326,36 @@ onMounted(async () =&gt; {
   await loadList()
 })
 </script>
+
+<style scoped>
+.withdraw-audit-stack,
+.withdraw-table {
+  min-width: 0;
+}
+
+.withdraw-table {
+  --withdraw-fixed-bg: #fff;
+  --withdraw-fixed-hover-bg: #e6e2fc;
+}
+
+.withdraw-table :deep(.ant-table-cell-fix-right) {
+  background: var(--withdraw-fixed-bg) !important;
+}
+
+.withdraw-table :deep(.ant-table-tbody > tr:hover > td.ant-table-cell-fix-right) {
+  background: var(--withdraw-fixed-hover-bg) !important;
+}
+
+:global(.dark) .withdraw-table {
+  --withdraw-fixed-bg: rgb(40, 36, 60);
+  --withdraw-fixed-hover-bg: #302c45;
+}
+
+.withdraw-table :deep(.ant-table-cell-fix-right-first) {
+  box-shadow: -8px 0 12px -10px rgba(47, 41, 70, 0.45);
+}
+
+.withdraw-table :deep(.ant-space) {
+  white-space: nowrap;
+}
+</style>