feat: 1

src/components/Table/src/BasicTable.tsx

@@ -67,14 +67,14 @@ const BasicTable: {
     return originalColumns?.filter(i => !filterKey.includes(i.dataIndex))
   }, [state.columnsStateMap])
 
-  const { getScrollRef, redoHeight } = useTableScroll(
+  const { getScrollRef, redoHeight } = useTableScroll({
     tableElRef,
     columnsRef,
-    state.selectKeysRef,
-    state.sizeRef,
+    selectKeysRef: state.selectKeysRef,
+    sizeRef: state.sizeRef,
     // TODO: 只要是boolean[false]说明不需要分页器, 则高度计算时不应该计入
-    !isBoolean(resetProps.pagination)
-  )
+    paginationRef: !isBoolean(resetProps.pagination)
+  })
 
   useLayoutEffect(() => {
     if (state.dataSource || !isUnDef(resetProps.dataSource)) {

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

@@ -7,13 +7,19 @@ import { getViewportOffset } from '@/utils/domUtils'
 import { useWindowSizeFn } from '@/hooks/event/useWindomSizeFn'
 import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/DensityIcon'
 
-export function useTableScroll(
-  tableElRef: RefObject<HTMLElement>,
-  columnsRef: ProColumns<any> = [],
-  selectKeysRef: string[] = [],
-  sizeRef: DensitySize = 'middle',
+export function useTableScroll({
+  tableElRef,
+  columnsRef = [],
+  selectKeysRef = [],
+  sizeRef = 'middle',
+  paginationRef
+}: {
+  tableElRef: RefObject<HTMLElement>
+  columnsRef: ProColumns<any>
+  selectKeysRef: string[]
+  sizeRef: DensitySize
   paginationRef: boolean
-) {
+}) {
   // let bodyEl: HTMLElement | null
   const [tableHeight, setTableHeight] = useState(null)
   const [_dataSource, setDataSource] = useState(null)
@@ -92,8 +98,7 @@ export function useTableScroll(
       let hasScrollBar = el?.style.width !== '100%'
 
       if (el?.style.width !== '100%') {
-        const contentWidth =
-          tableContainerEl?.querySelector('div.ant-table-content')?.clientWidth || 0
+        const contentWidth = tableContainerEl?.querySelector('div.ant-table-content')?.clientWidth || 0
 
         hasScrollBar = el?.clientWidth > contentWidth
       }
@@ -146,8 +151,7 @@ export function useTableScroll(
     }
     const tableEl = tableElRef.current
 
-    const tableWidth = tableEl && tableEl?.offsetWidth
-    // console.log(tableWidth - 48, width)
+    const tableWidth = tableEl?.offsetWidth
 
     return tableWidth - 48 > width ? '100%' : width
   }, [selectKeysRef, columnsRef, tableElRef?.current])

src/pages/Hr/Contacts/components/Organization/index.tsx

@@ -47,8 +47,8 @@ const Organization = props => {
     }
   }
   return (
-    <div className="min-w-12rem rounded-4px flex flex-col">
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-row">
+    <div className="w-12rem rounded-4px flex flex-col">
+      <div className="w-full p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-row">
         <span className="text-[0.9375rem]">组织架构</span>
       </div>
       <div className="py-4 bg-white flex-1">

src/pages/Hr/Contacts/index.tsx

@@ -88,7 +88,7 @@ const Contacts: React.FC<ContactsProps> = props => {
     <PageContainer title={false} breadcrumb={false}>
       <div className="flex flex-row">
         <Organization onSelect={onSelect} />
-        <div className="ml-6 shadow-hex-3e2c5a">
+        <div className="ml-6 shadow-hex-3e2c5a" style={{ width: 'calc(100% - 12rem)' }}>
           {allStaffList.length ? (
             <BasicTable rowKey="id" columns={columns} dataSource={dataSource} search={false} />
           ) : null}

src/pages/Hr/Employee/components/DepartmentMenu/index.jsx

@@ -82,8 +82,8 @@ const DepartmentMenu = props => {
   }
 
   return (
-    <div className="min-w-12rem rounded-4px flex flex-col">
-      <div className="w-full p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-row">
+    <div className="w-12rem rounded-4px flex flex-col">
+      <div className="w-full p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-nowrap">
         <div className="text-[0.9375rem]">组织架构</div>
         <ModalForm
           title="创建部门"

src/pages/Hr/Employee/index.jsx

@@ -82,9 +82,9 @@ const Employee = props => {
 
   return (
     <PageContainer title={false} breadcrumb={false}>
-      <div className="flex flex-row">
+      <div className="flex flex-nowrap">
         <DepartmentMenu onSelect={onSelect} />
-        <div className="ml-6 shadow-hex-3e2c5a">
+        <div className="ml-6 shadow-hex-3e2c5a" style={{ width: 'calc(100% - 12rem)' }}>
           {state.params.id && (
             <BasicTable
               params={{ departmentId: state.params.id }}

src/types/typing.d.ts

@@ -24,6 +24,8 @@ export type PermStateEnum = {
 }
 
 export type BasicTableProps<T, U extends ParamsType, ValueType = 'text'> = {
+  // /** @name  校准宽度值 */
+  // resizeWidthOffset?: number
   onPermChange?: (map: PermStateEnum) => void
   /** @name 配置search栏tooltip的title属性 */
   searchTooptip?: boolean | string | ReactNode

src/utils/domUtils.ts

@@ -5,6 +5,15 @@ export function getBoundingClientRect(element: Element): DOMRect | number {
   return element.getBoundingClientRect()
 }
 
+export interface ViewportOffsetResult {
+  left: number
+  top: number
+  right: number
+  bottom: number
+  rightIncludeBody: number
+  bottomIncludeBody: number
+}
+
 /**
  * Get the left and top offset of the current element
  * left: the distance between the leftmost element and the left side of the document