fix: 'web配置，移动应用配置左侧树结构交互修改'

src/pages/productCenter/mobileConfig/menuconfig/AddForm.jsx

@@ -11,6 +11,7 @@ const AddForm = props => {
     submitCallback,
     nodeType,
     nodeObj,
+    keepType,
     addType,
     submitLoading,
     valueCallback,
@@ -27,11 +28,11 @@ const AddForm = props => {
   const submit = () => {
     if (addType === 1 || addType === 2) {
       let obj = form.getFieldsValue();
-      submitCallback(obj, nodeObj);
+      submitCallback(obj, nodeObj, keepType);
     }
     if (addType === 3 || addType === 4) {
       let obj = otherForm.getFieldsValue();
-      submitCallback(obj, nodeObj);
+      submitCallback(obj, nodeObj, keepType);
     }
   };
   const finish = () => {

src/pages/productCenter/mobileConfig/menuconfig/miniMenu.jsx

@@ -32,7 +32,7 @@ const MiniMenu = props => {
   const [treeData, setTreeData] = useState([]); // 树的数据
   const [loading, setLoading] = useState(false); // 加载
   const [menuID, setMenuID] = useState(''); // 选中的树ID
-  const [saveID, setSaveID] = useState(''); // 保存选择的树id
+  // const [saveID, setSaveID] = useState(''); // 保存选择的树id
   const [nodeType, setNodeType] = useState(''); // 选中的节点类型
   const [info, setInfo] = useState({});
   const [addVisible, setAddVisible] = useState(false); // 新增弹窗
@@ -47,6 +47,9 @@ const MiniMenu = props => {
   const [addList, setAddList] = useState([]);
   const [newTreeList, setNewTreeList] = useState([]);
   const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
+  const [keepId, setKeepId] = useState('');
+  const [mapDataList, setMapDataList] = useState(new Set());
+  const [keepType, setKeepType] = useState('');
 
   // 获取菜单树
   useEffect(() => {
@@ -68,14 +71,14 @@ const MiniMenu = props => {
   // 获取菜单信息
   useEffect(() => {
     console.log(flag, 'flag');
-    if (flag === 2) {
+    if (flag === 1) {
       setExpendKey(menuID);
     }
     getInfo();
   }, [menuID]);
 
   // 更新树
-  const updateTrees = () => {
+  const updateTrees = (e, h) => {
     getMiniAppModuleTree({
       userMode: userMode || 'super',
     })
@@ -92,17 +95,45 @@ const MiniMenu = props => {
           console.log(result, 'result');
           setTreeData(result);
           if (result.length > 0) {
-            setFlag(flag + 1);
+            if (e) {
+              result.map(item => mapData(item, e));
+              let aa = [...mapDataList].find(i => i.text === e && i.menuType === h);
+              console.log(aa);
+              console.log(h);
+              setMenuID(aa.menuID);
+              setExpendKey(aa.menuID);
+              switch (aa.menuType) {
+                case 'MiniAppMenuGroup':
+                  setNodeType(1);
+                  setAddType(1);
+                  break;
+                case 'MiniAppMenuGroupTwo':
+                  setNodeType(2);
+                  setAddType(2);
+                  break;
+                case 'MiniAppMenu':
+                  setNodeType(3);
+                  setAddType(3);
+                  break;
+                case 'MiniAppMenuThree':
+                  setNodeType(4);
+                  setAddType(4);
+                  break;
+                default:
+                  break;
+              }
+            }
+
             if (flag === 1) {
               setMenuID(result[0].menuID);
               switch (result[0].menuType) {
                 case 'MiniAppMenuGroup':
                   setNodeType(1);
-                  setAddType(2);
+                  setAddType(1);
                   break;
                 case 'MiniAppMenuGroupTwo':
                   setNodeType(2);
-                  setAddType(4);
+                  setAddType(2);
                   break;
                 case 'MiniAppMenu':
                   setNodeType(3);
@@ -115,9 +146,11 @@ const MiniMenu = props => {
                 default:
                   break;
               }
+              setFlag(flag + 1);
             }
           }
           setLoading(false);
+          setKeepId(result[0]);
           // 第一次加载，默认选择第一个组织
           // if (treeFlag) {
           //   handleSelect([result[0].menuID], false);
@@ -147,17 +180,17 @@ const MiniMenu = props => {
           <div className={styles.tip}>
             {obj.menuType === 'MiniAppMenuGroup' && (
               <Tooltip title="新增菜单组" className={styles.fsize}>
-                <FolderAddTwoTone onClick={() => addMenuGroupTip(obj)} />
+                <FolderAddTwoTone onClick={e => addMenuGroupTip(obj, e)} />
               </Tooltip>
             )}
             {obj.menuType === 'MiniAppMenuGroupTwo' && (
               <Tooltip title="新增功能菜单" className={styles.fsize}>
-                <FileAddTwoTone onClick={() => addMenuTip(obj)} />
+                <FileAddTwoTone onClick={e => addMenuTip(obj, e)} />
               </Tooltip>
             )}
 
             <Tooltip title="删除菜单" className={styles.fsize}>
-              <DeleteTwoTone onClick={() => deleteMenuTip(obj)} />
+              <DeleteTwoTone onClick={e => deleteMenuTip(obj, e)} />
             </Tooltip>
           </div>
         </div>
@@ -174,6 +207,15 @@ const MiniMenu = props => {
       children: hasChild ? obj.children.map(i => mapTree(i)) : [],
     };
   };
+
+  const mapData = (val, e) => {
+    const obj = { ...val };
+    const hasChild = obj.children.length > 0;
+    if (hasChild) {
+      obj.children.map(i => mapData(i));
+    }
+    mapDataList.add(obj);
+  };
   // 树的点击事件
   const handleSelect = (prop, treeNode) => {
     console.log(prop, treeNode);
@@ -184,18 +226,22 @@ const MiniMenu = props => {
       } = treeNode;
       console.log(menuType);
       switch (menuType) {
+        // 最上级菜单组
         case 'MiniAppMenuGroup':
           setNodeType(1);
-          setAddType(2);
+          setAddType(1);
           break;
+        // 第二级菜单组
         case 'MiniAppMenuGroupTwo':
           setNodeType(2);
-          setAddType(4);
+          setAddType(2);
           break;
+        // 最上级菜单
         case 'MiniAppMenu':
           setNodeType(3);
           setAddType(3);
           break;
+        // 第三季功能菜单
         case 'MiniAppMenuThree':
           setNodeType(4);
           setAddType(4);
@@ -206,12 +252,14 @@ const MiniMenu = props => {
     }
     if (prop[0]) {
       setMenuID(prop[0]);
-      setSaveID(prop[0]);
-    } else {
-      setMenuID(saveID);
+      // setSaveID(prop[0]);
     }
   };
 
+  const handleExpand = (keys, { expanded, node }) => {
+    console.log(keys);
+  };
+
   const getInfo = id => {
     if (!menuID) {
       return;
@@ -239,7 +287,8 @@ const MiniMenu = props => {
       });
   };
   // 删除的回调
-  const deleteMenuTip = val => {
+  const deleteMenuTip = (val, e) => {
+    e.stopPropagation();
     console.log(val, 'val');
     setModalTitle(val.text);
     setNodeObj(val);
@@ -257,9 +306,14 @@ const MiniMenu = props => {
         if (res.code === 0) {
           setDelVisible(false);
           setFlag(flag + 1);
-          updateTrees();
-          setNodeType('');
-          setNodeObj('');
+          if (nodeObj.menuID == menuID) {
+            updateTrees();
+            setMenuID(keepId.menuID);
+            setNodeType(1);
+            setNodeObj(keepId);
+          } else {
+            updateTrees();
+          }
           notification.success({
             message: '提示',
             duration: 3,
@@ -279,11 +333,14 @@ const MiniMenu = props => {
       });
   };
   // 新增菜单组
-  const addMenuGroupTip = val => {
+  const addMenuGroupTip = (val, e) => {
+    e.stopPropagation();
     console.log(val, 'addgroup');
     setModalTitle(`在${val.text}下新增菜单组`);
     setNodeObj(val);
+    setAddType(2);
     setAddVisible(true);
+    setKeepType('MiniAppMenuGroupTwo');
   };
   const rootAddGroup = () => {
     setNodeObj('');
@@ -291,13 +348,17 @@ const MiniMenu = props => {
     setModalTitle('新增最上级菜单组');
     setAddType(1);
     setAddVisible(true);
+    setKeepType('MiniAppMenuGroup');
   };
   // 新增功能菜单
-  const addMenuTip = val => {
+  const addMenuTip = (val, e) => {
+    e.stopPropagation();
     console.log(val, 'add');
     setNodeObj(val);
     setModalTitle(`在${val.text}下新增功能菜单`);
+    setAddType(4);
     setAddTwoVisible(true);
+    setKeepType('MiniAppMenuThree');
   };
   const rootAdd = () => {
     setModalTitle('新增最上级功能菜单');
@@ -305,15 +366,17 @@ const MiniMenu = props => {
     // setNodeType(3);
     setAddType(3);
     setAddTwoVisible(true);
+    setKeepType('MiniAppMenu');
   };
   // 新增提交的回调
-  const submitCallback = (prop, item) => {
+  const submitCallback = (prop, item, e) => {
     setSubmitLoading(true);
     let obj = { ...prop };
     // if (addType === 3 || addType === 4) {
     //   obj.relatedRoleList = String(roleList) || '';
     // }
     console.log(obj);
+    console.log(e);
     const parentID = item.menuID ? item.menuID : '-1';
     addMenu({
       _dc: Date.now(),
@@ -328,7 +391,9 @@ const MiniMenu = props => {
           setAddVisible(false);
           setAddTwoVisible(false);
           setFlag(flag + 1);
-          updateTrees();
+          console.log(prop);
+          console.log(item);
+          updateTrees(prop.menuName, e);
           notification.success({
             message: '提示',
             description: '新增成功',
@@ -602,7 +667,7 @@ const MiniMenu = props => {
                 draggable
                 autoExpandParent
                 onDrop={handleDrop}
-                // onDragEnter={handleDragEnter}
+                onExpand={handleExpand}
                 selectedKeys={[menuID]}
                 expandedKeys={expendKey}
               />
@@ -627,6 +692,7 @@ const MiniMenu = props => {
           <AddForm
             nodeType={nodeType}
             nodeObj={nodeObj}
+            keepType={keepType}
             addType={addType}
             submitCallback={submitCallback}
             submitLoading={submitLoading}
@@ -656,6 +722,7 @@ const MiniMenu = props => {
             submitLoading={submitLoading}
             nodeType={nodeType}
             nodeObj={nodeObj}
+            keepType={keepType}
             addType={addType}
             addList={addList}
             submitCallback={submitCallback}

src/pages/productCenter/productConfig/productConfig.jsx

 import React, { useState, useEffect } from 'react';
-import { Card, List, Drawer, Button, Empty, Spin, notification, Switch, message } from 'antd';
+import { Card, List, Empty, Spin, notification, Switch } from 'antd';
 import { modifyProduct, getProductList, delProductList } from '@/services/webConfig/api';
 import classnames from 'classnames';
 
 import EditForm from './components/editForm';
 import styles from './productConfig.less';
 const ProductConfig = props => {
-  const [addVisible, setAddVisible] = useState(false);
   const [productList, setProductList] = useState([]);
   const [userProductsList, setUserProductsList] = useState([]);
   const [productObj, setProductObj] = useState('');
@@ -91,10 +90,6 @@ const ProductConfig = props => {
       });
   }, [flag]);
 
-  // 展示新增抽屉
-  const handleAdd = () => {
-    setAddVisible(true);
-  };
   // 删除
   const handleDel = item => {
     setLoading(true);
@@ -123,11 +118,7 @@ const ProductConfig = props => {
         console.error(err);
       });
   };
-  // 新增提交回调
-  const addCallback = val => {
-    setAddVisible(false);
-    setFlag(flag + 1);
-  };
+
   // 编辑的回调
   const editCallback = val => {
     setLoading(true);
@@ -167,8 +158,6 @@ const ProductConfig = props => {
               duration: 3,
             });
             item.IsUsed = true;
-            console.log(item, 'item');
-            console.log(productObj, 'productObj33333');
             setProductObj({ ...item });
             setFlag(flag + 1);
           } else {
@@ -190,34 +179,8 @@ const ProductConfig = props => {
     }
   };
   const handleClickItem = value => {
-    // console.log(productList);
-    // console.log(value);
-    // let obj = productList.find(i => i.PackageName === value.PackageName);
-
     setProductObj({ ...value });
-    // if (userProductsList.length > 0) {
-    //   let obj = userProductsList.find(i => i.PackageName === value.PackageName);
-    //   console.log(value);
-    //   console.log(obj);
-    //   if (obj) {
-    //     setProductObj(obj);
-    //   } else {
-    //     message.warning({
-    //       content: '请先启用产品',
-    //       duration: 3,
-    //     });
-    //   }
-    // } else {
-    //   message.warning({
-    //     content: '请先启用产品',
-    //     duration: 3,
-    //   });
-    // }
   };
-  // const changeBut = value => {
-  //   let obj = userProductsList.find(i => i.PackageName === value.PackageName);
-  //   setProductObj(obj);
-  // };
   const renderListItem = arr => (
     <div style={{ marginBottom: '25px', borderBottom: '1px solid #ccc', paddingBottom: '25px' }}>
       {arr.map(item => (
@@ -231,20 +194,14 @@ const ProductConfig = props => {
         >
           <div onClick={e => e.stopPropagation()}>
             <Switch
-              // size="small"
-              // defaultChecked={item.IsUsed}
               checked={item.IsUsed}
               checkedChildren="启用"
               unCheckedChildren="关闭"
               onClick={e => {
                 handleSwitchClick(e, item, userProductsList);
               }}
-              // onChange={changeBut(item)}
             />
           </div>
-          {/* <span className={classnames({ [styles.itemspan]: true })}>{`${item.ProductName}【${
-            item.ProductType
-          }】`}</span> */}
           <span className={classnames({ [styles.itemspan]: true })}>
             {item.ProductType ? `${item.ProductName}【${item.ProductType}】` : item.ProductName}
           </span>
@@ -256,15 +213,7 @@ const ProductConfig = props => {
     <Spin spinning={loading} tip="loading...">
       <div className={styles.box}>
         <Card className={classnames(`${styles.leftList}`)}>
-          <div className={styles.listTop}>
-            产品选择：
-            {/* <Button type="primary" onClick={handleAdd}>
-              新增
-            </Button> */}
-            {/* <Button type="primary" danger onClick={handleDel}>
-              删除
-            </Button> */}
-          </div>
+          <div className={styles.listTop}>产品选择：</div>
           {productList && productList.length > 0 ? (
             productList.map(item => renderListItem(item))
           ) : (
@@ -278,33 +227,6 @@ const ProductConfig = props => {
             handleDel={handleDel}
             userProductsList={userProductsList}
           />
-
-          {/* {productList && productList.length > 0 && productObj ? (
-            <EditForm
-              productObj={productObj}
-              editCallback={editCallback}
-              handleDel={handleDel}
-              userProductsList={userProductsList}
-            />
-          ) : (
-            <Empty
-              style={{ marginTop: '60px' }}
-              image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description="当前未选中产品类型"
-            />
-          )} */}
-          {/* <Drawer
-            title="新增产品"
-            destroyOnClose
-            maskClosable={false}
-            width={600}
-            onClose={() => {
-              setAddVisible(false);
-            }}
-            visible={addVisible}
-          >
-            <AddForm addCallback={addCallback} />
-          </Drawer> */}
         </Card>
       </div>
     </Spin>

src/pages/productCenter/webConfig/menuconfig/webMenu.jsx

 /* eslint-disable array-callback-return */
 /* eslint-disable no-plusplus */
 /* eslint-disable consistent-return */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { notification, Tooltip, Modal, Spin, Empty } from 'antd';
 import Tree from '@/components/ExpendableTree';
 import {
@@ -52,9 +52,11 @@ const MiniMenu = props => {
   const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
   const [menuList, setMenuList] = useState([]); // 菜单树
   const [keepId, setKeepId] = useState('');
+  const [mapDataList, setMapDataList] = useState(new Set());
 
   /* *****************************************************  */
   const [curMenuType, setCurMenuType] = useState('');
+  const parentRef = useRef();
 
   // 获取菜单信息
   useEffect(() => {
@@ -62,6 +64,7 @@ const MiniMenu = props => {
     if (flag === 1) {
       setExpendKey(menuID);
     }
+    console.log(expendKey);
     getInfo();
   }, [menuID, webid]);
   useEffect(() => {
@@ -114,14 +117,23 @@ const MiniMenu = props => {
       children: hasChild ? obj.children.map(i => mapTree(i)) : [],
     };
   };
+  const mapData = (val, e) => {
+    const obj = { ...val };
+    const hasChild = obj.children.length > 0;
+    if (hasChild) {
+      obj.children.map(i => mapData(i));
+    }
+    mapDataList.add(obj);
+  };
   // 树的点击事件
   const handleSelect = (prop, treeNode) => {
+    console.log(prop);
+    console.log(treeNode);
     if (treeNode) {
       const {
         node: { menuType },
       } = treeNode;
       console.log(menuType);
-      setCurMenuType(menuType);
       switch (menuType) {
         case 'Web4MenuGroup':
           setNodeType(2);
@@ -138,6 +150,10 @@ const MiniMenu = props => {
     }
   };
 
+  const handleExpand = (keys, { expanded, node }) => {
+    console.log(keys);
+  };
+
   const getInfo = id => {
     if (!menuID) {
       return;
@@ -291,10 +307,12 @@ const MiniMenu = props => {
       .then(res => {
         setSubmitLoading(false);
         if (res.code === 0) {
+          console.log(res.data);
           setAddVisible(false);
           setAddTwoVisible(false);
           // setFlag(flag + 1);
-          getTree();
+          console.log(prop);
+          getTree(res.data);
           // updateMenuTree('add', item);
           notification.success({
             message: '提示',
@@ -304,7 +322,7 @@ const MiniMenu = props => {
         } else {
           notification.error({
             message: '提示',
-            description: res.message || '新增失败',
+            description: res.msg || '新增失败',
             duration: 10,
           });
         }
@@ -314,6 +332,9 @@ const MiniMenu = props => {
         console.error(err);
       });
   };
+  const treeCallback = prop => {
+    console.log(prop);
+  };
   // 编辑的回调
   const editSubmitCallback = prop => {
     setLoading(true);
@@ -411,7 +432,7 @@ const MiniMenu = props => {
       }
     }
   };
-  const getTree = () => {
+  const getTree = e => {
     getWebModuleTree(userMode || 'super')
       .then(res => {
         setLoading(false);
@@ -422,14 +443,32 @@ const MiniMenu = props => {
             .map(r => r.children.filter(i => i.id === webid))
             .flat(2);
           let arr2 = arr[0].children.find(item => item.text === '菜单管理').children || [];
-          console.log(arr2[0]);
-          setKeepId(arr2[0]);
           setMenuList(arr2 || []);
+          if (e) {
+            arr2.map(item => mapData(item, e));
+            console.log([...mapDataList]);
+            let aa = [...mapDataList].find(i => i.menuID == e);
+            console.log(aa);
+            setMenuID(aa.menuID);
+            setExpendKey(aa.menuID);
+            console.log(expendKey);
+            switch (aa.menuType) {
+              case 'Web4MenuGroup':
+                setNodeType(2);
+                setAddType(2);
+                break;
+              default:
+                setNodeType(1);
+                setAddType(1);
+                break;
+            }
+          }
+          setKeepId(arr2[0]);
+
           // 进页面后默认展示第一条数据
           if (arr2.length > 0) {
             if (flag === 1) {
               setMenuID(arr2[0].menuID);
-              setCurMenuType(arr2[0].menuType);
               switch (arr2[0].menuType) {
                 case 'Web4MenuGroup':
                   setNodeType(2);
@@ -524,7 +563,6 @@ const MiniMenu = props => {
     }).then(res => {
       if (res.code === 0) {
         // updateMenuTree();
-        console.log(11111111);
         getTree();
         // setFlag(flag + 1);
       } else {
@@ -583,6 +621,7 @@ const MiniMenu = props => {
               <Tree
                 showIcon
                 onSelect={handleSelect}
+                onExpand={handleExpand}
                 treeData={menuList.map(item => mapTree(item))}
                 blockNode
                 draggable