生产管理系统 - 页面上路由参数缓存
This commit is contained in:
@@ -242,43 +242,103 @@ export default function AuditHistoryPage() {
|
||||
date_range: 'all'
|
||||
});
|
||||
|
||||
// 数据加载函数 - 移除不必要的依赖避免重复调用
|
||||
const loadAuditHistory = useCallback(async (params?: {
|
||||
// 数据加载函数 - 优先从浏览器URL参数读取
|
||||
const loadAuditHistory = useCallback(async (options: {
|
||||
resetPage?: boolean;
|
||||
filters?: Record<string, string>;
|
||||
pagination?: { page: number; size: number };
|
||||
sort?: { sortBy?: string; sortOrder?: 'asc' | 'desc' };
|
||||
}) => {
|
||||
sortBy?: string;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
page?: number;
|
||||
size?: number;
|
||||
} = {}) => {
|
||||
try {
|
||||
console.log('调用了loadAuditHistory');
|
||||
// 优先从URL读取参数
|
||||
let urlParams = {};
|
||||
if (typeof window !== 'undefined') {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
urlParams = {
|
||||
search: params.get('search') || undefined,
|
||||
action: params.get('action') || undefined,
|
||||
audit_status: params.get('audit_status') || undefined,
|
||||
date_range: params.get('date_range') || undefined,
|
||||
page: params.get('page') ? parseInt(params.get('page')!, 10) : undefined,
|
||||
size: params.get('size') ? parseInt(params.get('size')!, 10) : undefined
|
||||
};
|
||||
console.log('从URL读取的参数:', urlParams);
|
||||
}
|
||||
console.log('========================================');
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const finalParams: AuditLogsQueryParams = {
|
||||
search_keyword: (params?.filters?.search ?? searchFilters.search) || undefined,
|
||||
action: params?.filters?.action ?? searchFilters.action,
|
||||
audit_status: params?.filters?.audit_status ?? searchFilters.audit_status,
|
||||
date_range: params?.filters?.date_range ?? searchFilters.date_range,
|
||||
page: params?.pagination?.page || pagination.page,
|
||||
size: params?.pagination?.size || pagination.size,
|
||||
order_by: params?.sort?.sortBy,
|
||||
sort_order: params?.sort?.sortOrder,
|
||||
// 解构选项参数,提供默认值
|
||||
const {
|
||||
resetPage = false,
|
||||
filters,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
page,
|
||||
size
|
||||
} = options;
|
||||
|
||||
// 优先级:URL参数 > 传入参数 > 父组件状态
|
||||
const finalPage = resetPage ? 1 : (urlParams.page || page || pagination.page);
|
||||
const finalSize = urlParams.size || size || pagination.size;
|
||||
|
||||
const params: AuditLogsQueryParams = {
|
||||
page: finalPage,
|
||||
size: finalSize,
|
||||
};
|
||||
|
||||
// 处理筛选条件,如果为'all'则不传该参数
|
||||
if (finalParams.action === 'all') {
|
||||
finalParams.action = undefined;
|
||||
}
|
||||
if (finalParams.audit_status === 'all') {
|
||||
finalParams.audit_status = undefined;
|
||||
}
|
||||
if (finalParams.date_range === 'all') {
|
||||
finalParams.date_range = undefined;
|
||||
// 使用正确的优先级:URL参数 > 传入参数 > 父组件状态
|
||||
const currentFilters = {
|
||||
search: urlParams.search || (filters?.search) || searchFilters.search,
|
||||
action: urlParams.action || (filters?.action) || searchFilters.action,
|
||||
audit_status: urlParams.audit_status || (filters?.audit_status) || searchFilters.audit_status,
|
||||
date_range: urlParams.date_range || (filters?.date_range) || searchFilters.date_range
|
||||
};
|
||||
const currentSortBy = sortBy || 'created_at';
|
||||
const currentSortOrder = sortOrder || 'desc';
|
||||
|
||||
// 添加搜索条件
|
||||
if (currentFilters.search) {
|
||||
params.search_keyword = currentFilters.search;
|
||||
}
|
||||
|
||||
const response = await fetchAuditLogs(finalParams);
|
||||
if (currentFilters.action && currentFilters.action !== 'all') {
|
||||
params.action = currentFilters.action;
|
||||
}
|
||||
|
||||
if (currentFilters.audit_status && currentFilters.audit_status !== 'all') {
|
||||
params.audit_status = currentFilters.audit_status;
|
||||
}
|
||||
|
||||
if (currentFilters.date_range && currentFilters.date_range !== 'all') {
|
||||
params.date_range = currentFilters.date_range;
|
||||
}
|
||||
|
||||
if (currentSortBy) {
|
||||
params.order_by = currentSortBy;
|
||||
params.sort_order = currentSortOrder;
|
||||
}
|
||||
|
||||
console.log('=== 审核历史页面 - 最终API参数 ===');
|
||||
console.log('API调用参数 params:', params);
|
||||
console.log('参数优先级正确: URL参数 > 函数传递参数 > 父组件状态');
|
||||
console.log('当前currentFilters:', currentFilters);
|
||||
console.log('==================================');
|
||||
|
||||
const response = await fetchAuditLogs(params);
|
||||
const transformedData = response.data.map(transformAuditLogData);
|
||||
|
||||
setRecords(transformedData);
|
||||
setPagination({
|
||||
page: response.page,
|
||||
size: response.size,
|
||||
total: response.total,
|
||||
totalPages: response.total_pages,
|
||||
hasNext: response.has_next,
|
||||
hasPrev: response.has_prev,
|
||||
});
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '加载审核历史失败';
|
||||
setError(errorMessage);
|
||||
@@ -286,7 +346,7 @@ export default function AuditHistoryPage() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [searchFilters, pagination]); // 添加依赖以保持函数引用最新
|
||||
}, []); // 移除依赖项,通过参数传递
|
||||
|
||||
const didFetchRef = useRef(false)
|
||||
|
||||
@@ -295,38 +355,94 @@ useEffect(() => {
|
||||
didFetchRef.current = true
|
||||
loadAuditHistory()
|
||||
}, [])
|
||||
// 事件处理器
|
||||
// 搜索处理 - 保持传统的简洁方式
|
||||
const handleSearch = useCallback((filters: Record<string, string>) => {
|
||||
setSearchFilters(filters);
|
||||
// 搜索时重置到第一页
|
||||
loadAuditHistory({
|
||||
filters,
|
||||
pagination: { page: 1, size: pagination.size }
|
||||
});
|
||||
}, [loadAuditHistory, pagination.size]);
|
||||
console.log('审核历史页面 - 收到搜索条件:', filters);
|
||||
|
||||
// 更新过滤器状态
|
||||
setSearchFilters(filters);
|
||||
|
||||
// 搜索时重置到第1页
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
|
||||
// 执行查询
|
||||
loadAuditHistory({
|
||||
resetPage: true,
|
||||
page: 1,
|
||||
filters: filters,
|
||||
size: pagination.size
|
||||
});
|
||||
|
||||
console.log('触发审核历史查询 - 参数:', {
|
||||
resetPage: true,
|
||||
page: 1,
|
||||
filters: filters,
|
||||
size: pagination.size
|
||||
});
|
||||
}, [pagination.size, loadAuditHistory]);
|
||||
|
||||
// 排序处理
|
||||
const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
|
||||
// 排序时重置到第一页
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
loadAuditHistory({
|
||||
pagination: { page: 1, size: pagination.size },
|
||||
sort: { sortBy, sortOrder }
|
||||
resetPage: true,
|
||||
page: 1,
|
||||
filters: searchFilters,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
size: pagination.size
|
||||
});
|
||||
}, [loadAuditHistory, pagination.size]);
|
||||
}, [searchFilters, pagination.size, loadAuditHistory]);
|
||||
|
||||
// 分页处理
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
if (page < 1) {
|
||||
page = 1;
|
||||
} else if (page > pagination.totalPages && pagination.totalPages > 0) {
|
||||
page = pagination.totalPages;
|
||||
}
|
||||
setPagination(prev => ({ ...prev, page }));
|
||||
loadAuditHistory({
|
||||
page,
|
||||
filters: searchFilters,
|
||||
pagination: { page, size: pagination.size }
|
||||
size: pagination.size
|
||||
});
|
||||
}, [loadAuditHistory, searchFilters, pagination.size]);
|
||||
}, [searchFilters, pagination.size, pagination.totalPages, loadAuditHistory]);
|
||||
|
||||
// 每页条数变化处理
|
||||
const handleSizeChange = useCallback((size: number) => {
|
||||
setPagination(prev => ({ ...prev, size, page: 1 }));
|
||||
loadAuditHistory({
|
||||
filters: searchFilters,
|
||||
pagination: { page: 1, size }
|
||||
resetPage: true,
|
||||
page: 1,
|
||||
size,
|
||||
filters: searchFilters
|
||||
});
|
||||
}, [loadAuditHistory, searchFilters]);
|
||||
}, [searchFilters, loadAuditHistory]);
|
||||
|
||||
// URL状态变化处理 - 处理浏览器前进后退时的参数恢复
|
||||
const handleUrlStateChange = useCallback((urlState: {
|
||||
filters: Record<string, string>;
|
||||
pagination: { page: number; size: number };
|
||||
}) => {
|
||||
console.log('审核历史页面 - URL状态变化:', urlState);
|
||||
|
||||
// 更新内部状态
|
||||
setSearchFilters(urlState.filters);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
page: urlState.pagination.page,
|
||||
size: urlState.pagination.size
|
||||
}));
|
||||
|
||||
// 触发数据加载
|
||||
loadAuditHistory({
|
||||
page: urlState.pagination.page,
|
||||
size: urlState.pagination.size,
|
||||
filters: urlState.filters
|
||||
});
|
||||
}, [loadAuditHistory]);
|
||||
|
||||
// 业务事件处理器
|
||||
const handleView = (record: AuditLogData) => {
|
||||
@@ -381,7 +497,8 @@ useEffect(() => {
|
||||
emptyIcon={<FileText className="w-12 h-12 mx-auto mb-4 opacity-20" />}
|
||||
emptyText="暂无审核记录"
|
||||
sizeOptions={[10, 20, 50, 100]}
|
||||
/>
|
||||
|
||||
/>
|
||||
|
||||
{/* View Audit Record Details Dialog */}
|
||||
<Dialog open={dialogs.showViewDialog} onOpenChange={(open) => dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: open })}>
|
||||
|
||||
Reference in New Issue
Block a user