2022-10-08

king

2022-10-08 2ccd33975abf91f9a7929ca8ed6fc03d74ee424d

 src/components/header/index.jsx

@@ -4,14 +4,12 @@
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import moment from 'moment'
import { Dropdown, Menu, Modal, Form, notification, Switch, Input } from 'antd'
import { Dropdown, Menu, Modal, notification, Switch, Input } from 'antd'
import { SearchOutlined, DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'

import {
  toggleCollapse,
  modifyMainMenu,
  initActionPermission,
  initMenuPermission,
  logout
} from '@/store/action'
import asyncComponent from '@/utils/asyncSpinComponent'
@@ -143,106 +141,91 @@
  }

  getRolesMenu () {
    // 获取角色权限
    let roledefer = new Promise(resolve => {
      // edition_type 接口版本控制 ''、'Y'、'A'
      setTimeout(() => {
        Api.getSystemConfig({
          func: 's_Get_TrdMenu_Role',
          edition_type: 'A',
          pro_sys: window.GLOB.systemType === 'production' ? 'Y' : ''
        }).then(result => {
          let _permAction = {loaded: true} // 按钮权限
  
          if (result && result.status) {
            if (result.UserRoles_Menu) {
              result.UserRoles_Menu.forEach(menu => {
                if (!menu.MenuID) return
                _permAction[menu.MenuID] = true
              })
            }
          } else if (result) {
            notification.error({
              top: 92,
              message: result.message,
              duration: 10
    // 获取主菜单参数
    let _param = {func: 's_get_pc_menus', systemType: options.sysType}
    _param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : ''
    
    Api.getSystemConfig(_param).then(result => {
      if (!result.status) {
        notification.error({
          top: 92,
          message: result.message,
          duration: 10
        })
        return
      }

      const { menulist, thdMenuList } = this.getMenulist(result)

      let systems = []
      if ((options.sysType === 'local' || options.sysType === 'SSO') && result.sys_list) {
        systems = result.sys_list

        if (options.sysType === 'local' && window.GLOB.systemType !== 'production' && systems.length > 10) {
          systems.length = 10
        }
      }

      this.setState({
        menulist,
        thdMenuList,
        systems: systems
      })
      
      let mainMenu = menulist[0] || ''
      let _menu = null

      if (sessionStorage.getItem('ThirdMenu')) { // 是否为打开新页面
        let ThirdMenuId = sessionStorage.getItem('ThirdMenu')
        _menu = thdMenuList.filter(item => item.MenuID === ThirdMenuId)[0] // 通过url中menuid筛选出选中的主菜单

        sessionStorage.removeItem('ThirdMenu')
      }

      this.props.modifyMainMenu(mainMenu)

      window.GLOB.mkThdMenus = [...thdMenuList, {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}]

      if (_menu) { // 延时打开，防止标签组未完成加载
        setTimeout(() => {
          if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') {
            MKEmitter.emit('modifyTabs', _menu, 'replace')
          } else {
            MKEmitter.emit('modifyTabs', _menu, 'plus')
          }
        }, 200)
      }
      MKEmitter.emit('mkMenuLoaded')
    })
    
    // 获取角色权限, edition_type 接口版本控制 ''、'Y'、'A'
    setTimeout(() => {
      Api.getSystemConfig({
        func: 's_Get_TrdMenu_Role',
        edition_type: 'A',
        pro_sys: window.GLOB.systemType === 'production' ? 'Y' : ''
      }).then(result => {
        let _permAction = {loaded: true} // 按钮权限

        if (result.status) {
          if (result.UserRoles_Menu) {
            result.UserRoles_Menu.forEach(menu => {
              if (!menu.MenuID) return
              _permAction[menu.MenuID] = true
            })
          }
  
          this.props.initActionPermission(_permAction)
          resolve()
        })
      }, 50)
    })

    // 获取主菜单参数
    let menudefer = new Promise(resolve => {
      let _param = {func: 's_get_pc_menus', systemType: options.sysType}
      _param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : ''
      
      Api.getSystemConfig(_param).then(result => {
        if (!result.status) {
        } else {
          notification.error({
            top: 92,
            message: result.message,
            duration: 10
          })
          return
        }

        const { menulist, thdMenuList } = this.getMenulist(result)

        let systems = []
        if ((options.sysType === 'local' || options.sysType === 'SSO') && result.sys_list) {
          systems = result.sys_list

          if (options.sysType === 'local' && window.GLOB.systemType !== 'production' && systems.length > 10) {
            systems.length = 10
          }
        }

        this.setState({
          menulist,
          thdMenuList,
          systems: systems
        })
        
        let mainMenu = menulist[0] || ''
        let _menu = null

        if (mainMenu === '') { // 是否显示侧边栏控制
          let _url = window.location.href.split('#')[0]
          localStorage.setItem(_url + '-sideHidden', 'true')
        } else {
          let _url = window.location.href.split('#')[0]
          localStorage.removeItem(_url + '-sideHidden')
        }

        if (sessionStorage.getItem('ThirdMenu')) { // 是否为打开新页面
          let ThirdMenuId = sessionStorage.getItem('ThirdMenu')
          _menu = thdMenuList.filter(item => item.MenuID === ThirdMenuId)[0] // 通过url中menuid筛选出选中的主菜单

          sessionStorage.removeItem('ThirdMenu')
        }

        this.props.modifyMainMenu(mainMenu)
        this.props.initMenuPermission([...thdMenuList, {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}])

        resolve(_menu)
        MKEmitter.emit('mkActionLoaded')
        window.GLOB.mkActions = _permAction
      })
    })
    
    Promise.all([roledefer, menudefer]).then(response => {
      if (response[1]) {
        let menu = fromJS(response[1]).toJS()

        if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') {
          MKEmitter.emit('modifyTabs', menu, 'replace')
        } else {
          MKEmitter.emit('modifyTabs', menu, 'plus')
        }
      }
    })
    }, 50)
  }

  getMenulist = (result) => {
@@ -599,6 +582,12 @@
    })
  }

  changeToHome = () => {
    if (!['linkage', 'menu_board'].includes(window.GLOB.navBar)) return

    MKEmitter.emit('modifyTabs', {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}, 'replace')
  }

  render () {
    const { mainMenu, collapse } = this.props
    const { thdMenuList, searchkey, debug, menulist, navBar, menuType, appVersion } = this.state
@@ -628,10 +617,10 @@

    return (
      <header className="header-container ant-menu-dark" id="main-header-container">
        <div className={'header-logo ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div>
        <div className={'header-collapse ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')}>
          {navBar !== 'topmenu' ? (collapse ? <MenuUnfoldOutlined onClick={this.handleCollapse}/> : <MenuFoldOutlined onClick={this.handleCollapse}/>) : null}
        </div>
        <div className={'header-logo ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')} onClick={this.changeToHome}><img src={this.state.logourl} alt=""/></div>
        {navBar !== 'topmenu' ? <div className={'header-collapse ' + (collapse ? 'collapse' : '')}>
          {collapse ? <MenuUnfoldOutlined onClick={this.handleCollapse}/> : <MenuFoldOutlined onClick={this.handleCollapse}/>}
        </div> : <div style={{width: '20px', height: '45px'}}></div>}
        {/* 正常菜单 */}
        {navBar !== 'topmenu' && menulist ?
          <ul className="header-menu">{
@@ -725,15 +714,9 @@
            })}
          </ul> : null
        }
        {/* 头像、用户名 */}
        <Dropdown className="header-setting" overlay={menu}>
          <div>
            <img src={this.state.avatar || avatar} alt=""/>
            <span>
              <span className="username"><span>{this.state.fullName}</span>{this.state.userName ? <span>{this.state.userName}</span> : null}</span> <DownOutlined />
            </span>
          </div>
        </Dropdown>
        {!menulist ?
          <div className="header-menu"></div> : null
        }
        {/* 菜单搜索 */}
        {thdMenuList.length > 0 ?
          <Dropdown overlayClassName="menu-select-dropdown" getPopupContainer={() => document.getElementById('main-header-container')} overlay={
@@ -770,6 +753,15 @@
            <SearchOutlined className="search-menu" />
          </Dropdown> : null
        }
        {/* 头像、用户名 */}
        <Dropdown className="header-setting" overlay={menu}>
          <div>
            <img src={this.state.avatar || avatar} alt=""/>
            <span>
              <span className="username"><span>{this.state.fullName}</span>{this.state.userName ? <span>{this.state.userName}</span> : null}</span> <DownOutlined />
            </span>
          </div>
        </Dropdown>
        {/* 修改密码 */}
        <Modal
          title={this.state.dict['main.password']}
@@ -809,10 +801,8 @@
  return {
    toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
    modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)),
    initActionPermission: (permAction) => dispatch(initActionPermission(permAction)),
    initMenuPermission: (permMenus) => dispatch(initMenuPermission(permMenus)),
    logout: () => dispatch(logout())
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))