fix: pagination failed in useDeviceSnmpLogsQuery

src/components/device-page/device-card/history-diag-card/device-usage-history-diag-card.vue

@@ -9,8 +9,8 @@ function getValueByFieldPath(record: Record<string, any>, fieldPath?: string) {
 import type { NdmDeviceResultVO, NdmSnmpLogResultVO } from '@/apis/models';
 import { useDeviceSnmpLogsQuery } from '@/composables/query';
 import { destr } from 'destr';
-import { NCard, NDataTable, type DataTableColumns, type DataTableRowData } from 'naive-ui';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
-import { computed, toRefs } from 'vue';
+import { computed, h, reactive, toRefs, watch } from 'vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -37,7 +37,36 @@ const tableColumns = computed(() => {
   return columns;
 });
 
-const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange);
+const DEFAULT_PAGE_SIZE = 10;
+const pagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page) => {
+    pagination.page = page;
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.pageSize = pageSize;
+    pagination.page = 1;
+  },
+});
+const page = computed(() => pagination.page ?? 1);
+const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE);
+
+const { snmpLogRespData, isPending, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange, page, pageSize);
+
+watch(snmpLogRespData, (data) => {
+  if (data) {
+    pagination.itemCount = parseInt(data.total);
+  }
+});
+
 const tableData = computed<DataTableRowData[]>(() => {
   const { records = [] } = snmpLogRespData.value ?? {};
   return records.map((record) => {

src/components/device-page/device-card/history-diag-card/nvr-disk-health-history-diag-card.vue

@@ -3,8 +3,8 @@ import type { NdmNvrDiagInfo } from '@/apis/domains';
 import type { NdmNvrResultVO, NdmSnmpLogResultVO } from '@/apis/models';
 import { useDeviceSnmpLogsQuery } from '@/composables/query';
 import { destr } from 'destr';
-import { NCard, NDataTable, type DataTableColumns, type DataTableRowData } from 'naive-ui';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
-import { computed, toRefs } from 'vue';
+import { computed, h, reactive, toRefs, watch } from 'vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -19,7 +19,35 @@ const tableColumns: DataTableColumns<NdmSnmpLogResultVO> = [
   { title: '磁盘健康度', key: 'diskHealthRatio' },
 ];
 
-const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange);
+const DEFAULT_PAGE_SIZE = 10;
+const pagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page) => {
+    pagination.page = page;
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.pageSize = pageSize;
+    pagination.page = 1;
+  },
+});
+const page = computed(() => pagination.page ?? 1);
+const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE);
+
+const { snmpLogRespData, isPending, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange, page, pageSize);
+
+watch(snmpLogRespData, (data) => {
+  if (data) {
+    pagination.itemCount = parseInt(data.total);
+  }
+});
 
 const tableData = computed<DataTableRowData[]>(() => {
   const { records = [] } = snmpLogRespData.value ?? {};

src/composables/query/device/use-device-snmp-logs-query.ts

@@ -3,36 +3,13 @@ import { postSnmpLogPage } from '@/apis/requests';
 import { DEVICE_SNMP_LOGS_QUERY_KEY } from '@/constants';
 import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import type { PaginationProps } from 'naive-ui';
+import { computed, watch, type Ref } from 'vue';
-import { computed, h, watch } from 'vue';
-import { reactive, type Ref } from 'vue';
-
-export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<NdmDeviceResultVO>, dateTimeRange: Ref<[number, number]>) {
-  const DEFAULT_PAGE_SIZE = 10;
-  const pagination = reactive<PaginationProps>({
-    size: 'small',
-    showSizePicker: true,
-    page: 1,
-    pageSize: DEFAULT_PAGE_SIZE,
-    pageSizes: [5, 10, 20, 50, 80, 100],
-    itemCount: 0,
-    prefix: ({ itemCount }) => {
-      return h('div', {}, { default: () => `共${itemCount}条` });
-    },
-    onUpdatePage: (page) => {
-      pagination.page = page;
-      queryClient.invalidateQueries({ queryKey });
-    },
-    onUpdatePageSize: (pageSize) => {
-      pagination.pageSize = pageSize;
-      pagination.page = 1;
-      queryClient.invalidateQueries({ queryKey });
-    },
-  });
-  const queryKey = reactive([DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, pagination.page, pagination.pageSize]);
 
+export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<NdmDeviceResultVO>, dateTimeRange: Ref<[number, number]>, page: Ref<number>, pageSize: Ref<number>) {
   const queryClient = useQueryClient();
 
+  const queryKey = computed(() => [DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, page.value, pageSize.value]);
+
   const {
     data: snmpLogRespData,
     isPending,
@@ -46,8 +23,8 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
       const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
       const createdTime_preciseed = dayjs(dateTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
       const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
-        current: pagination.page ?? 1,
+        current: page.value,
-        size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+        size: pageSize.value,
         sort: 'id',
         order: 'descending',
       };
@@ -60,12 +37,6 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
     },
   });
 
-  watch(snmpLogRespData, (data) => {
-    if (data) {
-      pagination.itemCount = parseInt(data.total);
-    }
-  });
-
   watch(error, (err) => {
     if (err) {
       console.error(`查询${ndmDevice.value.name}的SNMP日志失败:`, err);
@@ -74,9 +45,7 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
   });
 
   const refresh = () => {
-    pagination.page = 1;
+    queryClient.invalidateQueries({ queryKey: queryKey.value });
-    pagination.pageSize = 10;
-    queryClient.invalidateQueries({ queryKey });
   };
 
   return {
@@ -84,7 +53,6 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
     isPending,
     isFetching,
     error,
-    pagination,
     refresh,
   };
 }