修改工单: 右键 给角色分配权限

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

@@ -43,7 +43,12 @@
               批量设置套餐系列
             </ElButton>
             <ElButton
-              v-if="hasAuth('iot_card:batch_recharge') || hasAuth('iot_card:network_distribution') || hasAuth('iot_card:network_recycle') || hasAuth('iot_card:change_package')"
+              v-if="
+                hasAuth('iot_card:batch_recharge') ||
+                hasAuth('iot_card:network_distribution') ||
+                hasAuth('iot_card:network_recycle') ||
+                hasAuth('iot_card:change_package')
+              "
               type="info"
               @contextmenu.prevent="showMoreMenu"
             >
@@ -65,6 +70,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           @selection-change="handleSelectionChange"
+          @row-contextmenu="handleRowContextMenu"
         >
           <template #default>
             <ElTableColumn type="selection" width="55" />
@@ -537,7 +543,11 @@
             </div>
             <ElDescriptions :column="1" border>
               <ElDescriptionsItem label="实名链接">
-                <a :href="realnameLinkData.link" target="_blank" style="color: var(--el-color-primary)">
+                <a
+                  :href="realnameLinkData.link"
+                  target="_blank"
+                  style="color: var(--el-color-primary)"
+                >
                   {{ realnameLinkData.link }}
                 </a>
               </ElDescriptionsItem>
@@ -1090,19 +1100,13 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 200,
+      width: 120,
       fixed: 'right',
       formatter: (row: StandaloneIotCard) => {
-        return h('div', { style: 'display: flex; gap: 0; align-items: center;' }, [
-          h(ArtButtonTable, {
-            text: '查询流量',
-            onClick: () => showFlowUsageDialog(row.iccid)
-          }),
-          h(ArtButtonTable, {
-            text: '更多操作',
-            onContextmenu: (e: MouseEvent) => showCardOperationMenu(e, row.iccid)
-          })
-        ])
+        return h(ArtButtonTable, {
+          text: '更多操作',
+          onContextmenu: (e: MouseEvent) => showCardOperationMenu(e, row.iccid)
+        })
       }
     }
   ])
@@ -1169,7 +1173,6 @@
     getTableData()
   }
 
-
   // 表格选择变化
   const handleSelectionChange = (selection: StandaloneIotCard[]) => {
     selectedCards.value = selection
@@ -1421,7 +1424,7 @@
       const params: any = {
         page: 1,
         page_size: 20,
-        status: 1  // 只获取启用的
+        status: 1 // 只获取启用的
       }
       if (seriesName) {
         params.series_name = seriesName
@@ -1546,6 +1549,10 @@
 
   // 卡操作菜单项配置
   const cardOperationMenuItems = computed((): MenuItemType[] => [
+    {
+      key: 'query-flow',
+      label: '查询流量'
+    },
     {
       key: 'realname-status',
       label: '查询实名状态'
@@ -1609,7 +1616,11 @@
     const iccid = currentOperatingIccid.value
     if (!iccid) return
 
-    handleCardOperation(item.key, iccid)
+    if (item.key === 'query-flow') {
+      showFlowUsageDialog(iccid)
+    } else {
+      handleCardOperation(item.key, iccid)
+    }
   }
 
   // 网卡分销 - 正在开发中
@@ -1807,6 +1818,11 @@
         // 用户取消
       })
   }
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: StandaloneIotCard, column: any, event: MouseEvent) => {
+    showCardOperationMenu(event, row.iccid)
+  }
 </script>
 
 <style lang="scss" scoped>