修改: 权限重复

src/views/package-management/package-series/index.vue

@@ -37,12 +37,36 @@
           :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>
 
+        <!-- 右键菜单 -->
+        <div
+          v-if="contextMenuVisible"
+          :style="{
+            position: 'fixed',
+            left: contextMenuPosition.x + 'px',
+            top: contextMenuPosition.y + 'px',
+            zIndex: 9999
+          }"
+        >
+          <ElCard shadow="always" class="context-menu">
+            <div class="context-menu-item" @click="handleViewDetail(contextMenuRow)" v-if="hasAuth('package_series:detail')">
+              <span>详情</span>
+            </div>
+            <div class="context-menu-item" @click="showDialog('edit', contextMenuRow)" v-if="hasAuth('package_series:edit')">
+              <span>编辑</span>
+            </div>
+            <div class="context-menu-item danger" @click="deleteSeries(contextMenuRow)" v-if="hasAuth('package_series:delete')">
+              <span>删除</span>
+            </div>
+          </ElCard>
+        </div>
+
         <!-- 新增/编辑对话框 -->
         <ElDialog
           v-model="dialogVisible"
@@ -386,6 +410,11 @@
   const tableRef = ref()
   const formRef = ref<FormInstance>()
 
+  // 右键菜单状态
+  const contextMenuVisible = ref(false)
+  const contextMenuPosition = reactive({ x: 0, y: 0 })
+  const contextMenuRow = ref<PackageSeriesResponse | null>(null)
+
   // 搜索表单初始值
   const initialSearchState = {
     series_name: '',
@@ -456,8 +485,7 @@
     { label: '强充计算类型', prop: 'force_calc_type' },
     { label: '时效类型', prop: 'validity_type' },
     { label: '状态', prop: 'status' },
-    { label: '创建时间', prop: 'created_at' },
-    { label: '操作', prop: 'operation' }
+    { label: '创建时间', prop: 'created_at' }
   ]
 
   // 表单验证规则
@@ -675,50 +703,34 @@
       label: '创建时间',
       width: 180,
       formatter: (row: PackageSeriesResponse) => formatDateTime(row.created_at)
-    },
-    {
-      prop: 'operation',
-      label: '操作',
-      width: 220,
-      fixed: 'right',
-      formatter: (row: PackageSeriesResponse) => {
-        const buttons = []
-
-        // 详情按钮
-        buttons.push(
-          h(ArtButtonTable, {
-            text: '详情',
-            onClick: () => handleViewDetail(row)
-          })
-        )
-
-        if (hasAuth('package_series:edit')) {
-          buttons.push(
-            h(ArtButtonTable, {
-              text: '编辑',
-              onClick: () => showDialog('edit', row)
-            })
-          )
-        }
-
-        if (hasAuth('package_series:delete')) {
-          buttons.push(
-            h(ArtButtonTable, {
-              text: '删除',
-              onClick: () => deleteSeries(row)
-            })
-          )
-        }
-
-        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
-      }
     }
   ])
 
   onMounted(() => {
     getTableData()
+    // 添加全局点击事件监听，关闭右键菜单
+    document.addEventListener('click', closeContextMenu)
   })
 
+  onBeforeUnmount(() => {
+    // 移除全局点击事件监听
+    document.removeEventListener('click', closeContextMenu)
+  })
+
+  // 处理右键菜单
+  const handleRowContextMenu = (row: PackageSeriesResponse, column: any, event: MouseEvent) => {
+    event.preventDefault()
+    contextMenuRow.value = row
+    contextMenuPosition.x = event.clientX
+    contextMenuPosition.y = event.clientY
+    contextMenuVisible.value = true
+  }
+
+  // 关闭右键菜单
+  const closeContextMenu = () => {
+    contextMenuVisible.value = false
+  }
+
   // 获取套餐系列列表
   const getTableData = async () => {
     loading.value = true
@@ -1046,4 +1058,35 @@
   .dialog-footer {
     text-align: right;
   }
+
+  .context-menu {
+    min-width: 120px;
+    padding: 4px 0;
+    background: white;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+    :deep(.el-card__body) {
+      padding: 0;
+    }
+
+    .context-menu-item {
+      padding: 10px 20px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      font-size: 14px;
+      color: var(--el-text-color-primary);
+
+      &:hover {
+        background-color: var(--el-fill-color-light);
+      }
+
+      &.danger {
+        color: var(--el-color-danger);
+
+        &:hover {
+          background-color: var(--el-color-danger-light-9);
+        }
+      }
+    }
+  }
 </style>