修改: bug

src/views/asset-management/iot-card-task/index.vue

@@ -41,11 +41,20 @@
           :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"
+        />
       </ElCard>
     </div>
 
@@ -220,6 +229,8 @@
   import { useAuth } from '@/composables/useAuth'
   import { formatDateTime } from '@/utils/business/format'
   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 { StorageService } from '@/api/modules/storage'
   import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
   import type { Carrier } from '@/types/api'
@@ -237,6 +248,8 @@
   const selectedCarrierId = ref<number>()
   const carrierList = ref<Carrier[]>([])
   const carrierLoading = ref(false)
+  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+  const currentRow = ref<IotCardImportTask | null>(null)
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -324,8 +337,7 @@
     { label: '开始时间', prop: 'started_at' },
     { label: '完成时间', prop: 'completed_at' },
     { label: '错误信息', prop: 'error_message' },
-    { label: '创建时间', prop: 'created_at' },
-    { label: '操作', prop: 'operation' }
+    { label: '创建时间', prop: 'created_at' }
   ]
 
   const taskList = ref<IotCardImportTask[]>([])
@@ -445,36 +457,6 @@
       label: '创建时间',
       width: 180,
       formatter: (row: IotCardImportTask) => formatDateTime(row.created_at)
-    },
-    {
-      prop: 'operation',
-      label: '操作',
-      width: 180,
-      fixed: 'right',
-      formatter: (row: IotCardImportTask) => {
-        const buttons = []
-
-        // 显示"查看详情"按钮
-        buttons.push(
-          h(ArtButtonTable, {
-            text: '详情',
-            onClick: () => viewDetail(row)
-          })
-        )
-
-        // 如果有失败数据，显示"失败数据"按钮
-        if (row.fail_count > 0) {
-          buttons.push(
-            h(ArtButtonTable, {
-              text: '失败数据',
-              type: 'danger',
-              onClick: () => downloadFailDataByRow(row)
-            })
-          )
-        }
-
-        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
-      }
     }
   ])
 
@@ -827,6 +809,43 @@
       uploading.value = false
     }
   }
+
+  // 右键菜单项配置
+  const contextMenuItems = computed((): MenuItemType[] => {
+    if (!currentRow.value) return []
+
+    const items: MenuItemType[] = []
+
+    items.push({ key: 'detail', label: '详情' })
+
+    if (currentRow.value.fail_count > 0) {
+      items.push({ key: 'failData', label: '失败数据' })
+    }
+
+    return items
+  })
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: IotCardImportTask, 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':
+        viewDetail(currentRow.value)
+        break
+      case 'failData':
+        downloadFailDataByRow(currentRow.value)
+        break
+    }
+  }
 </script>
 
 <style lang="scss" scoped>