feat(creditCompany): 添加分页功能支持

- 实现表格分页配置和状态管理
- 添加分页参数类型定义和初始化逻辑
- 集成分页组件并配置分页选项和事件处理
- 实现分页数据加载和缓存机制
- 添加分页重置和更新功能
- 优化数据查询逻辑以支持分页参数
This commit is contained in:
2026-01-10 01:08:13 +08:00
parent e2649265c2
commit f049861b5a

View File

@@ -64,7 +64,7 @@
:loading="tabState[tab.key].loading"
:row-key="getRowKey"
:scroll="{ x: 'max-content' }"
:pagination="false"
:pagination="getTabPagination(tab.key)"
/>
<a-empty
v-else-if="!tabState[tab.key].loading"
@@ -225,7 +225,9 @@
];
type TabApiConfig = {
page: (params: any) => Promise<{ list: Record<string, any>[] } | undefined>;
page: (
params: any
) => Promise<{ list: Record<string, any>[]; count?: number } | undefined>;
importFn: (file: File, companyId?: number) => Promise<string>;
templatePath: string;
};
@@ -588,7 +590,12 @@
loading: boolean;
data: Record<string, any>[];
columns: TableColumn[];
loadedIdentity?: string;
pagination: {
current: number;
pageSize: number;
total: number;
};
loadedSignature?: string;
};
const tabState = reactive<Record<string, TabState>>({});
@@ -597,11 +604,55 @@
loading: false,
data: [],
columns: [],
loadedIdentity: undefined
pagination: {
current: 1,
pageSize: 20,
total: 0
},
loadedSignature: undefined
};
});
const activeTab = ref(tabList[0].key);
const resetTabPagination = (key: string) => {
tabState[key].pagination.current = 1;
tabState[key].pagination.pageSize = 20;
tabState[key].pagination.total = 0;
};
const setTabPagination = (
key: string,
next: Partial<TabState['pagination']>
) => {
Object.assign(tabState[key].pagination, next);
};
const handleTabPageChange = (key: string, page: number, pageSize: number) => {
const prevPageSize = tabState[key].pagination.pageSize;
setTabPagination(key, {
current: pageSize !== prevPageSize ? 1 : page,
pageSize
});
loadTabData(key);
};
const getTabPagination = (key: string) => {
const state = tabState[key];
return {
current: state.pagination.current,
pageSize: state.pagination.pageSize,
total: state.pagination.total,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100', '200'],
showTotal: (total: number) => `${total}`,
onChange: (page: number, pageSize: number) =>
handleTabPageChange(key, page, pageSize),
onShowSizeChange: (page: number, pageSize: number) =>
handleTabPageChange(key, page, pageSize)
};
};
// 子表导入弹窗
const showRelatedImport = ref(false);
const relatedImportTabKey = ref(tabList[0].key);
@@ -637,6 +688,7 @@
};
const handleRelatedImportDone = () => {
resetTabPagination(activeTab.value);
reloadTab(activeTab.value);
};
@@ -779,7 +831,8 @@
tabState[tab.key].data = [];
tabState[tab.key].columns = [];
tabState[tab.key].loading = false;
tabState[tab.key].loadedIdentity = undefined;
tabState[tab.key].loadedSignature = undefined;
resetTabPagination(tab.key);
});
};
@@ -796,33 +849,54 @@
if (!api) {
state.data = [];
state.columns = [];
state.loadedIdentity = undefined;
state.pagination.total = 0;
state.loadedSignature = undefined;
return;
}
if (!identity) {
state.data = [];
state.columns = [];
state.loadedIdentity = undefined;
state.pagination.total = 0;
state.loadedSignature = undefined;
return;
}
if (!force && state.loadedIdentity === identity) {
const signature = `${identity}|p:${state.pagination.current}|l:${state.pagination.pageSize}`;
if (!force && state.loadedSignature === signature) {
return;
}
state.loading = true;
try {
const res = await api({
const fetchPage = async (page: number) => {
return api({
taxpayerCode,
companyId,
page: 1,
limit: 500
page,
limit: state.pagination.pageSize
});
state.data = res?.list || [];
};
const requestedPage = state.pagination.current;
let res = await fetchPage(requestedPage);
const total = res?.count ?? 0;
let list = res?.list || [];
if (total > 0 && list.length === 0 && requestedPage > 1) {
setTabPagination(key, { current: 1 });
res = await fetchPage(1);
list = res?.list || [];
}
state.pagination.total = res?.count ?? 0;
state.data = list;
if (!state.columns.length) {
state.columns = buildColumns(key, state.data);
state.loadedIdentity = identity;
}
state.loadedSignature = `${identity}|p:${state.pagination.current}|l:${state.pagination.pageSize}`;
} catch (e: any) {
state.data = [];
state.columns = [];
state.loadedIdentity = undefined;
state.pagination.total = 0;
state.loadedSignature = undefined;
message.error(e?.message ?? '查询失败');
} finally {
state.loading = false;