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" :loading="tabState[tab.key].loading"
:row-key="getRowKey" :row-key="getRowKey"
:scroll="{ x: 'max-content' }" :scroll="{ x: 'max-content' }"
:pagination="false" :pagination="getTabPagination(tab.key)"
/> />
<a-empty <a-empty
v-else-if="!tabState[tab.key].loading" v-else-if="!tabState[tab.key].loading"
@@ -225,7 +225,9 @@
]; ];
type TabApiConfig = { 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>; importFn: (file: File, companyId?: number) => Promise<string>;
templatePath: string; templatePath: string;
}; };
@@ -588,7 +590,12 @@
loading: boolean; loading: boolean;
data: Record<string, any>[]; data: Record<string, any>[];
columns: TableColumn[]; columns: TableColumn[];
loadedIdentity?: string; pagination: {
current: number;
pageSize: number;
total: number;
};
loadedSignature?: string;
}; };
const tabState = reactive<Record<string, TabState>>({}); const tabState = reactive<Record<string, TabState>>({});
@@ -597,11 +604,55 @@
loading: false, loading: false,
data: [], data: [],
columns: [], columns: [],
loadedIdentity: undefined pagination: {
current: 1,
pageSize: 20,
total: 0
},
loadedSignature: undefined
}; };
}); });
const activeTab = ref(tabList[0].key); 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 showRelatedImport = ref(false);
const relatedImportTabKey = ref(tabList[0].key); const relatedImportTabKey = ref(tabList[0].key);
@@ -637,6 +688,7 @@
}; };
const handleRelatedImportDone = () => { const handleRelatedImportDone = () => {
resetTabPagination(activeTab.value);
reloadTab(activeTab.value); reloadTab(activeTab.value);
}; };
@@ -779,7 +831,8 @@
tabState[tab.key].data = []; tabState[tab.key].data = [];
tabState[tab.key].columns = []; tabState[tab.key].columns = [];
tabState[tab.key].loading = false; tabState[tab.key].loading = false;
tabState[tab.key].loadedIdentity = undefined; tabState[tab.key].loadedSignature = undefined;
resetTabPagination(tab.key);
}); });
}; };
@@ -796,33 +849,54 @@
if (!api) { if (!api) {
state.data = []; state.data = [];
state.columns = []; state.columns = [];
state.loadedIdentity = undefined; state.pagination.total = 0;
state.loadedSignature = undefined;
return; return;
} }
if (!identity) { if (!identity) {
state.data = []; state.data = [];
state.columns = []; state.columns = [];
state.loadedIdentity = undefined; state.pagination.total = 0;
state.loadedSignature = undefined;
return; return;
} }
if (!force && state.loadedIdentity === identity) { const signature = `${identity}|p:${state.pagination.current}|l:${state.pagination.pageSize}`;
if (!force && state.loadedSignature === signature) {
return; return;
} }
state.loading = true; state.loading = true;
try { try {
const res = await api({ const fetchPage = async (page: number) => {
taxpayerCode, return api({
companyId, taxpayerCode,
page: 1, companyId,
limit: 500 page,
}); limit: state.pagination.pageSize
state.data = res?.list || []; });
state.columns = buildColumns(key, state.data); };
state.loadedIdentity = identity;
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.loadedSignature = `${identity}|p:${state.pagination.current}|l:${state.pagination.pageSize}`;
} catch (e: any) { } catch (e: any) {
state.data = []; state.data = [];
state.columns = []; state.columns = [];
state.loadedIdentity = undefined; state.pagination.total = 0;
state.loadedSignature = undefined;
message.error(e?.message ?? '查询失败'); message.error(e?.message ?? '查询失败');
} finally { } finally {
state.loading = false; state.loading = false;