2021-11-30

king

2021-11-30 81c3fd3ac5017591d987d9c9fe42042fae5c7d7d

 src/views/design/header/index.jsx

@@ -2,13 +2,12 @@
import { withRouter } from 'react-router-dom'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Dropdown, Menu, Icon, Modal, Form, notification, Switch, Button } from 'antd'
import { Dropdown, Menu, Icon, Modal, notification, Switch, Button } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import {
  modifyMenuTree,
  modifyMainMenu,
  modifyTabview,
  resetEditLevel,
  logout
} from '@/store/action'
@@ -19,15 +18,17 @@
import Utils from '@/utils/utils.js'
import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const EditMenu = asyncComponent(() => import('@/templates/menuconfig/editfirstmenu'))
const VersionsUp = asyncComponent(() => import('./versions'))
const { confirm } = Modal

class Header extends Component {
  state = {
    menulist: null, // 一级菜单
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    userName: sessionStorage.getItem('CloudUserName'),
    avatar: Utils.getrealurl(sessionStorage.getItem('CloudAvatar')),
  }
@@ -63,10 +64,6 @@
  async loadmenu () {
    // 获取主菜单
    let _param = {func: 's_get_pc_menus', systemType: options.sysType, 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)
@@ -95,6 +92,7 @@
  getMenulist = (result) => {
    let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']
    let menulist = []
    let thdMenuList = []
    result.fst_menu && result.fst_menu.forEach(fst => {
      let fstItem = {
        MenuID: fst.MenuID,
@@ -143,7 +141,7 @@
  
              if (trd.LinkUrl && iframes.includes(trd.LinkUrl.split('?')[0])) {
                trdItem.type = 'iframe'
                trdItem.LinkUrl = trd.LinkUrl
                trdItem.LinkUrl = trd.LinkUrl.replace('&', '&')
                trdItem.forbidden = true
              } else {
                try {
@@ -160,6 +158,8 @@
                }
              }

              thdMenuList.push(trdItem)

              return trdItem
            })
          }
@@ -171,6 +171,7 @@
      menulist.push(fstItem)
    })

    sessionStorage.setItem('thdMenuList', JSON.stringify(thdMenuList))
    return { menulist }
  }

@@ -213,7 +214,8 @@

    this.props.modifyMainMenu(menulist[0] || null)
    this.props.resetEditLevel(false)
    this.props.modifyTabview([])

    MKEmitter.emit('modifyTabs', null, 'replace')
  }
  
  exitEdit = () => {
@@ -239,34 +241,36 @@

  componentDidMount () {
    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
              }
            })
      setTimeout(() => {
        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))
          }

          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))
        }
      })
        })
      }, 50)
    } else if (window.GLOB.systemType === 'production') {
      this.props.resetEditLevel('HS')
      this.props.modifyMainMenu({
@@ -299,29 +303,18 @@
  }

  render () {
    const { mainMenu } = this.props
    const { mainMenu, editLevel } = this.props
    const { menulist } = this.state

    const menu = (
      <Menu className="header-dropdown">
        <Menu.Item key="switch">
          {this.state.dict['main.edit']}
          <Switch size="small" style={{marginLeft: '7px'}} disabled={!!this.props.editLevel} checked={true} onChange={this.changeEditState} />
        </Menu.Item>
        <Menu.Item key="doc" onClick={this.gotoDoc}>{this.state.dict['main.doc']}</Menu.Item>
        <Menu.Item key="logout" onClick={this.logout}>{this.state.dict['main.logout']}</Menu.Item>
      </Menu>
    )

    return (
      <header className={'sys-header-container ant-menu-dark ' + (this.props.editLevel === 'level2' || this.props.editLevel === 'level3' ? 'mask' : '')} id="main-header-container">
      <header className={'sys-header-container ant-menu-dark ' + (['level2', 'level3', 'HS'].includes(editLevel) ? 'mask' : '')} id="main-header-container">
        <div className="header-logo"><img src={MainLogo} alt=""/></div>
        <div className="header-collapse">
          <Icon type="menu-fold"/>
        </div>
        {/* 正常菜单 */}
        {this.props.editLevel !== 'level1' && menulist ?
          <ul className={'header-menu ' + this.props.editLevel}>{
        {editLevel !== 'level1' && menulist ?
          <ul className={'header-menu ' + editLevel}>{
            menulist.map(item => {
              return (
                <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}>
@@ -329,30 +322,74 @@
                </li>
              )
            })}
            {!this.props.editLevel || this.props.editLevel === 'HS' ?
              <li key="HS" onClick={this.enterEditManage} className={this.props.editLevel === 'HS' ? 'active' : ''}>
            {!editLevel || editLevel === 'HS' ?
              <li key="HS" onClick={this.enterEditManage} className={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}
        {editLevel === 'HS' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
        {/* 进入编辑按钮 */}
        {!this.props.editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
        {/* {!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
        } */}
        {!editLevel && menulist ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
        {!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
          <div className="app-entrance entrance">
            <div className="icon"><Icon type="appstore" /></div>
            <div className="title">应用管理</div>
            <div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
            <Button type="primary" onClick={() => {window.open('#/appmanage')}}>
              编辑
            </Button>
          </div> : null
        }
        {editLevel === 'HS' && options.sysType === 'local' && window.GLOB.systemType === 'production' && this.props.memberLevel >= 20 ?
          <div className="app-prod-entrance entrance">
            <div className="icon"><Icon type="appstore" /></div>
            <div className="title">应用管理</div>
            <div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
            <Button type="primary" onClick={() => {window.open('#/appcheck')}}>
              查看
            </Button>
          </div> : null
        }
        {!editLevel && options.sysType === 'local' && this.props.memberLevel >= 20 ?
          <div className="api-entrance entrance">
            <div className="icon"><Icon type="api" /></div>
            <div className="title">接口调试</div>
            <div className="detail">可自动处理登录接口的参数加密，以及业务接口的签名计算，方便开发人员的接口测试工作。</div>
            <Button type="primary" onClick={() => {window.open('#/interface')}}>
              编辑
            </Button>
          </div> : null
        }
        {/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
        {!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
        {!editLevel && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
          <div className="home-entrance entrance">
            <div className="icon"><Icon type="home" /></div>
            <div className="title">首页</div>
            <div className="detail">基于自定义页面的首页设计，可实现灵活的元素配置及样式调整，展现当前系统的风格。</div>
            <Button type="primary" onClick={() => {window.open('#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=')}}>
              编辑
            </Button>
          </div> : null
        }
        {/* 编辑菜单 */}
        {this.props.editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
        {editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
        {/* 头像、用户名 */}
        <Dropdown className="header-setting" overlay={menu}>
          <div>
        <Dropdown className="header-setting" overlay={
          <Menu className="header-dropdown">
            <Menu.Item key="switch">
              {this.state.dict['main.edit']}
              <Switch size="small" style={{marginLeft: '7px'}} disabled={!!editLevel} checked={true} onChange={this.changeEditState} />
            </Menu.Item>
            <Menu.Item key="doc" onClick={this.gotoDoc}>{this.state.dict['main.doc']}</Menu.Item>
            {options.sysType !== 'cloud' ? <Menu.Item style={{padding: 0}} key="verup">
              <VersionsUp />
            </Menu.Item> : null}
            <Menu.Item key="logout" onClick={this.logout}>{this.state.dict['main.logout']}</Menu.Item>
          </Menu>
        }>
          <div style={{zIndex: 1, position: 'relative'}}>
            <img src={this.state.avatar || avatar} alt=""/>
            <span>
              <span className="username">{this.state.userName}</span> <Icon type="down" />
@@ -366,7 +403,6 @@

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    menuTree: state.menuTree,
    mainMenu: state.mainMenu,
    editLevel: state.editLevel,
@@ -377,7 +413,6 @@

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
    modifyMenuTree: (menuTree) => dispatch(modifyMenuTree(menuTree)),
    modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)),
    resetEditLevel: (level) => dispatch(resetEditLevel(level)),
@@ -385,4 +420,4 @@
  }
}

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