修改: bug

src/views/order-management/order-list/index.vue

@@ -36,12 +36,21 @@
           :marginTop="10"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
+          @row-contextmenu="handleRowContextMenu"
         >
           <template #default>
             <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
           </template>
         </ArtTable>
 
+        <!-- 右键菜单 -->
+        <ArtMenuRight
+          ref="contextMenuRef"
+          :menu-items="contextMenuItems"
+          :menu-width="120"
+          @select="handleContextMenuSelect"
+        />
+
         <!-- 创建订单对话框 -->
         <ElDialog
           v-model="createDialogVisible"
@@ -284,6 +293,8 @@
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { useAuth } from '@/composables/useAuth'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
   import { formatDateTime } from '@/utils/business/format'
 
   defineOptions({ name: 'OrderList' })
@@ -297,6 +308,8 @@
   const createDialogVisible = ref(false)
   const detailDialogVisible = ref(false)
   const currentOrder = ref<Order | null>(null)
+  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+  const currentRow = ref<Order | null>(null)
 
   // 搜索表单初始值
   const initialSearchState: OrderQueryParams = {
@@ -379,8 +392,7 @@
     { label: t('orderManagement.table.totalAmount'), prop: 'total_amount' },
     { label: t('orderManagement.table.paymentMethod'), prop: 'payment_method' },
     { label: t('orderManagement.table.paidAt'), prop: 'paid_at' },
-    { label: t('orderManagement.table.createdAt'), prop: 'created_at' },
-    { label: t('orderManagement.table.operation'), prop: 'operation' }
+    { label: t('orderManagement.table.createdAt'), prop: 'created_at' }
   ]
 
   const createFormRef = ref<FormInstance>()
@@ -624,29 +636,6 @@
       label: t('orderManagement.table.createdAt'),
       width: 180,
       formatter: (row: Order) => formatDateTime(row.created_at)
-    },
-    {
-      prop: 'operation',
-      label: t('orderManagement.table.operation'),
-      width: 160,
-      fixed: 'right',
-      formatter: (row: Order) => {
-        return h('div', { style: 'display: flex; gap: 8px;' }, [
-          h(ArtButtonTable, {
-            text: '详情',
-            tooltip: t('orderManagement.actions.viewDetail'),
-            onClick: () => showOrderDetail(row)
-          }),
-          // 只有待支付和已支付的订单可以取消
-          row.payment_status === 1 || row.payment_status === 2
-            ? h(ArtButtonTable, {
-                text: '删除',
-                tooltip: t('orderManagement.actions.cancel'),
-                onClick: () => handleCancelOrder(row)
-              })
-            : null
-        ])
-      }
     }
   ])
 
@@ -908,6 +897,44 @@
         // 用户取消操作
       })
   }
+
+  // 右键菜单项配置
+  const contextMenuItems = computed((): MenuItemType[] => {
+    if (!currentRow.value) return []
+
+    const items: MenuItemType[] = []
+
+    items.push({ key: 'detail', label: '详情' })
+
+    // 只有待支付和已支付的订单可以取消
+    if (currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) {
+      items.push({ key: 'cancel', label: '删除' })
+    }
+
+    return items
+  })
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: Order, column: any, event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    currentRow.value = row
+    contextMenuRef.value?.show(event)
+  }
+
+  // 处理右键菜单选择
+  const handleContextMenuSelect = (item: MenuItemType) => {
+    if (!currentRow.value) return
+
+    switch (item.key) {
+      case 'detail':
+        showOrderDetail(currentRow.value)
+        break
+      case 'cancel':
+        handleCancelOrder(currentRow.value)
+        break
+    }
+  }
 </script>
 
 <style scoped lang="scss">