level1 menu

king

2019-10-29 d4f4804aeedb44d81b7518cd5469abcb0c215d6b

 src/components/header/index.jsx

@@ -3,12 +3,13 @@
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 {Dropdown, Menu, Icon, Modal, message, Form, notification, Button, Switch, Spin } 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 MenuForm from './menuform'
import TransferForm from './transferform'
import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState, resetEditLevel} from '@/store/action'
import Resetpwd from '@/components/resetpwd'
import DragElement from '@/components/dragelement'
import Api from '@/api'
@@ -18,9 +19,9 @@
import logourl from '../../assets/img/mlogo.png'
import avatar from '../../assets/img/avatar.jpg'
import './index.scss'
import { Promise } from 'q';

const { confirm } = Modal
const { SubMenu } = Menu
let previewList = null

class Header extends Component {
@@ -33,10 +34,12 @@
  }
  state = {
    menulist: null, // 一级菜单
    thawmenulist: null, // 已冻结的一级菜单
    visible: false, // 修改密码模态框
    addMvisible: false, // 添加菜单模态框
    editMenu: null, // 编辑菜单
    editMvisible: false, // 编辑菜单模态框
    thawMvisible: false, // 解除冻结模态框
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    confirmLoading: false,
    userName: localStorage.getItem('username')
@@ -44,7 +47,9 @@

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

  changePassword = () => {
@@ -122,7 +127,12 @@

  changeMenu (value) {
    // 主菜单切换
    this.props.modifyMainMenu(value)
    console.log(value)
    if (value.PageParam.OpenType === 'menu') {
      this.props.modifyMainMenu(value)
    } else {
      window.open('#/' + value.PageParam.linkUrl + '/')
    }
  }

  async loadmenu () {
@@ -154,6 +164,11 @@
      previewList = result.data.map((item, index) => {
        item.id = index
        item.text = item.MenuName
        if (item.PageParam) {
          item.PageParam = JSON.parse(item.PageParam)
        } else {
          item.PageParam = {OpenType: 'menu', linkUrl: ''}
        }
        return item
      })

@@ -170,38 +185,85 @@

  handleButton = (type) => {
    // 菜单编辑：添加，确定，取消
    if (type === 'add') {
    if ((type === 'add' || type === 'thawmenu') && !is(fromJS(previewList), fromJS(this.state.menulist))) {
      notification.warning({
        top: 92,
        message: this.state.dict['header.menu.presave'],
        duration: 10
      })
    } else if (type === 'add') {
      this.setState({
        addMvisible: true
      })
    } else if (type === 'confirm' && !is(fromJS(previewList), fromJS(this.state.menulist))) {
      Api.logoutsystem().then(res => {
      let _this = this
      let param  = {}
      param.func = 'sPC_Menu_SortUpt'
      param.LText = []
      previewList.forEach((item, index) => {
        param.LText.push('selectmspace\'' + item.MenuID + '\'mspaceasmspaceMenuid,' + (index + 1) * 10 + 'mspaceasmspacesort')
      })
      param.LText = param.LText.join('mspaceunionmspace')
      confirm({
        title: this.state.dict['header.menu.resetorder'],
        content: '',
        okText: this.state.dict['header.confirm'],
        cancelText: this.state.dict['header.cancel'],
        onOk() {
          return Api.submitInterface(param).then(res => {
            if (res.status) {
              _this.setState({
                menulist: null
              })
              _this.loadmenu()
            } else {
              message.warning(res.message)
            }
          })
        },
        onCancel() {}
      })
    } else if (type === 'thawmenu') {
      this.setState({
        thawMvisible: true
      })
      Api.submitInterface({
        func: 'sPC_Get_FrozenMenu',
        ParentID: '0',
        TYPE: 10
      }).then(res => {
        if (res.status) {
          this.loadmenu()
          this.setState({
            thawmenulist: res.data.map(menu => {
              return {
                key: menu.MenuID,
                title: menu.MenuName
              }
            })
          })
        } else {
          message.warning(res.message)
        }
      })
    } else {
      previewList = this.state.menulist
      this.props.resetEditState(false)
      this.props.resetEditLevel(false)
    }
  }

  handleMenu = (Menu) => {
    // 菜单编辑：修改、删除
    const _this = this
    const menu = fromJS(Menu)
    const card = menu.get('card')
    const menu = fromJS(Menu).toJS()
    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') {
    } else if (menu.type === 'close') {
      confirm({
        title: this.state.dict['header.menu.close'].replace('@M', card.get('MenuName')),
        title: this.state.dict['header.menu.close'].replace('@M', menu.card.MenuName),
        content: '',
        okText: this.state.dict['header.confirm'],
        cancelText: this.state.dict['header.cancel'],
@@ -216,27 +278,10 @@
        },
        onCancel() {}
      })
    } else if (menu.get('type') === 'edit') {
    } else if (menu.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
          }
        ]
        editMenu: menu.card
      })
    }
  }
@@ -248,17 +293,20 @@

  addMemuSubmit = () => {
    // 新建菜单：提交
    this.addMenuFormRef.handleConfirm().then(res => {
    this.addMenuFormRef.handleConfirm().then(param => {
      param.func = 'sPC_MainMenu_Add'
      param.Sort = (this.state.menulist.length + 1) * 10
      this.setState({
        confirmLoading: true
      })
      Api.logoutsystem().then(res => {
      Api.submitInterface(param).then(res => {
        if (res.status) {
          this.setState({
            confirmLoading: false,
            addMvisible: false
            addMvisible: false,
            menulist: null
          })
          this.addMenuFormRef.handleReset()
          this.addMenuFormRef.handleReset('add')
          this.loadmenu()
        } else {
          this.setState({
@@ -276,21 +324,23 @@
      confirmLoading: false,
      addMvisible: false
    })
    this.addMenuFormRef.handleReset()
    this.addMenuFormRef.handleReset('add')
  }

  editMemuSubmit = () => {
    // 编辑菜单：提交
    this.editMenuFormRef.handleConfirm().then(res => {
    this.editMenuFormRef.handleConfirm().then(param => {
      param.func = 'sPC_MainMenu_Upt'
      this.setState({
        confirmLoading: true
      })
      Api.logoutsystem().then(res => {
      Api.submitInterface(param).then(res => {
        if (res.status) {
          this.setState({
            confirmLoading: false,
            editMvisible: false,
            editMenu: null
            editMenu: null,
            menulist: null
          })
          this.loadmenu()
        } else {
@@ -307,9 +357,95 @@
    // 编辑菜单：取消
    this.setState({
      confirmLoading: false,
      editMvisible: false
      editMvisible: false,
      editMenu: null
    })
    this.editMenuFormRef.handleReset()
  }

  deleteMemu = () => {
    let _this = this
    confirm({
      title: this.state.dict['header.menu.close'].replace('@M', this.state.editMenu.MenuName),
      content: '',
      okText: this.state.dict['header.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        let param = {
          func: 'sPC_MainMenu_Del',
          MenuID: _this.state.editMenu.MenuID
        }
        return Api.submitInterface(param).then(res => {
          if (res.status) {
            _this.setState({
              editMvisible: false,
              editMenu: null,
              menulist: null
            })
            _this.loadmenu()
          } else {
            message.warning(res.message)
          }
        })
      },
      onCancel() {}
    })
  }

  thawMemuSubmit = () => {
    if (this.refs.trawmenu.state.targetKeys.length === 0) {
      notification.warning({
        top: 92,
        message: this.state.dict['header.menu.thawmenu.select'],
        duration: 10
      })
    } else {
      this.setState({
        confirmLoading: true
      })
      let defers = this.refs.trawmenu.state.targetKeys.map(item => {
        return new Promise((resolve) => {
          Api.submitInterface({
            func: 'sPC_MainMenu_ReDel',
            MenuID: item
          }).then(res => {
            if (res.status) {
              resolve('')
            } else {
              resolve(res.message)
            }
          })
        })
      })
      Promise.all(defers).then(res => {
        let msg = res.filter(Boolean)[0]
        if (msg) {
          notification.error({
            top: 92,
            message: msg,
            duration: 15
          })
        } else {
          this.setState({
            confirmLoading: false,
            thawMvisible: false,
            thawmenulist: null,
            menulist: null
          })
          this.loadmenu()
        }
      })
    }
  }

  thawMemuCancel = () => {
    this.setState({
      thawMvisible: false,
      thawmenulist: null
    })
  }

  enterEdit = () => {
    this.props.resetEditLevel('level1')
  }
  
  UNSAFE_componentWillMount () {
@@ -324,11 +460,10 @@
  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>}
        {this.props.debug && <Menu.Item key="0">
          {this.state.dict['header.edit']}
          <Switch size="small" className="edit-switch" onChange={this.changeEditState} />
        </Menu.Item>}
        <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>
@@ -340,7 +475,8 @@
        <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.props.editLevel !== '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' : ''}>
@@ -349,7 +485,10 @@
            )
          })
        }</ul>}
        {this.props.editState === 'level1' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
        {/* 进入编辑按钮 */}
        {this.props.editState && !this.props.editLevel && <Icon onClick={this.enterEdit} className="edit-check" type="edit" />}
        {/* 编辑菜单 */}
        {this.props.editLevel === 'level1' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
          <DragElement
            dict={this.state.dict}
            list={this.state.menulist}
@@ -358,6 +497,8 @@
            handleButton={this.handleButton}
          />
        </DndProvider>}
        {/* 编辑mask */}
        <div className={'mask ' + (this.props.editLevel === 'level1' ? 'active' : '')}></div>
        <Dropdown className="header-setting" overlay={menu}>
          <div>
            <img src={avatar} alt=""/>
@@ -388,27 +529,10 @@
          confirmLoading={this.state.confirmLoading}
          onCancel={this.addMemuCancel}
        >
          <SimpleForm
          <MenuForm
            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}
            type="add"
            menu={null}
            wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
          />
        </Modal>
@@ -418,16 +542,32 @@
          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}
          footer={null}
        >
          <SimpleForm
          {this.state.editMenu && <MenuForm
            dict={this.state.dict}
            formlist={this.state.editMenu || []}
            cols={1}
            type="edit"
            menu={this.state.editMenu}
            wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
          />
          />}
          <div className="edit-modal-footer">
            <Button onClick={this.editMemuCancel}>{this.state.dict['header.cancel']}</Button>
            <Button type="primary" onClick={this.editMemuSubmit} loading={this.state.confirmLoading}>{this.state.dict['header.confirm']}</Button>
            <Button type="danger" onClick={this.deleteMemu}>{this.state.dict['header.delete']}</Button>
          </div>
        </Modal>
        {/* 解除冻结菜单模态框 */}
        <Modal
          title={this.state.dict['header.thawmenu']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.thawMvisible}
          onOk={this.thawMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.thawMemuCancel}
        >
          {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
          {this.state.thawmenulist && <TransferForm ref="trawmenu" dict={this.state.dict} menulist={this.state.thawmenulist}/>}
        </Modal>
      </header>
    )
@@ -439,7 +579,8 @@
    collapse: state.collapse,
    selectmenu: state.selectedMainMenu,
    debug: state.debug,
    editState: state.editState
    editState: state.editState,
    editLevel: state.editLevel
  }
}

@@ -449,7 +590,8 @@
    modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
    resetState: () => dispatch(resetState()),
    resetDebug: () => dispatch(resetDebug()),
    resetEditState: (state) => dispatch(resetEditState(state))
    resetEditState: (state) => dispatch(resetEditState(state)),
    resetEditLevel: (level) => dispatch(resetEditLevel(level))
  }
}