fix(operator): fix operator edit issue

src/views/asset-management/asset-information/components/PackageListCard.vue

@@ -6,110 +6,117 @@
       </div>
     </template>
     <div class="package-table-wrapper">
-      <div v-if="packageList && packageList.length > 0" class="table-scroll-container">
-        <ElTable
-          :data="packageList"
-          class="package-table"
-          border
-        >
-        <ElTableColumn label="套餐名称" width="150">
-          <template #default="scope">
-            <ElButton
-              type="primary"
-              link
-              class="package-name-link"
-              @click="handleShowDailyRecords(scope.row)"
-              v-permission="'package-usage:daily-records:view'"
-            >
-              {{ scope.row.package_name }}
-            </ElButton>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="套餐价格" width="120">
-          <template #default="scope">
-            {{ formatAmount(scope.row.package_price || 0) }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="status_name" label="套餐状态" width="100">
-          <template #default="scope">
-            <ElTag :type="getPackageStatusTagType(scope.row.status)" size="small">
-              {{ scope.row.status_name }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="data_limit_mb" label="总流量" width="120">
-          <template #default="scope">
-            {{ formatDataSize(scope.row.data_limit_mb) }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="真流量" width="280">
-          <template #default="scope">
-            <div class="traffic-progress">
-              <div class="progress-text">
-                <span class="used">已用: {{ formatDataSize(scope.row.data_usage_mb) }}</span>
-                <span class="remaining">
-                  剩余: {{ formatDataSize(scope.row.data_limit_mb - scope.row.data_usage_mb) }}
-                </span>
-                <span class="total">总量: {{ formatDataSize(scope.row.data_limit_mb) }}</span>
+      <!-- 绑定设备提示 -->
+      <ElEmpty v-if="props.boundDeviceId" :image-size="100">
+        <template #description>
+          <span>该卡已绑定设备，请点击 </span>
+          <ElButton
+            type="primary"
+            link
+            style="font-size: 15px; font-weight: 600"
+            @click="emit('navigateToDevice', props.boundDeviceNo!)"
+            >{{ props.boundDeviceNo }}</ElButton
+          >
+          <span> 进行查看</span>
+        </template>
+      </ElEmpty>
+      <div v-else-if="packageList && packageList.length > 0" class="table-scroll-container">
+        <ElTable :data="packageList" class="package-table" border>
+          <ElTableColumn label="套餐名称" width="150">
+            <template #default="scope">
+              <ElButton
+                type="primary"
+                link
+                class="package-name-link"
+                @click="handleShowDailyRecords(scope.row)"
+                v-permission="'package-usage:daily-records:view'"
+              >
+                {{ scope.row.package_name }}
+              </ElButton>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="套餐价格" width="120">
+            <template #default="scope">
+              {{ formatAmount(scope.row.package_price || 0) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn prop="status_name" label="套餐状态" width="100">
+            <template #default="scope">
+              <ElTag :type="getPackageStatusTagType(scope.row.status)" size="small">
+                {{ scope.row.status_name }}
+              </ElTag>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn prop="data_limit_mb" label="总流量" width="120">
+            <template #default="scope">
+              {{ formatDataSize(scope.row.data_limit_mb) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="流量" min-width="220">
+            <template #default="scope">
+              <div class="traffic-progress">
+                <div class="progress-text">
+                  <template v-if="scope.row.enable_virtual_data">
+                    <span class="used"
+                      >已用: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span
+                    >
+                    <span class="remaining"
+                      >剩余: {{ formatDataSize(scope.row.virtual_remain_mb || 0) }}</span
+                    >
+                    <span class="total"
+                      >总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}</span
+                    >
+                  </template>
+                  <template v-else>
+                    <span class="used">已用: {{ formatDataSize(scope.row.data_usage_mb) }}</span>
+                    <span class="remaining"
+                      >剩余:
+                      {{ formatDataSize(scope.row.data_limit_mb - scope.row.data_usage_mb) }}</span
+                    >
+                    <span class="total">总量: {{ formatDataSize(scope.row.data_limit_mb) }}</span>
+                  </template>
+                </div>
+                <ElProgress
+                  :percentage="
+                    scope.row.enable_virtual_data
+                      ? getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
+                      : getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
+                  "
+                  :color="
+                    scope.row.enable_virtual_data
+                      ? getProgressColorByPercentage(
+                          getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
+                        )
+                      : getProgressColorByPercentage(
+                          getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
+                        )
+                  "
+                />
               </div>
-              <ElProgress
-                :percentage="getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)"
-                :color="
-                  getProgressColorByPercentage(
-                    getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
-                  )
-                "
-              />
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="虚流量" width="280">
-          <template #default="scope">
-            <div class="traffic-progress">
-              <div class="progress-text">
-                <span class="used">已用: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span>
-                <span class="remaining">
-                  剩余: {{ formatDataSize(scope.row.virtual_remain_mb || 0) }}
-                </span>
-                <span class="total">
-                  总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}
-                </span>
-              </div>
-              <ElProgress
-                :percentage="
-                  getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
-                "
-                :color="
-                  getProgressColorByPercentage(
-                    getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
-                  )
-                "
-              />
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="activated_at" label="开始时间" width="170" show-overflow-tooltip>
-          <template #default="scope">
-            {{ formatDateTime(scope.row.activated_at) }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="expires_at" label="到期时间" width="170" show-overflow-tooltip>
-          <template #default="scope">
-            {{ formatDateTime(scope.row.expires_at) }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="操作" width="100" align="center" fixed="right">
-          <template #default="scope">
-            <ElButton
-              type="primary"
-              link
-              @click="handleShowDailyRecords(scope.row)"
-              v-permission="'package-usage:daily-records:view'"
-            >
-              流量详单
-            </ElButton>
-          </template>
-        </ElTableColumn>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn prop="activated_at" label="开始时间" width="170" show-overflow-tooltip>
+            <template #default="scope">
+              {{ formatDateTime(scope.row.activated_at) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn prop="expires_at" label="到期时间" width="170" show-overflow-tooltip>
+            <template #default="scope">
+              {{ formatDateTime(scope.row.expires_at) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="操作" width="100" align="center" fixed="right">
+            <template #default="scope">
+              <ElButton
+                type="primary"
+                link
+                @click="handleShowDailyRecords(scope.row)"
+                v-permission="'package-usage:daily-records:view'"
+              >
+                流量详单
+              </ElButton>
+            </template>
+          </ElTableColumn>
         </ElTable>
         <ElPagination
           v-model:current-page="pagination.page"
@@ -122,7 +129,7 @@
           @size-change="handleSizeChange"
         />
       </div>
-      <ElEmpty v-else description="暂无套餐数据" :image-size="100" />
+      <ElEmpty v-else-if="!props.boundDeviceId" description="暂无套餐数据" :image-size="100" />
     </div>
   </ElCard>
 </template>
@@ -139,6 +146,7 @@
     ElEmpty,
     ElPagination
   } from 'element-plus'
+
   import { useAssetFormatters } from '../composables/useAssetFormatters'
   import { formatDateTime } from '@/utils/business/format'
   import type { AssetPackageUsageRecord } from '@/types/api'
@@ -151,12 +159,16 @@
     total?: number
     page?: number
     pageSize?: number
+    boundDeviceId?: number
+    boundDeviceNo?: string
   }
 
   const props = withDefaults(defineProps<Props>(), {
     total: 0,
     page: 1,
-    pageSize: 10
+    pageSize: 10,
+    boundDeviceId: undefined,
+    boundDeviceNo: ''
   })
 
   // Emits
@@ -164,6 +176,7 @@
     (e: 'showDailyRecords', payload: { packageRow: PackageInfo }): void
     (e: 'page-change', page: number): void
     (e: 'size-change', size: number): void
+    (e: 'navigateToDevice', deviceNo: string): void
   }
 
   const emit = defineEmits<Emits>()