update

components/apolloTable/component/DragResized.tsx

+import React from 'react';
+import { ResizableBox } from 'react-resizable';
+import styles from '@/submodule/components/apolloTable/component/Table.less';
+
+const DragResized = (props: any) => {
+    const { style, columnName, onDragFixed, tableId, onResizeCb } = props;
+
+    // 表格
+    const container: any = document.querySelector(`#apolloTable_${tableId}`);
+    // 分割线wrap
+    const dividerWrap: any = document.querySelector('#dividerWrap');
+    // 分割线
+    const divider: any = document.querySelector('#divider');
+
+    // 列伸缩开始
+    const onResizeWidthStart = (e: any) => {
+        const { x } = container.getBoundingClientRect();
+        divider.style.left = `${e.x - x}px`;
+        dividerWrap.style.display = 'block';
+    };
+    // 列伸缩回调
+    const onResizeWidth = (e: any) => {
+        const { x } = container.getBoundingClientRect();
+        divider.style.left = `${e.x - x}px`;
+    };
+
+    // 列伸缩结束
+    const onResizeWidthStop = (e: any, { size }: { size: { width: number } }) => {
+        dividerWrap.style.display = 'none';
+        if (typeof onDragFixed === 'function') {
+            onDragFixed([{ columnName, width: size.width }]);
+        }
+        if (typeof onResizeCb === 'function') {
+            onResizeCb(columnName, size.width);
+        }
+    };
+
+    return (
+        <ResizableBox
+            style={style}
+            width={style.width}
+            height={style.height}
+            handle={
+                <span
+                    className={styles.handleWidth}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                />
+            }
+            minConstraints={[100, 100]}
+            onResizeStart={onResizeWidthStart}
+            onResize={onResizeWidth}
+            onResizeStop={onResizeWidthStop}
+            draggableOpts={{ enableUserSelectHack: false }}
+        >
+            {props.children}
+        </ResizableBox>
+    );
+};
+export default DragResized;

components/apolloTable/component/DragSorted.less

 @import '../common';
 
-.draggableDiv{
+.sortedWrap {
+    width: 100%;
+    height: 100%;
+}
+.draggableDiv {
     cursor: move;
-}
+}
\ No newline at end of file

components/apolloTable/component/DragSorted.tsx

 import React, { useCallback, useRef } from 'react';
 import classNames from 'classnames';
+import s from './DragSorted.less';
 
 const DragSorted = (props: any) => {
-    const {
-        className, style, columnName, orderNo, onDropFinish, onScroll, canDrag,
-    } = props;
+    const { className, columnName, orderNo, onDropFinish, onScroll, canDrag, tableId } = props;
     // 长按计时器
     const timer: any = useRef(null);
     // 表格滚动计时器
     const timerInterval: any = useRef(null);
     // 表格
-    const container: any = document.querySelector('#tableContainer');
+    const container: any = document.querySelector(`#apolloTable_${tableId}`);
     // 拖拽列时的影子div
     const columnCopyDiv: any = document.querySelector('#columnCopyDiv');
     // 分割线wrap
@@ -27,7 +26,8 @@ const DragSorted = (props: any) => {
         // 所有列
         const draggableColumns = document.querySelectorAll('.draggableColumn');
         const leftFixedHandleWrapRectX = (leftFixedHandleWrap && leftFixedHandleWrap.getBoundingClientRect().x) || 0;
-        const rightFixedHandleWrapRectX = (rightFixedHandleWrap && rightFixedHandleWrap.getBoundingClientRect().x) || tableRect.right;
+        const rightFixedHandleWrapRectX =
+            (rightFixedHandleWrap && rightFixedHandleWrap.getBoundingClientRect().x) || tableRect.right;
 
         const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
         const columnCopyDivWidth = columnCopyDivRect.width;
@@ -44,10 +44,10 @@ const DragSorted = (props: any) => {
             const domRect = dom.getBoundingClientRect();
             // 当前节点在左侧固定列与右侧固定列之间有效
             if (
-                domRect.x > leftFixedHandleWrapRectX
-                && domRect.x < rightFixedHandleWrapRectX
-                && columnCopyDivMid > domRect.x
-                && columnCopyDivMid < domRect.x + domRect.width
+                domRect.x > leftFixedHandleWrapRectX &&
+                domRect.x < rightFixedHandleWrapRectX &&
+                columnCopyDivMid > domRect.x &&
+                columnCopyDivMid < domRect.x + domRect.width
             ) {
                 // 影子div中点在投放目标中
                 divider.style.left = `${domRect.x - tableRect.x}px`;
@@ -185,8 +185,7 @@ const DragSorted = (props: any) => {
 
     return (
         <div
-            className={classNames('draggableColumn', className)}
-            style={style}
+            className={classNames('draggableColumn', s.sortedWrap, className)}
             onMouseDown={onMouseDown}
             onMouseUp={onMouseUp}
             data-column-name={columnName}

components/apolloTable/component/Table.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import memoizeOne from 'memoize-one';
 import { Empty, Spin } from 'antd';
 import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
-import { Resizable, ResizableBox } from 'react-resizable';
 import _ from 'lodash';
 import scrollbarSize from 'dom-helpers/scrollbarSize';
 import styles from './Table.less';
@@ -13,6 +12,7 @@ import Cell from './Cell';
 import LeftDragFixed from './DragFixed';
 import RightDragFixed from './RightDragFixed';
 import DragSorted from './DragSorted';
+import DragResized from './DragResized';
 import { getMergeClassName, getMergeStyle } from '../utils/utils';
 import { Consumer } from './context';
 
@@ -32,9 +32,6 @@ export default class AirTable extends Component<TableProps, TableState> {
     grid5: any;
 
     grid6: any;
-    tableContainer: any;
-    widthHandleWrapper: any;
-    widthHandle: any;
 
     memoizeData: Function;
 
@@ -105,7 +102,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     // 获取表格显示列
     getShowColumns = (columns: ColumnProps[]) => {
         return columns.filter((item) => {
-            return !!item.showStatus && (!item.hideScope || item.hideScope.indexOf('LIST') === -1);
+            return !item.hideScope || item.hideScope.indexOf('LIST') === -1;
         });
     };
 
@@ -213,34 +210,16 @@ export default class AirTable extends Component<TableProps, TableState> {
         }
     };
 
-    // 列伸缩回调
-    onResizeWidth = (e) => {
-        const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
-        if (this.widthHandle) {
-            this.widthHandle.style.left = `${e.x - originLeft}px`;
-        }
-    };
-    // 列伸缩开始
-    onResizeWidthStart = (e) => {
-        const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
-        if (this.widthHandleWrapper && this.widthHandle) {
-            this.widthHandle.style.left = `${e.x - originLeft}px`;
-            this.widthHandleWrapper.style.display = 'block';
-        }
-    };
     // 列伸缩结束
-    onResizeWidthStop = (columnName: string, e, { size }) => {
+    onResizeCb = (columnName: string, width: number) => {
         const { columns } = this.state;
         const newColumns: any = [];
         columns.map((item) => {
             if (item.columnName === columnName) {
-                item.width = size.width;
+                item.width = width;
             }
             newColumns.push(item);
         });
-        if (this.widthHandleWrapper) {
-            this.widthHandleWrapper.style.display = 'none';
-        }
         this.setState(
             {
                 columns: newColumns,
@@ -353,7 +332,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         { columnIndex, key, style }: any,
     ) => {
         if (showColumns.length === 0) return null;
-        const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted } = this.props;
+        const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted, tableId, onDragFixed } = this.props;
         const {
             columnType = 1,
             columnName,
@@ -366,32 +345,22 @@ export default class AirTable extends Component<TableProps, TableState> {
             orderNo,
         } = showColumns[columnIndex];
         return (
-            <DragSorted
+            <DragResized
                 columnName={columnName}
-                orderNo={orderNo}
-                onDropFinish={this.onDragSorted}
-                onScroll={this.onScrollHor}
-                className={styles.headerCell}
-                key={key}
                 style={style}
-                canDrag={!!onDragSorted}
+                onDragFixed={onDragFixed}
+                tableId={tableId}
+                onResizeCb={this.onResizeCb}
             >
-                <ResizableBox
-                    width={style.width}
-                    height={style.height}
-                    handle={
-                        <span
-                            className={styles.handleWidth}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                            }}
-                        />
-                    }
-                    minConstraints={[100, 100]}
-                    onResize={this.onResizeWidth}
-                    onResizeStart={this.onResizeWidthStart}
-                    onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
-                    draggableOpts={{ enableUserSelectHack: false }}
+                <DragSorted
+                    columnName={columnName}
+                    orderNo={orderNo}
+                    onDropFinish={this.onDragSorted}
+                    onScroll={this.onScrollHor}
+                    className={styles.headerCell}
+                    key={key}
+                    canDrag={!!onDragSorted}
+                    tableId={tableId}
                 >
                     <Column
                         columnType={String(columnType)}
@@ -408,8 +377,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                         icon={icon}
                         required={requiredFlag}
                     />
-                </ResizableBox>
-            </DragSorted>
+                </DragSorted>
+            </DragResized>
         );
     };
 
@@ -560,9 +529,6 @@ export default class AirTable extends Component<TableProps, TableState> {
                                         paddingRight: this.props.onScroll ? paddingRight : 0,
                                     }}
                                     id={`apolloTable_${tableId}`}
-                                    ref={(dom) => {
-                                        this.tableContainer = dom;
-                                    }}
                                 >
                                     {totalWidth > tableWidth && leftCount > 0 && (
                                         <div
@@ -842,16 +808,10 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     <div
                                         className={styles.widthHandleWrapper}
                                         id="dividerWrap"
-                                        ref={(dom) => {
-                                            this.widthHandleWrapper = dom;
-                                        }}
                                     >
                                         <div
                                             className={styles.widthHandle}
                                             id="divider"
-                                            ref={(dom) => {
-                                                this.widthHandle = dom;
-                                            }}
                                         />
                                     </div>
                                     <div id="columnCopyDiv" className={styles.columnCopyDiv} draggable={true} />

components/apolloTable/component/index.tsx

@@ -88,6 +88,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             onDragSorted,
             onEmitMsg,
             tableId,
+            onDragFixed,
         } = this.props;
         const sortConfig = operateConfig
             && operateConfig.menusGroup
@@ -149,6 +150,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                                 onDragSorted={onDragSorted}
                                 onEmitMsg={onEmitMsg}
                                 tableId={tableId}
+                                onDragFixed={onDragFixed}
                             />
                         </div>
                     </div>

components/apolloTable/component/interface.tsx

@@ -77,6 +77,7 @@ export interface TableProps extends LoadConfigProps {
     canSorted?: boolean;// 是否可以拖拽自定义列排序
     canResized?: boolean;// 是否可以拖拽自定义列伸缩
     onDragSorted?:Function;// 拖拽更改列排序回调
+    onDragFixed?:Function;// 拖拽更改列排序回调
     onEmitMsg?: Function;
     tableId?:string|number;// tableId
 }
@@ -96,7 +97,6 @@ export interface CommonProps extends TableProps {
     showCondition?: boolean;
     id?:string;
     onEmitMsg?:Function;
-    tableId?:string|number;
 }
 
 export interface CommonState extends TableState {}