king
2023-08-16 7e46c386be5c2cfc20af3936d26839ad3fce44b0
src/components/header/index.jsx
@@ -1,16 +1,9 @@
import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Dropdown, Menu, Modal, notification, Switch, Input } from 'antd'
import { SearchOutlined, DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import {
  toggleCollapse,
  modifyMainMenu,
  logout
} from '@/store/action'
import asyncSpinComponent from '@/utils/asyncSpinComponent'
import asyncComponent from '@/utils/asyncComponent'
import Api from '@/api'
@@ -26,9 +19,6 @@
const LoginForm = asyncSpinComponent(() => import('./loginform'))
class Header extends Component {
  static propTpyes = {
    collapse: PropTypes.bool
  }
  state = {
    menulist: null, // 一级菜单
    userName: '',
@@ -40,13 +30,73 @@
    systems: [],
    searchkey: '',
    thdMenuList: [],
    debug: sessionStorage.getItem('debug') === 'true'
    debug: sessionStorage.getItem('debug') === 'true',
    collapse: sessionStorage.getItem('collapse') === 'true'
  }
  UNSAFE_componentWillMount () {
    window.GLOB.mainMenu = null
    // 组件加载时,获取菜单数据
    this.getRolesMenu()
    let fullName = sessionStorage.getItem('Full_Name') || ''
    let userName = sessionStorage.getItem('User_Name') || ''
    if (fullName.toLowerCase() === userName.toLowerCase()) {
      userName = ''
    }
    this.setState({fullName, userName})
  }
  componentDidMount () {
    // 获取系统的版本信息,延时查询
    setTimeout(() => {
      Api.getAppVersion()
    }, 1000)
    // sessionStorage 跨页面共享
    window.addEventListener('storage', (e) => {
      if (e.key === 'getSessionStorage' && e.newValue === window.GLOB.appkey) {
        localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
      } else if (e.key === 'getSysPermission' && e.newValue === window.GLOB.appkey) {
        localStorage.setItem('sysPermissions', JSON.stringify({mkThdMenus: window.GLOB.mkThdMenus, mkActions: window.GLOB.mkActions}))
      } else if (e.key === 'menuUpdate') {
        let vals = e.newValue.split(',')
        let menuId = vals[1]
        let position = vals[2] || ''
        if (position === 'menu') {
          MKEmitter.emit('reloadMenuView', menuId)
        } else if (menuId) {
          Api.getAppVersion(menuId).then(() => {
            MKEmitter.emit('reloadMenuView', menuId)
          })
        }
      }
    })
  }
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  /**
   * @description 组件销毁,清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }
  handleCollapse = () => {
    // 展开、收起左侧菜单栏
    this.props.toggleCollapse(!this.props.collapse)
    localStorage.setItem('collapse', !this.props.collapse)
    const { collapse } = this.state
    sessionStorage.setItem('collapse', !collapse)
    this.setState({collapse: !collapse})
    MKEmitter.emit('toggleCollapse', !collapse)
  }
  changePassword = () => {
@@ -54,7 +104,6 @@
    MKEmitter.emit('resetpassword', () => {
      setTimeout(() => {
        sessionStorage.clear()
        this.props.logout()
        this.props.history.replace('/login')
      }, 2000)
    })
@@ -70,7 +119,6 @@
      cancelText: '取消',
      onOk() {
        sessionStorage.clear()
        _this.props.logout()
        _this.props.history.replace('/login')
      },
      onCancel() {}
@@ -84,7 +132,8 @@
    } else if (value.OpenType === 'newtab') {
      MKEmitter.emit('modifyTabs', value)
    } else if (value.OpenType === 'menu') {
      this.props.modifyMainMenu(value)
      window.GLOB.mainMenu = value
      MKEmitter.emit('mainMenuChange')
    }
  }
@@ -130,9 +179,10 @@
        sessionStorage.removeItem('ThirdMenu')
      }
      this.props.modifyMainMenu(mainMenu)
      window.GLOB.mainMenu = mainMenu
      window.GLOB.mkThdMenus = [...thdMenuList, {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}]
      MKEmitter.emit('mainMenuChange')
      if (_menu) {
        this.openTab(_menu, 0)
@@ -313,8 +363,7 @@
        loginVisible: true
      })
    } else {
      this.props.modifyMainMenu(null)
      window.GLOB.mainMenu = null
      this.props.history.replace('/design')
    }
  }
@@ -360,7 +409,8 @@
            localStorage.setItem(_url, window.btoa(window.encodeURIComponent(JSON.stringify({time: new Date().getTime(), username: param.username, password: ''}))))
          }
          this.props.modifyMainMenu(null)
          window.GLOB.mainMenu = null
          this.props.history.replace('/design')
        } else {
          if (res.message.indexOf('密码错误') > -1) {
@@ -441,60 +491,6 @@
        }, 500)
      }
    })
  }
  UNSAFE_componentWillMount () {
    // 组件加载时,获取菜单数据
    this.getRolesMenu()
    let fullName = sessionStorage.getItem('Full_Name') || ''
    let userName = sessionStorage.getItem('User_Name') || ''
    if (fullName.toLowerCase() === userName.toLowerCase()) {
      userName = ''
    }
    this.setState({fullName, userName})
  }
  componentDidMount () {
    // 获取系统的版本信息,延时查询
    setTimeout(() => {
      Api.getAppVersion()
    }, 1000)
    // sessionStorage 跨页面共享
    window.addEventListener('storage', (e) => {
      if (e.key === 'getSessionStorage' && e.newValue === window.GLOB.appkey) {
        localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
      } else if (e.key === 'getSysPermission' && e.newValue === window.GLOB.appkey) {
        localStorage.setItem('sysPermissions', JSON.stringify({mkThdMenus: window.GLOB.mkThdMenus, mkActions: window.GLOB.mkActions}))
      } else if (e.key === 'menuUpdate') {
        let vals = e.newValue.split(',')
        let menuId = vals[1]
        let position = vals[2] || ''
        if (position === 'menu') {
          MKEmitter.emit('reloadMenuView', menuId)
        } else if (menuId) {
          Api.getAppVersion(menuId).then(() => {
            MKEmitter.emit('reloadMenuView', menuId)
          })
        }
      }
    })
  }
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  /**
   * @description 组件销毁,清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }
  gotoDoc = () => {
@@ -579,8 +575,7 @@
  }
  render () {
    const { mainMenu, collapse } = this.props
    const { thdMenuList, searchkey, debug, menulist } = this.state
    const { thdMenuList, searchkey, debug, menulist, collapse } = this.state
    const navBar = window.GLOB.navBar
    const menu = (
@@ -622,7 +617,7 @@
          <ul className="header-menu">{
            menulist.map(item => {
              return (
                <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}>
                <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={window.GLOB.mainMenu && window.GLOB.mainMenu.MenuID === item.MenuID ? 'active' : ''}>
                  <span>{item.MenuName}</span>
                </li>
              )
@@ -777,19 +772,4 @@
  }
}
const mapStateToProps = (state) => {
  return {
    collapse: state.collapse,
    mainMenu: state.mainMenu
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
    modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)),
    logout: () => dispatch(logout())
  }
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))
export default withRouter(Header)