fix: 重构表字段拖拽功能，封装拖拽表格组件

src/components/DragTable/DragTable.jsx

+import React, { useState, useEffect } from 'react';
+import { Table } from 'antd';
+
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+
+import DraggableBodyRow from './DraggableBodyRow';
+
+const DragTable = props => {
+  const { columns, dataSource, dragCallBack } = props;
+  const [data, setData] = useState(null); // 分组后的数组
+
+  const components = {
+    body: {
+      row: DraggableBodyRow,
+    },
+  };
+  useEffect(() => {
+    setData(dataSource);
+  }, []);
+  // 每次拖拽后返回
+  useEffect(() => {
+    dragCallBack(data);
+  }, [data]);
+  // 移动数组元素到指定位置
+  const moveInArray = (arr, from, to) => {
+    // 确保是有效数组
+    if (Object.prototype.toString.call(arr) !== '[object Array]') {
+      throw new Error('Please provide a valid array');
+    }
+    // 删除当前的位置
+    let item = arr.splice(from, 1);
+    // 确保还剩有元素移动
+    if (!item.length) {
+      throw new Error(`There is no item in the array at index ${from}`);
+    }
+    // 移动元素到指定位置
+    arr.splice(to, 0, item[0]);
+    return arr;
+  };
+  // 拖拽表格
+  const moveRow = (dragIndex, hoverIndex) => {
+    setData(val => {
+      let newData = JSON.parse(JSON.stringify(val));
+      newData = moveInArray(newData, dragIndex, hoverIndex);
+      return newData;
+    });
+  };
+  return (
+    <div>
+      <DndProvider backend={HTML5Backend}>
+        <Table
+          bordered
+          columns={columns}
+          dataSource={data}
+          components={components}
+          onRow={(record, index) => ({
+            index,
+            moveRow,
+          })}
+          {...props}
+        />
+      </DndProvider>
+    </div>
+  );
+};
+
+export default DragTable;

src/components/DragTable/DraggableBodyRow.jsx

+import React, { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import './index.less';
+
+const DraggableBodyRow = ({
+  name,
+  index,
+  moveRow,
+  className,
+  style,
+  tableType,
+  ...restProps
+}) => {
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: 'DraggableBodyRow',
+    collect: monitor => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        canDrop: monitor.canDrop(),
+        dropClassName:
+          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+      };
+    },
+    drop: item => {
+      moveRow(item.index, index, tableType);
+    },
+  });
+  const [, drag] = useDrag({
+    type: 'DraggableBodyRow',
+    item: { index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
+
+export default DraggableBodyRow;

src/pages/platformCenter/bsmanager/tablemanager/components/Field/DraggableBodyRow.jsx

+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import './index.less';
+
+const DraggableBodyRow = ({
+  name,
+  index,
+  moveRow,
+  className,
+  style,
+  tableType,
+  ...restProps
+}) => {
+  useEffect(() => {}, []);
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: 'DraggableBodyRow',
+    collect: monitor => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        canDrop: monitor.canDrop(),
+        dropClassName:
+          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+      };
+    },
+    drop: item => {
+      console.log(item, '3333');
+      moveRow(item.index, index, tableType);
+    },
+  });
+  const [, drag] = useDrag({
+    type: tableType === 'field' ? 'DraggableBodyRow' : '',
+    item: { index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
+
+export default DraggableBodyRow;

src/pages/platformCenter/bsmanager/tablemanager/components/Field/index.less

@@ -93,4 +93,15 @@
 }
   .activeTile{
       background-color:#dfe8f6 ;
-  }
\ No newline at end of file
+  }
+
+  tr.drop-over-downward td {
+    border-bottom: 2px dashed #1890ff;
+  }
+  
+  tr.drop-over-upward td {
+    border-top: 2px dashed #1890ff;
+  }
+  .clickRowStyle{
+    background: #cfe7fd;
+}
\ No newline at end of file

src/pages/platformCenter/bsmanager/tablemanager/index.jsx

@@ -34,6 +34,7 @@ import Editor from './components/Field/editor';
 import AddTablelList from './components/Field/addTable';
 import AffiliateAdd from './components/Field/affiliateAdd';
 import LoadGroup from './components/Field/loadGroup';
+import LoadGroupNew from './components/Field/loadGroupNew';
 import { useHistory } from 'react-router-dom';
 const { Search } = Input;
 const { Option } = Select;
@@ -551,7 +552,7 @@ const TableManager = props => {
           />
         )}
 
-        {visible && type === 'sort' && (
+        {/* {visible && type === 'sort' && (
           <LoadGroup
             visible={visible}
             type={type}
@@ -559,6 +560,15 @@ const TableManager = props => {
             onCancel={() => setVisible(false)}
             callBackSubmit={onSubmit}
           />
+        )} */}
+        {visible && type === 'sort' && (
+          <LoadGroupNew
+            visible={visible}
+            type={type}
+            formObj={formObj}
+            onCancel={() => setVisible(false)}
+            callBackSubmit={onSubmit}
+          />
         )}
       </PageContainer>
     </Spin>

src/pages/platformCenter/bsmanager/workFlow/flowComponents/Order.jsx

 import React, { useState, useEffect } from 'react';
 import { flowReOrder } from '@/services/platform/flow';
-import Sortable from 'sortablejs';
 import { Modal, notification } from 'antd';
-import styles from '../flow.less';
+import DragTable from '@/components/DragTable/DragTable';
 const Order = props => {
   const { visible, handleCancel, tableData, submitCallBack } = props;
   const [orderTable, setOrderTable] = useState([]);
   const [flowIDs, setFlowIDs] = useState('');
-  // 页面弹出的时候初始化拖拽
-  let dragTimer = null;
+  // 页面弹出的时候初始化拖拽数据
   useEffect(() => {
     if (visible) {
       setOrderTable(() => {
@@ -16,17 +14,11 @@ const Order = props => {
         table = tableData.filter(item => item.extendID !== -1);
         return table;
       });
-      dragTimer = setTimeout(() => {
-        dragSort();
-      }, 0);
     }
-    return () => {
-      clearTimeout(dragTimer);
-    };
   }, [visible]);
-  // 根据orderTable初始化flowIDs
+  // 根据orderTable值改变flowIDs
   useEffect(() => {
-    let ids;
+    let ids = '';
     orderTable.forEach((item, index) => {
       if (index === orderTable.length - 1) {
         ids += `${item.extendID}`;
@@ -34,31 +26,8 @@ const Order = props => {
         ids += `${item.extendID},`;
       }
     });
-
     setFlowIDs(ids);
   }, [orderTable]);
-  // 初始化排序
-  const dragSort = () => {
-    let el = document.getElementById('doctor-drag-items');
-    if (el) {
-      Sortable.create(el, {
-        animation: 100, // 动画参数
-        onEnd(evt) {
-          // 拖拽完毕之后发生，只需关注该事件
-          let ids = '';
-          let drg = evt.from.children;
-          drg.forEach((item, index) => {
-            if (index === drg.length - 1) {
-              ids += `${item.getAttribute('drag-id')}`;
-            } else {
-              ids += `${item.getAttribute('drag-id')},`;
-            }
-          });
-          setFlowIDs(ids);
-        },
-      });
-    }
-  };
   // 提交表单
   const onSubmit = () => {
     flowReOrder({ flowIDs }).then(res => {
@@ -78,6 +47,20 @@ const Order = props => {
       }
     });
   };
+  // 拖拽回调函数
+  const dragCallBack = data => {
+    if (data) {
+      setOrderTable(data);
+    }
+  };
+  const columns = [
+    {
+      title: '字段名',
+      dataIndex: 'name',
+      width: 150,
+      key: 'name',
+    },
+  ];
   return (
     <Modal
       title="调整顺序"
@@ -87,31 +70,17 @@ const Order = props => {
       maskClosable={false}
       destroyOnClose
     >
-      <div className={styles.doctorTable}>
-        <table>
-          <tbody id="doctor-drag-items">
-            {orderTable && orderTable.length > 0 ? (
-              orderTable.map(item => (
-                <tr
-                  drag-id={item.extendID}
-                  key={item.extendID}
-                  style={{ cursor: 'move' }}
-                >
-                  <td>
-                    <span title={item.name}>{item.name}</span>
-                  </td>
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td colSpan="10" style={{ textAlign: 'center' }}>
-                  暂无数据
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
+      <DragTable
+        bordered
+        style={{ marginBottom: '10px' }}
+        rowKey={record => record.extendID}
+        columns={columns}
+        dataSource={orderTable}
+        showHeader={false}
+        pagination={false}
+        size="small"
+        dragCallBack={dragCallBack}
+      />
     </Modal>
   );
 };

src/pages/platformCenter/filedConfig/filedConfig.jsx

@@ -26,7 +26,7 @@ import FieldEditor from './fieldEditor';
 import { useHistory } from 'react-router-dom';
 import styles from './index.less';
 import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd';
-import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroup';
+import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroupNew';
 const AddModal = props => {
   const history = useHistory();
   const [allData, setAllData] = useState([]);