修改分页

2025-02-26 21:08:09 +08:00
parent 7f533c4956
commit 063ecfe3df
4 changed files with 154 additions and 159 deletions
--- a/src/hooks/common/table.ts
+++ b/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: 'f',
+     size: 'default',
    current: 1,
-    pageSize: 10,
-    defaultPageSize: 10,
+    pageSize: 5,
+    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;
--- a/src/views/billing/cdrlrecords/index.vue
+++ b/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="{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          showTotal: (total: number) => `共 ${total} 条`,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['10', '20', '50', '100']
-        }"
-        @change="handleTableChange"
+        :pagination="mobilePagination"
      >
        <template #expandedRowRender="{ record }">
          <div class="pl-4">
--- a/src/views/billing/packagehistories/index.vue
+++ b/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>(() => [
-  {
-    title: t('page.packagehistories.orderdate'),
-    dataIndex: 'createTime',
-    key: 'createTime',
-    responsive: ['md'],
-    customRender: ({ text }) => text ? formatDateTime(text) : ''
+// const columns = computed<TableColumnsType>(() => [
+//   {
+//     title: t('page.packagehistories.orderdate'),
+//     dataIndex: 'createTime',
+//     key: 'createTime',
+//     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')
+//       })
+//     }
+//   }
+// ]);
+
+
+const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
+  apiFn: fetchPackageHistory,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 5,
  },
-  {
-    title: t('page.packagehistories.amount'),
-    dataIndex: 'orderAmount',
-    key: 'orderAmount',
-    customRender: ({ text }: { text: string }) => {
-      const formattedAmount = Number(text).toFixed(2);
-      return `¥${formattedAmount}`;
+  rowKey: 'packageName',
+  columns: () => [
+    {
+      title: t('page.packagehistories.orderdate'),
+      dataIndex: 'createTime',
+      key: 'createTime',
+      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
-        :columns="columns"
-        :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']
-        }"
-      >
+      <ATable :columns="columns" :data-source="data" :row-key="(record: Api.Package.PackageHistoryRecord) => record.id"
+        :pagination="mobilePagination" >
        <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;
 }
--- a/src/views/billing/rechargehistory/index.vue
+++ b/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(() => {
-  getRechargeData();
-});
-
-const columns = computed<TableColumnsType>(() => [
+const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
+  apiFn: fetchRechargeHistory,
+  apiParams: {
+    pageNum: 1,
+    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="{
-          pageSize: 5,
-          total: total,
-          showTotal: (total: number) => `共 ${total} 条`,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['5', '10', '20', '50']
-        }"
+        :pagination="mobilePagination"
      >
        <template #expandedRowRender="{ record }">
          <div class="pl-4">