Просмотр исходного кода

🐛 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.
t0ng7u 8 месяцев назад
Родитель
Сommit
a8ba2eba33
1 измененных файлов с 23 добавлено и 10 удалено
  1. 23 10
      web/src/components/table/ChannelsTable.js

+ 23 - 10
web/src/components/table/ChannelsTable.js

@@ -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);
                 }}
               />