second-level-menu

king

2019-11-03 ebb3dcdf617c7455b9fd0a84f37ddc384cc83af8

second-level-menu

 src/components/dragelement/card.jsx

@@ -4,7 +4,7 @@
import ItemTypes from './itemtypes'
import './index.scss'

const Card = ({ id, text, moveCard, findCard, closeCard, editCard }) => {
const Card = ({ id, text, moveCard, findCard, editCard }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.CARD, id, originalIndex },
@@ -23,10 +23,6 @@
    },
  })
  const opacity = isDragging ? 0 : 1

  // const close = () => {
  //   closeCard(id)
  // }

  const edit = () => {
    editCard(id)

 src/components/dragelement/index.jsx

@@ -23,15 +23,6 @@
    }
  }

  const closeCard = id => {
    const { card, index } = findCard(id)
    handleMenu({
      card,
      index,
      type: 'close'
    })
  }

  const editCard = id => {
    const { card, index } = findCard(id)
    handleMenu({
@@ -66,7 +57,6 @@
          id={`${card.id}`}
          text={card.text}
          moveCard={moveCard}
          closeCard={closeCard}
          editCard={editCard}
          findCard={findCard}
        />

 src/components/header/dragelement/card.jsx

New file
@@ -0,0 +1,39 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon } from 'antd'
import ItemTypes from './itemtypes'
import './index.scss'

const Card = ({ id, text, moveCard, findCard, editCard }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.CARD, id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: ItemTypes.CARD,
    canDrop: () => false,
    hover({ id: draggedId }) {
      if (draggedId !== id) {
        const { index: overIndex } = findCard(id)
        moveCard(draggedId, overIndex)
      }
    },
  })
  const opacity = isDragging ? 0 : 1

  const edit = () => {
    editCard(id)
  }
  return (
    <div className="card" style={{ opacity }}>
      <div ref={node => drag(drop(node))}>
        {text}
      </div>
      <Icon className="edit" type="edit" onClick={edit} />
    </div>
  )
}
export default Card

 src/components/header/dragelement/index.jsx

New file
@@ -0,0 +1,73 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import { Icon, Button } from 'antd'
import update from 'immutability-helper'
import Card from './card'
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({dict, list, handlePreviewList, handleMenu, handleButton }) => {
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
    const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
    setCards(_cards)
    handlePreviewList(_cards)
  }

  const findCard = id => {
    const card = cards.filter(c => `${c.id}` === id)[0]
    return {
      card,
      index: cards.indexOf(card),
    }
  }

  const editCard = id => {
    const { card, index } = findCard(id)
    handleMenu({
      card,
      index,
      type: 'edit'
    })
  }

  const add = () => {
    handleButton('add')
  }
  
  const confirm = () => {
    handleButton('confirm')
  }

  const cancel = () => {
    handleButton('cancel')
  }

  const thawmenu = () => {
    handleButton('thawmenu')
  }

  const [, drop] = useDrop({ accept: ItemTypes.CARD })
  return (
    <div ref={drop} className="dragdashboard">
      {cards.map(card => (
        <Card
          key={card.id}
          id={`${card.id}`}
          text={card.text}
          moveCard={moveCard}
          editCard={editCard}
          findCard={findCard}
        />
      ))}
      <div className="card-add" onClick={add}>
        <Icon type="plus" />
      </div>
      <Button type="primary" onClick={thawmenu}>{dict['header.thawmenu']}</Button>
      <Button type="primary" onClick={confirm}>{dict['header.confirm']}</Button>
      <Button onClick={cancel}>{dict['header.close']}</Button>
    </div>
  )
}
export default Container

 src/components/header/dragelement/index.scss

New file
@@ -0,0 +1,58 @@
.dragdashboard {
  position: relative;
  z-index: 1;
  width: calc(100vw - 400px);
  float: left;
  background: #001529;
  padding-bottom: 5px;
  .card-add {
    border: 1px dashed gray;
    padding: 2px;
    margin-top: 13px;
    margin-left: 10px;
    width: 50px;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  button {
    margin-top: 14px;
    margin-left: 10px;
    padding: 0 10px;
    height: 26px;
  }
}
.card {
  position: relative;
  border: 1px dashed gray;
  margin-top: 7px;
  margin-right: 10px;
  float: left;
  div {
    padding: 5px 20px 5px 5px;
    cursor: move;
    min-width: 43px;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    :hover {
      color: #ffffff;
    }
  }
  .edit {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    :hover {
      color: #ffffff;
    }
  }
}

 src/components/header/dragelement/itemtypes.js

New file
@@ -0,0 +1,3 @@
export default {
  CARD: 'card',
}

 src/components/header/index.jsx

@@ -7,11 +7,11 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import md5 from 'md5'
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 TransferForm from '@/components/transferform'
import MenuForm from './menuform'
import DragElement from './dragelement'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
@@ -19,7 +19,6 @@
import logourl from '../../assets/img/mlogo.png'
import avatar from '../../assets/img/avatar.jpg'
import './index.scss'
import { Promise } from 'q';

const { confirm } = Modal
let previewList = null
@@ -87,7 +86,11 @@
      this.formRef.resetfrom()
      message.success(this.state.dict['header.password.resetsuccess'])
    } else {
      message.warning(result.message)
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
      })
      this.setState({
        confirmLoading: false
      })
@@ -127,7 +130,10 @@

  changeMenu (value) {
    // 主菜单切换
    console.log(value)
    if (this.props.editState && this.props.editLevel) {
      // 编辑状态下，不可切换菜单
      return
    }
    if (value.PageParam.OpenType === 'menu') {
      this.props.modifyMainMenu(value)
    } else {
@@ -165,7 +171,11 @@
        item.id = index
        item.text = item.MenuName
        if (item.PageParam) {
          item.PageParam = JSON.parse(item.PageParam)
          try {
            item.PageParam = JSON.parse(item.PageParam)
          } catch (e) {
            item.PageParam = {OpenType: 'menu', linkUrl: ''}
          }
        } else {
          item.PageParam = {OpenType: 'menu', linkUrl: ''}
        }
@@ -217,7 +227,11 @@
              })
              _this.loadmenu()
            } else {
              message.warning(res.message)
              notification.warning({
                top: 92,
                message: res.message,
                duration: 10
              })
            }
          })
        },
@@ -242,7 +256,11 @@
            })
          })
        } else {
          message.warning(res.message)
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    } else {
@@ -252,8 +270,7 @@
  }

  handleMenu = (Menu) => {
    // 菜单编辑：修改、删除
    const _this = this
    // 菜单编辑：修改
    const menu = fromJS(Menu).toJS()
    if (!is(fromJS(previewList), fromJS(this.state.menulist))) {
      notification.warning({
@@ -261,24 +278,7 @@
        message: this.state.dict['header.menu.presave'],
        duration: 10
      })
    } else if (menu.type === 'close') {
      confirm({
        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'],
        onOk() {
          return Api.logoutsystem().then(res => {
            if (res.status) {
              _this.loadmenu()
            } else {
              message.warning(res.message)
            }
          })
        },
        onCancel() {}
      })
    } else if (menu.type === 'edit') {
    } else {
      this.setState({
        editMvisible: true,
        editMenu: menu.card
@@ -287,7 +287,7 @@
  }

  changeEditState = (state) => {
    // 修改编辑菜单类型
    // 修改编辑状态
    this.props.resetEditState(state)
  }

@@ -312,7 +312,11 @@
          this.setState({
            confirmLoading: false
          })
          message.warning(res.message)
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    }, () => {})
@@ -347,7 +351,11 @@
          this.setState({
            confirmLoading: false
          })
          message.warning(res.message)
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    }, () => {})
@@ -383,7 +391,11 @@
            })
            _this.loadmenu()
          } else {
            message.warning(res.message)
            notification.warning({
              top: 92,
              message: res.message,
              duration: 10
            })
          }
        })
      },
@@ -462,7 +474,7 @@
      <Menu overlayclassname="header-dropdown">
        {this.props.debug && <Menu.Item key="0">
          {this.state.dict['header.edit']}
          <Switch size="small" className="edit-switch" onChange={this.changeEditState} />
          <Switch size="small" className="edit-switch" disabled={!!this.props.editLevel} 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>
@@ -538,18 +550,19 @@
        </Modal>
        {/* 编辑菜单模态框 */}
        <Modal
          title={this.state.dict['header.menu.edittitle']}
          title={this.state.dict['header.menu.editTitle']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.editMvisible}
          footer={null}
          onCancel={this.editMemuCancel}
        >
          {this.state.editMenu && <MenuForm
          <MenuForm
            dict={this.state.dict}
            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>

 src/components/header/index.scss

@@ -100,7 +100,7 @@
    left: 0px;
    right: 0px;
    bottom: calc(100vh - 48px);
    transition: bottom 0.2s
    transition: bottom 0.1s;
  }
  .mask.active {
    bottom: 0px;

 src/components/header/menuform/index.jsx

@@ -1,5 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Select } from 'antd'
import Utils from '@/utils/utils.js'
import './index.scss'
@@ -76,6 +77,28 @@
      })
    }
  }
  
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.menu && !is(fromJS(this.props.menu), fromJS(nextProps.menu))) {
      this.setState({
        formlist: this.state.defaultMenu.map(menu => {
          if (menu.key === 'menuName') {
            menu.initVal = nextProps.menu.MenuName
          } else if (menu.key === 'openType') {
            menu.initVal = nextProps.menu.PageParam.OpenType
          } else if (menu.key === 'linkUrl') {
            menu.initVal = nextProps.menu.PageParam.linkUrl
            if (nextProps.menu.PageParam.OpenType === 'menu') {
              menu.hidden = true
            } else if (nextProps.menu.PageParam.OpenType === 'newpage') {
              menu.hidden = false
            }
          }
          return menu
        })
      })
    }
  }

  openTypeChange = (key, value) => {
    if (key === 'openType') {

 src/components/sidemenu/dragelement/card.jsx

New file
@@ -0,0 +1,45 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon } from 'antd'
import ItemTypes from './itemtypes'
import './index.scss'

const Card = ({ id, icon, text, moveCard, findCard, editCard, closeCard }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.CARD, id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: ItemTypes.CARD,
    canDrop: () => false,
    hover({ id: draggedId }) {
      if (draggedId !== id) {
        const { index: overIndex } = findCard(id)
        moveCard(draggedId, overIndex)
      }
    },
  })
  const opacity = isDragging ? 0 : 1

  const edit = () => {
    editCard(id)
  }

  const close = () => {
    closeCard(id)
  }
  return (
    <div className="side-card" style={{ opacity }}>
      <div ref={node => drag(drop(node))}>
        {icon && <Icon type={icon} />}
        {text}
      </div>
      <Icon className="edit" type="edit" onClick={edit} />
      <Icon className="close" type="close" onClick={close} />
    </div>
  )
}
export default Card

 src/components/sidemenu/dragelement/index.jsx

New file
@@ -0,0 +1,61 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import update from 'immutability-helper'
import Card from './card'
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({list, handlePreviewList, handleMenu }) => {
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
    const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
    setCards(_cards)
    handlePreviewList(_cards)
  }

  const findCard = id => {
    const card = cards.filter(c => `${c.id}` === id)[0]
    return {
      card,
      index: cards.indexOf(card),
    }
  }

  const editCard = id => {
    const { card, index } = findCard(id)
    handleMenu({
      card,
      index,
      type: 'edit'
    })
  }

  const closeCard = id => {
    const { card, index } = findCard(id)
    handleMenu({
      card,
      index,
      type: 'close'
    })
  }

  const [, drop] = useDrop({ accept: ItemTypes.CARD })
  return (
    <div ref={drop} className="sidemenu-dragboard">
      {cards.map(card => (
        <Card
          key={card.id}
          id={`${card.id}`}
          icon={card.PageParam.Icon}
          text={card.text}
          moveCard={moveCard}
          editCard={editCard}
          closeCard={closeCard}
          findCard={findCard}
        />
      ))}
    </div>
  )
}
export default Container

 src/components/sidemenu/dragelement/index.scss

New file
@@ -0,0 +1,73 @@
.sidemenu-dragboard {
  position: relative;
  z-index: 1;
  width: 100%;
  float: left;
  background: #001529;
  padding-bottom: 5px;
  .card-add {
    border: 1px dashed gray;
    padding: 2px;
    margin-top: 13px;
    margin-left: 10px;
    width: 50px;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  button {
    margin-top: 14px;
    margin-left: 10px;
    padding: 0 10px;
    height: 26px;
  }
}
.side-card {
  position: relative;
  border: 1px dashed gray;
  margin-top: 8px;
  height: 40px;
  width: 98%;
  div {
    padding: 0px 0px 0px 30px;
    margin-right: 20px;
    height: 40px;
    line-height: 40px;
    cursor: move;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .anticon {
      position: absolute;
      left: 10px;
      top: 12px;
    }
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    :hover {
      color: #ffffff;
    }
  }
  .edit {
    position: absolute;
    right: 0;
    bottom: 1px;
    cursor: pointer;
    :hover {
      color: #ffffff;
    }
  }
  .close {
    position: absolute;
    right: 0;
    top: 1px;
    cursor: pointer;
    :hover {
      color: #ffffff;
    }
  }
}

 src/components/sidemenu/dragelement/itemtypes.js

New file
@@ -0,0 +1,3 @@
export default {
  CARD: 'card',
}

 src/components/sidemenu/index.jsx

@@ -3,12 +3,21 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Menu, Icon } from 'antd'
import {modifyTabview} from '@/store/action'
import { Menu, Icon, Button, notification, Modal, Spin} from 'antd'
import HTML5Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'
import {modifyTabview, resetEditLevel} from '@/store/action'
import TransferForm from '@/components/transferform'
import DragElement from './dragelement'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import Api from '@/api'
import './index.scss'

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

class Sidemenu extends Component {
  static propTypes = {
@@ -20,12 +29,26 @@
  }

  state = {
    mainMenuList: null,
    subMenulist: null,
    rootSubmenuKeys: null,
    modalOptions: {
      visible: false,
      title: '',
      level: 'slevel',
      type: 'add',
      menu: null
    },
    confirmLoading: false,
    menuLoading: false,
    thawMvisible: false,
    thawmenulist: null,
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    openKeys: null
  }

  async loadsubmenu (menu) {
    this.setState({menuLoading: true})
    let result = await Api.getSubMenuData(menu.MenuID)
    if (result.status) {
      let param = sessionStorage.getItem('view_param') // 是否为打开新页面
@@ -41,7 +64,15 @@
      let parentID = result.data[submenuindex] ? result.data[submenuindex].ParentID : '' // 展开二级菜单ID

      this.setState({
        menuLoading: false,
        subMenulist: result.data.map((item, i) => {
          item.id = i
          item.text = item.MenuNameP
          try {
            item.PageParam = JSON.parse(item.PageParamP)
          } catch (e) {
            item.PageParam = {Icon: 'folder'}
          }
          if (item.FunMenu) {
            item.children = item.FunMenu.map((child, n) => {
              let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 待完善
@@ -55,6 +86,8 @@
              } else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
                child.type = 'iframe'
              }
              child.id = n
              child.text = item.MenuName
              return child
            })
          }
@@ -124,18 +157,308 @@
      })
    }
  }

  enterSubEdit = (e) => {
    // 编辑二级菜单
    e.stopPropagation()
    previewList = null
    this.props.resetEditLevel('level2')
    Api.getMainMenuData().then(res => {
      this.setState({
        mainMenuList: res.data.map(item => {
          return {
            id: item.MenuID,
            text: item.MenuName
          }
        })
      })
    })
  }

  handlePreviewList = (List) => {
    // 菜单顺序改变时，保存中间状态
    previewList = List
  }

  handleMenu = (menu) => {
    // 菜单编辑：修改、删除
    const _this = this
    if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
      notification.warning({
        top: 92,
        message: this.state.dict['header.menu.presave'],
        duration: 10
      })
    } else if (menu.type === 'close') {
      confirm({
        title: this.state.dict['header.menu.close'].replace('@M', menu.card.text),
        content: '',
        okText: this.state.dict['header.confirm'],
        cancelText: this.state.dict['header.cancel'],
        onOk() {
          let param = {
            func: 'sPC_MainMenu_Del',
            MenuID: menu.card.ParentID
          }
          return Api.submitInterface(param).then(res => {
            if (res.status) {
              _this.loadsubmenu(_this.props.mainMenu)
            } else {
              notification.warning({
                top: 92,
                message: res.message,
                duration: 10
              })
            }
          })
        },
        onCancel() {}
      })
    } else if (menu.type === 'edit') {
      this.setState({
        modalOptions: {
          visible: true,
          title: this.state.dict['header.menu.editTitle'],
          level: 'slevel',
          type: 'edit',
          parentMenu: this.props.mainMenu,
          supMenuList: this.state.mainMenuList,
          menu: menu.card
        }
      })
    }
  }

  handleSubBtn = (type) => {
    // 操作按钮
    if (type === 'add') {
      this.setState({
        modalOptions: {
          visible: true,
          title: this.state.dict['header.menu.addtitle'],
          level: 'slevel',
          type: 'add',
          parentMenu: this.props.mainMenu,
          supMenuList: this.state.mainMenuList,
          menu: null
        }
      })
    } else if (type === 'thaw') {
      this.setState({
        thawMvisible: true
      })
      Api.submitInterface({
        func: 'sPC_Get_FrozenMenu',
        ParentID: this.props.mainMenu.MenuID,
        TYPE: 20
      }).then(res => {
        if (res.status) {
          this.setState({
            thawmenulist: res.data.map(menu => {
              return {
                key: menu.MenuID,
                title: menu.MenuName
              }
            })
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    } else if (type === 'confirm') {
      if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
        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.loadsubmenu(_this.props.mainMenu)
              } else {
                notification.warning({
                  top: 92,
                  message: res.message,
                  duration: 10
                })
              }
            })
          },
          onCancel() {}
        })
      } else {
        this.props.resetEditLevel(false)
      }
    } else if (type === 'close') {
      this.props.resetEditLevel(false)
    }
  }

  memuHandleSubmit = () => {
    let options = this.state.modalOptions
    if (options.type === 'add' && options.level === 'slevel') {
      // 新建菜单：提交
      this.menuFormRef.handleConfirm().then(param => {
        param.func = 'sPC_SndMenu_Add'
        param.Sort = (this.state.subMenulist.length + 1) * 10
        this.setState({
          confirmLoading: true
        })
        Api.submitInterface(param).then(res => {
          if (res.status) {
            this.setState({
              confirmLoading: false,
              modalOptions: {
                ...options,
                visible: false,
                parentMenu: null,
                supMenuList: null,
                menu: null
              }
            })
            this.loadsubmenu(this.props.mainMenu)
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: res.message,
              duration: 10
            })
          }
        })
      }, () => {})
    } else if (options.type === 'edit' && options.level === 'slevel') {
      // 编辑菜单：提交
      this.menuFormRef.handleConfirm().then(param => {
        param.func = 'sPC_SndMenu_Upt'
        this.setState({
          confirmLoading: true
        })
        Api.submitInterface(param).then(res => {
          if (res.status) {
            this.setState({
              confirmLoading: false,
              modalOptions: {
                ...options,
                visible: false,
                parentMenu: null,
                supMenuList: null,
                menu: null
              }
            })
            this.loadsubmenu(this.props.mainMenu)
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: res.message,
              duration: 10
            })
          }
        })
      }, () => {})
    }
  }

  memuHandleCancel = () => {
    let options = this.state.modalOptions
    this.setState({
      modalOptions: {
        ...options,
        visible: false,
        menu: null
      }
    })
  }

  callback = () => {

  }

  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.loadsubmenu(this.props.mainMenu)
        }
      })
    }
  }

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

  render () {
    const editShow = (this.props.editState && !this.props.editLevel) || false
    return (
      <aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '')}>
        {this.state.subMenulist &&
        {this.state.subMenulist && (!this.props.editLevel || this.props.editLevel === 'level1') &&
          <Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
          {this.state.subMenulist.map(item => {
          {this.state.subMenulist.map((item, index) => {
            return (
              <SubMenu
                key={item.ParentID}
                title={
                  <span>
                    {item.IconP ? <Icon type={item.IconP} /> : <Icon type="folder" />}
                  <span className={editShow && index === 0 ? 'edit-control' : ''}>
                    <Icon type={item.PageParam.Icon} />
                    {editShow && index === 0 && <Icon onClick={this.enterSubEdit} className="edit-check" type="edit" />}
                    <span>{item.MenuNameP}</span>
                  </span>
                }
@@ -151,6 +474,85 @@
            )
          })}
        </Menu>}
        {this.props.editLevel === 'level2' && !this.state.menuLoading &&
          <div>
            <DndProvider className="header-drag-menu" backend={HTML5Backend}>
              <DragElement
                list={this.state.subMenulist}
                handlePreviewList={this.handlePreviewList}
                handleMenu={this.handleMenu}
              />
            </DndProvider>
            <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
              <Icon type="plus" />
            </div>
            <div className="menu-btn">
              <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{this.state.dict['header.thawmenu']}</Button>
              <Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{this.state.dict['header.confirm']}</Button>
              <Button onClick={() => {this.handleSubBtn('close')}}>{this.state.dict['header.close']}</Button>
            </div>
          </div>
        }
        <Modal
          title={this.state.modalOptions.title}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.modalOptions.visible}
          onOk={this.memuHandleSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.memuHandleCancel}
        >
          <MenuForm
            dict={this.state.dict}
            options={this.state.modalOptions}
            wrappedComponentRef={(inst) => this.menuFormRef = inst}
          />
        </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>
        {/* {this.props.editLevel === 'level2' && <div className="editboard">
          <div className="workplace">
            <Tabs defaultActiveKey="1" onChange={this.callback}>
              <TabPane tab="二级菜单" key="1">
                <div className="ant-card ant-card-bordered level2-left">
                  <div className="ant-card-head">
                    <div className="ant-card-head-wrapper">
                      <div className="ant-card-head-title">
                        <Radio.Group name="radiogroup" defaultValue={1}>
                          <Radio value={1}>排序</Radio>
                          <Radio value={2}>编辑</Radio>
                        </Radio.Group>
                        <Icon onClick={this.enterEdit} className="edit-check" type="plus" />
                      </div>
                    </div>
                  </div>
                  <div className="ant-card-body">
                    <p>Card content</p>
                    <p>Card content</p>
                    <p>Card content</p>
                  </div>
                </div>
              </TabPane>
              <TabPane tab="三级菜单" key="2">
                <Card title="df" style={{ width: 300 }}>
                  <p>Card content</p>
                  <p>Card content</p>
                  <p>Card content</p>
                </Card>
              </TabPane>
            </Tabs>
          </div>
        </div>} */}
      </aside>
    )
  }
@@ -161,13 +563,16 @@
    tabviews: state.tabviews,
    collapse: state.collapse,
    isiframe: state.isiframe,
    mainMenu: state.selectedMainMenu
    mainMenu: state.selectedMainMenu,
    editState: state.editState,
    editLevel: state.editLevel
  }
}

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


 src/components/sidemenu/index.scss

@@ -28,6 +28,61 @@
  .ant-menu-dark.ant-menu-inline .ant-menu-submenu-open .ant-menu-submenu-title {
    background: #364150;
  }
  .edit-check {
    font-size: 18px;
    position: absolute;
    cursor: pointer;
    padding: 10px 15px;
    margin-right: 0px;
    right: 0px;
    top: 0px;
  }
  .edit-control + .ant-menu-submenu-arrow {
    display: none;
  }
  .menu-add {
    position: relative;
    border: 1px dashed gray;
    margin: 8px 0px;
    height: 40px;
    line-height: 40px;
    width: 98%;
    clear: both;
    text-align: center;
    cursor: pointer;
    .anticon {
      font-size: 20px;
    }
  }
  .menu-btn {
    .ant-btn {
      padding: 0 10px;
      margin-left: 5px;
    }
  }
  // .editboard {
  //   position: fixed;
  //   top: 48px;
  //   left: 0px;
  //   right: 0px;
  //   bottom: 0px;
  //   background: rgba(0, 0, 0, 0.15);
  //   .workplace {
  //     position: relative;
  //     width: calc(100vw - 235px);
  //     height: 100%;
  //     overflow-y: auto;
  //     left: 235px;
  //     background: #ffffff;

  //     .level2-left {
  //       width: 350px;
  //       margin-left: 20px;
  //       float: left;
  //       height: calc(100vh - 125px);
  //     }
  //   }
  // }
}
.side-menu.iframe { // tab页中为iframe时
  max-height: 100vh;

 src/components/sidemenu/menuform/index.jsx

New file
@@ -0,0 +1,238 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Icon } from 'antd'
import Utils from '@/utils/utils.js'
import './index.scss'

class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    options: PropTypes.object
  }

  state = {
    formlist: [],
    menuform: {
      slevel: [
        {
          type: 'select',
          key: 'parentId',
          label: this.props.dict['header.menu.supMenu'],
          initVal: '',
          required: true,
          options: []
        },
        {
          type: 'text',
          key: 'menuName',
          label: this.props.dict['header.menu.menuName'],
          initVal: '',
          required: true,
          readonly: false
        },
        {
          type: 'select',
          key: 'icon',
          label: this.props.dict['header.menu.icon'],
          initVal: 'folder',
          required: true,
          options: [{
            id: 'folder',
            text: 'folder'
          }, {
            id: 'api',
            text: 'api'
          }]
        }
      ]
    }
  }

  UNSAFE_componentWillMount () {
    this.resetform(this.props.options)
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.options.visible && !is(fromJS(this.props.options), fromJS(nextProps.options))) {
      console.log(nextProps.options)
      this.resetform(nextProps.options)
    }
  }

  resetform = (options) => {
    if (!options.visible) return

    let formlist = JSON.parse(JSON.stringify(this.state.menuform[options.level]))

    if (options.type === 'add') {
      this.setState({
        formlist: formlist.map(item =>{
          if (item.key === 'parentId') {
            item.initVal = options.parentMenu.MenuID
            item.options = options.supMenuList
          }
          return item
        })
      })
    } else {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'parentId') {
            item.initVal = options.parentMenu.MenuID
            item.options = options.supMenuList
          } else if (item.key === 'menuName') {
            item.initVal = options.menu.MenuNameP
          } else if (item.key === 'icon') {
            item.initVal = options.menu.PageParam.Icon
          }
          return item
        })
      })
    }
  }

  openTypeChange = (key, value) => {
    if (key === 'openType') {
      let formlist = this.state.formlist
      if (value === 'newpage') {
        formlist.forEach(item => {
          if (item.key === 'linkUrl') {
            item.hidden = false
            item.initVal = 'service'
          }
        })
      } else {
        formlist.forEach(item => {
          if (item.key === 'linkUrl') {
            item.hidden = true
          }
        })
      }
      this.setState({formlist})
    }
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return

      if (item.type === 'text') { // 文本搜索
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.openTypeChange(item.key, value)}}
                  getPopupContainer={() => document.getElementById('form-box')}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.id} title={option.text} key={option.id} value={option.id}>
                      {item.key === 'icon' && <Icon type={option.text} />} {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    
    return fields
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (this.props.options.type === 'add' && this.props.options.level === 'slevel') {
            // 二级菜单添加
            resolve({
              ParentID: values.parentId,
              MenuID: Utils.getuuid(),
              MenuName: values.menuName,
              PageParam: JSON.stringify({
                Icon: values.icon
              })
            })
          } else {
            resolve({
              ParentID: values.parentId,
              MenuID: this.props.options.menu.ParentID,
              MenuName: values.menuName,
              PageParam: JSON.stringify({
                Icon: values.icon
              })
            })
          }
        } else {
          reject(err)
        }
      })
    })
  }

  handleReset = (type) => {
    // 重置
    if (type === 'add') {
      let formlist = this.state.formlist.map(item => {
        if (item.key === 'linkUrl') {
          item.hidden = true
        }
        return item
      })
      this.setState({formlist})
    }
    this.props.form.resetFields()
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )
  }
}

export default Form.create()(MainSearch)

 src/components/sidemenu/menuform/index.scss

New file
@@ -0,0 +1,20 @@
.ant-advanced-search-form.main-search {
  padding: 0px 24px 20px;
  border-bottom: 1px solid #d9d9d9;
  .ant-form-item {
    display: flex;
    margin-bottom: 10px;
  }
  .ant-form-item-control-wrapper {
    flex: 1;
  }
  .ant-form-item-label {
    width: 100px;
  }
}
.ant-advanced-search-form {
  position: relative;
}
.ant-advanced-search-form .ant-input-number {
  width: 100%;
}

 src/components/transferform/index.jsx

 src/components/transferform/index.scss

 src/locales/en-US/header.js

@@ -23,9 +23,11 @@
  'header.menu.presave': 'Menu order has been adjusted, Please save!',
  'header.menu.resetorder': 'Are you sure to adjust the menu sequence ?',
  'header.menu.addtitle': 'The new menu',
  'header.menu.edittitle': 'The edit menu',
  'header.menu.editTitle': 'The edit menu',
  'header.menu.menuID': 'Menu ID',
  'header.menu.menuName': 'Menu Name',
  'header.menu.supMenu': 'Superior Menu',
  'header.menu.icon': 'Icon',
  'header.menu.openType': 'Open With',
  'header.menu.openType.menu': 'Menu',
  'header.menu.openType.newWindow': 'A new window',

 src/locales/zh-CN/header.js

@@ -23,9 +23,11 @@
  'header.menu.presave': '菜单顺序已调整，请保存！',
  'header.menu.resetorder': '确认调整菜单顺序吗？',
  'header.menu.addtitle': '新建菜单',
  'header.menu.edittitle': '编辑菜单',
  'header.menu.editTitle': '编辑菜单',
  'header.menu.menuID': '菜单ID',
  'header.menu.menuName': '菜单名称',
  'header.menu.supMenu': '上级菜单',
  'header.menu.icon': '图标',
  'header.menu.openType': '打开方式',
  'header.menu.openType.menu': '菜单',
  'header.menu.openType.newWindow': '新窗口',

 src/store/action.js

@@ -64,6 +64,11 @@

// 重置编辑级别
export const resetEditLevel = (editLevel) => {
  // if (editLevel) {
  //   document.getElementById('root').style.overflow = 'hidden'
  // } else {
  //   document.getElementById('root').style.overflow = 'visible'
  // }
  return {
    type: user.RESET_EDITLEVEL,
    editLevel