perf: web4菜单拖拽

src/pages/mobileConfig/index.js

@@ -7,6 +7,7 @@ import VersionPublish from './menuconfig/VersionPublish';
 import {
   getMiniAppModuleTree,
   deleteWebsite,
+  deleteMiniMenu,
 } from '@/services/mobileConfig/api';
 import SiteConfig from './SiteConfig';
 import MenuConfig from './menuconfig/MenuConfig';
@@ -83,6 +84,7 @@ const MobileConfigPage = props => {
         setLoading(false);
         if (res.success) {
           setFlag(flag + 1);
+          deleteMiniMenu({ visible: 'miniapp' });
           notification.success({
             message: '提示',
             duration: 3,

src/pages/webConfig/menuconfig/webMenu.jsx

@@ -18,6 +18,7 @@ import {
   deleteWebMenu, // 删
   editWebMenu, // 改
   getWebMenuInfo, // 查
+  dragMenu, // 菜单拖拽
 } from '@/services/webConfig/api';
 
 const MiniMenu = props => {
@@ -36,6 +37,7 @@ const MiniMenu = props => {
   const [roleList, setRoleList] = useState([]); // 复选框选中的值
   const [modalLoading, setModalLoading] = useState(false);
   const [submitLoading, setSubmitLoading] = useState(false);
+  const [newTreeList, setNewTreeList] = useState([]);
 
   /* *****************************************************  */
   const [curMenuType, setCurMenuType] = useState('');
@@ -45,6 +47,11 @@ const MiniMenu = props => {
     getInfo();
   }, [menuID]);
 
+  useEffect(() => {
+    console.log(menu, 'menu');
+    setNewTreeList(menu.children || []);
+  }, [menu]);
+
   // 处理数据
   const mapTree = val => {
     const obj = { ...val };
@@ -278,6 +285,93 @@ const MiniMenu = props => {
     });
     setRoleList(arr2);
   };
+  // 树的拖动
+  const handleDrop = infos => {
+    console.log(infos, 'newTree');
+    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 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 };
+    });
+    console.log(obj, 'obj');
+    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;
+      }
+      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 (dropPosition === -1) {
+        arrList.splice(endIndex - 1, 0, obj.id);
+      } else if (dropPosition === 1) {
+        arrList.splice(endIndex, 0, obj.id);
+      }
+    }
+
+    dragMenu({
+      menuID: obj.id,
+      newParentID: obj.parentId || -1,
+      menuList: String(arrList) || '',
+      _version: 9999,
+      _dc: Date.now(),
+    }).then(res => {
+      console.log(res);
+      if (res.success) {
+        updateMenuTree();
+        // setFlag(flag + 1);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.message || '操作失败',
+        });
+      }
+    });
+  };
+  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
@@ -317,8 +411,10 @@ const MiniMenu = props => {
               onSelect={handleSelect}
               treeData={menu.children.map(item => mapTree(item))}
               blockNode
+              draggable
               autoExpandParent
               selectedKeys={[menuID]}
+              onDrop={handleDrop}
               // expandedKeys={[menuID]}
             />
           )}

src/pages/webConfig/menuconfig/webMenu.less

 .box{
   min-height: calc( 100vh - 198px);
   display: flex;
+  overflow-x: hidden;
 }
 .left{
   min-width: 300px;
@@ -79,8 +80,8 @@
   border: 1px solid #eee;
   padding: 10px;
 }
-.modal{
-  .ant-modal-body{
-    padding: 0 !important;
-  }
-}
\ No newline at end of file
+// .modal{
+//   .ant-modal-body{
+//     padding: 0 !important;
+//   }
+// }
\ No newline at end of file

src/services/mobileConfig/api.js

@@ -105,3 +105,6 @@ export const addWebsite = (params, options) => {
 // 菜单拖拽
 export const dragMenu = params =>
   get(`${CITY_SERVICE}/OMS.svc/P_DragMenu`, params);
+
+export const deleteMiniMenu = params =>
+  get(`${PUBLISH_SERVICE}/PlatformCenter/DeleteMiniMenu`, params);

src/services/webConfig/api.js

@@ -107,3 +107,7 @@ export const getConfigContent = name =>
   get(`${CITY_SERVICE}/OMS.svc/W4_GetConfigContent?_version=9999`, {
     fileName: name,
   });
+
+// 菜单拖拽
+export const dragMenu = params =>
+  get(`${CITY_SERVICE}/OMS.svc/P_DragMenu`, params);