2020-07-16

king

2020-07-16 9a82bce9cf0ed4a51c1b0b0669eaa38cedbace07

 src/components/header/index.jsx

@@ -4,30 +4,36 @@
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,
  resetEditLevel,
  initPermission,
  modifyDataManager,
  initActionPermission,
  initMenuPermission,
  logout
} from '@/store/action'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
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 logourl from '@/assets/img/main-logo.png'
import avatar from '@/assets/img/avatar.jpg'
import Resetpwd from './resetpwd'
import LoginForm from './loginform'
import './index.scss'

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

class Header extends Component {
  static propTpyes = {
@@ -40,20 +46,23 @@
  state = {
    menulist: null, // 一级菜单
    visible: false, // 修改密码模态框
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    confirmLoading: false,
    userName: sessionStorage.getItem('User_Name'),
    logourl: window.GLOB.mainlogo || logourl,
    logourl: window.GLOB.mainlogo,
    loginVisible: false,
    loginLoading: false,
    avatar: avatar,
    systems: []
    systems: [],
    searchkey: '',
    thdMenuList: []
  }

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

@@ -92,14 +101,14 @@
      })
      notification.success({
        top: 92,
        message: this.state.dict['header.password.resetsuccess'],
        message: this.state.dict['main.password.resetsuccess'],
        duration: 2
      })
    } else {
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
        duration: 5
      })
      this.setState({
        confirmLoading: false
@@ -118,10 +127,10 @@
    // 退出登录
    let _this = this
    confirm({
      title: this.state.dict['header.logout.hint'],
      title: this.state.dict['main.logout.hint'],
      content: '',
      okText: this.state.dict['header.confirm'],
      cancelText: this.state.dict['header.cancel'],
      okText: this.state.dict['main.confirm'],
      cancelText: this.state.dict['main.cancel'],
      onOk() {
        sessionStorage.clear()
        _this.props.logout()
@@ -146,9 +155,12 @@

  async loadmenu () {
    // 获取主菜单
    let _param = {func: 'sPC_Get_MainMenu'}
    let _param = {func: 'sPC_Get_MainMenu', 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
    }

    let result = await Api.getSystemConfig(_param)
@@ -188,55 +200,113 @@
        }),
        systems: result.Systems.filter(sys => sys.LinkUrl1 && sys.AppKey !== window.GLOB.appkey)
      })

      if (result.dataM) {
        this.props.modifyDataManager(true)
      }
    } else {
      notification.error({
        top: 92,
        message: result.message,
        duration: 15
        duration: 10
      })
    }
  }

  async getRolesMenu () {
    // 获取角色权限
    let result = await Api.getSystemConfig({func: 'sPC_Get_RolesMenu'})
    let promiseRole = new Promise(resolve => {
      Api.getSystemConfig({func: 'sPC_Get_RolesMenu'}).then(result => {
        let _permAction = {}
        let _permRoles = []
        if (result && result.status) {
          if (result.UserRoles) {
            result.UserRoles.forEach(role => {
              _permRoles.push(role.RoleID)

    // 登录超时
    if (!result) return
    
    if (result.status) {
      let _permAction = {}
      let _permRoles = []
      let _permFuncField = []
      if (result.UserRoles) {
        result.UserRoles.forEach(role => {
          _permRoles.push(role.RoleID)

          role.RoleMenu.forEach(menu => {
            if (!menu.MenuID) return
            _permAction[menu.MenuID] = true
          })
        })
      }

      if (result.sModular && result.sModular.length > 0) {
        result.sModular.forEach(field => {
          if (field.ModularNo) {
            _permFuncField.push(field.ModularNo)
              role.RoleMenu.forEach(menu => {
                if (!menu.MenuID) return
                _permAction[menu.MenuID] = true
              })
            })
          }
        })
        _permFuncField = _permFuncField.sort()
        } else if (result) {
          notification.error({
            top: 92,
            message: result.message,
            duration: 10
          })
        }

        resolve({permAction: _permAction, permRoles: _permRoles})
      })
    })
    
    // 获取主菜单参数
    let promiseMenu = new Promise(resolve => {
      let _param = {func: 'sPC_Get_MainMenu', systemType: options.sysType}
      if (options.sysType !== 'cloud' && window.GLOB.systemType !== 'production') {
        _param.linkurl = window.GLOB.linkurl
      }

      this.props.initPermission(_permRoles, _permAction, _permFuncField)
      this.loadmenu()
    } else {
      notification.error({
        top: 92,
        message: result.message,
        duration: 15
      Api.getSystemConfig(_param).then(result => {
        let mainMenu = null
        if (result && result.status) {
          if (result.debug === 'true') { // 是否为debug模式，即可复制菜单参数
            this.props.resetDebug()
          }
    
          let MainMenuId = sessionStorage.getItem('MainMenu') // 是否为打开新页面
          if (MainMenuId) {
            // 通过url中menuid筛选出选中的主菜单
            let _menu = result.data.filter(item => item.MenuID === MainMenuId)[0]
            sessionStorage.removeItem('MainMenu')
            mainMenu = _menu || result.data[0]
          } else {
            mainMenu = result.data[0]
          }
    
          this.setState({
            menulist: result.data.map((item, index) => {
              item.id = index
              item.text = item.MenuName
              if (item.PageParam) {
                try {
                  item.PageParam = JSON.parse(item.PageParam)
                } catch (e) {
                  item.PageParam = {OpenType: 'menu', linkUrl: ''}
                }
              } else {
                item.PageParam = {OpenType: 'menu', linkUrl: ''}
              }
              return item
            }),
            systems: result.Systems.filter(sys => sys.LinkUrl1 && sys.AppKey !== window.GLOB.appkey)
          })

          if (result.dataM) {
            this.props.modifyDataManager(true)
          }
        } else if (result) {
          notification.error({
            top: 92,
            message: result.message,
            duration: 10
          })
        }

        resolve(mainMenu)
      })
    })
    
    let _mainMenu = await promiseMenu
    if (_mainMenu) {
      this.props.modifyMainMenu(_mainMenu)
    }

    let _role = await promiseRole

    this.props.initActionPermission(_role.permRoles, _role.permAction)
  }

  reload = () => {
@@ -247,6 +317,13 @@
  }

  changeEditState = (state) => {
    const { menulist } = this.state

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

    // 修改编辑状态
    let UserID = sessionStorage.getItem('CloudUserID')
    let LoginUID = sessionStorage.getItem('CloudLoginUID')
@@ -258,7 +335,7 @@
    } else {
      sessionStorage.setItem('isEditState', state)
      let _userName = sessionStorage.getItem('User_Name')
      let _avatar = this.state.avatar
      let _avatar = avatar

      if (!state && sessionStorage.getItem('avatar')) {
        _avatar = Utils.getrealurl(sessionStorage.getItem('avatar')) // 头像
@@ -270,6 +347,32 @@
        _userName = sessionStorage.getItem('CloudUserName')
      }

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

        this.setState({
          userName: _userName,
          avatar: _avatar
        })
        this.props.resetEditState(state)

        return
      } else if (window.GLOB.systemType === 'production' && !state) {
        this.props.resetEditLevel(false)
        this.props.modifyMainMenu(menulist[0] || '')

        this.setState({
          userName: _userName,
          avatar: _avatar
        })
        this.props.resetEditState(state)

        return
      }

      this.setState({
        menulist: null,
        userName: _userName,
@@ -278,6 +381,36 @@
      this.loadmenu()
      this.props.modifyMainMenu('')
      this.props.resetEditState(state)
    }

    if (state && this.props.sysRoles.length === 0 && this.props.permFuncField.length === 0 && 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()
          }

          this.props.initPermission(_sysRoles, _permFuncField)
        }
      })
    }
  }

@@ -296,9 +429,26 @@
          sessionStorage.setItem('CloudAvatar', res.icon)
          sessionStorage.setItem('isEditState', 'true')

          let _avatar = this.state.avatar
          let _avatar = avatar
          if (res.icon) {
            _avatar = Utils.getrealurl(res.icon) // 头像
          }

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

          this.setState({
@@ -318,7 +468,7 @@
          notification.error({
            top: 92,
            message: res.message,
            duration: 15
            duration: 10
          })
        }
      })
@@ -333,9 +483,9 @@
  enterEditManage = () => {
    const { editLevel } = this.props

    if (editLevel === 'level4')  return
    if (editLevel === 'HS')  return

    this.props.resetEditLevel('level4')
    this.props.resetEditLevel('HS')
    this.props.modifyMainMenu({
      MenuID: 'systemManageView'
    })
@@ -345,6 +495,11 @@
   * @description 退出管理界面菜单
   */
  exitManage = () => {
    if (window.GLOB.systemType === 'production') { // 正式系统版本升级后，页面刷新
      window.location.reload()
      return
    }

    this.props.resetEditState(true)
    this.props.resetEditLevel(false)
    this.reload()
@@ -359,6 +514,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 () {
    // 组件加载时，获取菜单数据
@@ -370,29 +565,106 @@
    this.getRolesMenu()
  }

  componentDidMount () {
    // 获取角色菜单权限
    Api.getSystemConfig({func: 's_Get_TrdMenu_Role'}).then(result => {
      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({
          top: 92,
          message: result.message,
          duration: 10
        })
      }
    })
  }

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

  gotoDoc = () => {
    if (options.sysType === 'local' && window.GLOB.mainSystemApi) {
      let ssodomain = window.GLOB.mainSystemApi.replace('/webapi/dostars', '')
      let url = `${ssodomain}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`
      window.open(url)
    } else if (options.sysType === 'SSO' || options.sysType === 'cloud') {
      window.open(`${window.location.href.replace(/\/index.html(.*)|\/#(.*)/ig, '')}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`)
    }
  }

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

    const menu = (
      <Menu overlayclassname="header-dropdown">
        {this.props.debug && <Menu.Item key="0">
          {this.state.dict['header.edit']}
          {this.state.dict['main.edit']}
          <Switch size="small" className="edit-switch" disabled={!!this.props.editLevel} checked={this.props.editState} onChange={this.changeEditState} />
        </Menu.Item>}
        {!this.props.editState ? <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item> : null}
        {!this.props.editState ? <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['main.password']}</Menu.Item> : null}
        {/* {this.state.systems.length > 0 ? <Menu.SubMenu title="切换系统">
          {this.state.systems.map((system, index) => (
            <Menu.Item className="header-subSystem" key={'sub' + index} onClick={() => {this.changeSystem(system)}}> {system.AppName} </Menu.Item>
          ))}
        </Menu.SubMenu> : null} */}
        <Menu.Item key="2" onClick={this.logout}>{this.state.dict['header.logout']}</Menu.Item>
        <Menu.Item key="2" onClick={this.gotoDoc}>{this.state.dict['main.doc']}</Menu.Item>
        <Menu.Item key="3" onClick={this.logout}>{this.state.dict['main.logout']}</Menu.Item>
      </Menu>
    )

    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'} />
@@ -407,16 +679,19 @@
                </li>
              )
            })}
            {this.props.editState && (!this.props.editLevel || this.props.editLevel === 'level4') ?
              <li key="HS" onClick={this.enterEditManage} className={this.props.editLevel === 'level4' ? 'active' : ''}>
            {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 === 'level4' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : 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
        } */}
        {/* 编辑菜单 */}
        {this.props.editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
        {/* 头像、用户名 */}
@@ -428,11 +703,47 @@
            </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']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          title={this.state.dict['main.password']}
          okText={this.state.dict['main.confirm']}
          cancelText={this.state.dict['main.cancel']}
          visible={this.state.visible}
          onOk={this.resetPwdSubmit}
          confirmLoading={this.state.confirmLoading}
@@ -443,9 +754,9 @@
        </Modal>
        {/* 编辑状态登录 */}
        <Modal
          title={this.state.dict['header.login.develop']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          title={this.state.dict['main.login.develop']}
          okText={this.state.dict['main.confirm']}
          cancelText={this.state.dict['main.cancel']}
          visible={this.state.loginVisible}
          onOk={this.loginSubmit}
          width={'430px'}
@@ -462,12 +773,14 @@

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    collapse: state.collapse,
    selectmenu: state.selectedMainMenu,
    debug: state.debug,
    editState: state.editState,
    editLevel: state.editLevel,
    permAction: state.permAction,
    sysRoles: state.sysRoles,
    permFuncField: state.permFuncField
  }
}
@@ -475,10 +788,14 @@
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)),
    initPermission: (permRoles, permAction, permFuncField) => dispatch(initPermission(permRoles, permAction, permFuncField)),
    initActionPermission: (permRoles, permAction) => dispatch(initActionPermission(permRoles, permAction)),
    initPermission: (sysRoles, permFuncField) => dispatch(initPermission(sysRoles, permFuncField)),
    initMenuPermission: (permMenus) => dispatch(initMenuPermission(permMenus)),
    modifyDataManager: (dataManager) => dispatch(modifyDataManager(dataManager)),
    resetState: () => dispatch(resetState()),
    resetDebug: () => dispatch(resetDebug()),
    logout: () => dispatch(logout())