fix: 优化BasicTable列设置的某些bug以及自适应宽度

package.json

@@ -52,7 +52,7 @@
     "@ant-design/pro-descriptions": "^1.0.19",
     "@ant-design/pro-form": "1.42.1",
     "@ant-design/pro-layout": "6.19.3",
-    "@ant-design/pro-table": "2.59.0",
+    "@ant-design/pro-table": "2.60.0",
     "@arco-design/web-react": "^2.25.0",
     "@icon-park/react": "^1.3.3",
     "@types/react-window": "^1.8.5",

src/components/LazyCascader/LazyCascader.jsx

@@ -159,7 +159,7 @@ const CLazyCascader = props => {
         value={cValue}
         // 使用这个会导致小屏下市、区的层级不显示
         // getPopupContainer={triggerNode => triggerNode.parentNode}
-        popupVisible={visible}
+        open={visible}
         placeholder="省/市/区"
         options={options}
         ref={refinstance}
@@ -168,7 +168,7 @@ const CLazyCascader = props => {
         loadData={loadData}
         fieldNames={{ label: 'name', value: 'id' }}
         changeOnSelect={changeOnSelect}
-        onPopupVisibleChange={handleOnPopupVisibleChange}
+        onDropdownVisibleChange={handleOnPopupVisibleChange}
         {...resetProps}
       />
     </div>

src/components/Table/src/BasicTable.tsx

@@ -8,7 +8,7 @@ import ProTable from '@ant-design/pro-table'
 import { useModel } from 'umi'
 import { getAuthCache, getPermAuthCache, setAuthCache } from '@/utils/auth'
 import React, { useRef, useState, useLayoutEffect, useMemo } from 'react'
-import { useMount } from 'ahooks'
+// import { useMount } from 'ahooks'
 import { useTableScroll } from './hooks/useTableScroll'
 import type { BasicTableProps, PermStateEnum } from '@/types/typing'
 import type { ParamsType } from '@ant-design/pro-provider'
@@ -73,10 +73,13 @@ const BasicTable: {
   const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(mainMenuType)
   const tableElRef = useRef<HTMLElement>(null)
 
+  const authColumnsStateMap = getAuthCache(TABLE_COLUMNS_MAP)
+  columnsStateMap =
+    (authColumnsStateMap && authColumnsStateMap[ColumnStateEnum[columnStateType]]) || {}
   const [state, setState] = useState({
     selectKeysRef: null,
     sizeRef: 'middle',
-    columnsStateMap: columnsStateMap || {},
+    columnsStateMap: columnsStateMap,
     params: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache },
     dataSource: null
   })
@@ -88,7 +91,9 @@ const BasicTable: {
       const column = state.columnsStateMap[columnsKey]
       if (!column.show) filterKey.push(columnsKey)
     })
-    return originalColumns?.filter((_, i) => !filterKey.includes(i.toString()))
+    // TODO: 当时智障了？这样写？
+    // return originalColumns?.filter((_, i) => !filterKey.includes(i.toString()))
+    return originalColumns?.filter(i => !filterKey.includes(i.dataIndex))
   }, [state.columnsStateMap])
 
   const { getScrollRef, redoHeight } = useTableScroll(
@@ -106,16 +111,18 @@ const BasicTable: {
     }
   }, [state.dataSource])
 
-  useMount(() => {
-    // 处理本地化存储
-    const authColumnsStateMap = getAuthCache(TABLE_COLUMNS_MAP)
-    if (authColumnsStateMap && authColumnsStateMap[ColumnStateEnum[columnStateType]]) {
-      setState({
-        ...state,
-        columnsStateMap: authColumnsStateMap[ColumnStateEnum[columnStateType]]
-      })
-    }
-  })
+  // useMount(() => {
+  //   // 处理本地化存储
+  //   const authColumnsStateMap = getAuthCache(TABLE_COLUMNS_MAP)
+  //   console.log('111')
+
+  //   if (authColumnsStateMap && authColumnsStateMap[ColumnStateEnum[columnStateType]]) {
+  //     setState({
+  //       ...state,
+  //       columnsStateMap: authColumnsStateMap[ColumnStateEnum[columnStateType]]
+  //     })
+  //   }
+  // })
 
   /** 增加头部 */
   if (mainMenuType) {
@@ -146,9 +153,9 @@ const BasicTable: {
   }
   const handleOnColumnsChange = (map: Record<string, ColumnsState>) => {
     setState({ ...state, columnsStateMap: map })
-    const authColumnsStateMap = getAuthCache(TABLE_COLUMNS_MAP)
+    const currentAuthColumnsStateMap = getAuthCache(TABLE_COLUMNS_MAP)
     setAuthCache(TABLE_COLUMNS_MAP, {
-      ...authColumnsStateMap,
+      ...currentAuthColumnsStateMap,
       [ColumnStateEnum[columnStateType]]: map
     })
   }
@@ -218,9 +225,15 @@ const BasicTable: {
         rowKey={rowKey || 'id'}
         columns={originalColumns}
         params={computedParams}
-        columnsStateMap={state.columnsStateMap}
-        onColumnsStateChange={handleOnColumnsChange}
+        // columnsStateMap={state.columnsStateMap}
+        // onColumnsStateChange={handleOnColumnsChange}
         scroll={getScrollRef}
+        columnsState={{
+          defaultValue: state.columnsStateMap,
+          onChange: handleOnColumnsChange
+          // persistenceKey: ColumnStateEnum[columnStateType],
+          // persistenceType: 'localStorage'
+        }}
         bordered={isNullOrUnDef(bordered) ? bordered : true}
         onLoad={dataSource => setState({ ...state, dataSource })}
         onSizeChange={handleOnSizeChange}

src/components/Table/src/hooks/useTableScroll.ts

@@ -93,9 +93,7 @@ export function useTableScroll(
 
       if (el?.style.width !== '100%') {
         const contentWidth =
-          tableElRef.current
-            ?.querySelector('.ant-table-container')
-            ?.querySelector('div.ant-table-content')?.clientWidth || 0
+          tableContainerEl?.querySelector('div.ant-table-content')?.clientWidth || 0
 
         hasScrollBar = el?.clientWidth > contentWidth
       }
@@ -125,6 +123,7 @@ export function useTableScroll(
   }, [selectKeysRef, columnsRef, sizeRef])
 
   const getSrollX = useMemo(() => {
+    if (!tableElRef?.current) return null
     let width = 0
     if (selectKeysRef?.length) {
       width += 60
@@ -146,11 +145,16 @@ export function useTableScroll(
       width += len * NORMAL_WIDTH
     }
     const tableEl = tableElRef.current
+    const a: HTMLElement = tableElRef.current
+      ?.querySelector('.ant-table-container')
+      ?.querySelector('.ant-table-tbody')
+    console.log(a.offsetWidth, a.clientWidth)
 
-    const tableWidth = tableEl && tableEl?.offsetWidth ? tableEl?.offsetWidth : 0
+    const tableWidth = tableEl && tableEl?.offsetWidth
+    console.log(tableEl, tableWidth - 48, width)
 
-    return tableWidth > width ? '100%' : width
-  }, [selectKeysRef, columnsRef])
+    return tableWidth - 48 > width ? '100%' : width
+  }, [selectKeysRef, columnsRef, tableElRef?.current])
 
   const getScrollRef = useMemo(() => {
     return { x: getSrollX, y: tableHeight }