2020-04-12

king

2020-04-12 3df2d3624c6b768d29670b537f8d6a71d3ef122c

 src/components/header/index.jsx

@@ -4,12 +4,13 @@
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import moment from 'moment'
import {Dropdown, Menu, Icon, Modal, Form, notification, Switch, Button } from 'antd'
import {Dropdown, Menu, Icon, Modal, Form, notification, Switch, Button, Input } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import {
  toggleCollapse,
  modifyMainMenu,
  modifyTabview,
  resetState,
  resetDebug,
  resetEditState,
@@ -31,6 +32,7 @@

const EditMenu = asyncComponent(() => import('./editmenu'))
const { confirm } = Modal
const { Search } = Input

class Header extends Component {
  static propTpyes = {
@@ -50,7 +52,9 @@
    loginVisible: false,
    loginLoading: false,
    avatar: avatar,
    systems: []
    systems: [],
    searchkey: '',
    thdMenuList: []
  }

  handleCollapse = () => {
@@ -438,6 +442,46 @@
    let _param = window.btoa('ud=' + sessionStorage.getItem('UserID') + '&sd=' + sessionStorage.getItem('SessionUid') + '&ld=' + sessionStorage.getItem('LoginUID') + '&un=' + sessionStorage.getItem('User_Name'))
    window.location.href = system.LinkUrl1 + '#/ssologin/' + _param
  }

  dropdownMenuChange = (visible) => {
    this.setState({searchkey: ''}, () => {
      if (visible) {
        setTimeout(() => {
          let input = document.getElementById('thdMenu-search')

          if (input) {
            input.focus()
          }
        }, 500)
      }
    })
  }

  selectMenu = (item) => {
    const { tabviews } = this.props
    
    let menu = JSON.parse(JSON.stringify(item))
    menu.selected = true

    let index = 0
    let isexit = false
    let tabs = tabviews.map((tab, i) => {
      tab.selected = false

      if (tab.MenuID === menu.MenuID) {
        tab.selected = true
        isexit = true
      }

      return tab
    })

    if (!isexit) {
      tabs.splice(index + 1, 0, menu)
    }

    this.props.modifyTabview(tabs)
  }
  
  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
@@ -455,15 +499,53 @@
      if (!result) return
      if (result.status) {
        let _permMenus = {}
        let menulist = []

        if (result.UserRoles) {
          let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']

          result.UserRoles.forEach(role => {
            role.RoleMenu.forEach(menu => {
              if (!menu.MenuID) return
              _permMenus[menu.MenuID] = true

              let _type = ''
              if (menu.LinkUrl) {
                if (menu.LinkUrl === 'CommonTable') {
                  _type = 'CommonTable'
                } else if (menu.LinkUrl === 'DataManage') {
                  _type = 'DataManage'
                } else if (iframes.includes(menu.LinkUrl.split('?')[0])) {
                  _type = 'iframe'
                }
              }
  
              if (_type !== 'iframe') {
                let pageParam = {}
                try {
                  pageParam = JSON.parse(menu.PageParam)
                } catch (e) {
                  pageParam = {}
                }
                _type = pageParam.Template || _type
              }

              menulist.push({
                MenuID: menu.MenuID,
                MenuName: menu.MenuName,
                MenuNo: menu.MenuNo || '',
                EasyCode: menu.EasyCode || '',
                LinkUrl: menu.LinkUrl,
                type: _type
              })
            })
          })
        }
  
        this.setState({
          thdMenuList: menulist
        })

        this.props.initMenuPermission(_permMenus)
      } else {
        notification.error({
@@ -480,6 +562,8 @@
  }

  render () {
    const { thdMenuList, searchkey } = this.state

    const menu = (
      <Menu overlayclassname="header-dropdown">
        {this.props.debug && <Menu.Item key="0">
@@ -497,7 +581,7 @@
    )

    return (
      <header className="header-container ant-menu-dark">
      <header className="header-container ant-menu-dark" id="main-header-container">
        <div className={this.props.collapse ? "collapse header-logo" : "header-logo"}><img src={this.state.logourl} alt=""/></div>
        <div className={this.props.collapse ? "collapse header-collapse" : "header-collapse"} onClick={this.handleCollapse}>
          <Icon type={this.props.collapse ? 'menu-unfold' : 'menu-fold'} />
@@ -533,6 +617,42 @@
            </span>
          </div>
        </Dropdown>
        {/* 菜单搜索 */}
        {!this.props.editState && thdMenuList.length > 0 ?
          <Dropdown overlayClassName="menu-select-dropdown" getPopupContainer={() => document.getElementById('main-header-container')} overlay={
            <div>
              <Search
                placeholder=""
                id="thdMenu-search"
                value={searchkey}
                onChange={e => this.setState({searchkey: e.target.value})}
                style={{ minWidth: '200px' }}
                onSearch={(val, e) => {e.stopPropagation()}}
                onClick={(e) => {e.stopPropagation()}}
              />
              <div className="menu-select-box">
                <Menu>
                  {thdMenuList.map(option => {
                    if (searchkey) {
                      if (
                        option.MenuName.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0 ||
                        option.MenuNo.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0 ||
                        option.EasyCode.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0
                      ) {
                        return <Menu.Item key={option.MenuID} onClick={() => this.selectMenu(option)}>{option.MenuName}</Menu.Item>
                      } else {
                        return null
                      }
                    }
                    return <Menu.Item key={option.MenuID} onClick={() => this.selectMenu(option)}>{option.MenuName}</Menu.Item>
                  })}
                </Menu>
              </div>
            </div>
          } trigger={['click']} className="search-menu" placement="bottomRight" onVisibleChange={this.dropdownMenuChange}>
            <Icon className="search-menu" type="search" />
          </Dropdown> : null
        }
        {/* 修改密码 */}
        <Modal
          title={this.state.dict['header.password']}
@@ -567,6 +687,7 @@

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    collapse: state.collapse,
    selectmenu: state.selectedMainMenu,
    debug: state.debug,
@@ -581,6 +702,7 @@
const mapDispatchToProps = (dispatch) => {
  return {
    toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
    modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
    resetEditState: (state) => dispatch(resetEditState(state)),
    resetEditLevel: (level) => dispatch(resetEditLevel(level)),