feat: 客户应用BasicTable

src/components/Table/src/BasicTable.tsx

@@ -14,8 +14,35 @@ import { useTableScroll } from './hooks/useTableScroll'
 import type { BasicTableProps } from '@/types/typing'
 import type { ParamsType } from '@ant-design/pro-provider'
 import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/DensityIcon'
+// import { Resizable } from 'react-resizable'
 import styles from './index.less'
 
+// const ResizableTitle = props => {
+//   const { onResize, width, ...restProps } = props
+
+//   if (!width) {
+//     return <th {...restProps} />
+//   }
+
+//   return (
+//     <Resizable
+//       width={width}
+//       height={0}
+//       handle={
+//         <span
+//           className="table-resizable-handle"
+//           onClick={e => {
+//             e.stopPropagation()
+//           }}
+//         />
+//       }
+//       onResize={onResize}
+//       draggableOpts={{ enableUserSelectHack: false }}>
+//       <th {...restProps} />
+//     </Resizable>
+//   )
+// }
+
 const BasicTable: {
   <T extends Record<string, any>, U extends ParamsType = ParamsType, ValueType = 'text'>(
     props: BasicTableProps<T, U, ValueType>
@@ -23,12 +50,13 @@ const BasicTable: {
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   Summary: typeof import('rc-table/lib/Footer/Summary').default
 } = ({
+  // resizable = false,
   headerTitle,
   params,
   mainMenuType,
   columnStateType,
   columnsStateMap,
-  columns,
+  columns: originalColumns,
   onColumnsStateChange,
   onSizeChange,
   bordered,
@@ -40,6 +68,7 @@ const BasicTable: {
   } = useModel('@@initialState')
   // 如果数据权限不存在，就不渲染
   if (isNullOrUnDef(permData)) return null
+  const [columns] = useState(originalColumns)
   const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)
   let defaultpermAuthCache = 'onself'
   if (permAuthCache && permAuthCache[mainMenuType]) {
@@ -47,8 +76,6 @@ const BasicTable: {
   }
   const tableElRef = useRef<HTMLElement>(null)
 
-  console.log('params', params)
-
   const [state, setState] = useState({
     selectKeysRef: null,
     sizeRef: 'middle',
@@ -65,7 +92,7 @@ const BasicTable: {
       if (!column.show) filterKey.push(columnsKey)
     })
 
-    return columns?.filter((_, i) => !filterKey.includes(i.toString()))
+    return originalColumns?.filter((_, i) => !filterKey.includes(i.toString()))
   }, [state.columnsStateMap])
 
   const { getScrollRef, redoHeight } = useTableScroll(
@@ -138,11 +165,43 @@ const BasicTable: {
       }
     }
   }, [rowSelection])
+
+  // 配置可伸缩列相关
+  // if (resizable) {
+  //   resetProps.components = {
+  //     header: {
+  //       cell: ResizableTitle
+  //     }
+  //   }
+  // }
+  // const handleResize =
+  //   i =>
+  //   (e, { size }) => {
+  //     const nextColumns = [...columns]
+  //     nextColumns[i] = {
+  //       ...nextColumns[i],
+  //       width: size.width
+  //     }
+  //     setColumns(nextColumns)
+  //   }
+  const finallyColumns = useMemo(() => {
+    // if (resizable) {
+    //   return columns.map((col, index) => ({
+    //     ...col,
+    //     onHeaderCell: column => ({
+    //       width: column.width,
+    //       onResize: handleResize(index)
+    //     })
+    //   }))
+    // }
+    return columns
+  }, [columns])
+
   return (
     <div ref={tableElRef} className={styles.BasicTable}>
       <ProTable
         {...resetProps}
-        columns={columns}
+        columns={finallyColumns}
         params={{ ...params, ...state.params }}
         columnsStateMap={state.columnsStateMap}
         onColumnsStateChange={handleOnColumnsChange}

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

@@ -50,7 +50,7 @@ export function useTableScroll(
     let headerHeight = 0
     if (headEl) {
       headerHeight = headEl.offsetHeight
-      console.log('headerHeight', headerHeight)
+      // console.log('headerHeight', headerHeight)
     }
     const height = bottomIncludeBody - paddingHeight - paginationHeight - headerHeight
 

src/global.less

@@ -172,3 +172,17 @@ input:-webkit-autofill:active {
 ::-webkit-scrollbar-thumb:hover {
   background: #636363;
 }
+
+// .react-resizable {
+//   background-clip: padding-box !important;
+// }
+
+// .table-resizable-handle {
+//   position: absolute;
+//   right: -5px;
+//   bottom: 0;
+//   z-index: 1;
+//   width: 10px;
+//   height: 100%;
+//   cursor: col-resize;
+// }

src/pages/Customer/Test/index.jsx

@@ -82,6 +82,7 @@ export default function Index() {
   ]
   return (
     <BasicTable
+      resizable={true}
       columns={columns}
       rowKey={row => row.id}
       search={false}

src/types/typing.d.ts

@@ -19,6 +19,8 @@ import type { ProFieldEmptyText } from '@ant-design/pro-field'
 import type { Bordered } from '@ant-design/pro-table/lib/typing'
 
 export type BasicTableProps<T, U extends ParamsType, ValueType = 'text'> = {
+  /** @name 启用列可伸缩功能 */
+  resizable?: boolean
   /** @type 枚举表中的菜单常量 */
   mainMenuType?: MainMenuKeyEnum
   /** @type 枚举表中的表格列常量 */