🐛 fix: preserve group filter when switching channel type/status

Ensure that the selected "group" filter (and other form search values) persist across
type tab changes, status filter updates, pagination, and page-size changes.

Changes include:
• loadChannels: added `searchParams` argument and now appends keyword, group and model
  query strings to API calls.
• refresh / page handlers / type tabs / status Select: now pass current form values
  to loadChannels, keeping filters intact.
• searchChannels: maintains active type and status filters when issuing search requests.
• Form.Select (searchGroup): triggers loadChannels when only group filter is active,
  preventing parameter loss.
• Minor cleanup and comment adjustments.
This commit is contained in:
t0ng7u
2025-06-24 01:45:22 +08:00
parent c974b1053c
commit a8ba2eba33

View File

@@ -880,14 +880,22 @@ const ChannelsTable = () => {
enableTagMode, enableTagMode,
typeKey = activeTypeKey, typeKey = activeTypeKey,
statusF, statusF,
searchParams = null,
) => { ) => {
if (statusF === undefined) statusF = statusFilter; if (statusF === undefined) statusF = statusFilter;
const reqId = ++requestCounter.current; // 记录当前请求序号 const reqId = ++requestCounter.current; // 记录当前请求序号
setLoading(true); setLoading(true);
const { searchKeyword, searchGroup, searchModel } = searchParams || getFormValues();
const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : ''; const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
const statusParam = statusF !== 'all' ? `&status=${statusF}` : ''; const statusParam = statusF !== 'all' ? `&status=${statusF}` : '';
const groupParam = searchGroup ? `&group=${searchGroup}` : '';
const modelParam = searchModel ? `&model=${searchModel}` : '';
const keywordParam = searchKeyword ? `&keyword=${searchKeyword}` : '';
const res = await API.get( const res = await API.get(
`/api/channel/?p=${page}&page_size=${pageSize}&id_sort=${idSort}&tag_mode=${enableTagMode}${typeParam}${statusParam}`, `/api/channel/?p=${page}&page_size=${pageSize}&id_sort=${idSort}&tag_mode=${enableTagMode}${typeParam}${statusParam}${groupParam}${modelParam}${keywordParam}`,
); );
if (res === undefined || reqId !== requestCounter.current) { if (res === undefined || reqId !== requestCounter.current) {
return; return;
@@ -934,9 +942,9 @@ const ChannelsTable = () => {
}; };
const refresh = async () => { const refresh = async () => {
const { searchKeyword, searchGroup, searchModel } = getFormValues(); const formValues = getFormValues();
if (searchKeyword === '' && searchGroup === '' && searchModel === '') { if (formValues.searchKeyword === '' && formValues.searchGroup === '' && formValues.searchModel === '') {
await loadChannels(activePage, pageSize, idSort, enableTagMode); await loadChannels(activePage, pageSize, idSort, enableTagMode, activeTypeKey, statusFilter, formValues);
} else { } else {
await searchChannels(enableTagMode); await searchChannels(enableTagMode);
} }
@@ -1060,7 +1068,7 @@ const ChannelsTable = () => {
setSearching(true); setSearching(true);
try { try {
if (searchKeyword === '' && searchGroup === '' && searchModel === '') { if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
await loadChannels(activePage - 1, pageSize, idSort, enableTagMode); await loadChannels(activePage, pageSize, idSort, enableTagMode, activeTypeKey, statusFilter);
return; return;
} }
@@ -1241,7 +1249,7 @@ const ChannelsTable = () => {
onChange={(key) => { onChange={(key) => {
setActiveTypeKey(key); setActiveTypeKey(key);
setActivePage(1); setActivePage(1);
loadChannels(1, pageSize, idSort, enableTagMode, key); loadChannels(1, pageSize, idSort, enableTagMode, key, statusFilter, getFormValues());
}} }}
className="mb-4" className="mb-4"
> >
@@ -1284,14 +1292,14 @@ const ChannelsTable = () => {
const handlePageChange = (page) => { const handlePageChange = (page) => {
setActivePage(page); setActivePage(page);
loadChannels(page, pageSize, idSort, enableTagMode).then(() => { }); loadChannels(page, pageSize, idSort, enableTagMode, activeTypeKey, statusFilter, getFormValues()).then(() => { });
}; };
const handlePageSizeChange = async (size) => { const handlePageSizeChange = async (size) => {
localStorage.setItem('page-size', size + ''); localStorage.setItem('page-size', size + '');
setPageSize(size); setPageSize(size);
setActivePage(1); setActivePage(1);
loadChannels(1, size, idSort, enableTagMode) loadChannels(1, size, idSort, enableTagMode, activeTypeKey, statusFilter, getFormValues())
.then() .then()
.catch((reason) => { .catch((reason) => {
showError(reason); showError(reason);
@@ -1650,7 +1658,7 @@ const ChannelsTable = () => {
localStorage.setItem('channel-status-filter', v); localStorage.setItem('channel-status-filter', v);
setStatusFilter(v); setStatusFilter(v);
setActivePage(1); setActivePage(1);
loadChannels(1, pageSize, idSort, enableTagMode, activeTypeKey, v); loadChannels(1, pageSize, idSort, enableTagMode, activeTypeKey, v, getFormValues());
}} }}
size="small" size="small"
> >
@@ -1748,7 +1756,12 @@ const ChannelsTable = () => {
onChange={() => { onChange={() => {
// 延迟执行搜索,让表单值先更新 // 延迟执行搜索,让表单值先更新
setTimeout(() => { setTimeout(() => {
searchChannels(enableTagMode); const values = getFormValues();
if (values.searchKeyword === '' && values.searchModel === '') {
loadChannels(1, pageSize, idSort, enableTagMode, activeTypeKey, statusFilter, values);
} else {
searchChannels(enableTagMode);
}
}, 0); }, 0);
}} }}
/> />