完善按钮和详情权限

src/views/asset-management/asset-assign/index.vue

@@ -30,45 +30,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" />
-            <ElTableColumn label="操作" width="120" fixed="right">
-              <template #default="scope">
-                <ElButton type="primary" link @click="viewDetail(scope.row)">查看详情</ElButton>
-              </template>
-            </ElTableColumn>
           </template>
         </ArtTable>
 
-        <!-- 分配详情对话框 -->
-        <ElDialog v-model="detailDialogVisible" title="分配详情" width="700px">
-          <ElDescriptions v-if="currentRecord" :column="2" border>
-            <ElDescriptionsItem label="分配单号" :span="2">{{ currentRecord.allocation_no }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="分配类型">
-              <ElTag :type="getAllocationTypeType(currentRecord.allocation_type)">
-                {{ currentRecord.allocation_name }}
-              </ElTag>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="资产类型">
-              <ElTag :type="getAssetTypeType(currentRecord.asset_type)">
-                {{ currentRecord.asset_type_name }}
-              </ElTag>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="资产标识符" :span="2">{{ currentRecord.asset_identifier }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="来源所有者">{{ currentRecord.from_owner_name }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="目标所有者">{{ currentRecord.to_owner_name }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="操作人">{{ currentRecord.operator_name }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="关联卡数量">{{ currentRecord.related_card_count }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="创建时间" :span="2">{{ formatDateTime(currentRecord.created_at) }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="备注" :span="2">{{ currentRecord.remark || '--' }}</ElDescriptionsItem>
-          </ElDescriptions>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
-            </div>
-          </template>
-        </ElDialog>
+        <!-- 右键菜单 -->
+        <ArtMenuRight
+          ref="contextMenuRef"
+          :menu-items="contextMenuItems"
+          :menu-width="120"
+          @select="handleContextMenuSelect"
+        />
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -81,16 +56,21 @@
   import { ElMessage, ElTag } from 'element-plus'
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { useAuth } from '@/composables/useAuth'
   import { formatDateTime } from '@/utils/business/format'
   import type { AssetAllocationRecord, AllocationTypeEnum, AssetTypeEnum } from '@/types/api/card'
+  import { RoutesAlias } from '@/router/routesAlias'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
 
   defineOptions({ name: 'AssetAllocationRecords' })
 
+  const { hasAuth } = useAuth()
   const router = useRouter()
   const loading = ref(false)
-  const detailDialogVisible = ref(false)
   const tableRef = ref()
-  const currentRecord = ref<AssetAllocationRecord | null>(null)
+  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+  const currentRow = ref<AssetAllocationRecord | null>(null)
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -205,7 +185,7 @@
     {
       prop: 'allocation_no',
       label: '分配单号',
-      minWidth: 180
+      minWidth: 200
     },
     {
       prop: 'allocation_name',
@@ -338,8 +318,39 @@
 
   // 查看详情
   const viewDetail = (row: AssetAllocationRecord) => {
-    currentRecord.value = row
-    detailDialogVisible.value = true
+    router.push({
+      path: `${RoutesAlias.AssetAssign}/detail/${row.id}`
+    })
+  }
+
+  // 右键菜单项配置
+  const contextMenuItems = computed((): MenuItemType[] => {
+    const items: MenuItemType[] = []
+
+    if (hasAuth('asset_assign:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }
+
+    return items
+  })
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: AssetAllocationRecord, 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
+    }
   }
 </script>