1、获取菜单对象
static findCurrentItem(items, currentState, currentItem) { _.forEach(items, function (item) { if (item.state === currentState) { currentItem.push(item); } else if (MenuService.hasChildItems(item)) { MenuService.findCurrentItem(item.childItems, currentState, currentItem); } }) } static findParentItem(items, currentItem, parentItem) { const fatherItem = _.find(items, {id: currentItem.fatherId}); if (_.isEmpty(fatherItem)) { _.forEach(items, function (item) { if (MenuService.hasChildItems(item)) { MenuService.findParentItem(item.childItems, currentItem, parentItem); } }) } else { parentItem.push(fatherItem); } } static hasChildItems(item) { return !!item.childItems && item.childItems.length > 0; }getCurrentItem(menus, currentState) { const currentItem = []; MenuService.findCurrentItem(menus, currentState, currentItem); return currentItem[0]; } getParentItem(menus, currentItem) { const parentItem = []; MenuService.findParentItem(menus, currentItem, parentItem); return parentItem[0]; } 2、获取实际页面module
getModules(menuTree) { const modules = []; _.forIn(menuTree, function (value, key) { if (!_.isEmpty(value)) { const moduleItem = {}; const moduleItems = []; _.set(moduleItem, 'type', key); MenuService.findModuleItem(moduleItems, value); _.set(moduleItem, 'state', moduleItems[0]); modules.push(moduleItem); } }); return modules; } static findModuleItem(moduleItems, menuTreeValue) { _.forEach(menuTreeValue, function (item) { if (item.state.indexOf('.') !== -1) { moduleItems.push(_.get(item, 'state')); } else if (MenuService.hasChildItems(item)) { MenuService.findModuleItem(moduleItems, item.childItems); } }) } 3、获取默认路由
getDefaultState(menuTree) { const modules = this.getModules(menuTree); if (!_.isEmpty(modules)) { return _.get(modules[0], 'state'); } } 4、获取menus
getMenu() { return new Promise((resolve, reject) => { axiosService.request({ url: '/api/menus', method: 'GET' }).then(res => { const menuTree = {}; const navigators = {}; _.forEach(res.data, function (item) { _.set(menuTree, item.state, item.childItems); _.set(navigators, item.state, item.name); }); const menu = { menuTree, navigators, defaultState: this.getDefaultState(menuTree), modules: this.getModules(menuTree) }; typeof resolve === 'function' && resolve(menu); }).catch(error => { typeof reject === 'function' && reject(error); }) }) } getSidebarMenu(menuTree, nav) { return _.result(menuTree, nav); } menuTree: 集合，里面包含一个nav,一个对应该nav的菜单item
[{"nav01": [nav01.menus01]},{"nav02": [nav01.menus02]}];
navigators: 一个nav，一个对应nav的名字
[{"nav01": "nav01.name"},{"nav02": "nav01.name"}];
modules: 一个nav，一个对应nav的第一个路由
[{"nav01": "nav01.defaultState01"},{"nav02": "nav01.defaultState02"}];
redux menu data:
import React from "react";import {connect} from "react-redux";import {withRouter} from "react-router-dom";import {Icon} from "antd";import _ from "lodash";import "./index.scss"const mapStateToProps = state => { return { menuData: state.MenuReducer.data }};class Sidebar extends React.Component { constructor(props) { super(props); this.currentState = props.location.pathname; this.menus = _.result(props.menuData.menuTree, props.nav); } componentDidMount() { const defaultNavItem = this.getDefaultNavItem(); if (defaultNavItem === undefined) { this.props.history.replace('/forbidden'); return; } this.setActiveNavItem(defaultNavItem); this.openNavItem(defaultNavItem); if (this.hasChildItems(defaultNavItem)) { this.setActiveChildNavItem(defaultNavItem.childItems); } } getDefaultNavItem() { const currentState = this.currentState; return _.find(this.menus, function (navItem) { if (navItem.state === currentState || _.some(navItem.childItems, {state: currentState})) { return navItem; } }) } setActiveNavItem(navItem) { if (this.hasChildItems(navItem)) { this.clearParentActiveStatus(); } else { this.clearActiveStatusWithChildItems(); navItem.isActive = true; if (!!navItem.state) { this.props.history.replace(navItem.state); } } } setActiveChildNavItem(childNavItems) { const currentState = this.currentState; this.clearActiveStatusWithChildItems(); if (_.isArray(childNavItems)) { childNavItems.forEach(function (navItem) { navItem.isActive = navItem.state === currentState; }); } else { childNavItems.isActive = true; } } openNavItem(navItem) { navItem.isOpen = this.hasChildItems(navItem); this.forceUpdate(); } onOpenNavItem(navItem) { if (this.hasChildItems(navItem)) { navItem.isOpen = !navItem.isOpen; } else { navItem.isOpen = false; } this.forceUpdate(); } clearParentActiveStatus() { this.menus.forEach(function (navItem) { navItem.isActive = false; }) } clearActiveStatusWithChildItems() { this.menus.forEach(function (navItem) { navItem.isActive = false; navItem.childItems.forEach(function (childItem) { childItem.isActive = false; }) }) } hasChildItems(navItem) { return !!navItem.childItems && navItem.childItems.length > 0; } menuIcon(navItem) { return scss:
@import "../../styles/varibles";.app-sidebar { overflow: hidden; width: 180px; > ul > li { position: relative; font-size: $font-lg; border-bottom: $border; border-right: $border; border-left: $border; &:first-child { border-top: $border; border-top-right-radius: $border-radius; border-top-left-radius: $border-radius; } &:last-child { border-bottom-right-radius: $border-radius; border-bottom-left-radius: $border-radius; } } .active { color: $primary-color; font-weight: bold; border-left: 3px solid $primary-color; background-color: $item-active-bg-color; a { font-weight: bold; color: $primary-color; } } .nav-item { .item-name { margin-left: 30px; height: 50px; line-height: 50px; } .anticon { position: absolute; height: 50px; line-height: 50px; left: 7px; font-size: $font-sm; color: $title-color; } &.is-open { .anticon { color: $primary-color; } .nav-item-content { color: $title-color; font-weight: bold; } } &:hover { .anticon, .nav-item-content { color: $primary-color; } } &:active { .nav-item-content { color: $primary-color; font-weight: bold; } } .sub-menu { border-top: none; font-size: $font-sm; .item-name { height: 40px; line-height: 40px; } .child-nav-item.active { .item-name { color: $primary-color; font-weight: bold; } } } }}