@bit-sun/business-component 4.2.0-alpha.6.8 → 4.2.5-per-alpha.1

package/src/components/Business/BsSulaQueryTable/SearchItemSetting.tsx

@@ -34,14 +34,26 @@ class SearchItemTable extends React.Component {
     dataSource: [],
     columns: [],
     sortDataSource: [],
-    setVisible: false,
-    searchDataSource: false,
-    onSearchSort: false,
+    visible: false,
+    searchDataSource: '',
+    onSearchSort: '',
     isDefaultValue: false,
     defaultValue: [],
     bsTableCode: '', //设置table 列的标识
   };
 
+  // 实例变量声明，用于内存清理
+  debounceTimer = null;
+  dragContainer = null;
+  tableRef = React.createRef();
+  sortableContext = null;
+  handleGlobalClick = null;
+  handleGlobalKeydown = null;
+  handleWindowResize = null;
+  handleDragStart = null;
+  handleDragEnd = null;
+  requestController = null;
+
   patchUserSearchFieldsConfig = (config) => {
     const { appRequestConfig } = this.props;
     let that = this;
@@ -199,6 +211,133 @@ class SearchItemTable extends React.Component {
     });
   }
 
+  componentWillUnmount() {
+    console.log('[SearchItemTable] 开始清理组件资源');
+    
+    const cleanupTasks = [
+      // 取消所有进行中的请求
+      () => {
+        try {
+          if (this.requestControlle) {
+            this.requestController.abort();
+            this.requestController = null;
+            console.log('[SearchItemTable] 请求已取消');
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] 请求取消失败:', error);
+        }
+      },
+      
+      // 清理定时器
+      () => {
+        try {
+          if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+            console.log('[SearchItemTable] 防抖定时器已清理');
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] 定时器清理失败:', error);
+        }
+      },
+      
+      // 清理状态引用
+      () => {
+        try {
+          this.setState = () => {
+            console.warn('[SearchItemTable] 组件已卸载，忽略setState调用');
+          };
+        } catch (error) {
+          console.warn('[SearchItemTable] setState清理失败:', error);
+        }
+      },
+      
+      // 清理DOM事件监听器
+      () => {
+        try {
+          if (this.dragContainer) {
+            this.dragContainer.removeEventListener('dragstart', this.handleDragStart);
+            this.dragContainer.removeEventListener('dragend', this.handleDragEnd);
+            this.dragContainer = null;
+            console.log('[SearchItemTable] DOM事件监听器已清理');
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] DOM事件清理失败:', error);
+        }
+      },
+      
+      // 清理全局事件监听器
+      () => {
+        try {
+          if (typeof document !== 'undefined') {
+            document.removeEventListener('click', this.handleGlobalClick);
+            document.removeEventListener('keydown', this.handleGlobalKeydown);
+            window.removeEventListener('resize', this.handleWindowResize);
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] 全局事件清理失败:', error);
+        }
+      },
+      
+      // 清理Table组件引用
+      () => {
+        try {
+          if (this.tableRef && this.tableRef.current) {
+            this.tableRef.current = null;
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] Table组件清理失败:', error);
+        }
+      },
+      
+      // 清理react-sortable-hoc相关内存
+      () => {
+        try {
+          if (this.sortableContext) {
+            this.sortableContext = null;
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] sortable-hoc清理失败:', error);
+        }
+      },
+      
+      // 清理localStorage监听器
+      () => {
+        try {
+          if (typeof window !== 'undefined' && window.removeEventListener) {
+            window.removeEventListener('storage', this.handleStorageChange);
+          }
+        } catch (error) {
+          console.warn('[SearchItemTable] localStorage监听器清理失败:', error);
+        }
+      }
+    ];
+    
+    // 执行清理任务，即使某个任务失败也继续执行其他任务
+    let successCount = 0;
+    cleanupTasks.forEach((task, index) => {
+      try {
+        task();
+        successCount++;
+      } catch (error) {
+        console.error(`[SearchItemTable] 清理任务${index + 1}执行失败:`, error);
+      }
+    });
+    
+    console.log(`[SearchItemTable] 组件资源清理完成，成功执行${successCount}/${cleanupTasks.length}个清理任务`);
+    
+    // 最终状态验证
+    const finalState = {
+      requestCancelled: !this.requestController,
+      timerCleared: !this.debounceTimer,
+      dragContainerCleared: !this.dragContainer,
+      tableRefCleared: !this.tableRef,
+      sortableContextCleared: !this.sortableContext
+    };
+    
+    console.log('[SearchItemTable] 最终清理状态:', finalState);
+  }
+
   columns = [
     {
       title: '搜索字段名称',
@@ -436,12 +575,13 @@ class SearchItemTable extends React.Component {
       (item) => item?.label?.indexOf(searchDataSource||'') > -1,
     );
     return (
-      <div className={'sort_table_wrapper'}>
+      <div data="bssulaquerysearchdatadiv" className={'sort_table_wrapper'}>
         {visible && (
           <Modal
             title="筛选条件设置"
             wrapClassName={'sort_table_wrapper'}
             width={820}
+            destroyOnClose={true}
             visible={visible}
             onOk={this.handleOk}
             onCancel={this.handleCancel}

package/src/components/Business/BsSulaQueryTable/index.md

@@ -92,6 +92,126 @@ export default () => {
           }
         }
       },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+       {
+        name: 'filterOption1',
+        label: '单据号筛选',
+        notShowLabel: true,
+        field: {
+          type: 'input',
+          props: {
+            options: [
+              {
+                value: '1',
+                text: '单据编号',
+                key: 'qp-orderNo-in',
+              }
+            ]
+          }
+        }
+      },
+      
     ],
     columns: [
       {

package/src/components/Business/BsSulaQueryTable/index.tsx

@@ -165,6 +165,20 @@ export default (props: any) => {
   const bsTableCode = props?.tableCode || window.location.hash; //设置列字段的唯一标识
 
   const rowsRef = useRef<any>(null);
+  const sortTableRef = useRef(null);
+  const searchTableRef = useRef(null);
+  const queryTableRef = useRef(null);
+  const exportTableRef = useRef<any>(null);
+  
+  // 定时器引用，用于清理
+  const debounceTimer = useRef(null);
+  const resizeTimer = useRef(null);
+  
+  // 事件处理函数引用，用于清理
+  const handleBeforeUnload = useRef(null);
+  const handleGlobalClick = useRef(null);
+  const handleGlobalKeydown = useRef(null);
+  const handleStorageChange = useRef(null);
 
   // 获取 table columns中所有的 key  防止有的地方是 dataindex
   const checkedList = useMemo(
@@ -277,10 +291,6 @@ export default (props: any) => {
   const [showExportColumn, setShowExportColumns] = useState([]); // 导出列字段
 
   const [height, setHeight]: any = useState('');
-  const sortTableRef = useRef(null);
-  const searchTableRef = useRef(null);
-  const exportTableRef = useRef<any>(null);
-  const queryTableRef = useRef(null);
 
   const bsTableCodeExport = `${bsTableCode}___Export`; //设置导出列字段的唯一标识
 
@@ -443,16 +453,211 @@ export default (props: any) => {
     setShowSearchFields([...showSearchFields]);
   };
 
+  // 创建稳定的resize事件处理函数引用
+  const handleWindowResize = useCallback(() => {
+    watchWinResize();
+  }, [watchWinResize]);
+
   //组件初始挂载
   useEffect(() => {
-    // getTableHeight();
     setInitialTableInfo();
     setInitialSearchFieldsInfo();
-    window.addEventListener('resize', (e) => {
-      watchWinResize();
-    });
+    window.addEventListener('resize', handleWindowResize);
 
     setPagePath(pathname); // 做处理，记录当前页面渲染的初始pathname，用于进行判断当前列表页面数据是否需要重新渲染
+  }, [handleWindowResize]);
+
+
+
+  // 组件卸载时的完整清理机制
+  useEffect(() => {
+    return () => {
+      // 清理所有定时器
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = null;
+      }
+      
+      if (resizeTimer.current) {
+        clearTimeout(resizeTimer.current);
+        resizeTimer.current = null;
+      }
+      
+      // 清理所有事件监听器
+      window.removeEventListener('resize', handleWindowResize);
+      
+      if (handleBeforeUnload.current) {
+        window.removeEventListener('beforeunload', handleBeforeUnload.current);
+      }
+      
+      if (handleGlobalClick.current) {
+        document.removeEventListener('click', handleGlobalClick.current);
+      }
+      
+      if (handleGlobalKeydown.current) {
+        document.removeEventListener('keydown', handleGlobalKeydown.current);
+      }
+      
+      if (handleStorageChange.current) {
+        window.removeEventListener('storage', handleStorageChange.current);
+      }
+      
+      // 优化的子组件卸载时序控制
+      const cleanupPromises: Promise<void>[] = [];
+      const cleanupTimeout = 5000; // 5秒超时保护
+      
+      // 创建清理任务队列，按优先级顺序执行
+      const cleanupTasks = [
+        // 第一阶段：停止所有活动
+        () => {
+          return new Promise<void>((resolve) => {
+            try {
+              // 停止所有定时器和动画
+              if (debounceTimer.current) {
+                clearTimeout(debounceTimer.current);
+                debounceTimer.current = null;
+              }
+              if (resizeTimer.current) {
+                clearTimeout(resizeTimer.current);
+                resizeTimer.current = null;
+              }
+              resolve();
+            } catch (error) {
+              console.warn('[BsSulaQueryTable] 第一阶段清理错误:', error);
+              resolve(); // 即使出错也继续
+            }
+          });
+        },
+        
+        // 第二阶段：卸载子组件
+        () => {
+          return new Promise<void>((resolve) => {
+            try {
+              // 按依赖关系顺序卸载子组件
+              const componentCleanupOrder = [
+                { ref: exportTableRef, name: 'ExportTable' },
+                { ref: searchTableRef, name: 'SearchItemTable' },
+                { ref: sortTableRef, name: 'SortableTable' },
+                { ref: queryTableRef, name: 'QueryTable' }
+              ];
+              
+              componentCleanupOrder.forEach(({ ref, name }) => {
+                try {
+                  if (ref.current) {
+                    // 调用组件的清理方法
+                    if (typeof ref.current.componentWillUnmount === 'function') {
+                      ref.current.componentWillUnmount();
+                    }
+                    
+                    // 禁用setState防止内存泄漏
+                    if (ref.current.setState) {
+                      ref.current.setState = () => {
+                        console.warn(`[${name}] 组件已卸载，忽略setState调用`);
+                      };
+                    }
+                    
+                    // 清理DOM事件监听器
+                    if (ref.current.removeEventListener) {
+                      ref.current.removeEventListener('scroll', null);
+                      ref.current.removeEventListener('click', null);
+                      ref.current.removeEventListener('resize', null);
+                    }
+                    
+                    console.log(`[BsSulaQueryTable] ${name} 组件已安全卸载`);
+                  }
+                } catch (componentError) {
+                  console.warn(`[BsSulaQueryTable] ${name} 卸载失败:`, componentError);
+                  // 继续处理其他组件
+                }
+              });
+              
+              resolve();
+            } catch (error) {
+              console.warn('[BsSulaQueryTable] 第二阶段清理错误:', error);
+              resolve();
+            }
+          });
+        },
+        
+        // 第三阶段：清理全局资源
+        () => {
+          return new Promise<void>((resolve) => {
+            try {
+              // 清理全局事件监听器
+              window.removeEventListener('resize', handleWindowResize);
+              
+              if (handleBeforeUnload.current) {
+                window.removeEventListener('beforeunload', handleBeforeUnload.current);
+              }
+              
+              if (handleGlobalClick.current) {
+                document.removeEventListener('click', handleGlobalClick.current);
+              }
+              
+              if (handleGlobalKeydown.current) {
+                document.removeEventListener('keydown', handleGlobalKeydown.current);
+              }
+              
+              if (handleStorageChange.current) {
+                window.removeEventListener('storage', handleStorageChange.current);
+              }
+              
+              resolve();
+            } catch (error) {
+              console.warn('[BsSulaQueryTable] 第三阶段清理错误:', error);
+              resolve();
+            }
+          });
+        }
+      ];
+      
+      // 执行清理任务队列
+      const executeCleanupTasks = async () => {
+        for (const task of cleanupTasks) {
+          try {
+            await Promise.race([
+              task(),
+              new Promise<void>((_, reject) => 
+                setTimeout(() => reject(new Error('清理任务超时')), cleanupTimeout)
+              )
+            ]);
+          } catch (error) {
+            console.warn('[BsSulaQueryTable] 清理任务执行失败:', error);
+            // 继续执行下一个任务
+          }
+        }
+      };
+      
+      // 异步执行清理任务
+      executeCleanupTasks().catch(error => {
+        console.error('[BsSulaQueryTable] 清理任务队列执行失败:', error);
+      });
+      
+      // 清理所有ref引用
+      if (rowsRef.current) {
+        rowsRef.current = null;
+      }
+      if (sortTableRef.current) {
+        sortTableRef.current = null;
+      }
+      if (searchTableRef.current) {
+        searchTableRef.current = null;
+      }
+      if (queryTableRef.current) {
+        queryTableRef.current = null;
+      }
+      if (exportTableRef.current) {
+        exportTableRef.current = null;
+      }
+      
+      // 最终状态验证
+      console.log('[BsSulaQueryTable] 组件卸载流程完成，清理状态:', {
+        refsCleared: !rowsRef.current && !sortTableRef.current && !searchTableRef.current,
+        timersCleared: !debounceTimer.current && !resizeTimer.current
+      });
+      
+      console.log('[BsSulaQueryTable] 主组件及所有子组件已完全卸载，内存已清理');
+    };
   }, []);
 
   useEffect(() => {
@@ -489,20 +694,29 @@ export default (props: any) => {
     setInitialTableInfo();
   }, [props?.refreshColumns]);
 
-  const watchWinResize = debounce(() => {
-    // getTableHeight();
-    if (!checkFull()) {
-      // addTabsNavStyle(true);
-      // 全屏下按键esc后要执行的动作
-      // isFullScreen 为true 此时为全屏状态  false 为非全屏状态
-      if (!isFullScreen) {
-        // 按下esc键退出全屏
-        setIsFnllScreen(false);
-      } else {
-        setIsFnllScreen(false);
-      }
+  const watchWinResize = useCallback(() => {
+    // 清理之前的定时器
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
     }
-  }, 10);
+    
+    // 设置新的定时器
+    debounceTimer.current = setTimeout(() => {
+      // getTableHeight();
+      if (!checkFull()) {
+        // addTabsNavStyle(true);
+        // 全屏下按键esc后要执行的动作
+        // isFullScreen 为true 此时为全屏状态  false 为非全屏状态
+        if (!isFullScreen) {
+          // 按下esc键退出全屏
+          setIsFnllScreen(false);
+        } else {
+          setIsFnllScreen(false);
+        }
+      }
+      debounceTimer.current = null;
+    }, 10);
+  }, [isFullScreen]);
 
   const setCommonRenderFn = (columns: any[]) => {
     columns.forEach((column) => {
@@ -962,7 +1176,7 @@ export default (props: any) => {
   );
 
   return (
-    <div id="bs-sula-query-table">
+    <div data="bssulaquerydatadiv" id="bs-sula-query-table">
       <MemoQueryTable {...memoConfig} />
       {/* 列设置弹出框表格 */}
       <SortableTable