~jinfei/pc-plat.git

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 {Dropdown, Menu, Icon, Modal, message, Form, notification } from 'antd'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import md5 from 'md5'
import SimpleForm from '@/components/simpleform'
import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState} from '@/store/action'
import Resetpwd from '@/components/resetpwd'
import DragElement from '@/components/dragelement'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import Utils from '@/utils/utils.js'
import logourl from '../../assets/img/mlogo.png'
import avatar from '../../assets/img/avatar.jpg'
import './index.scss'
 
const { confirm } = Modal
const { SubMenu } = Menu
let previewList = null
 
class Header extends Component {
  static propTpyes = {
    collapse: PropTypes.bool,
    mainMenu: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ])
  }
  state = {
    menulist: null, // 一级菜单
    visible: false, // 修改密码模态框
    addMvisible: false, // 添加菜单模态框
    editMenu: null, // 编辑菜单
    editMvisible: false, // 编辑菜单模态框
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    confirmLoading: false,
    userName: localStorage.getItem('username')
  }
 
  handleCollapse = () => {
    // 展开、收起左侧菜单栏
    this.props.toggleCollapse(!this.props.collapse)
  }
 
  changePassword = () => {
    // 点击修改密码，显示弹窗
    this.setState({
      visible: true
    })
  }
 
  md5Password (pwd) {
    // md5密码加密
    const salt = 'minkesoft'
    return md5(md5(pwd + salt))
  }
 
  resetPwdSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      this.setState({
        confirmLoading: true
      })
      this.resetPwdSubmitexec(res)
    }, () => {})
  }
 
  async resetPwdSubmitexec (param) {
    // 重置密码提交，关闭模态框，清空表单数据
    let password = this.md5Password(param.originpwd)
    let newpassword = this.md5Password(param.password)
    let result = await Api.resetpassword(password, newpassword)
    if (result.status) {
      this.setState({
        visible: false,
        confirmLoading: false
      })
      this.formRef.resetfrom()
      message.success(this.state.dict['header.password.resetsuccess'])
    } else {
      message.warning(result.message)
      this.setState({
        confirmLoading: false
      })
    }
  }
 
  handleCancel = () => {
    // 取消时关闭修改密码模态框，清空表单数据
    this.setState({
      visible: false
    })
    this.formRef.resetfrom()
  }
 
  logout = () => {
    // 退出登录
    let _this = this
    confirm({
      title: this.state.dict['header.logout.hint'],
      content: '',
      okText: this.state.dict['header.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        return Api.logoutsystem().then(res => {
          if (res.status) {
            sessionStorage.removeItem('UserID')
            _this.props.resetState()
            _this.props.history.replace('/login')
          } else {
            message.warning(res.message)
          }
        })
      },
      onCancel() {}
    })
  }
 
  changeMenu (value) {
    // 主菜单切换
    this.props.modifyMainMenu(value)
  }
 
  async loadmenu () {
    // 获取主菜单
    let result = await Api.getMainMenuData()
    if (result.status) {
      let _avatar = Utils.getrealurl(result.HeadIcon) // 头像
      if (_avatar) {
        avatar = _avatar
      }
 
      if (result.debug === 'true') { // 是否为debug模式，即可复制菜单参数
        this.props.resetDebug()
      }
 
      let param = sessionStorage.getItem('view_param') // 是否为打开新页面
      if (param) {
        // 通过url中menuid筛选出选中的主菜单
        let menuId = param.split('&')[0]
        let _menu = result.data.filter(item => item.MenuID === menuId)[0]
        if (!_menu) {
          sessionStorage.removeItem('view_param')
        }
        this.props.modifyMainMenu(_menu || result.data[0])
      } else {
        this.props.modifyMainMenu(result.data[0])
      }
 
      previewList = result.data.map((item, index) => {
        item.id = index
        item.text = item.MenuName
        return item
      })
 
      this.setState({
        menulist: previewList
      })
    }
  }
 
  handlePreviewList = (List) => {
    // 菜单顺序改变时，保存中间状态
    previewList = List
  }
 
  handleButton = (type) => {
    // 菜单编辑：添加，确定，取消
    if (type === 'add') {
      this.setState({
        addMvisible: true
      })
    } else if (type === 'confirm' && !is(fromJS(previewList), fromJS(this.state.menulist))) {
      Api.logoutsystem().then(res => {
        if (res.status) {
          this.loadmenu()
        } else {
          message.warning(res.message)
        }
      })
    } else {
      previewList = this.state.menulist
      this.props.resetEditState(false)
    }
  }
 
  handleMenu = (Menu) => {
    // 菜单编辑：修改、删除
    const _this = this
    const menu = fromJS(Menu)
    const card = menu.get('card')
    if (!is(fromJS(previewList), fromJS(this.state.menulist))) {
      notification.warning({
        top: 92,
        message: this.state.dict['header.menu.presave'],
        duration: 10
      })
    } else if (menu.get('type') === 'close') {
      confirm({
        title: this.state.dict['header.menu.close'].replace('@M', card.get('MenuName')),
        content: '',
        okText: this.state.dict['header.confirm'],
        cancelText: this.state.dict['header.cancel'],
        onOk() {
          return Api.logoutsystem().then(res => {
            if (res.status) {
              _this.loadmenu()
            } else {
              message.warning(res.message)
            }
          })
        },
        onCancel() {}
      })
    } else if (menu.get('type') === 'edit') {
      this.setState({
        editMvisible: true,
        editMenu: [
          {
            type: 'text',
            key: 'menuID',
            label: this.state.dict['header.menu.menuID'],
            initVal: card.get('MenuID'),
            required: true,
            readonly: true
          },
          {
            type: 'text',
            key: 'menuName',
            label: this.state.dict['header.menu.menuName'],
            initVal: card.get('MenuName'),
            required: true,
            readonly: false
          }
        ]
      })
    }
  }
 
  changeEditState = (state) => {
    // 修改编辑菜单类型
    this.props.resetEditState(state)
  }
 
  addMemuSubmit = () => {
    // 新建菜单：提交
    this.addMenuFormRef.handleConfirm().then(res => {
      this.setState({
        confirmLoading: true
      })
      Api.logoutsystem().then(res => {
        if (res.status) {
          this.setState({
            confirmLoading: false,
            addMvisible: false
          })
          this.addMenuFormRef.handleReset()
          this.loadmenu()
        } else {
          this.setState({
            confirmLoading: false
          })
          message.warning(res.message)
        }
      })
    }, () => {})
  }
 
  addMemuCancel = () => {
    // 新建菜单：取消
    this.setState({
      confirmLoading: false,
      addMvisible: false
    })
    this.addMenuFormRef.handleReset()
  }
 
  editMemuSubmit = () => {
    // 编辑菜单：提交
    this.editMenuFormRef.handleConfirm().then(res => {
      this.setState({
        confirmLoading: true
      })
      Api.logoutsystem().then(res => {
        if (res.status) {
          this.setState({
            confirmLoading: false,
            editMvisible: false,
            editMenu: null
          })
          this.loadmenu()
        } else {
          this.setState({
            confirmLoading: false
          })
          message.warning(res.message)
        }
      })
    }, () => {})
  }
 
  editMemuCancel = () => {
    // 编辑菜单：取消
    this.setState({
      confirmLoading: false,
      editMvisible: false
    })
    this.editMenuFormRef.handleReset()
  }
  
  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
    this.loadmenu()
  }
 
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
 
  render () {
    const menu = (
      <Menu overlayclassname="header-dropdown">
        {this.props.debug && <SubMenu title="编辑">
          <Menu.Item onClick={() => {this.changeEditState('level1')}}>一级菜单</Menu.Item>
          <Menu.Item>二级菜单</Menu.Item>
          <Menu.Item>三级菜单</Menu.Item>
        </SubMenu>}
        <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item>
        <Menu.Item key="2" onClick={this.logout}>{this.state.dict['header.logout']}</Menu.Item>
      </Menu>
    )
 
    return (
      <header className="header-container ant-menu-dark">
        <div className={this.props.collapse ? "collapse header-logo" : "header-logo"}><img src={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'} />
        </div>
        {this.props.editState !== 'level1' && this.state.menulist && <ul className="header-menu">{
          this.state.menulist.map(item => {
            return (
              <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={this.props.selectmenu.MenuID === item.MenuID ? 'active' : ''}>
                {item.MenuName}
              </li>
            )
          })
        }</ul>}
        {this.props.editState === 'level1' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
          <DragElement
            dict={this.state.dict}
            list={this.state.menulist}
            handlePreviewList={this.handlePreviewList}
            handleMenu={this.handleMenu}
            handleButton={this.handleButton}
          />
        </DndProvider>}
        <Dropdown className="header-setting" overlay={menu}>
          <div>
            <img src={avatar} alt=""/>
            <span>
              <span className="username">{this.state.userName}</span> <Icon type="down" />
            </span>
          </div>
        </Dropdown>
        {/* 修改密码 */}
        <Modal
          title={this.state.dict['header.password']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.visible}
          onOk={this.resetPwdSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.handleCancel}
        >
          <Resetpwd dict={this.state.dict} wrappedComponentRef={(inst) => this.formRef = inst} resetPwdSubmit={this.resetPwdSubmit}/>
        </Modal>
        {/* 新建菜单模态框 */}
        <Modal
          title={this.state.dict['header.menu.addtitle']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.addMvisible}
          onOk={this.addMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.addMemuCancel}
        >
          <SimpleForm
            dict={this.state.dict}
            formlist={[
              {
                type: 'text',
                key: 'menuID',
                label: this.state.dict['header.menu.menuID'],
                initVal: '',
                required: true,
                readonly: false
              },
              {
                type: 'text',
                key: 'menuName',
                label: this.state.dict['header.menu.menuName'],
                initVal: '',
                required: true,
                readonly: false
              }
            ]}
            cols={1}
            wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
          />
        </Modal>
        {/* 编辑菜单模态框 */}
        <Modal
          title={this.state.dict['header.menu.edittitle']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.editMvisible}
          onOk={this.editMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.editMemuCancel}
        >
          <SimpleForm
            dict={this.state.dict}
            formlist={this.state.editMenu || []}
            cols={1}
            wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
          />
        </Modal>
      </header>
    )
  }
}
 
const mapStateToProps = (state) => {
  return {
    collapse: state.collapse,
    selectmenu: state.selectedMainMenu,
    debug: state.debug,
    editState: state.editState
  }
}
 
const mapDispatchToProps = (dispatch) => {
  return {
    toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
    modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
    resetState: () => dispatch(resetState()),
    resetDebug: () => dispatch(resetDebug()),
    resetEditState: (state) => dispatch(resetEditState(state))
  }
}
 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))