#

luxiaotao1123

2024-11-04 7f70cb15d035f0c233b9e62b9e43aa985317c908

 zy-acs-flow/src/layout/MyMenu.jsx

@@ -12,12 +12,12 @@
import SubMenu from './SubMenu';
import SettingsIcon from '@mui/icons-material/Settings';
import DashboardIcon from '@mui/icons-material/Dashboard';
import DehazeIcon from '@mui/icons-material/Dehaze';
import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
import PersonIcon from '@mui/icons-material/Person';
import * as Icons from '@mui/icons-material';

const getIconComponent = (iconStr) => {
    return Icons[iconStr] || DehazeIcon;
    return Icons[iconStr] || HorizontalRuleIcon;
};

export const MyMenu = ({ dense = false }) => {
@@ -28,12 +28,24 @@
    const { isPending, permissions } = usePermissions();

    useEffect(() => {
        // default open sub menu
        const defaultExpandMenu = ["menu.warehouse", "menu.dispatcher", "menu.equipment"];
        permissions?.forEach(item => {
            if (defaultExpandMenu.includes(item.name)) {
                setState(state => ({ ...state, [item.route]: true }));
            }
        });
    }, [permissions]);

    useEffect(() => {
        // expand this parent menu
        const currentPath = location.pathname;
        const parentRoutes = findParentRoutes(currentPath, permissions)
        for (const parentRoute of parentRoutes) {
            setState(state => ({ ...state, [parentRoute]: true }));
        }
    }, [location.pathname, permissions]);

    }, [location.pathname]);

    const handleToggle = (menu) => {
        setState(state => ({ ...state, [menu]: !state[menu] }));
@@ -41,7 +53,9 @@

    const getIcon = (iconStr) => {
        const IconComponent = getIconComponent(iconStr);
        return <IconComponent />;
        if (IconComponent) {
            return <IconComponent />;
        }
    };

    const generateMenu = (permissions) => {
@@ -60,19 +74,21 @@
                    </SubMenu>
                );
            } else {
                return (
                    <MenuItemLink
                        key={node.id}
                        to={node.component} // correspond to Resource.name
                        state={{ _scrollToTop: true }}
                        // primaryText={translate(`resources.orders.name`, {
                        //     smart_count: 2,
                        // })}
                        primaryText={node.name}
                        leftIcon={getIcon(node.icon)}
                        dense={dense}
                    />
                );
                if (node.component) {
                    return (
                        <MenuItemLink
                            key={node.id}
                            to={node.component} // correspond to Resource.name
                            state={{ _scrollToTop: true }}
                            // primaryText={translate(`resources.orders.name`, {
                            //     smart_count: 2,
                            // })}
                            primaryText={node.name}
                            leftIcon={getIcon(node.icon)}
                            dense={dense}
                        />
                    );
                }
            }
        });
    };