feat(creditCompany): 添加分页功能支持
- 实现表格分页配置和状态管理 - 添加分页参数类型定义和初始化逻辑 - 集成分页组件并配置分页选项和事件处理 - 实现分页数据加载和缓存机制 - 添加分页重置和更新功能 - 优化数据查询逻辑以支持分页参数
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user