2021-02-03

king

2021-02-03 365ea069f179ee71a7a8cc7785ccd2d86bd4881c

 src/components/header/index.jsx

@@ -4,17 +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, Input, Badge } from 'antd'
import { Dropdown, Menu, Icon, Modal, Form, notification, Switch, Input, Badge } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import {
  toggleCollapse,
  modifyMenuTree,
  modifyMainMenu,
  modifyTabview,
  resetState,
  resetEditState,
  resetEditLevel,
  initActionPermission,
  initMenuPermission,
  logout
@@ -25,12 +21,10 @@
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import Resetpwd from './resetpwd'
import LoginForm from './loginform'
import './index.scss'

const EditMenu = asyncComponent(() => import('@/templates/menuconfig/editfirstmenu'))
const { confirm } = Modal
const { Search } = Input

@@ -58,10 +52,8 @@

  handleCollapse = () => {
    // 展开、收起左侧菜单栏
    if (!this.props.editState) {
      this.props.toggleCollapse(!this.props.collapse)
      localStorage.setItem('collapse', !this.props.collapse)
    }
    this.props.toggleCollapse(!this.props.collapse)
    localStorage.setItem('collapse', !this.props.collapse)
  }

  changePassword = () => {
@@ -133,49 +125,10 @@

  changeMenu (value) {
    // 主菜单切换
    if (this.props.editState && this.props.editLevel) {
      // 编辑状态下，不可切换菜单
      return
    }
    if (value.PageParam.OpenType === 'menu') {
      this.props.modifyMainMenu(value)
    } else if (value.PageParam.OpenType === 'outpage') {
      window.open(value.PageParam.linkUrl)
    }
  }

  async loadmenu () {
    // 获取主菜单
    let _param = {func: 's_get_pc_menus', systemType: options.sysType}
    if (sessionStorage.getItem('isEditState') === 'true') { // 编辑状态时，增加参数debug
      _param.debug = 'Y'
    }
    if (options.sysType !== 'cloud' && window.GLOB.systemType !== 'production') {
      _param.linkurl = window.GLOB.linkurl
    }
    _param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : ''

    let result = await Api.getSystemConfig(_param)

    // 登录超时
    if (!result) return

    if (result.status) {
      const { menulist } = this.getMenulist(result)

      this.setState({
        menulist,
        systems: []
      })

      this.props.modifyMenuTree(menulist)
      this.props.modifyMainMenu(menulist[0] || null)
    } else {
      notification.error({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

@@ -352,7 +305,6 @@
              if (trd.LinkUrl && iframes.includes(trd.LinkUrl.split('?')[0])) {
                trdItem.type = 'iframe'
                trdItem.LinkUrl = trd.LinkUrl
                trdItem.forbidden = true
              } else {
                try {
                  trdItem.PageParam = trd.PageParam ? JSON.parse(trd.PageParam) : {OpenType: 'newtab'}
@@ -363,9 +315,6 @@
                trdItem.type = trdItem.PageParam.Template || trdItem.type
                trdItem.OpenType = trdItem.PageParam.OpenType || trdItem.OpenType

                if (trdItem.type === 'CustomPage' && this.props.memberLevel < 20) { // 会员等级大于等于20时，有编辑权限
                  trdItem.forbidden = true
                }
                if (trdItem.type === 'NewPage') {
                  trdItem.src = trdItem.PageParam.url || ''
                  
@@ -408,16 +357,7 @@
    return { menulist, thdMenuList }
  }

  reload = () => {
    this.loadmenu()
  }

  changeEditState = (state) => {
    if (!state) { // 退出编辑，页面刷新
      window.location.reload()
      return
    }

  changeEditState = () => {
    // 修改编辑状态
    let UserID = sessionStorage.getItem('CloudUserID')
    let LoginUID = sessionStorage.getItem('CloudLoginUID')
@@ -427,64 +367,15 @@
        loginVisible: true
      })
    } else {
      sessionStorage.setItem('isEditState', 'true')
      sessionStorage.setItem('role_id', sessionStorage.getItem('cloudRole_id'))
      sessionStorage.setItem('dataM', sessionStorage.getItem('cloudDataM'))
      sessionStorage.setItem('isEditState', 'true')

      if (window.GLOB.systemType === 'production') {
        this.props.resetEditLevel('HS')
        this.props.modifyMainMenu({
          MenuID: 'systemManageView'
        })

        this.setState({
          userName: sessionStorage.getItem('CloudUserName'),
          avatar: Utils.getrealurl(sessionStorage.getItem('CloudAvatar'))
        })
        this.props.resetEditState(state)

        return
      }

      this.setState({
        menulist: null,
        userName: sessionStorage.getItem('CloudUserName'),
        avatar: Utils.getrealurl(sessionStorage.getItem('CloudAvatar'))
      })
      this.loadmenu()
      this.props.modifyMenuTree([])
      this.props.modifyMainMenu(null)
      this.props.resetEditState(state)
    }
      this.props.modifyTabview([])

    if (window.GLOB.systemType !== 'production') {
      Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
        if (res.status) {
          let _permFuncField = []
          let _sysRoles = []

          if (res.Roles && res.Roles.length > 0) {
            _sysRoles = res.Roles.map(role => {
              return {
                uuid: Utils.getuuid(),
                value: role.RoleID,
                text: role.RoleName
              }
            })
          }

          if (res.sModular && res.sModular.length > 0) {
            res.sModular.forEach(field => {
              if (field.ModularNo) {
                _permFuncField.push(field.ModularNo)
              }
            })
            _permFuncField = _permFuncField.sort()
          }

          sessionStorage.setItem('sysRoles', JSON.stringify(_sysRoles))
          sessionStorage.setItem('permFuncField', JSON.stringify(_permFuncField))
        }
      })
      this.props.history.replace('/design')
    }
  }

@@ -507,33 +398,11 @@
          sessionStorage.setItem('dataM', res.dataM ? 'true' : '')
          sessionStorage.setItem('isEditState', 'true')

          if (window.GLOB.systemType === 'production') {
            this.props.resetEditLevel('HS')
            this.props.modifyMainMenu({
              MenuID: 'systemManageView'
            })
    
            this.setState({
              loginVisible: false,
              loginLoading: false,
              userName: res.UserName,
              avatar: res.icon
            })
            this.props.resetEditState(true)
    
            return
          }

          this.setState({
            menulist: null,
            loginVisible: false,
            loginLoading: false,
            userName: res.UserName,
            avatar: res.icon
          })
          this.loadmenu()
          this.props.modifyMenuTree([])
          this.props.modifyMainMenu(null)
          this.props.resetEditState(true)
          this.props.modifyTabview([])

          this.props.history.replace('/design')
        } else {
          this.setState({
            loginLoading: false
@@ -546,43 +415,6 @@
        }
      })
    })
  }

  enterEdit = () => {
    // 进入编辑状态
    this.props.resetEditLevel('level1')
  }

  enterEditManage = () => {
    const { editLevel } = this.props

    if (editLevel === 'HS')  return

    this.props.resetEditLevel('HS')
    this.props.modifyMainMenu({
      MenuID: 'systemManageView'
    })
  }

  /**
   * @description 退出管理界面菜单
   */
  exitManage = () => {
    const { menulist } = this.state

    if (window.GLOB.systemType === 'production') { // 正式系统版本升级后，页面刷新
      window.location.reload()
      return
    }

    this.props.modifyMainMenu(menulist[0] || null)
    this.props.resetEditLevel(false)
    this.props.modifyTabview([])
  }
  
  exitEdit = () => {
    // 退出编辑状态
    this.props.resetEditLevel(false)
  }

  changeSystem = (system) => {
@@ -679,6 +511,15 @@
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  verup = () => {
    const { oriVersion, newVersion } = this.state
    const _this = this
@@ -729,9 +570,9 @@
      <Menu className="header-dropdown">
        {debug && <Menu.Item key="switch">
          {this.state.dict['main.edit']}
          <Switch size="small" style={{marginLeft: '7px'}} disabled={!!this.props.editLevel} checked={this.props.editState} onChange={this.changeEditState} />
          <Switch size="small" style={{marginLeft: '7px'}} checked={false} onChange={this.changeEditState} />
        </Menu.Item>}
        {!this.props.editState ? <Menu.Item key="password" onClick={this.changePassword}>{this.state.dict['main.password']}</Menu.Item> : null}
        <Menu.Item key="password" onClick={this.changePassword}>{this.state.dict['main.password']}</Menu.Item>
        {this.state.systems.length ? <Menu.SubMenu style={{minWidth: '110px'}} title="切换系统">
          {this.state.systems.map((system, index) => (
            <Menu.Item style={{minWidth: '100px', lineHeight: '30px'}} key={'sub' + index} onClick={() => {this.changeSystem(system)}}> {system.AppName} </Menu.Item>
@@ -747,13 +588,13 @@

    return (
      <header className="header-container ant-menu-dark" id="main-header-container">
        <div className={'header-logo ' + (collapse ? 'collapse' : '')}><img src={!this.props.editState ? this.state.logourl : MainLogo} alt=""/></div>
        <div className={'header-logo ' + (collapse ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div>
        <div className={'header-collapse ' + (collapse ? 'collapse' : '')}>
          {menulist && menulist.length ? <Icon type={collapse ? 'menu-unfold' : 'menu-fold'} onClick={this.handleCollapse}/> : null}
        </div>
        {/* 正常菜单 */}
        {this.props.editLevel !== 'level1' && menulist ?
          <ul className={'header-menu ' + this.props.editLevel}>{
        {menulist ?
          <ul className="header-menu">{
            menulist.map(item => {
              return (
                <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}>
@@ -761,27 +602,50 @@
                </li>
              )
            })}
            {this.props.editState && (!this.props.editLevel || this.props.editLevel === 'HS') ?
              <li key="HS" onClick={this.enterEditManage} className={this.props.editLevel === 'HS' ? 'active' : ''}>
                <span>HS</span>
              </li> : null
            }
          </ul> : null
        }
        {this.props.editLevel === 'HS' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
        {/* 进入编辑按钮 */}
        {this.props.editState && !this.props.editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
        {/* {this.props.editState && !this.props.editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' ?
          <a href="#/mobmanage" target="_blank" className="mobile" type="edit"> 应用管理 <Icon type="arrow-right" /></a> : null
        } */}
        {/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
        {this.props.editState && !this.props.editLevel && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
          <a className="home-edit" href={`#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=`} target="_blank" rel="noopener noreferrer">
            首页 <Icon type="arrow-right" />
          </a> : null
        {/* {menulist ?
          <Menu className="header-vertical-menu" mode="horizontal">
            {menulist.map(item => {
              if (!item.children || item.children.length === 0) {
                return (
                  <Menu.Item key={item.MenuID}>
                    {item.MenuName}
                  </Menu.Item>
                )
              } else {
                return (
                  <Menu.SubMenu key={item.MenuID} title={item.MenuName}>
                    <Menu mode="vertical">
                      {item.children.map(cell => {
                        if (!cell.children || cell.children.length === 0) {
                          return (
                            <Menu.Item key={cell.MenuID}>
                              {cell.MenuName}
                            </Menu.Item>
                          )
                        } else {
                          return (
                            <Menu.SubMenu key={cell.MenuID} title={cell.MenuName}>
                              <Menu mode="vertical">
                                {cell.children.map(m => (
                                  <Menu.Item key={m.MenuID}>
                                    {m.MenuName}
                                  </Menu.Item>
                                ))}
                              </Menu>
                            </Menu.SubMenu>
                          )
                        }
                      })}
                    </Menu>
                  </Menu.SubMenu>
                )
              }
            })}
          </Menu> : null
        }
        {/* 编辑菜单 */}
        {this.props.editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
         */}
        {/* 头像、用户名 */}
        <Dropdown className="header-setting" overlay={menu}>
          <div>
@@ -792,7 +656,7 @@
          </div>
        </Dropdown>
        {/* 菜单搜索 */}
        {!this.props.editState && thdMenuList.length > 0 ?
        {thdMenuList.length > 0 ?
          <Dropdown overlayClassName="menu-select-dropdown" getPopupContainer={() => document.getElementById('main-header-container')} overlay={
            <div>
              <Search
@@ -861,10 +725,7 @@
    collapse: state.collapse,
    menuTree: state.menuTree,
    mainMenu: state.mainMenu,
    editState: state.editState,
    editLevel: state.editLevel,
    permAction: state.permAction,
    memberLevel: state.memberLevel
  }
}

@@ -874,11 +735,8 @@
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
    modifyMenuTree: (menuTree) => dispatch(modifyMenuTree(menuTree)),
    modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)),
    resetEditState: (state) => dispatch(resetEditState(state)),
    resetEditLevel: (level) => dispatch(resetEditLevel(level)),
    initActionPermission: (permAction) => dispatch(initActionPermission(permAction)),
    initMenuPermission: (permMenus) => dispatch(initMenuPermission(permMenus)),
    resetState: () => dispatch(resetState()),
    logout: () => dispatch(logout())
  }
}