fix(operator): fix operator edit issue

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

@@ -6,14 +6,13 @@
       </div>
     </template>
     <div class="package-table-wrapper">
-      <ElTable
-        v-if="packageList && packageList.length > 0"
-        :data="packageList"
-        class="package-table"
-        border
-        max-height="400"
-      >
-        <ElTableColumn label="套餐名称" min-width="150">
+      <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"
@@ -26,9 +25,9 @@
             </ElButton>
           </template>
         </ElTableColumn>
-        <ElTableColumn prop="package_price" label="套餐价格" width="120">
+        <ElTableColumn label="套餐价格" width="120">
           <template #default="scope">
-            {{ formatAmount(scope.row.package_price) }}
+            {{ formatAmount(scope.row.package_price || 0) }}
           </template>
         </ElTableColumn>
         <ElTableColumn prop="status_name" label="套餐状态" width="100">
@@ -111,13 +110,25 @@
             </ElButton>
           </template>
         </ElTableColumn>
-      </ElTable>
+        </ElTable>
+        <ElPagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          class="pagination"
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
       <ElEmpty v-else description="暂无套餐数据" :image-size="100" />
     </div>
   </ElCard>
 </template>
 
 <script setup lang="ts">
+  import { ref, watch } from 'vue'
   import {
     ElCard,
     ElTable,
@@ -125,41 +136,55 @@
     ElTag,
     ElButton,
     ElProgress,
-    ElEmpty
+    ElEmpty,
+    ElPagination
   } from 'element-plus'
   import { useAssetFormatters } from '../composables/useAssetFormatters'
   import { formatDateTime } from '@/utils/business/format'
+  import type { AssetPackageUsageRecord } from '@/types/api'
 
-  // Props
-  interface PackageInfo {
-    id: number
-    package_id: number
-    package_name: string
-    package_price: number
-    data_limit_mb: number
-    data_usage_mb: number
-    virtual_limit_mb: number
-    virtual_used_mb: number
-    virtual_remain_mb: number
-    activated_at: string
-    expires_at: string
-    status: number
-    status_name: string
-  }
+  // Props 使用 API 类型
+  type PackageInfo = AssetPackageUsageRecord
 
   interface Props {
     packageList: PackageInfo[]
+    total?: number
+    page?: number
+    pageSize?: number
   }
 
-  defineProps<Props>()
+  const props = withDefaults(defineProps<Props>(), {
+    total: 0,
+    page: 1,
+    pageSize: 10
+  })
 
   // Emits
   interface Emits {
     (e: 'showDailyRecords', payload: { packageRow: PackageInfo }): void
+    (e: 'page-change', page: number): void
+    (e: 'size-change', size: number): void
   }
 
   const emit = defineEmits<Emits>()
 
+  // 分页状态
+  const pagination = ref({
+    page: props.page,
+    pageSize: props.pageSize,
+    total: props.total
+  })
+
+  // 监听props变化更新分页
+  watch(
+    () => [props.page, props.pageSize, props.total],
+    ([newPage, newPageSize, newTotal]) => {
+      pagination.value.page = newPage
+      pagination.value.pageSize = newPageSize
+      pagination.value.total = newTotal
+    }
+  )
+
   // 使用格式化工具
   const {
     formatDataSize,
@@ -173,12 +198,30 @@
   const handleShowDailyRecords = (packageRow: PackageInfo) => {
     emit('showDailyRecords', { packageRow })
   }
+
+  // 页码变化
+  const handlePageChange = (page: number) => {
+    emit('page-change', page)
+  }
+
+  // 每页条数变化
+  const handleSizeChange = (size: number) => {
+    emit('size-change', size)
+  }
 </script>
 
 <style scoped lang="scss">
   .info-card {
     &.package-info {
+      width: 100%;
+      overflow: hidden; // 防止内容溢出
+
       .package-table-wrapper {
+        .table-scroll-container {
+          overflow-x: auto;
+          width: 100%;
+        }
+
         .package-table {
           :deep(.el-table__header) {
             th {
@@ -215,6 +258,11 @@
           }
         }
       }
+
+      .pagination {
+        margin-top: 16px;
+        justify-content: flex-end;
+      }
     }
   }
 </style>