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