diff --git a/components/apolloTable/component/DragResized.tsx b/components/apolloTable/component/DragResized.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d556dd40bc0d024e7bf6ddd5cbbc25e00fa60928
--- /dev/null
+++ b/components/apolloTable/component/DragResized.tsx
@@ -0,0 +1,61 @@
+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 (
+ {
+ e.stopPropagation();
+ }}
+ />
+ }
+ minConstraints={[100, 100]}
+ onResizeStart={onResizeWidthStart}
+ onResize={onResizeWidth}
+ onResizeStop={onResizeWidthStop}
+ draggableOpts={{ enableUserSelectHack: false }}
+ >
+ {props.children}
+
+ );
+};
+export default DragResized;
diff --git a/components/apolloTable/component/DragSorted.less b/components/apolloTable/component/DragSorted.less
index 46728e6c17ca6e23e235461fbdc224eca2c87bae..051f152cc0d646774fd221da387f0e81750bb19f 100644
--- a/components/apolloTable/component/DragSorted.less
+++ b/components/apolloTable/component/DragSorted.less
@@ -1,5 +1,9 @@
@import '../common';
-.draggableDiv{
+.sortedWrap {
+ width: 100%;
+ height: 100%;
+}
+.draggableDiv {
cursor: move;
-}
\ No newline at end of file
+}
diff --git a/components/apolloTable/component/DragSorted.tsx b/components/apolloTable/component/DragSorted.tsx
index 2c745f11f2621e1efb0373a1d980b0fd0d305e2a..0c4989c47f454c71b980361e39ae40a551817d5c 100644
--- a/components/apolloTable/component/DragSorted.tsx
+++ b/components/apolloTable/component/DragSorted.tsx
@@ -1,16 +1,15 @@
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 (
{
grid5: any;
grid6: any;
- tableContainer: any;
- widthHandleWrapper: any;
- widthHandle: any;
memoizeData: Function;
@@ -105,7 +102,7 @@ export default class AirTable extends Component
{
// 获取表格显示列
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 {
}
};
- // 列伸缩回调
- 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 {
{ 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 {
orderNo,
} = showColumns[columnIndex];
return (
-
- {
- e.stopPropagation();
- }}
- />
- }
- minConstraints={[100, 100]}
- onResize={this.onResizeWidth}
- onResizeStart={this.onResizeWidthStart}
- onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
- draggableOpts={{ enableUserSelectHack: false }}
+
{
icon={icon}
required={requiredFlag}
/>
-
-
+
+
);
};
@@ -560,9 +529,6 @@ export default class AirTable extends Component {
paddingRight: this.props.onScroll ? paddingRight : 0,
}}
id={`apolloTable_${tableId}`}
- ref={(dom) => {
- this.tableContainer = dom;
- }}
>
{totalWidth > tableWidth && leftCount > 0 && (
{
{
- this.widthHandleWrapper = dom;
- }}
>
{
- this.widthHandle = dom;
- }}
/>
diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx
index 9079b2a3c8e66779b2a21d5bd87f2571518e59e8..71571fb7756edf25584c0d7c70305f93675f4408 100644
--- a/components/apolloTable/component/index.tsx
+++ b/components/apolloTable/component/index.tsx
@@ -88,6 +88,7 @@ class AirTable extends React.Component
{
onDragSorted,
onEmitMsg,
tableId,
+ onDragFixed,
} = this.props;
const sortConfig = operateConfig
&& operateConfig.menusGroup
@@ -149,6 +150,7 @@ class AirTable extends React.Component {
onDragSorted={onDragSorted}
onEmitMsg={onEmitMsg}
tableId={tableId}
+ onDragFixed={onDragFixed}
/>
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx
index fe2c768d11208d3ba66f0b804f6e8c46d01fab26..f6ecb9d9aedda10b0c9ebdfe07aefe7160e881f4 100644
--- a/components/apolloTable/component/interface.tsx
+++ b/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 {}