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