修改: bug

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

@@ -44,28 +44,13 @@
           </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>
+        <!-- 套餐系列操作右键菜单 -->
+        <ArtMenuRight
+          ref="seriesOperationMenuRef"
+          :menu-items="seriesOperationMenuItems"
+          :menu-width="140"
+          @select="handleSeriesOperationMenuSelect"
+        />
 
         <!-- 新增/编辑对话框 -->
         <ElDialog
@@ -389,6 +374,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'
   import {
     CommonStatus,
@@ -410,10 +397,9 @@
   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 seriesOperationMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+  const currentOperatingSeries = ref<PackageSeriesResponse | null>(null)
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -708,27 +694,74 @@
 
   onMounted(() => {
     getTableData()
-    // 添加全局点击事件监听，关闭右键菜单
-    document.addEventListener('click', closeContextMenu)
   })
 
-  onBeforeUnmount(() => {
-    // 移除全局点击事件监听
-    document.removeEventListener('click', closeContextMenu)
+  // 套餐系列操作菜单项配置
+  const seriesOperationMenuItems = computed((): MenuItemType[] => {
+    const items: MenuItemType[] = []
+
+    // 详情
+    if (hasAuth('package_series:detail')) {
+      items.push({
+        key: 'detail',
+        label: '详情'
+      })
+    }
+
+    // 编辑
+    if (hasAuth('package_series:edit')) {
+      items.push({
+        key: 'edit',
+        label: '编辑'
+      })
+    }
+
+    // 删除
+    if (hasAuth('package_series:delete')) {
+      items.push({
+        key: 'delete',
+        label: '删除'
+      })
+    }
+
+    return items
   })
 
-  // 处理右键菜单
-  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 showSeriesOperationMenu = (e: MouseEvent, row: PackageSeriesResponse) => {
+    e.preventDefault()
+    e.stopPropagation()
+    currentOperatingSeries.value = row
+    seriesOperationMenuRef.value?.show(e)
   }
 
-  // 关闭右键菜单
-  const closeContextMenu = () => {
-    contextMenuVisible.value = false
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: PackageSeriesResponse, column: any, event: MouseEvent) => {
+    // 如果用户有编辑或删除权限,显示右键菜单
+    if (
+      hasAuth('package_series:edit') ||
+      hasAuth('package_series:delete') ||
+      hasAuth('package_series:detail')
+    ) {
+      showSeriesOperationMenu(event, row)
+    }
+  }
+
+  // 处理套餐系列操作菜单选择
+  const handleSeriesOperationMenuSelect = (item: MenuItemType) => {
+    if (!currentOperatingSeries.value) return
+
+    switch (item.key) {
+      case 'detail':
+        handleViewDetail(currentOperatingSeries.value)
+        break
+      case 'edit':
+        showDialog('edit', currentOperatingSeries.value)
+        break
+      case 'delete':
+        deleteSeries(currentOperatingSeries.value)
+        break
+    }
   }
 
   // 获取套餐系列列表
@@ -744,8 +777,8 @@
       }
       const res = await PackageSeriesService.getPackageSeries(params)
       if (res.code === 0) {
-        seriesList.value = res.data.items || []
-        pagination.total = res.data.total || 0
+        seriesList.value = res.data.items
+        pagination.total = res.data.total
       }
     } catch (error) {
       console.error(error)
@@ -1058,35 +1091,4 @@
   .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>