fix: pagination failed in useDeviceSnmpLogsQuery
This commit is contained in:
@@ -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) => {
|
||||
|
||||
@@ -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 ?? {};
|
||||
|
||||
Reference in New Issue
Block a user