index.js

import React from 'react'
import MenuConfig from './../../config/menuConfig'
import './index.less'
import { Menu, Icon, message, notification, Modal } from 'antd';
import { NavLink } from 'react-router-dom'
import axios from '@src/axios/index'
import Storage from '@src/utils/localStorage'
import { API_ROLE_MANAGE, API_MENU_MANAGE, API_SYS_MONITOR , API_SYS_MSG} from '@src/Api'
import storage from '@src/utils/localStorage'
import SYS_CONFIG from '@src/config/constant.js'
import Utils from '@src/utils/utils';


const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;

export default class NavLeft extends React.Component {
  state = {
    currentKey: [],
    openMenuRouter: ['/home'],
    allMenuList: [],  //所有菜单
    userRoleInfo: {},  //角色信息
    userMenuList: [],  //根据用户角色信息创建菜单
  }

  changeRouter = (item) => {
    this.setState({
      currentKey: item.key
    })
  }

  onOpenChange = (item) => {
    this.setState({
      openMenuRouter: item
    })
  }


  componentWillMount() {
    // const menuTreeNode = this.renderMenu(MenuConfig);
    let currentKey = window.location.hash.replace(/#|\?.*$/g, "")
    // let onPenkeys = window.location.hash.replace(/(#|\?.*\/)(.*\/*)([^\/]+\/[^\/]+)$/g,'$1$2')
    // this.onOpenChange([onPenkeys])
    this.setState({
      currentKey,
      // menuTreeNode
    })
   
  }


  async componentDidMount() {

    //获取所有菜单
    await this.getModuleTreeList()

    //获取用户菜单
    await this.getRoleJurisdiction()
    //是否登录
    //现在的url地址
    // this.props.history.push('/login')
  }

  //获取所有菜单
  getModuleTreeList = () => {
    return new Promise((resolve, reject) => {
      axios.ajax({
        url: API_MENU_MANAGE.getModuleTreeList,
        data: {
          pageSize: 1,
          pageNum: 1000
        }
      }).then(res => {
        //对菜单数据进行处理
        const allMenuList = this.formatMenulist(res)
        resolve(this.setState({ allMenuList }))
      })
    })

  }

  //对菜单数据进行处理,treeNode类型
  formatMenulist = (data) => {
    if (!data || data.length === 0) {
      return []
    }
    if (data && data.length) {
      return data.map(item => {
        if (item.modules && item.modules.length > 0) {
          return Object.assign({ 
            title: item.name,
            sequence: item.sequence, 
            parentId: item.parentId, 
            icon: item.menuIcon, 
            key: item.link, 
            status: item.status, 
            id: item.id, 
            menuType: item.menuType,
            code: item.code || '',
            children: this.formatMenulist(item.modules) 
          })
        }
        return Object.assign({}, { 
          title: item.name,
          sequence: item.sequence, 
          parentId: item.parentId, 
          icon: item.menuIcon, 
          key: item.link, 
          status: item.status, 
          id: item.id, 
          code: item.code || '',
          menuType: item.menuType,
          children: item.modules 
        })
      });
    }
  }

  //获取登录权限
  getRoleJurisdiction = () => {
    const userInfo = Storage.get('userInfo')
    if (!userInfo || !userInfo.id) {
      return
    }
    axios.ajax({
      url: API_ROLE_MANAGE.getRoleJurisdiction,
      data: {
        userId: userInfo.id
      }
    }).then(res => {
      //将数据处理成标准菜单格式
      if (res && res.length) {
        const userRoleInfo = res.map(item => {
          return {
            title: item.name,
            status: item.status,
            key: item.link,
            parentId: item.parentId,
            icon: item.menuIcon,
            sequence: item.sequence,
            menuType: item.menuType,
            id: item.id
          }
        })
        
        this.setState({ userRoleInfo }, () => {
          this.createMenu(res)
        })
      }
    })
  }
  
  //给要显示的菜单添加isShow
  addIsShowFlag = (id, data) => {
    const { allMenuList } = this.state  
    let _this = this      
    data.forEach((k, i) => {      
      if (k.id === id) {
        k.isShow = true
        if (k.parentId !== 0) {
          _this.addIsShowFlag(k.parentId, allMenuList)
        }  
      } else {
        if (k.children && k.children.length) {
          _this.addIsShowFlag(id, k.children)
        }     
      }
    })
    return data
  }

  //生成用户菜单
  createMenu = (data) => {
    let _this = this
    //生成用户菜单
    const { allMenuList, userRoleInfo } = this.state
    let  menuTreeNode = [];


    //遍历userRoleInfo生成菜单
    if (userRoleInfo && userRoleInfo.length) {
      userRoleInfo.map(k => {
        return _this.addIsShowFlag(k.id, allMenuList)
      })
    
      //console.log( this.sortMeunList(allMenuList))
      // 先扁平处理 === 再进行树组合      
      this.flatData(allMenuList)    
      this.sortMeunList(this.flatList)
      
      let renMenuList = this.treeData(this.flatList, 0);
      storage.set('btnAuth', this.buttonAuth)
      menuTreeNode = this.renderMenu(renMenuList);

    }
    this.setState({
      menuTreeNode
    })

    
  }

  flatList = []
  buttonAuth = []
  // 扁平化数据
  flatData(data) { 
    data.forEach((item, index) => {
      if (item.children && item.children.length > 0 ) {
        this.flatData(item.children)
      }
      if(item.menuType === 1) {
        this.flatList.push(item)
      }else {      
       if(item.isShow) {
        this.buttonAuth.push(item.code)
       }
      } 
    })   
  }


  // 删除按钮级别的数据
  treeData (data, parentId) {
    var itemArr = []
    data.map((item, index) => {
      if(item.parentId === parentId) {
        let newNode={
          title: item.title,
          sequence: item.sequence, 
          parentId: item.parentId, 
          icon: item.icon, 
          key: item.key, 
          status: item.status, 
          id: item.id, 
          code: item.code || '',
          menuType: item.menuType,  
          isShow: item.isShow,       
          children: this.treeData(data, item.id)
        };
        itemArr.push(newNode)
      }
    })
    return itemArr
  }

  sortMeunList (data) {

    data.sort((a,b) => {
      return a.sequence - b.sequence
    })

    return data


  }

  

  //菜单渲染
  renderMenu = (data) => {
    return data.map((item) => {
      if (item.isShow) {
        if (item.children.length > 0) {
          return (
            <SubMenu
              title={<span >
                <i className={item.parentId===0?   ` iconfont icon-${item.icon} `:''} ></i>
                <span style={{ minWidth: 0 }} className="anticon">  </span>
                <span>{item.title}</span>
              </span>}
              key={item.key}
            >
                
              {this.renderMenu(item.children)}
            </SubMenu>
          )
        }

        return <Menu.Item style={{ margin: 0, height: 40 }} title={item.title} key={item.key} >
          <NavLink to={item.key || '/home'} replace> <span  >{item.title}</span></NavLink>
        </Menu.Item>
      }
    })
  }


  render() {
    return (
      <div >
        <Menu
          mode="inline"
          theme='dark'
          selectedKeys={[this.state.currentKey]}
          onClick={this.changeRouter}
          // openKeys={this.state.openMenuRouter}
          // onOpenChange = {this.onOpenChange} 
          defaultSelectedKeys={[this.state.currentKey]}
          defaultOpenKeys={['/home']}
        >
          {this.state.menuTreeNode}
        </Menu>
        
      </div>
    )
  }
}