2024-10-17

king

2024-10-17 044a4ec4ebe85f8c00e889fe3914de17a6ea1f28

 src/components/sidemenu/index.jsx

@@ -1,244 +1,87 @@
import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Menu, Icon, notification } from 'antd'
import { Menu } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import { modifyTabview, resetEditLevel } from '@/store/action'
import { SySMenuList } from './config'
import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Api from '@/api'
import MKEmitter from '@/utils/events.js'
import MkIcon from '@/components/mk-icon'
import './index.scss'

const EditSecMenu = asyncComponent(() => import('@/templates/menuconfig/editsecmenu'))
const EditThdMenu = asyncComponent(() => import('@/templates/menuconfig/editthdmenu'))
const { SubMenu } = Menu

class Sidemenu extends Component {
  static propTypes = {
    collapse: PropTypes.bool,
    mainMenu: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ])
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    mainMenuList: null,      // 一级菜单，编辑调整上级菜单时获取
    subMenulist: [],         // 二级菜单
    editMenu: null,          // 编辑三级菜单时设置
    rootSubmenuKeys: null,
    createThirdMenu: false,
    openKeys: null,
    preview: null
    collapse: sessionStorage.getItem('collapse') === 'true',
    openKeys: null
  }

  async loadsubmenu (menu) {
    if (!menu || !menu.MenuID) { // 没有主菜单时，清空下级菜单
      this.setState({
        subMenulist: [],
        rootSubmenuKeys: [],
        openKeys: [],
        editMenu: null
      })
      return
    }
  componentDidMount() {
    MKEmitter.addListener('mainMenuChange', this.loadsubmenu)
    MKEmitter.addListener('toggleCollapse', this.toggleCollapse)

    let _param = {func: 'sPC_Get_FunMenu', ParentID: menu.MenuID, systemType: options.sysType}

    if (sessionStorage.getItem('isEditState') === 'true') { // 编辑状态时，获取菜单，增加参数debug
      _param.debug = 'Y'
    }

    let result = await Api.getSystemConfig(_param)
    if (result.status) {
      if (this.props.editState && this.props.editLevel === 'HS') return
      
      if (result.data.length === 0) { // 查询菜单为空
        this.setState({
          subMenulist: [],
          rootSubmenuKeys: [],
          openKeys: []
        })
        return
      }

      let SubMenuId = sessionStorage.getItem('SubMenu')   // 是否为打开新页面
      let ThirdMenuId = sessionStorage.getItem('ThirdMenu') // 是否为打开新页面
      let msg = sessionStorage.getItem('UserID') + '&ld=' + sessionStorage.getItem('LoginUID') + '&un=' + sessionStorage.getItem('User_Name')
      let submenuId = '' // 展开二级菜单ID
      let tabId = '' // 打开的tab页id
      
      if (SubMenuId && ThirdMenuId) {
        submenuId = SubMenuId
        let submenu = result.data.filter(item => item.ParentID === SubMenuId)[0]

        if (!submenu) {
          submenuId = ''
        } else {
          tabId = ThirdMenuId
          let tabmenu = submenu.FunMenu.filter(item => item.MenuID === ThirdMenuId)[0]
          if (!tabmenu) {
            submenuId = ''
            tabId = ''
          }
        }
        sessionStorage.removeItem('SubMenu')
        sessionStorage.removeItem('ThirdMenu')
      }
      let parentID = submenuId ? submenuId : result.data[0].ParentID // 展开二级菜单ID

      let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']
      
      let menulist = result.data.map(item => {
        let _smenu = {}
        _smenu.id = item.ParentID
        _smenu.MenuID = item.ParentID
        _smenu.text = item.MenuNameP

        try {
          _smenu.PageParam = JSON.parse(item.PageParamP)
        } catch (e) {
          _smenu.PageParam = {Icon: 'folder'}
        }

        if (item.FunMenu) {
          _smenu.children = item.FunMenu.map(child => {
            let _tmenu = {
              ParentId: item.ParentID
            }

            // 打开新页面链接
            _tmenu.src = '#/main/' + window.btoa('mm=' + menu.MenuID + '&sm=' + _smenu.MenuID + '&tm=' + child.MenuID + '&ud=' + msg)

            if (child.LinkUrl === 'CommonTable') {
              _tmenu.type = 'CommonTable'
            } else if (child.LinkUrl === 'DataManage') {
              _tmenu.type = 'DataManage'
              _tmenu.forbidden = true
            } else if (iframes.includes(child.LinkUrl.split('?')[0])) {
              _tmenu.type = 'iframe'
              _tmenu.forbidden = true
            }

            if (_tmenu.type !== 'iframe') {
              try {
                _tmenu.PageParam = JSON.parse(child.PageParam)
              } catch (e) {
                _tmenu.PageParam = {}
              }
              _tmenu.type = _tmenu.PageParam.Template || _tmenu.type
            } else {
              _tmenu.LinkUrl = child.LinkUrl
            }

            _tmenu.id = child.MenuID
            _tmenu.MenuID = child.MenuID
            _tmenu.MenuNo = child.MenuNo
            _tmenu.MenuName = child.MenuName
            _tmenu.text = child.MenuName
            return _tmenu
          })
        }
        return _smenu
      })

      this.setState({
        subMenulist: menulist,
        rootSubmenuKeys: result.data.map(item => item.ParentID),
        openKeys: this.props.collapse ? [] : [parentID],
        editMenu: this.props.editLevel === 'level3' && menulist.filter(menu => menu.MenuID === this.state.editMenu.MenuID)[0]
      })
      if (tabId) {
        let _menu = menulist.filter(menu => menu.MenuID === submenuId)[0]
        let opentab = _menu && _menu.children.filter(tab => tab.MenuID === tabId)[0]
        if (opentab) {
          opentab.selected = true
          let home = this.props.tabviews[0]
          home.selected = false
          this.props.modifyTabview([home, opentab])
        }
      }
    } else {
      notification.warning({
        top: 92,
        message: result.message,
        duration: 5
      })
    }
  }

  enterManageView = (type) => {
    let menulist = SySMenuList[type]

    if (window.GLOB.systemType === 'production') {
      menulist.forEach(menu => {
        menu.children = menu.children.filter(item => item.systems && item.systems.includes(window.GLOB.systemType))
      })

      menulist = menulist.filter(menu => menu.children.length > 0)
    } else {
      menulist.forEach(menu => {
        menu.children = menu.children.filter(item => !item.systems || item.systems.includes(options.sysType))
      })

      menulist = menulist.filter(menu => menu.children.length > 0)
    }

    this.setState({
      subMenulist: menulist,
      rootSubmenuKeys: menulist.map(item => item.MenuID),
      openKeys: this.props.collapse ? [] : [menulist[0].MenuID]
    })
  }

  changemenu(e) {
    if (this.props.editState && this.props.editLevel !== 'HS') {
      e.preventDefault()
      return
    }
    
    let menu = JSON.parse(e.target.dataset.item)
    if (menu.Ot === 'NewPage') {
      window.open(menu.src)
    } else if (menu.Ot === 'blank') {
      menu.selected = true
      this.props.modifyTabview([menu])
      e.preventDefault()
    } else {
      let tabs = JSON.parse(JSON.stringify(this.props.tabviews))
      tabs = tabs.filter(tab => {
        tab.selected = false
        return tab.MenuID !== menu.MenuID
      })
      menu.selected = true
      tabs.push(menu)
      this.props.modifyTabview(tabs)
      e.preventDefault()
    }
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu)) && nextProps.mainMenu && nextProps.mainMenu.MenuID === 'systemManageView') {
      this.enterManageView(nextProps.mainMenu.MenuID)
    } else if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
      // 主菜单切换，请求2、3级菜单数据
      this.loadsubmenu(nextProps.mainMenu)
    } else if (nextProps.collapse && this.props.collapse !== nextProps.collapse) {
      // 展开合并时，关闭展开菜单
      this.setState({
        openKeys: []
      })
    if (window.GLOB.mainMenu) {
      this.loadsubmenu()
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('mainMenuChange', this.loadsubmenu)
    MKEmitter.removeListener('toggleCollapse', this.toggleCollapse)
  }

  toggleCollapse = (collapse) => {
    this.setState({
      collapse: collapse,
      openKeys: []
    })
  }

  loadsubmenu = () => {
    let menu = window.GLOB.mainMenu

    if (!menu || !menu.MenuID) { // 没有主菜单时，清空下级菜单
      this.setState({
        subMenulist: [],
        rootSubmenuKeys: [],
        openKeys: [],
      })
      return
    }

    menu = fromJS(menu).toJS()
    let openKey = ''

    if (menu.children[0]) {
      openKey = menu.children[0].MenuID
    }

    this.setState({
      subMenulist: menu.children,
      rootSubmenuKeys: menu.children.map(item => item.MenuID),
      openKeys: this.state.collapse ? [] : [openKey],
    })
  }

  changemenu(e, menu) {
    e.preventDefault()

    if (menu.OpenType === 'newpage') {
      window.open(menu.src)
    } else {
      MKEmitter.emit('modifyTabs', menu)
    }

    if (window.GLOB.systemType === 'production') {
      MKEmitter.emit('queryTrigger', {menuId: menu.MenuID, name: '菜单'})
    }
  }

  onOpenChange = openKeys => {
@@ -252,113 +95,39 @@
    }
  }

  enterSubEdit = (e) => {
    // 编辑二级菜单
    e.stopPropagation()
    this.props.resetEditLevel('level2')
    // 获取一级菜单列表
    Api.getSystemConfig({func: 'sPC_Get_MainMenu', debug: 'Y'}).then(res => {
      this.setState({
        mainMenuList: res.data.map(item => {
          return {
            MenuID: item.MenuID,
            text: item.MenuName
          }
        })
      })
    })
  }

  enterThrEdit = (e, menu) => {
    // 编辑三级菜单
    e.stopPropagation()
    this.props.resetEditLevel('level3')
    this.setState({editMenu: menu})
  }

  reload = () => {
    this.loadsubmenu(this.props.mainMenu)
  }

  exitEdit = () => {
    if (this.props.editLevel === 'level3') {
      this.setState({editMenu: null})
    }
    this.props.resetEditLevel(false)
  }

  render () {
    const editShow = (this.props.editState && !this.props.editLevel) || false
    const { collapse } = this.state

    if (window.GLOB.mainMenu === '') return (<span className="mk-side-menu-hidden"></span>)

    return (
      <aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '') + (this.props.editState ? ' edit' : '')}>
        {!(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') &&
          <Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
          {editShow && <li className="sup-menu"><Icon onClick={this.enterSubEdit} className="edit-check" type="edit" /></li>}
          {this.state.subMenulist && this.state.subMenulist.map((item, index) => {
      <aside id="mk-sidemenu-wrap" className={'mk-side-menu ant-menu-dark' + (collapse ? ' collapsed' : '')}>
        <Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={collapse}>
          {this.state.subMenulist && this.state.subMenulist.map((item) => {
            return (
              <SubMenu
                key={item.MenuID}
                title={
                  <span className={editShow && index === 0 ? 'edit-control' : ''}>
                    <Icon type={item.PageParam.Icon} />
                    <span>{item.text}</span>
                  <span>
                    <MkIcon type={item.Icon} />
                    <span>{item.MenuName}</span>
                  </span>
                }
              >
                {editShow ? <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}>
                  <Icon onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check" type="edit" />
                </li> : null}
                {item.children.map(cell => {
                  return (
                    <Menu.Item key={cell.MenuID}>
                      <a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.text}</a>
                      <a href={cell.src} onClick={(e) => this.changemenu(e, cell)}>{cell.MenuName}</a>
                    </Menu.Item>
                  )
                })}
              </SubMenu>
            )
          })}
        </Menu>}
        {this.props.editLevel === 'level2' ?
          <EditSecMenu
            menulist={this.state.subMenulist}
            supMenuList={this.state.mainMenuList}
            supMenu={this.props.mainMenu}
            reload={this.reload}
            exitEdit={this.exitEdit}
          /> : null
        }
        {this.props.editLevel === 'level3' && this.state.subMenulist && this.state.editMenu ?
          <EditThdMenu
            menulist={this.state.editMenu.children}
            supMenuList={this.state.subMenulist}
            supMenu={this.state.editMenu}
            reload={this.reload}
            exitEdit={this.exitEdit}
          /> : null
        }
        </Menu>
      </aside>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    collapse: state.collapse,
    isiframe: state.isiframe,
    mainMenu: state.selectedMainMenu,
    editState: state.editState,
    editLevel: state.editLevel
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
    resetEditLevel: (level) => dispatch(resetEditLevel(level))
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sidemenu))
export default Sidemenu