菜单交互优化

src/components/AMenu/index.js

@@ -38,13 +38,14 @@ const pageMap = {
 let firstMenuPage = {};         //第一个菜单，自动激活时用
 function AMenu() {
     const [menuList, setMenuList] = useState([]);        //菜单列表数据
+    const [openKeys, setOpenKeys] = useState([]);       //当前展开的菜单key
+    const [parentKeys,setParentKeys] = useState(null);      //一级菜单key,用于一次只展开一个菜单
     const dispatch = useDispatch();
     //当前选中的菜单
     const { activeTab, panes } = useSelector(state => {
         return state.tabPanes;
     });
-    
-    
+    console.log(44,activeTab)
     //切换菜单、增加tab
     function changeMenu(val) {
         const idName = val.key.split("&");
@@ -65,6 +66,7 @@ function AMenu() {
                 const data = res.data.data;
                 const menuData = data.showMenuInfo;
                 setMenuList(menuData);
+			    getParentKeys(menuData);
                 firstMenuPage = findFirstPage(menuData);
                 const {menuName,code}=firstMenuPage;
                 dispatch(
@@ -75,6 +77,14 @@ function AMenu() {
             }
         })
     }
+    function getParentKeys(menuData){
+        //获取第一级菜单key，用于单项展开
+	  const arr= menuData.map((it)=>{
+	      return it.code+"&"+it.menuName;
+      });
+	  setOpenKeys([arr[0]]);
+	  setParentKeys(arr);
+    }
     function findFirstPage(menuData){
         //获取第一个菜单页面，默认选中
         if(!menuData) return null;
@@ -90,6 +100,7 @@ function AMenu() {
         });
         return page1;
     }
+
     function getSubMenu(data) {     //menuType=0目录，1页面，2按钮
         return data.map((it) => {
             if (it.menuType === '1') {
@@ -105,26 +116,25 @@ function AMenu() {
             } else {
                 return ''
             }
-        })
+        });
+	}
+    function onOpenChange(keys){
+	  const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
+	  if (parentKeys.indexOf(latestOpenKey) === -1) {
+		setOpenKeys(keys);
+	  } else {
+		setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
+	  }
     }
     useEffect(() => {
         getUserMenus();
-        /*const timeO = setTimeout(() => {
-            dispatch(
-                add({ title: firstMenuPage.menuName, content: pageMap[firstMenuPage.menuName] || <NullPage />, key: firstMenuPage.code })
-            );
-        }, 500);
-        return function clearOut() {
-            clearTimeout(timeO);
-        }*/
-
     }, []);
     return (
             <Menu
-                /*defaultSelectedKeys={[menuList[0].menuName]}
-                defaultOpenKeys={[menuList[0].menuId]}*/
                 selectedKeys={activeTab}
                 mode="inline"
+				openKeys={openKeys}
+				onOpenChange={onOpenChange}
                 onClick={changeMenu}
             >
                 {