2022-07-26

king

2022-07-26 1e3e316b0d64a04fade0a006bec78475dddc06bd

 src/views/design/header/index.jsx

@@ -2,8 +2,8 @@
import { withRouter } from 'react-router-dom'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Dropdown, Menu, Modal, notification, Switch, Button } from 'antd'
import { MenuFoldOutlined, EditOutlined, AppstoreOutlined, DownOutlined, HomeOutlined, ApiOutlined } from '@ant-design/icons'
import { Dropdown, Menu, Modal, notification, Switch, Button, Popover } from 'antd'
import { MenuFoldOutlined, SettingOutlined, AppstoreOutlined, DownOutlined, HomeOutlined, ApiOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
import {
@@ -14,8 +14,6 @@
} from '@/store/action'
import Api from '@/api'
import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/main.js'
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'
@@ -24,22 +22,25 @@

const EditMenu = asyncComponent(() => import('./editfirstmenu'))
const VersionsUp = asyncComponent(() => import('./versions'))
const ThawMenu = asyncComponent(() => import('@/components/thawmenu'))
const MenuForm = asyncComponent(() => import('./editfirstmenu/menuform'))
const { confirm } = Modal

class Header extends Component {
  state = {
    menulist: null, // 一级菜单
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    userName: sessionStorage.getItem('CloudUserName'),
    avatar: Utils.getrealurl(sessionStorage.getItem('CloudAvatar')),
    memberLevel: Utils.getMemberLevel()
    memberLevel: Utils.getMemberLevel(),
    visible: false,
    loading: false
  }

  logout = () => {
    // 退出登录
    let _this = this
    confirm({
      title: this.state.dict['main.logout.hint'],
      title: '您确定要退出吗?',
      content: '',
      onOk() {
        sessionStorage.clear()
@@ -82,11 +83,7 @@
      if (window.GLOB.systemType !== 'production') { // 非正式系统选择第一项
        this.props.modifyMainMenu(menulist[0] || null)
      } else {
        this.props.resetEditLevel('HS')
        window.GLOB.mkHS = true
        this.props.modifyMainMenu({
          MenuID: 'systemManageView'
        })

      }
    } else {
      notification.error({
@@ -197,41 +194,41 @@
    this.props.resetEditLevel('level1')
  }

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

    if (editLevel === 'HS')  return

    window.GLOB.mkHS = true
    this.props.resetEditLevel('HS')
    this.props.modifyMainMenu({
      MenuID: 'systemManageView'
    })
  }

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

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

    this.props.modifyMainMenu(menulist[0] || null)
    this.props.resetEditLevel(false)
    window.GLOB.mkHS = false

    MKEmitter.emit('modifyTabs', null, 'replace')
  }
  
  exitEdit = () => {
    // 退出编辑状态
    this.props.resetEditLevel(false)
    window.GLOB.mkHS = false
  }

  
  addMemuSubmit = () => {
    // 新建菜单：提交
    this.addMenuFormRef.handleConfirm().then(param => {
      param.func = 'sPC_MainMenu_Add'
      param.Sort = (this.state.menulist.length + 1) * 10

      this.setState({
        loading: true
      })
      Api.getSystemConfig(param).then(res => {
        if (res.status) {
          this.setState({
            loading: false,
            visible: false,
          })
          
          this.loadmenu()
        } else {
          this.setState({
            loading: false
          })
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
      })
    }, () => {})
  }
  
  UNSAFE_componentWillMount () {
@@ -289,6 +286,7 @@

      this.reload()
    })
    MKEmitter.addListener('mkUpdateMenuList', this.reload)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -302,6 +300,7 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('mkUpdateMenuList', this.reload)
  }

  gotoDoc = () => {
@@ -316,10 +315,10 @@

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

    return (
      <header className={'sys-header-container ant-menu-dark ' + (['level2', 'level3', 'HS'].includes(editLevel) ? 'mask' : '')} id="main-header-container">
      <header className={'sys-header-container ant-menu-dark ' + (['level2', 'level3'].includes(editLevel) ? 'mask' : '')} id="main-header-container">
        <div className="header-logo"><img src={MainLogo} alt=""/></div>
        <div className="header-collapse">
          <MenuFoldOutlined/>
@@ -334,37 +333,36 @@
                </li>
              )
            })}
            {!editLevel || editLevel === 'HS' ?
              <li key="HS" onClick={this.enterEditManage} className={editLevel === 'HS' ? 'active' : ''}>
            {!editLevel ?
              <li key="HS" onClick={() => window.open('#/hs')}>
                <span>HS</span>
              </li> : null
            }
          </ul> : null
        }
        {editLevel === 'HS' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
        {/* 进入编辑按钮 */}
        {!editLevel && menulist ? <EditOutlined onClick={this.enterEdit} className="edit-check" /> : null}
        {!editLevel && window.GLOB.systemType !== 'production' ?
        {!editLevel && window.GLOB.systemType !== 'production' && menulist ? <Popover overlayClassName="mk-popover-control-wrap mk-menu-control" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <PlusOutlined onClick={() => this.setState({visible: true, loading: false})} className="mk-edit-menu"/>
            <SwapOutlined onClick={this.enterEdit} className="mk-edit-menu"/>
            <div style={{display: 'inline-block', minWidth: '32px'}}><ThawMenu ParentId="0" Type="10" className="mk-edit-menu"/></div>
          </div>
        } trigger="hover">
          <SettingOutlined className="edit-check"/>
        </Popover> : null}
          <div className="app-entrance entrance">
            <div className="icon"><AppstoreOutlined /></div>
            <div className="title">应用管理</div>
            <div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
          {window.GLOB.systemType !== 'production' ? 
            <Button type="primary" disabled={!(memberLevel >= 20)} title={memberLevel >= 20 ? '' : '会员等级不够，无开发权限。'} onClick={() => {window.open('#/appmanage')}}>
              编辑
            </Button>
          </div> : null
        }
        {editLevel === 'HS' && window.GLOB.systemType === 'production' ?
          <div className="app-prod-entrance entrance">
            <div className="icon"><AppstoreOutlined /></div>
            <div className="title">应用管理</div>
            <div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
            </Button> :
            <Button type="primary" disabled={!(memberLevel >= 20)} title={memberLevel >= 20 ? '' : '会员等级不够，无开发权限。'} onClick={() => {window.open('#/appcheck')}}>
              查看
            </Button>
          </div> : null
        }
        {!editLevel ?
        </div>
          <div className="api-entrance entrance">
            <div className="icon"><ApiOutlined /></div>
            <div className="title">接口调试</div>
@@ -372,10 +370,9 @@
            <Button type="primary" disabled={!(memberLevel >= 20)} title={memberLevel >= 20 ? '' : '会员等级不够，无开发权限。'} onClick={() => {window.open('#/interface')}}>
              编辑
            </Button>
          </div> : null
        }
        </div>
        {/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
        {!editLevel && window.GLOB.systemType !== 'production' ?
        {window.GLOB.systemType !== 'production' ?
          <div className="home-entrance entrance">
            <div className="icon"><HomeOutlined /></div>
            <div className="title">首页</div>
@@ -391,14 +388,14 @@
        <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>
            <Menu.Item key="doc" onClick={this.gotoDoc}>文档中心</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.Item key="logout" onClick={this.logout}>退出</Menu.Item>
          </Menu>
        }>
          <div style={{zIndex: 1, position: 'relative'}}>
@@ -408,6 +405,20 @@
            </span>
          </div>
        </Dropdown>
        <Modal
          title="添加菜单"
          visible={visible}
          onOk={this.addMemuSubmit}
          confirmLoading={loading}
          onCancel={() => this.setState({visible: false})}
          destroyOnClose
        >
          <MenuForm
            menu={null}
            inputSubmit={this.addMemuSubmit}
            wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
          />
        </Modal>
      </header>
    )
  }
@@ -417,8 +428,7 @@
  return {
    menuTree: state.menuTree,
    mainMenu: state.mainMenu,
    editLevel: state.editLevel,
    permAction: state.permAction
    editLevel: state.editLevel
  }
}