ai-admin/src/components/AMenu/index.js

import { Menu, message } from 'antd';
import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { add, active } from '@reducers/tabPanes'
import OrgManager from "../OrgManager";
import RoleManager from "../RoleManager";
import UserManager from "../UserManager";
import DataManager from "../DataManager";
import InpaManager from "../InpaManager"
import NullPage from "../NullPage";
import FuncManager from "../FuncManager";
import OperationLog from "../OperationLog";
import LoginLog from "../LoginLog";
import ExceptionLog from "../ExceptionLog";
import MyMessage from "../MyMessage";
import MsgManage from "../MsgManage";
import apiObj from '@api/index';

const { post, api } = apiObj;
const { SubMenu } = Menu;
const propTypes = {};
const defaultProps = {};

const pageMap = {
    '组织管理': <OrgManager />,
    '角色管理': <RoleManager />,
    '用户管理': <UserManager />,
    '数据权限': <DataManager />,
    '病区管理': <InpaManager />,
    '功能管理': <FuncManager />,
    '操作日志': <OperationLog />,
    '登录日志': <LoginLog />,
    '异常日志': <ExceptionLog />,
    '我的通知': <MyMessage />,
    '通知管理': <MsgManage />,
}

let firstMenuPage = {};         //第一个菜单，自动激活时用
function AMenu() {
    const [menuList, setMenuList] = useState([]);        //菜单列表数据
    const dispatch = useDispatch();
    //当前选中的菜单
    const { activeTab, panes } = useSelector(state => {
        return state.tabPanes;
    });
    
    
    //切换菜单、增加tab
    function changeMenu(val) {
        const idName = val.key.split("-");
        const item = panes.find((it) => it.key === idName[0]);
        //console.log(item);
        if (item) {   //已存在当前tab，则定位即可不增加
            dispatch(active(idName[0]));
            return;
        }
        dispatch(
            add({ title: idName[0], content: pageMap[idName[0]] || <NullPage />, key: idName[0] })
        )
    }
    //获取菜单数据
    function getUserMenus() {
        post(api.getUserShowMemuTree).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                const menuData = data.showMenuInfo;
                setMenuList(menuData);
                firstMenuPage = menuData[0].children ? menuData[0].children[0] : menuData[0]
                
            } else {
                message.error(res.data.msg || '获取菜单失败');
            }
        })
    }
    function getSubMenu(data) {
        return data.map((it) => {
            if (it.menuType === '1') {
                return (
                    <Menu.Item key={it.menuName}>{it.menuName}</Menu.Item>
                )
            } else if (it.menuType === '0') {
                return (
                    <SubMenu key={it.menuId} title={it.menuName}>
                        {it.children ? getSubMenu(it.children) : ''}
                    </SubMenu>
                )
            } else {
                return ''
            }
        })
    }
    useEffect(() => {
        getUserMenus();
        const timeO = setTimeout(() => { 
            dispatch(
                add({ title: firstMenuPage.menuName, content: pageMap[firstMenuPage.menuName] || <NullPage />, key: firstMenuPage.menuName })
            );
        }, 500);
        return function clearOut() {
            clearTimeout(timeO);
        }

    }, []);
    return (
            <Menu
                /*defaultSelectedKeys={[menuList[0].menuName]}
                defaultOpenKeys={[menuList[0].menuId]}*/
                selectedKeys={activeTab}
                mode="inline"
                onClick={changeMenu}
            >
                {
                    getSubMenu(menuList)
                }
            </Menu>
    )
}
AMenu.propTypes = propTypes;
AMenu.defaultProps = defaultProps;
export default AMenu;