oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ fix(channels-table): preserve group filter when switching type or status tabs

Browse Source 
Refactors `ChannelsTable.js` to ensure that the selected group filter is **never lost** when:

1. Cycling between channel-type tabs.
2. Changing the status dropdown (all / enabled / disabled).

Key points:

• `loadChannels` now detects active search filters (keyword / group / model) and transparently delegates to `searchChannels`, guaranteeing all parameters are sent in every request.
• `searchChannels` accepts optional `typeKey` and `statusF` arguments, enabling reuse without code duplication.
• Loading state handling is unified; no extra renders or side effects were introduced, keeping UI performance intact.
• Duplicate logic removed and responsibilities clearly separated for easier future maintenance.
This commit is contained in:
t0ng7u
2025-06-24 04:16:40 +08:00
parent 5a5e8ce652
commit db1b11deaf
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/table/ChannelsTable.js
View File

@@ -882,6 +882,15 @@ const ChannelsTable = () => {
statusF, statusF,
) => { ) => {
if (statusF === undefined) statusF = statusFilter; if (statusF === undefined) statusF = statusFilter;
const { searchKeyword, searchGroup, searchModel } = getFormValues();
if (searchKeyword !== '' || searchGroup !== '' || searchModel !== '') {
setLoading(true);
await searchChannels(enableTagMode, typeKey, statusF);
setLoading(false);
return;
}
const reqId = ++requestCounter.current; // 记录当前请求序号 const reqId = ++requestCounter.current; // 记录当前请求序号
setLoading(true); setLoading(true);
const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : ''; const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
@@ -1054,18 +1063,18 @@ const ChannelsTable = () => {
}; };
}; };
const searchChannels = async (enableTagMode) => { const searchChannels = async (enableTagMode, typeKey = activeTypeKey, statusF = statusFilter) => {
const { searchKeyword, searchGroup, searchModel } = getFormValues(); const { searchKeyword, searchGroup, searchModel } = getFormValues();
setSearching(true); setSearching(true);
try { try {
if (searchKeyword === '' && searchGroup === '' && searchModel === '') { if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
await loadChannels(activePage - 1, pageSize, idSort, enableTagMode); await loadChannels(activePage - 1, pageSize, idSort, enableTagMode, typeKey, statusF);
return; return;
} }
const typeParam = (activeTypeKey !== 'all') ? `&type=${activeTypeKey}` : ''; const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
const statusParam = statusFilter !== 'all' ? `&status=${statusFilter}` : ''; const statusParam = statusF !== 'all' ? `&status=${statusF}` : '';
const res = await API.get( const res = await API.get(
`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}&id_sort=${idSort}&tag_mode=${enableTagMode}${typeParam}${statusParam}`, `/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}&id_sort=${idSort}&tag_mode=${enableTagMode}${typeParam}${statusParam}`,
); );