fix: 重构web配置拖拽逻辑，修复表字段保存排序乱了问题

src/components/DragTable/DragTable.jsx

@@ -59,7 +59,7 @@ const DragTable = props => {
             index,
             ItemTypes,
             moveRow,
-            onClick: () => props.onClick(record),
+            onClick: () => props.onClick && props.onClick(record),
           })}
           {...props}
         />

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

@@ -28,7 +28,6 @@ const DraggableBodyRow = ({
       };
     },
     drop: item => {
-      console.log(item, '3333');
       moveRow(item.index, index, tableType);
     },
   });

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

@@ -80,6 +80,7 @@ const Order = props => {
         pagination={false}
         size="small"
         dragCallBack={dragCallBack}
+        ItemTypes="flowOrder"
       />
     </Modal>
   );

src/pages/platformCenter/filedConfig/fieldEditor.jsx

@@ -107,6 +107,7 @@ const AddModal = props => {
   const { Item } = Form;
   // 提交
   const onSubmit = () => {
+    console.log(itemData, 'itemData');
     form.validateFields().then(validate => {
       if (validate) {
         setLoading(true);
@@ -125,6 +126,7 @@ const AddModal = props => {
             ExceptionValue: pramData.ExceptionValue || '',
             Preset: pramData.Preset || '',
             ID: Number(itemData.ID),
+            Order: Number(itemData.order),
             Name: obj.Name,
             Alias: obj.Alias,
             SyncEvent: obj.SyncEvent,

src/pages/platformCenter/filedConfig/filedConfig.jsx

@@ -22,8 +22,8 @@ import {
   removeFields,
   loadUnattachedTables,
 } from '@/services/platform/bs';
-import FieldEditor from './fieldEditor';
 import { useHistory } from 'react-router-dom';
+import FieldEditor from './fieldEditor';
 import styles from './index.less';
 import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd';
 import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroupNew';
@@ -187,18 +187,16 @@ const AddModal = props => {
     return (
       <Table
         columns={columns}
-        onRow={record => {
-          return {
-            onDoubleClick: event => {
-              event.stopPropagation();
-              editor(record);
-            },
-            onClick: event => {
-              event.stopPropagation();
-              setSelectTableName(record);
-            }, // 点击行
-          };
-        }}
+        onRow={record => ({
+          onDoubleClick: event => {
+            event.stopPropagation();
+            editor(record);
+          },
+          onClick: event => {
+            event.stopPropagation();
+            setSelectTableName(record);
+          }, // 点击行
+        })}
         bordered
         rowClassName={setRowClassName}
         showHeader={false}
@@ -219,13 +217,11 @@ const AddModal = props => {
       key: 'type',
       align: 'left',
       width: 150,
-      render: text => {
-        return (
-          <a>
-            {text}(共{allData[text] ? allData[text].length : ''}条)
-          </a>
-        );
-      },
+      render: text => (
+        <a>
+          {text}(共{allData[text] ? allData[text].length : ''}条)
+        </a>
+      ),
     },
     {
       title: '别名',
@@ -279,7 +275,7 @@ const AddModal = props => {
     },
   ];
   useEffect(() => {
-    console.log(props)
+    console.log(props);
     if (props.match.params.id) {
       setFormObj(props.match.params.id);
       setTreeLoading(true);
@@ -309,14 +305,15 @@ const AddModal = props => {
     if (!name) {
       return '请传入对象属性';
     }
-    //先获取一下这个数组中有多少个"name"
+    // 先获取一下这个数组中有多少个"name"
     let nameArr = [];
+    // eslint-disable-next-line no-restricted-syntax
     for (let i in initialArr) {
       if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
         nameArr.push(initialArr[i][`${name}`]);
       }
     }
-    //新建一个包含多个list的结果对象
+    // 新建一个包含多个list的结果对象
     let tempObj = {};
     // 根据不同的"name"生成多个数组
     for (let k in nameArr) {
@@ -378,13 +375,13 @@ const AddModal = props => {
     }
     setSelect(data);
   };
-  //附加
+  // 附加
   const add = record => {
     setPramFormObj(props.location.state.template);
     setType('affiliateAdd');
     setVisible(true);
   };
-  //分组与排序
+  // 分组与排序
   const sort = record => {
     setPramFormObj(props.location.state.template);
     setType('sort');
@@ -427,12 +424,11 @@ const AddModal = props => {
             expandable={{ expandedRowRender }}
             size="small"
             rowKey="id"
-            expandedRowKeys={select.map(item => item.key)} //展开的行
-            expandRowByClick={true}
-            defaultExpandAllRows={true}
+            expandedRowKeys={select.map(item => item.key)} // 展开的行
+            expandRowByClick
+            defaultExpandAllRows
             pagination={false}
             scroll={{ y: 'calc(100vh - 186px)' }}
-            size="small"
             onExpand={onUnfold}
           />
         </div>

src/pages/webConfig/menuconfig/webMenu.jsx

@@ -383,60 +383,88 @@ const MiniMenu = props => {
     });
     setRoleList(arr2);
   };
+  // 返回拖拽完毕后的信息
+  const loop = (data, key, parentID, callback) => {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].menuID === key) {
+        return callback(data[i], i, data, parentID);
+      }
+      if (data[i].children) {
+        loop(data[i].children, key, data[i].menuID, callback);
+      }
+    }
+  };
   // 树的拖动
   const handleDrop = infos => {
-    const { pos } = infos.node.props;
-    const dragKey = infos.dragNode.props.eventKey;
-    const dragPos = infos.dragNode.props.pos.split('-'); // 拖动的节点
-    const dropKey = infos.node.props.eventKey;
-    const dropPos = infos.node.props.pos.split('-'); // 拖动结束的节点
-    const endIndex = Number(dropPos[dropPos.length - 1]);
+    const dropKey = infos.node.key;
+    const dragKey = infos.dragNode.key;
+    const dropPos = infos.node.pos.split('-');
     const dropPosition =
       infos.dropPosition - Number(dropPos[dropPos.length - 1]);
-    // let obj = findNum(newTreeList, dragKey, getArrList);
-    let obj;
-    findNum(newTreeList, dragKey, (arr, id, parentId, index) => {
-      obj = { arr, id, parentId, index };
-      return { arr, id, parentId, index };
+    const data = [...menuList];
+    // 找到拖拽的元素
+    let dragObj;
+    let dropObj;
+    let id;
+    let dragList;
+    loop(data, dropKey, -1, item => {
+      dropObj = item;
     });
-    let arrList = [];
-    if (
-      dragPos.length !== dropPos.length ||
-      dragPos[dragPos.length - 2] !== dropPos[dropPos.length - 2]
-    ) {
-      notification.warning({
-        message: '提示',
-        duration: 3,
-        description: '操作失败',
-      });
-      return null;
-    }
-    let idIndex;
-    obj.arr.map((item, index) => {
-      if (item.menuID === obj.id) {
-        idIndex = index;
-        return;
+    loop(data, dragKey, -1, (item, index, arr) => {
+      if (infos.dropToGap) {
+        arr.splice(index, 1);
+        dragObj = item;
+      } else if (dropObj.menuType !== 'Web4Menu') {
+        arr.splice(index, 1);
+        dragObj = item;
       }
-      arrList.push(item.menuID);
     });
-    if (idIndex > endIndex) {
-      if (dropPosition === -1) {
-        arrList.splice(endIndex, 0, obj.id);
-      } else if (dropPosition === 1) {
-        arrList.splice(endIndex + 1, 0, obj.id);
-      }
-    } else if (idIndex < endIndex) {
+    if (!infos.dropToGap) {
+      // Drop on the content
+      loop(data, dropKey, -1, item => {
+        item.children = item.children || [];
+        if (item.menuType !== 'Web4Menu') {
+          // where to insert 示例添加到头部，可以是随意位置
+          item.children.unshift(dragObj);
+          id = item.menuID;
+          dragList = item.children.map(val => val.menuID);
+        }
+      });
+    } else if (
+      (infos.node.props.children || []).length > 0 && // Has children
+      infos.node.props.expanded && // Is expanded
+      dropPosition === 1 // On the bottom gap
+    ) {
+      loop(data, dropKey, -1, item => {
+        item.children = item.children || [];
+        // where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+        id = item.menuID;
+        dragList = item.children.map(val => val.menuID);
+      });
+    } else {
+      let ar;
+      let i;
+      loop(data, dropKey, -1, (item, index, arr, parentID) => {
+        ar = arr;
+        i = index;
+        id = parentID;
+      });
       if (dropPosition === -1) {
-        arrList.splice(endIndex - 1, 0, obj.id);
-      } else if (dropPosition === 1) {
-        arrList.splice(endIndex, 0, obj.id);
+        ar.splice(i, 0, dragObj);
+      } else {
+        ar.splice(i + 1, 0, dragObj);
       }
+      dragList = ar.map(val => val.menuID);
+    }
+    // 如果拖拽到菜单下不做任何处理
+    if (!dragList) {
+      return;
     }
-
     dragMenu({
-      menuID: obj.id,
-      newParentID: obj.parentId || -1,
-      menuList: String(arrList) || '',
+      menuID: dragKey,
+      newParentID: id || -1,
+      menuList: String(dragList) || '',
       _version: 9999,
       _dc: Date.now(),
     }).then(res => {
@@ -452,21 +480,6 @@ const MiniMenu = props => {
       }
     });
   };
-  const findNum = (array, id, callback, parentId = '') => {
-    let ptId = parentId;
-    let arrFlag = true;
-    array.map((item, index) => {
-      if (item.menuID === id) {
-        callback(array, id, parentId, index);
-        arrFlag = false;
-        return;
-      }
-      if (arrFlag && item.children && item.children.length > 0) {
-        ptId = item.menuID;
-        findNum(item.children, id, callback, ptId);
-      }
-    });
-  };
   return (
     <Spin spinning={loading} tip="loading...">
       <div