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

01139da3 · 皮倩雯 · 129171c3 · 01139da3 · 01139da3 · 01139da3
Commit 01139da3 authored Mar 04, 2022 by 皮倩雯
4 changed files
--- a/src/pages/productCenter/mobileConfig/menuconfig/AddForm.jsx
+++ b/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 = () => {

--- a/src/pages/productCenter/mobileConfig/menuconfig/miniMenu.jsx
+++ b/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}

--- a/src/pages/productCenter/productConfig/productConfig.jsx
+++ b/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>

--- a/src/pages/productCenter/webConfig/menuconfig/webMenu.jsx
+++ b/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