feat: 内部支持标签页切换后更新columns数据

packages/search-table-react/src/SearchTable.tsx

@@ -12,7 +12,7 @@ import useScrollY from './hooks/useScrollY'
 import useSearch from './hooks/useSearch'
 import useSummary from './hooks/useSummary'
 import useTitle from './hooks/useTitle'
-import type { ISearchTableProps, ISearchTableRef } from './typings/index.d'
+import type { IGlobalState, ISearchTableProps, ISearchTableRef } from './typings/index.d'
 import type { ITableProps } from './typings/table'
 
 const { classNames, isPlainObject } = utils
@@ -50,8 +50,15 @@ const SearchTable = (
     search === false ? {} : search.defaultValue || {}
   )
 
+  /**
+   * 全局状态
+   */
+  const globalStateRef = useRef<IGlobalState>({
+    isTabChanging: false,
+  })
+
   // 表格列配置数据处理
-  const { baseColumns } = useBaseColumns({ table })
+  const { baseColumns } = useBaseColumns({ table, globalStateRef })
   const { sortColumns, sortModalHolder, openSortModal } = useSortColumns({ baseColumns })
   const { finalColumns } = useFinalColumns({ table, sortColumns })
 
@@ -90,6 +97,7 @@ const SearchTable = (
   const { titleNodeHolder } = useTitle({
     title,
     loading,
+    globalStateRef,
     runRequest,
     openSortModal,
   })

packages/search-table-react/src/hooks/useColumns/useBaseColumns.tsx

@@ -1,19 +1,29 @@
 import { utils } from '@schema-render/core-react'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 
-import type { ISearchTableProps } from '../../typings/index.d'
+import type { IGlobalStateRef, ISearchTableProps } from '../../typings/index.d'
+import type { IColumnType } from '../../typings/table'
 import { BUILT_IN_VALUE_TYPES } from '../../valueTypes'
 import { processRawColumns } from './helpers/traverse'
 
 const { mapKeys } = utils
 
 interface IParams {
   table: ISearchTableProps['table']
+  globalStateRef: IGlobalStateRef
 }
 
-export default function useBaseColumns({ table }: IParams) {
+export default function useBaseColumns({ table, globalStateRef }: IParams) {
   // 原始列数据
-  const rawColumns = table.columns || []
+  const rawColumnsRef = useRef<IColumnType<any>[]>([])
+  const { isTabChanging } = globalStateRef.current
+
+  // 更新原始列
+  useMemo(() => {
+    if (!isTabChanging) {
+      rawColumnsRef.current = table.columns || []
+    }
+  }, [table.columns, isTabChanging])
 
   // 合并 valueType
   const finalValueTypeProcessors = useMemo(() => {
@@ -26,10 +36,13 @@ export default function useBaseColumns({ table }: IParams) {
   }, [table.registerValueType])
 
   const baseColumns = useMemo(
-    () => processRawColumns(rawColumns, table, finalValueTypeProcessors),
+    () => processRawColumns(rawColumnsRef.current, table, finalValueTypeProcessors),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [rawColumns]
+    [rawColumnsRef.current]
   )
 
-  return { rawColumns, baseColumns }
+  return {
+    rawColumns: rawColumnsRef.current,
+    baseColumns,
+  }
 }

packages/search-table-react/src/hooks/useTitle.tsx

@@ -4,18 +4,20 @@ import { Button, Tabs, Tooltip } from 'antd'
 import type { ReactNode } from 'react'
 import { isValidElement } from 'react'
 
-import type { ISearchTableProps, ISearchTableRef } from '../typings'
+import type { IGlobalStateRef, ISearchTableProps, ISearchTableRef } from '../typings'
 
 interface IUseTitleParams {
   title: ISearchTableProps['title']
   loading: boolean
+  globalStateRef: IGlobalStateRef
   runRequest: ISearchTableRef['refresh']
   openSortModal: () => void
 }
 
 export default function useTitle({
   title = {},
   loading,
+  globalStateRef,
   runRequest,
   openSortModal,
 }: IUseTitleParams) {
@@ -25,10 +27,19 @@ export default function useTitle({
     if (loading) {
       return
     }
+
+    // 设置 tab 正在切换
+    globalStateRef.current.isTabChanging = true
+
     // 触发 onChange 事件
     title.tabs?.onChange?.(activeKey)
+
     // 等事件 setState 值更新完毕后再发起请求
-    setTimeout(() => runRequest(), 0)
+    setTimeout(
+      // 请求完毕更新 isTabChanging 值
+      () => runRequest().finally(() => (globalStateRef.current.isTabChanging = false)),
+      0
+    )
   })
 
   const tabBarExtraContent: { left?: ReactNode; right?: ReactNode } = {}

packages/search-table-react/src/typings/index.d.ts

@@ -1,10 +1,22 @@
 import type { IObjectAny, IPartRequired } from '@schema-render/core-react'
 import type { ISearchProps, ISearchRef } from '@schema-render/search-react'
 import type { TabsProps } from 'antd'
-import type { CSSProperties, ReactNode } from 'react'
+import type { CSSProperties, MutableRefObject, ReactNode } from 'react'
 
 import type { ITableOnChangeParams, ITableProps } from './table.d'
 
+/**
+ * 全局数据
+ */
+export interface IGlobalState {
+  /**
+   * 标签页是否在切换中，切换时不同步 rawColumns
+   */
+  isTabChanging: boolean
+}
+
+export type IGlobalStateRef = MutableRefObject<IGlobalState>
+
 export interface IRenderParams {
   /**
    * 是否加载中