feat: 菜单拖拽功能

src/pages/database/CurrentSolution.jsx

@@ -94,6 +94,24 @@ const CurrentSolution = () => {
           </div>
         </Spin>
       </Card>
+      <div className={styles.textBox}>
+        <p>
+          <strong>友情提示:</strong>
+        </p>
+        <p>
+          熊猫智慧水务应用解决方案的管理，集成了数据库管理、用户权限管理、基础平台管理、应用中心管理、系统日志管理等核心模块;
+        </p>
+        <p>
+          主要为客户项目经理在实施应用部署的过程中提供可视化配置系统，一站式交付用户需求的熊猫智慧水务相关产品;数据库支持SQL
+          Server、Oracle、MongoDB、MySQL四大类常见数据库;
+        </p>
+        <p>
+          平台中心涵盖GIS平台、物联网平台、业务平台、消息平台等基础平台，2021年会推出数字孪生平台、数据治理平台、AI平台等进阶平台;应用中心主要把客户应用按端分离，分为PCWeb端、无线App端、微信小程序端，结合应用界面与菜单权限配置完成;
+        </p>
+        <p>
+          用户中心负责管理用户与平台的关系、用户与端的关系、用户与功能菜单的关系、用户与设备的关系。
+        </p>
+      </div>
     </PageContainer>
   );
 };

src/pages/database/CurrentSolution.less

@@ -13,4 +13,13 @@
 }
 .tAlign{
   text-align: center;
+}
+.textBox{
+  margin-left: 20px;
+  margin-top: 20px;
+  p{
+    margin: 5px;
+    color:gray;
+    font-size: 16px;
+  }
 }
\ No newline at end of file

src/pages/mobileConfig/index.js

@@ -12,7 +12,7 @@ import SiteConfig from './SiteConfig';
 import MenuConfig from './menuconfig/MenuConfig';
 const { TabPane } = Tabs;
 const MobileConfigPage = props => {
-  const [activeKey, setActiveKey] = useState('0'); // tabs活动页
+  const [activeKey, setActiveKey] = useState('1'); // tabs活动页
   const [miniTitle, setMiniTitle] = useState('');
   const [flag, setFlag] = useState(1);
   const [showConfig, setShowConfig] = useState(true);

src/pages/mobileConfig/menuconfig/checkBox.jsx

@@ -3,7 +3,6 @@ import { Checkbox, Empty } from 'antd';
 import styles from './checkBox.less';
 const CheckList = props => {
   const { info = {}, valueCallback = () => {}, nodeType = '', addList } = props;
-  console.log(info, 'info');
   const [list, setList] = useState([]);
   const [addRoleList, setAddRoleList] = useState([]);
   useEffect(() => {

src/pages/mobileConfig/menuconfig/editForm.jsx

@@ -8,7 +8,6 @@ const EditForm = props => {
   const { submitCallback, nodeType, info } = props;
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
-  console.log(info);
   const layout = {
     layout: 'horizontal',
     labelCol: { span: 4, offset: 1 },

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -26,6 +26,7 @@ import {
   deleteMenu,
   editMenu,
   getRoleListPlain,
+  dragMenu,
 } from '@/services/mobileConfig/api';
 import styles from './miniMenu.less';
 
@@ -52,10 +53,12 @@ const MiniMenu = props => {
   const [modalLoading, setModalLoading] = useState(false);
   const [submitLoading, setSubmitLoading] = useState(false);
   const [addList, setAddList] = useState([]);
+  const [newTreeList, setNewTreeList] = useState([]);
   // 获取菜单树
   useEffect(() => {
     updateTrees();
   }, [flag]);
+  // 获取角色列表
   useEffect(() => {
     getRoleListPlain({
       subSystemValue: 'miniapp',
@@ -88,12 +91,16 @@ const MiniMenu = props => {
     })
       .then(res => {
         console.log(res, 'res');
+        // const result1 = res[0].children[0].children[2].children;
+        // setNewTreeList(JSON.parse(JSON.stringify(result1)));
+        // setTreeData(result1);
+        // setLoading(false);
         if (res.code === 0) {
           const { data } = res;
           setLoading(false);
           let obj = data[0].children.find(item => item.id.includes('miniapp'));
           const result = obj.children[1].children;
-
+          setNewTreeList(JSON.parse(JSON.stringify(result)));
           setTreeData(result);
           console.log(result);
           // 第一次加载，默认选择第一个组织
@@ -378,11 +385,92 @@ const MiniMenu = props => {
     setRoleList(arr2);
   };
   // 树的拖动
-  const handleDrop = info => {
-    console.log(info, 'info');
+  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 dropPosition =
+      infos.dropPosition - Number(dropPos[dropPos.length - 1]);
+    console.log(findNum(newTreeList, dragKey, getArrList), 'aa');
+
+    let obj = findNum(newTreeList, dragKey, getArrList);
+    let arrList = [];
+    if (dragPos.length !== dropPos.length) {
+      notification.warning({
+        message: '提示',
+        duration: 3,
+        description: '操作失败',
+      });
+      return null;
+    }
+    obj.arr.map(item => {
+      if (item.menuID === obj.id) {
+        return;
+      }
+      arrList.push(item.menuID);
+    });
+    console.log(
+      infos,
+      'info',
+      pos,
+      dragKey,
+      dropKey,
+      dropPos,
+      infos.dropPosition,
+      dragPos,
+      dropPosition,
+      arrList,
+    );
+    if (dropPosition === -1) {
+      arrList.splice(Number(dropPos[dropPos.length - 1]), 0, obj.id);
+    } else if (dropPosition === 1) {
+      arrList.splice(Number(dropPos[dropPos.length - 1]) + 1, 0, obj.id);
+    }
+    console.log(arrList);
+
+    console.log(arrList, 'console.log(arrList);', obj.menuID);
+    dragMenu({
+      menuID: obj.id,
+      newParentID: obj.parentId || -1,
+      menuList: String(arrList) || '',
+      _version: 9999,
+      _dc: Date.now(),
+    }).then(res => {
+      console.log(res);
+      if (res.success) {
+        setFlag(flag + 1);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.message || '操作失败',
+        });
+      }
+    });
+  };
+  const findNum = (array, id, callback, parentId = '') => {
+    let ptId = parentId;
+    let arr = [];
+    array.map((item, index) => {
+      if (item.menuID === id) {
+        return (arr = callback(array, id, parentId, index));
+      }
+      if (item.children && item.children.length > 0) {
+        ptId = item.menuID;
+        return (arr = findNum(item.children, id, callback, ptId));
+      }
+    });
+    return arr;
+  };
+  const getArrList = (arr, id, parentId, index) => {
+    console.log(arr, 'arr', id, 'id', parentId, 'parentId', index, 'index');
+    return { arr, id, parentId, index };
   };
-  const handleDragEnter = info => {
-    console.log(info, 'info');
+  const handleDragEnter = infos => {
+    console.log(infos, 'info');
   };
   return (
     <Spin spinning={loading} tip="loading...">

src/services/mobileConfig/api.js

@@ -101,3 +101,7 @@ export const addWebsite = (params, options) => {
     options,
   );
 };
+
+// 菜单拖拽
+export const dragMenu = params =>
+  get('/Cityinterface/rest/services/OMS.svc/P_DragMenu', params);