From dd72d6b0c03bbcae8371efbc80e5a181e991cb4c Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Mon, 13 Jul 2020 10:40:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8B=96=E5=8A=A8=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E5=9B=9E=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apolloTable/component/DragSorted.tsx      |  4 +-
 components/apolloTable/component/Table.tsx    | 49 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/components/apolloTable/component/DragSorted.tsx b/components/apolloTable/component/DragSorted.tsx
index 3980606..2c745f1 100644
--- a/components/apolloTable/component/DragSorted.tsx
+++ b/components/apolloTable/component/DragSorted.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 const DragSorted = (props: any) => {
     const {
-        className, style, columnName, orderNo, onDropFinish, onScroll,
+        className, style, columnName, orderNo, onDropFinish, onScroll, canDrag,
     } = props;
     // 长按计时器
     const timer: any = useRef(null);
@@ -142,7 +142,7 @@ const DragSorted = (props: any) => {
     const onMouseDown = useCallback(
         (e) => {
             // 没有拖拽回调，默认不支持拖拽事件
-            if (!onDropFinish) {
+            if (!canDrag) {
                 return;
             }
             // 不是左键点击不作处理
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index e51e956..0a23587 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -292,6 +292,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 });
         }
     };
+    // 拖拽滚动表格
     onScrollHor = (direction: string, step: number) => {
         // 拖动超过视图范围，将表格左右滚动
         if (this.grid4) {
@@ -310,6 +311,51 @@ export default class AirTable extends Component<TableProps, TableState> {
             }
         }
     };
+    // 拖拽排序回调
+    onDragSorted = (dragColumn:any, dropColumn:any) => {
+        const { onDragSorted } = this.props;
+        const { columns } = this.state;
+        const newColumns:any[] = [];
+        columns.map((item) => {
+            if (dragColumn.orderNo > dropColumn.orderNo) {
+                if (item.orderNo >= dropColumn.orderNo && item.orderNo <= dragColumn.orderNo) {
+                    if (item.columnName === dragColumn.columnName) {
+                        newColumns.push({
+                            ...item,
+                            orderNo: dropColumn.orderNo,
+                        });
+                    } else {
+                        newColumns.push({
+                            ...item,
+                            orderNo: item.orderNo + 1,
+                        });
+                    }
+                } else {
+                    newColumns.push(item);
+                }
+            } else {
+                if (item.columnName === dragColumn.columnName) {
+                    newColumns.push({
+                        ...item,
+                        orderNo: dropColumn.orderNo - 1,
+                    });
+                } else if (item.orderNo >= dragColumn.orderNo && item.orderNo <= dropColumn.orderNo) {
+                    newColumns.push({
+                        ...item,
+                        orderNo: item.orderNo - 1,
+                    });
+                } else {
+                    newColumns.push(item);
+                }
+            }
+        });
+        newColumns.sort((a, b) => {
+            return a.orderNo - b.orderNo;
+        });
+        if (typeof onDragSorted === 'function') {
+            onDragSorted(newColumns);
+        }
+    };
     // 渲染表头
     renderHeaderCell = (
         { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
@@ -332,11 +378,12 @@ export default class AirTable extends Component<TableProps, TableState> {
             <DragSorted
                 columnName={columnName}
                 orderNo={orderNo}
-                onDropFinish={onDragSorted}
+                onDropFinish={this.onDragSorted}
                 onScroll={this.onScrollHor}
                 className={styles.headerCell}
                 key={key}
                 style={style}
+                canDrag={!!onDragSorted}
             >
                 <ResizableBox
                     width={style.width}
-- 
2.21.0