修改分页

src/hooks/common/table.ts

@@ -79,13 +79,12 @@ export function useTable<A extends AntDesign.TableApiFn>(config: AntDesign.AntDe
 
   const pagination: TablePaginationConfig = reactive({
     showSizeChanger: true,
-    pageSizeOptions: [10, 15, 20, 25, 30],
+    pageSizeOptions: ['5','10', '15', '20','30'],
     total: 0,
-    simple: false,
+     size: 'default',
-    // size: 'f',
     current: 1,
-    pageSize: 10,
+    pageSize: 5,
-    defaultPageSize: 10,
+    defaultPageSize: 5,
     responsive: true,
     onChange: async (current: number, pageSize: number) => {
       pagination.current = current;
@@ -105,7 +104,6 @@ export function useTable<A extends AntDesign.TableApiFn>(config: AntDesign.AntDe
   const mobilePagination = computed(() => {
     const p: TablePaginationConfig = {
       ...pagination,
-      simple: appStore.isMobile
     };
 
     return p;

src/views/billing/cdrlrecords/index.vue

@@ -37,7 +37,6 @@ interface RawCDRRecord {
 
 // CDR记录数据
 const cdrData = ref<CDRRecord[]>([]);
-const loading = ref(false);
 const pagination = ref({
   current: 1,
   pageSize: 10,
@@ -77,7 +76,15 @@ function formatTimestamp(timestamp: number): string {
   });
 }
 
-const columns: TableColumnsType = [
+
+const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
+  apiFn: fetchCDRHistory,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 5,
+  },
+  rowKey: 'cdrlrecords',
+  columns: () => [
   {
     title: t('page.cdrlrecords.devicename'),
     dataIndex: 'deviceName',
@@ -98,52 +105,16 @@ const columns: TableColumnsType = [
     width: '30%',
     align: 'right'
   }
-];
+]
-
-// 获取CDR记录数据
-async function getCDRHistory(page = pagination.value.current, pageSize = pagination.value.pageSize) {
-  loading.value = true;
-  try {
-    const { data, error } = await fetchCDRHistory({
-      pageNum: page,
-      pageSize: pageSize
-    });
-    if (!error && data) {
-      // 将原始数据映射为显示所需的格式
-      cdrData.value = data.rows.map((item: RawCDRRecord) => ({
-        id: item.id,
-        deviceName: item.clientName,
-        macAddress: item.clientMac,
-        trafficUp: formatTraffic(item.trafficUp),      // 格式化上传流量
-        trafficDown: formatTraffic(item.trafficDown),   // 格式化下载流量
-        startTime: formatTimestamp(item.startTime),     // 格式化开始时间
-        endTime: formatTimestamp(item.endTime)          // 格式化结束时间
-      }));
-      pagination.value.total = data.total;
-    }
-  } catch (err) {
-    console.error('Failed to fetch CDR history:', err);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 处理分页变化
-function handleTableChange(pag: any) {
-  pagination.value.current = pag.current;
-  pagination.value.pageSize = pag.pageSize;
-  getCDRHistory(pag.current, pag.pageSize);
-}
-
-// 刷新设备列表
-async function handleRefresh() {
-  await getCDRHistory();
-}
-
-// 组件挂载时获取数据
-onMounted(() => {
-  getCDRHistory();
 });
+
+
+
+
+
+
+
+
 </script>
 
 <template>
@@ -160,7 +131,7 @@ onMounted(() => {
         <a-button @click="handleBack">
           {{ t('page.login.common.back') }}
         </a-button>
-        <a-button type="primary" :loading="loading" @click="handleRefresh">
+        <a-button type="primary" :loading="loading" @click="getData">
           <template #icon>
             <span class="i-carbon:refresh"></span>
           </template>
@@ -171,20 +142,11 @@ onMounted(() => {
       <a-table
         :loading="loading"
         :columns="columns"
-        :data-source="cdrData"
+        :data-source="data"
         :row-key="(record: CDRRecord) => record.id"
         :expanded-row-keys="expandedRowKeys"
         @expand="handleExpandChange"
-        :pagination="{
+        :pagination="mobilePagination"
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          showTotal: (total: number) => `共 ${total} 条`,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['10', '20', '50', '100']
-        }"
-        @change="handleTableChange"
       >
         <template #expandedRowRender="{ record }">
           <div class="pl-4">

src/views/billing/packagehistories/index.vue

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
 import { useRouter } from 'vue-router';
 import { fetchPackageHistory } from '@/service/api/auth';
 import { useWindowSize } from '@vueuse/core';
+import { useTable, useTableOperate } from '@/hooks/common/table';
 
 const router = useRouter();
 const handleBack = () => {
@@ -69,27 +70,27 @@ const showPackageDetail = (record: Api.Package.PackageHistoryRecord) => {
     width: 400,
     content: h('div', { class: 'package-detail' }, [
       h('div', { class: 'detail-item' }, [
-        h('span', { class: 'detail-label' }, t('page.packagehistories.packagename')+':'),
+        h('span', { class: 'detail-label' }, t('page.packagehistories.packagename') + ':'),
         h('span', { class: 'detail-value' }, record.upackage?.packageName || '未知套餐')
       ]),
       h('div', { class: 'detail-item' }, [
-        h('span', { class: 'detail-label' }, t('page.packagehistories.price')+':'),
+        h('span', { class: 'detail-label' }, t('page.packagehistories.price') + ':'),
         h('span', { class: 'detail-value' }, `¥${Number(record.upackage?.price || 0).toFixed(2)}`)
       ]),
       h('div', { class: 'detail-item' }, [
-        h('span', { class: 'detail-label' }, t('page.packagehistories.traffic')+':'),
+        h('span', { class: 'detail-label' }, t('page.packagehistories.traffic') + ':'),
         h('span', { class: 'detail-value' },
           record.upackage?.trafficEnable ? formatTraffic(record.upackage.traffic) : t('page.packagehistories.unlimit')
         )
       ]),
       h('div', { class: 'detail-item' }, [
-        h('span', { class: 'detail-label' }, t('page.packagehistories.Expirationdate')+':'),
+        h('span', { class: 'detail-label' }, t('page.packagehistories.Expirationdate') + ':'),
         h('span', { class: 'detail-value' },
           `${record.upackage?.periodNum || 0} ${formatPeriodType(record.upackage?.periodType || 0)}`
         )
       ]),
       h('div', { class: 'detail-item' }, [
-        h('span', { class: 'detail-label' }, t('page.packagehistories.orderdate')+':'),
+        h('span', { class: 'detail-label' }, t('page.packagehistories.orderdate') + ':'),
         h('span', { class: 'detail-value' }, formatDateTime(record.createTime))
       ])
     ]),
@@ -97,53 +98,110 @@ const showPackageDetail = (record: Api.Package.PackageHistoryRecord) => {
   });
 };
 
-const columns = computed<TableColumnsType>(() => [
+// const columns = computed<TableColumnsType>(() => [
-  {
+//   {
-    title: t('page.packagehistories.orderdate'),
+//     title: t('page.packagehistories.orderdate'),
-    dataIndex: 'createTime',
+//     dataIndex: 'createTime',
-    key: 'createTime',
+//     key: 'createTime',
-    responsive: ['md'],
+//     responsive: ['md'],
-    customRender: ({ text }) => text ? formatDateTime(text) : ''
+//     customRender: ({ text }) => text ? formatDateTime(text) : ''
+//   },
+//   {
+//     title: t('page.packagehistories.amount'),
+//     dataIndex: 'orderAmount',
+//     key: 'orderAmount',
+//     customRender: ({ text }: { text: string }) => {
+//       const formattedAmount = Number(text).toFixed(2);
+//       return `¥${formattedAmount}`;
+//     }
+//   },
+//   {
+//     title: t('page.packagehistories.packagename'),
+//     dataIndex: ['upackage', 'packageName'],
+//     key: 'packageName',
+//     customRender: ({ text, record }: { text: string; record: Api.Package.PackageHistoryRecord }) => {
+//       return h(AButton, {
+//         type: 'link',
+//         size: 'small',
+//         onClick: (e: Event) => {
+//           e.stopPropagation();  // 阻止事件冒泡，避免触发行点击事件
+//           showPackageDetail(record);
+//         }
+//       }, {
+//         default: () => text || t('page.packagehistories.unpackage')
+//       });
+//     }
+//   },
+//   {
+//     title: t('page.packagehistories.status'),
+//     dataIndex: 'status',
+//     key: 'status',
+//     customRender: ({ text }: { text: number }) => {
+//       return h(ATag, {
+//         color: text === 1 ? 'success' : 'warning'
+//       }, {
+//         default: () => text === 1 ? t('page.packagehistories.paid') : t('page.packagehistories.unpaid')
+//       })
+//     }
+//   }
+// ]);
+
+
+const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
+  apiFn: fetchPackageHistory,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 5,
   },
-  {
+  rowKey: 'packageName',
-    title: t('page.packagehistories.amount'),
+  columns: () => [
-    dataIndex: 'orderAmount',
+    {
-    key: 'orderAmount',
+      title: t('page.packagehistories.orderdate'),
-    customRender: ({ text }: { text: string }) => {
+      dataIndex: 'createTime',
-      const formattedAmount = Number(text).toFixed(2);
+      key: 'createTime',
-      return `¥${formattedAmount}`;
+      responsive: ['md'],
+      customRender: ({ text }) => text ? formatDateTime(text) : ''
+    },
+    {
+      title: t('page.packagehistories.amount'),
+      dataIndex: 'orderAmount',
+      key: 'orderAmount',
+      customRender: ({ text }: { text: string }) => {
+        const formattedAmount = Number(text).toFixed(2);
+        return `¥${formattedAmount}`;
+      }
+    },
+    {
+      title: t('page.packagehistories.packagename'),
+      dataIndex: ['upackage', 'packageName'],
+      key: 'packageName',
+      customRender: ({ text, record }: { text: string; record: Api.Package.PackageHistoryRecord }) => {
+        return h(AButton, {
+          type: 'link',
+          size: 'small',
+          onClick: (e: Event) => {
+            e.stopPropagation();  // 阻止事件冒泡，避免触发行点击事件
+            showPackageDetail(record);
+          }
+        }, {
+          default: () => text || t('page.packagehistories.unpackage')
+        });
+      }
+    },
+    {
+      title: t('page.packagehistories.status'),
+      dataIndex: 'status',
+      key: 'status',
+      customRender: ({ text }: { text: number }) => {
+        return h(ATag, {
+          color: text === 1 ? 'success' : 'warning'
+        }, {
+          default: () => text === 1 ? t('page.packagehistories.paid') : t('page.packagehistories.unpaid')
+        })
+      }
     }
-  },
+  ]
-  {
+});
-    title: t('page.packagehistories.packagename'),
-    dataIndex: ['upackage', 'packageName'],
-    key: 'packageName',
-    customRender: ({ text, record }: { text: string; record: Api.Package.PackageHistoryRecord }) => {
-      return h(AButton, {
-        type: 'link',
-        size: 'small',
-        onClick: (e: Event) => {
-          e.stopPropagation();  // 阻止事件冒泡，避免触发行点击事件
-          showPackageDetail(record);
-        }
-      }, {
-        default: () => text || t('page.packagehistories.unpackage')
-      });
-    }
-  },
-  {
-    title: t('page.packagehistories.status'),
-    dataIndex: 'status',
-    key: 'status',
-    customRender: ({ text }: { text: number }) => {
-      return h(ATag, {
-        color: text === 1 ? 'success' : 'warning'
-      }, {
-        default: () => text === 1 ? t('page.packagehistories.paid') : t('page.packagehistories.unpaid')
-      })
-    }
-  }
-]);
 
 const formatTraffic = (bytes: number): string => {
   if (!bytes) return '0B';
@@ -157,6 +215,8 @@ const formatTraffic = (bytes: number): string => {
   }
   return `${bytes}B`;
 };
+
+
 </script>
 
 <template>
@@ -168,19 +228,8 @@ const formatTraffic = (bytes: number): string => {
       </a-button>
     </div>
     <div>
-      <ATable
+      <ATable :columns="columns" :data-source="data" :row-key="(record: Api.Package.PackageHistoryRecord) => record.id"
-        :columns="columns"
+        :pagination="mobilePagination" >
-        :data-source="packageData"
-        :row-key="(record: Api.Package.PackageHistoryRecord) => record.id"
-        :pagination="{
-          pageSize: 5,
-          total: total,
-          showTotal: (total: number) => `共 ${total} 条`,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['5', '10', '20', '50']
-        }"
-      >
         <template #expandedRowRender="{ record }">
           <div class="pl-4">
             <div v-if="isMobile" class="mb-2">
@@ -198,15 +247,19 @@ const formatTraffic = (bytes: number): string => {
 .p-4 {
   padding: 1rem;
 }
+
 .mb-4 {
   margin-bottom: 1rem;
 }
+
 .text-lg {
   font-size: 1.125rem;
 }
+
 .font-bold {
   font-weight: bold;
 }
+
 .pl-4 {
   padding-left: 1rem;
 }

src/views/billing/rechargehistory/index.vue

@@ -34,28 +34,15 @@ const formatDateTime = (dateTimeString: string) => {
   });
 };
 
-const getRechargeData = async () => {
-  try {
-    const response = await fetchRechargeHistory({
-      pageNum: 1,
-      pageSize: 10
-    });
-    // console.log('API Response:', response);
-    if (response?.data?.rows) {
-      // console.log('Setting data:', response.data.rows);
-      rechargeData.value = response.data.rows;
-      total.value = response.data.total;
-    }
-  } catch (error) {
-    // console.error('Failed to fetch recharge history:', error);
-  }
-};
 
-onMounted(() => {
+const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
-  getRechargeData();
+  apiFn: fetchRechargeHistory,
-});
+  apiParams: {
-
+    pageNum: 1,
-const columns = computed<TableColumnsType>(() => [
+    pageSize: 5,
+  },
+  rowKey: 'rechargehistory',
+  columns: () => [
   {
     title: t('page.Rechargehistory.topupdate'),
     dataIndex: 'createTime',
@@ -96,7 +83,9 @@ const columns = computed<TableColumnsType>(() => [
       })
     }
   }
-]);
+]
+});
+
 </script>
 
 <template>
@@ -110,16 +99,9 @@ const columns = computed<TableColumnsType>(() => [
     <div>
       <ATable
         :columns="columns"
-        :data-source="rechargeData"
+        :data-source="data"
         :row-key="(record: Api.Recharge.RechargeRecord) => record.id"
-        :pagination="{
+        :pagination="mobilePagination"
-          pageSize: 5,
-          total: total,
-          showTotal: (total: number) => `共 ${total} 条`,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['5', '10', '20', '50']
-        }"
       >
         <template #expandedRowRender="{ record }">
           <div class="pl-4">