Skip to content

Commit 082473f

Browse files
TianWuwtTianWuwt
committed
fix：修复sql 详情页返回到列表页，数据加载及页数问题
1 parent 67ddeed commit 082473f

File tree

1 file changed

+128
-15
lines changed

1 file changed

+128
-15
lines changed

‎ui/src/pages/Tenant/Detail/Sql/index.tsx‎

Lines changed: 128 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ export default function SqlList() {
3939
const location = useLocation();
4040
const actionRef = useRef<ActionType>();
4141
const formRef = useRef<ProFormInstance>();
42+
const restoringPaginationRef = useRef<{
43+
current?: number;
44+
pageSize?: number;
45+
} | null>(null);
4246
const [drawerOpen, setDrawerOpen] = useState(false);
4347
const [selectedMetricKeys, setSelectedMetricKeys] = useState<string[]>([]);
4448
const [maxElapsedTime, setMaxElapsedTime] = useState<number>(0);
@@ -50,6 +54,13 @@ export default function SqlList() {
5054
startTime?: number;
5155
endTime?: number;
5256
}>({});
57+
const [pagination, setPagination] = useState<{
58+
current?: number;
59+
pageSize?: number;
60+
}>({
61+
current: parseInt(searchParams.get('current') || '1', 10),
62+
pageSize: parseInt(searchParams.get('pageSize') || '20', 10),
63+
});
5364

5465
// 检测是否从 SQL 详情页返回，如果是则恢复保存的参数
5566
useEffect(() => {
@@ -78,24 +89,43 @@ export default function SqlList() {
7889
if (params.endTime) {
7990
newSearchParams.set('endTime', params.endTime.toString());
8091
}
81-
if (params.keyword) {
82-
newSearchParams.set('keyword', params.keyword);
92+
// 恢复搜索字段，包括空字符串
93+
if ('keyword' in params) {
94+
newSearchParams.set('keyword', params.keyword || '');
8395
}
84-
if (params.user) {
85-
newSearchParams.set('user', params.user);
96+
if ('user' in params) {
97+
newSearchParams.set('user', params.user || '');
8698
}
87-
if (params.database) {
88-
newSearchParams.set('database', params.database);
99+
if ('database' in params) {
100+
newSearchParams.set('database', params.database || '');
89101
}
90102
if (params.includeInnerSql !== undefined) {
91103
newSearchParams.set(
92104
'includeInnerSql',
93105
params.includeInnerSql.toString(),
94106
);
95107
}
108+
// 恢复分页参数
109+
if (params.current) {
110+
newSearchParams.set('current', params.current.toString());
111+
}
112+
if (params.pageSize) {
113+
newSearchParams.set('pageSize', params.pageSize.toString());
114+
}
96115

97116
setSearchParams(newSearchParams);
98117

118+
// 设置分页状态
119+
if (params.current || params.pageSize) {
120+
const restoredPagination = {
121+
current: params.current || 1,
122+
pageSize: params.pageSize || 20,
123+
};
124+
// 保存恢复的分页参数到 ref
125+
restoringPaginationRef.current = restoredPagination;
126+
setPagination(restoredPagination);
127+
}
128+
99129
// 恢复表单值，使用保存的参数（这是用户最后一次修改的值）
100130
const formValues: any = {};
101131

@@ -120,17 +150,29 @@ export default function SqlList() {
120150
];
121151
}
122152

123-
// 延迟设置表单值，确保表单已渲染
153+
// 延迟设置表单值并触发请求，确保表单已渲染且分页状态已更新
154+
// 使用更长的延迟，确保 React 状态更新和 ProTable 的 pagination prop 都已更新
124155
setTimeout(() => {
125156
if (formRef.current) {
126157
// 设置表单值，确保恢复的是最后一次保存的值
127158
formRef.current.setFieldsValue(formValues);
159+
// 再次延迟，确保 pagination prop 已经更新到 ProTable 并触发重新渲染
160+
setTimeout(() => {
161+
// 使用 submit 触发请求，它会使用表单值和当前的 pagination.current、pagination.pageSize
162+
// submit 会正确使用 ProTable 的 pagination prop
163+
if (formRef.current) {
164+
formRef.current.submit();
165+
}
166+
}, 300);
167+
} else {
168+
// 如果表单还未准备好，等待后再刷新表格
169+
setTimeout(() => {
170+
actionRef.current?.reload();
171+
}, 300);
128172
}
129173
// 清除保存的参数
130174
sessionStorage.removeItem(SQL_LIST_STORAGE_KEY);
131-
// 刷新表格，确保参数已更新
132-
actionRef.current?.reload();
133-
}, 300);
175+
}, 500);
134176
}
135177
} catch (e) {
136178
console.error('Failed to restore SQL list params:', e);
@@ -139,6 +181,41 @@ export default function SqlList() {
139181
}
140182
}, [location.pathname, setSearchParams]);
141183

184+
// 同步 URL 参数中的分页信息到分页状态（仅在初始化或 URL 参数变化时更新）
185+
useEffect(() => {
186+
const current = searchParams.get('current');
187+
const pageSize = searchParams.get('pageSize');
188+
const urlCurrent = current ? parseInt(current, 10) : 1;
189+
const urlPageSize = pageSize ? parseInt(pageSize, 10) : 20;
190+
191+
// 只有当 URL 参数与当前分页状态不同时才更新（避免循环更新）
192+
if (
193+
urlCurrent !== (pagination.current || 1) ||
194+
urlPageSize !== (pagination.pageSize || 20)
195+
) {
196+
setPagination({
197+
current: urlCurrent,
198+
pageSize: urlPageSize,
199+
});
200+
}
201+
}, [searchParams]);
202+
203+
// 当分页状态与恢复的分页参数匹配时，触发数据加载（作为备用方案）
204+
// 主要恢复逻辑在恢复 useEffect 中通过 submit() 完成
205+
useEffect(() => {
206+
if (
207+
restoringPaginationRef.current &&
208+
pagination.current === restoringPaginationRef.current.current &&
209+
pagination.pageSize === restoringPaginationRef.current.pageSize
210+
) {
211+
// 延迟清除恢复标记，避免在恢复过程中清除
212+
const timer = setTimeout(() => {
213+
restoringPaginationRef.current = null;
214+
}, 1000);
215+
return () => clearTimeout(timer);
216+
}
217+
}, [pagination.current, pagination.pageSize]);
218+
142219
// 监听路由变化，当离开 SQL 页面时清除 SQL 相关参数
143220
useEffect(() => {
144221
const sqlRelatedParams = [
@@ -389,6 +466,16 @@ export default function SqlList() {
389466
endTime,
390467
};
391468

469+
// 保存分页参数
470+
// 从 URL 参数获取，如果没有则使用默认值
471+
const currentPage = searchParams.get('current');
472+
const pageSize = searchParams.get('pageSize');
473+
// 保存分页参数，如果没有则使用默认值（第一页，每页20条）
474+
paramsToSave.current = currentPage
475+
? parseInt(currentPage, 10)
476+
: 1;
477+
paramsToSave.pageSize = pageSize ? parseInt(pageSize, 10) : 20;
478+
392479
// 保存搜索字段，如果字段存在（包括空字符串）则保存，否则不保存该字段
393480
if (
394481
formValues.keyword !== undefined &&
@@ -711,7 +798,10 @@ export default function SqlList() {
711798
rowKey={(record) =>
712799
`${record.sqlId}_${record.svrIp}_${record.svrPort}_${record.planId}_${record.userName}_${record.dbName}`
713800
}
714-
params={{ outputColumns: selectedMetricKeys, activeTab }}
801+
params={{
802+
outputColumns: selectedMetricKeys,
803+
activeTab,
804+
}}
715805
toolbar={{
716806
menu: {
717807
type: 'tab',
@@ -804,6 +894,11 @@ export default function SqlList() {
804894
endTime: effectiveEndTime,
805895
});
806896

897+
// 获取分页参数，优先使用 pagination state（用于恢复场景），否则使用 ProTable 传递的参数
898+
const currentPage = pagination.current || params.current || 1;
899+
const currentPageSize =
900+
pagination.pageSize || params.pageSize || 20;
901+
807902
// 如果没有排序参数，默认使用 elapsed_time 降序
808903
const sortKeys = Object.keys(sort);
809904
const defaultSortColumn =
@@ -820,8 +915,8 @@ export default function SqlList() {
820915
obtenant: name,
821916
sortColumn: defaultSortColumn,
822917
sortOrder: defaultSortOrder,
823-
pageNum: restParams.current,
824-
pageSize: restParams.pageSize,
918+
pageNum: currentPage,
919+
pageSize: currentPageSize,
825920
keyword: restParams.keyword as string,
826921
user: restParams.user as string,
827922
database: restParams.database as string,
@@ -846,13 +941,31 @@ export default function SqlList() {
846941
data: items,
847942
success: msg.successful,
848943
total: msg.data?.totalCount || 0,
849-
page: params.current,
944+
current: currentPage,
945+
pageSize: currentPageSize,
850946
};
851947
}}
852948
columns={columns}
853949
pagination={{
854-
defaultPageSize: 20,
950+
current: pagination.current || 1,
951+
pageSize: pagination.pageSize || 20,
855952
showSizeChanger: true,
953+
onChange: (page, size) => {
954+
// 更新 state
955+
setPagination({
956+
current: page,
957+
pageSize: size,
958+
});
959+
// 更新 URL 参数
960+
const newParams = new URLSearchParams(searchParams);
961+
newParams.set('current', page.toString());
962+
newParams.set('pageSize', size.toString());
963+
setSearchParams(newParams);
964+
// 触发表格重新加载，确保使用新的分页参数
965+
setTimeout(() => {
966+
actionRef.current?.reload();
967+
}, 0);
968+
},
856969
}}
857970
/>
858971
<ColumnSelectionDrawer

0 commit comments

Comments
 (0)