完善充值代理

src/views/finance/agent-recharge/index.vue

@@ -32,14 +32,29 @@
           :pageSize="pagination.page_size"
           :total="pagination.total"
           :marginTop="10"
+          :row-class-name="getRowClassName"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
+          @row-contextmenu="handleRowContextMenu"
+          @cell-mouse-enter="handleCellMouseEnter"
+          @cell-mouse-leave="handleCellMouseLeave"
         >
           <template #default>
             <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
           </template>
         </ArtTable>
 
+        <!-- 鼠标悬浮提示 -->
+        <TableContextMenuHint :visible="showContextMenuHint" :position="hintPosition" />
+
+        <!-- 充值订单操作右键菜单 -->
+        <ArtMenuRight
+          ref="rechargeOperationMenuRef"
+          :menu-items="rechargeOperationMenuItems"
+          :menu-width="140"
+          @select="handleRechargeOperationMenuSelect"
+        />
+
         <!-- 创建充值订单对话框 -->
         <ElDialog
           v-model="createDialogVisible"
@@ -151,7 +166,7 @@
   import { h } from 'vue'
   import { useRouter } from 'vue-router'
   import { AgentRechargeService, ShopService } from '@/api/modules'
-  import { ElMessage, ElTag, ElTreeSelect } from 'element-plus'
+  import { ElMessage, ElTag, ElTreeSelect, ElButton } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import type {
     AgentRecharge,
@@ -165,6 +180,10 @@
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { useUserStore } from '@/store/modules/user'
+  import { useTableContextMenu } from '@/composables/useTableContextMenu'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import TableContextMenuHint from '@/components/core/others/TableContextMenuHint.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
   import { formatDateTime } from '@/utils/business/format'
   import { RoutesAlias } from '@/router/routesAlias'
 
@@ -181,6 +200,10 @@
   const confirmPayDialogVisible = ref(false)
   const currentRecharge = ref<AgentRecharge | null>(null)
 
+  // 右键菜单
+  const rechargeOperationMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+  const currentOperatingRecharge = ref<AgentRecharge | null>(null)
+
   // 搜索表单初始值
   const initialSearchState: AgentRechargeQueryParams = {
     shop_id: undefined,
@@ -249,7 +272,6 @@
 
   // 列配置
   const columnOptions = [
-    { label: 'ID', prop: 'id' },
     { label: '充值单号', prop: 'recharge_no' },
     { label: '店铺名称', prop: 'shop_name' },
     { label: '充值金额', prop: 'amount' },
@@ -258,8 +280,7 @@
     { label: '支付通道', prop: 'payment_channel' },
     { label: '创建时间', prop: 'created_at' },
     { label: '支付时间', prop: 'paid_at' },
-    { label: '完成时间', prop: 'completed_at' },
-    { label: '操作', prop: 'actions' }
+    { label: '完成时间', prop: 'completed_at' }
   ]
 
   const createFormRef = ref<FormInstance>()
@@ -323,15 +344,10 @@
 
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
-    {
-      prop: 'id',
-      label: 'ID',
-      width: 80
-    },
     {
       prop: 'recharge_no',
       label: '充值单号',
-      minWidth: 200,
+      minWidth: 240,
       formatter: (row: AgentRecharge) => {
         return h(
           'span',
@@ -374,7 +390,8 @@
     {
       prop: 'payment_channel',
       label: '支付通道',
-      width: 120
+      width: 120,
+      formatter: (row: AgentRecharge) => row.payment_channel || '-'
     },
     {
       prop: 'created_at',
@@ -393,46 +410,6 @@
       label: '完成时间',
       width: 180,
       formatter: (row: AgentRecharge) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
-    },
-    {
-      prop: 'actions',
-      label: '操作',
-      width: 150,
-      fixed: 'right',
-      formatter: (row: AgentRecharge) => {
-        const buttons: any[] = []
-
-        // 待支付且线下转账的订单可以确认支付
-        if (row.status === 1 && row.payment_method === 'offline') {
-          buttons.push(
-            h(
-              ElButton,
-              {
-                type: 'primary',
-                link: true,
-                size: 'small',
-                onClick: () => handleShowConfirmPay(row)
-              },
-              () => '确认支付'
-            )
-          )
-        }
-
-        buttons.push(
-          h(
-            ElButton,
-            {
-              type: 'primary',
-              link: true,
-              size: 'small',
-              onClick: () => handleViewDetail(row)
-            },
-            () => '查看详情'
-          )
-        )
-
-        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
-      }
     }
   ])
 
@@ -502,7 +479,7 @@
       }
       const res = await AgentRechargeService.getAgentRecharges(params)
       if (res.code === 0) {
-        rechargeList.value = res.data.list || []
+        rechargeList.value = res.data.items || []
         pagination.total = res.data.total || 0
       }
     } catch (error) {
@@ -551,6 +528,8 @@
 
   // 显示创建订单对话框
   const showCreateDialog = async () => {
+    // 重新加载店铺列表，确保获取最新数据
+    await loadShops()
     createDialogVisible.value = true
   }
 
@@ -633,10 +612,65 @@
       path: `${RoutesAlias.AgentRecharge}/detail/${row.id}`
     })
   }
+
+  // 充值订单操作菜单项配置
+  const rechargeOperationMenuItems = computed((): MenuItemType[] => {
+    const items: MenuItemType[] = []
+
+    // 待支付且线下转账的订单可以确认支付
+    if (
+      currentOperatingRecharge.value?.status === 1 &&
+      currentOperatingRecharge.value?.payment_method === 'offline'
+    ) {
+      items.push({
+        key: 'confirm_pay',
+        label: '确认支付'
+      })
+    }
+
+    return items
+  })
+
+  // 显示充值订单操作右键菜单
+  const showRechargeOperationMenu = (e: MouseEvent, row: AgentRecharge) => {
+    e.preventDefault()
+    e.stopPropagation()
+    currentOperatingRecharge.value = row
+    rechargeOperationMenuRef.value?.show(e)
+  }
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: AgentRecharge, column: any, event: MouseEvent) => {
+    showRechargeOperationMenu(event, row)
+  }
+
+  // 处理充值订单操作菜单选择
+  const handleRechargeOperationMenuSelect = (item: MenuItemType) => {
+    if (!currentOperatingRecharge.value) return
+
+    switch (item.key) {
+      case 'confirm_pay':
+        handleShowConfirmPay(currentOperatingRecharge.value)
+        break
+    }
+  }
+
+  // 使用表格右键菜单功能
+  const {
+    showContextMenuHint,
+    hintPosition,
+    getRowClassName,
+    handleCellMouseEnter,
+    handleCellMouseLeave
+  } = useTableContextMenu()
 </script>
 
 <style scoped lang="scss">
   .agent-recharge-page {
     height: 100%;
   }
+
+  :deep(.el-table__row.table-row-with-context-menu) {
+    cursor: pointer;
+  }
 </style>