fix: pagination failed in useDeviceSnmpLogsQuery

This commit is contained in:
yangsy
2025-09-09 15:14:13 +08:00
parent 9f53366252
commit fa615fdb7b
3 changed files with 70 additions and 45 deletions

View File

@@ -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 { computed, toRefs } from 'vue';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
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) => {

View File

@@ -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 { computed, toRefs } from 'vue';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
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 ?? {};