2020-08-20

king

2020-08-20 3683e1475e8d74f690172a468518d88d91a69ccc

 src/components/sidemenu/index.jsx

@@ -3,23 +3,20 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Menu, Icon, Button, notification, Modal, Spin, Tabs, Radio, Card, Row, Col} 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 { Menu, Icon, notification } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import { modifyTabview, resetEditLevel } from '@/store/action'
import { SySMenuList } from './config'
import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Api from '@/api'
import './index.scss'
import nortable from '@/assets/img/normaltable.jpg'

const EditSecMenu = asyncComponent(() => import('@/templates/menuconfig/editsecmenu'))
const EditThdMenu = asyncComponent(() => import('@/templates/menuconfig/editthdmenu'))
const { SubMenu } = Menu
const { confirm } = Modal
const { TabPane } = Tabs
let previewList = null

class Sidemenu extends Component {
  static propTypes = {
@@ -31,110 +28,181 @@
  }

  state = {
    mainMenuList: null, // 一级菜单，编辑调整上级菜单时获取
    subMenulist: null, // 二级菜单
    editMenu: null, // 编辑三级菜单时设置
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    mainMenuList: null,      // 一级菜单，编辑调整上级菜单时获取
    subMenulist: [],         // 二级菜单
    editMenu: null,          // 编辑三级菜单时设置
    rootSubmenuKeys: null,
    modalOptions: {
      visible: false,
      title: '',
      level: 'slevel',
      type: 'add',
      menu: null
    },
    confirmLoading: false,
    menuLoading: false,
    thawMvisible: false,
    thawmenulist: null,
    createThirdMenu: false,
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    openKeys: null
    openKeys: null,
    preview: null
  }

  async loadsubmenu (menu) {
    this.setState({menuLoading: true})
    let result = await Api.getSubMenuData(menu.MenuID)
    if (result.status) {
      let param = sessionStorage.getItem('view_param') // 是否为打开新页面
      let msg = sessionStorage.getItem('UserID') + '&' + sessionStorage.getItem('SessionUid') + '&' + sessionStorage.getItem('LoginUID')
      let submenuindex = 0 // 展开二级菜单索引
      let tabindex = null // 打开的tab页
      if (param) {
        param = param.split('&')
        submenuindex = parseInt(param[1])
        tabindex = parseInt(param[2])
        sessionStorage.removeItem('view_param')
      }
      let parentID = result.data[submenuindex] ? result.data[submenuindex].ParentID : '' // 展开二级菜单ID

    if (!menu || !menu.MenuID) { // 没有主菜单时，清空下级菜单
      this.setState({
        menuLoading: false,
        subMenulist: result.data.map((item, i) => {
          let _smenu = {}
          _smenu.id = i
          _smenu.MenuID = item.ParentID
          _smenu.text = item.MenuNameP
          try {
            _smenu.PageParam = JSON.parse(item.PageParamP)
          } catch (e) {
            _smenu.PageParam = {Icon: 'folder'}
        subMenulist: [],
        rootSubmenuKeys: [],
        openKeys: [],
        editMenu: null
      })
      return
    }

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

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

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

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

        if (!submenu) {
          submenuId = ''
        } else {
          tabId = ThirdMenuId
          let tabmenu = submenu.FunMenu.filter(item => item.MenuID === ThirdMenuId)[0]
          if (!tabmenu) {
            submenuId = ''
            tabId = ''
          }
          if (item.FunMenu) {
            _smenu.children = item.FunMenu.map((child, n) => {
              let _tmenu = {}
              let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 待完善
              _tmenu.src = '#/main/' + _msg
              if (child.LinkUrl === 'CommonTable') {
                _tmenu.type = 'CommonTable'
              } else if (child.LinkUrl === 'DataManage') {
                _tmenu.type = 'DataManage'
              } else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
                _tmenu.type = 'RoleManage'
              } else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
                _tmenu.type = 'iframe'
              }
        }
        sessionStorage.removeItem('SubMenu')
        sessionStorage.removeItem('ThirdMenu')
      }
      let parentID = submenuId ? submenuId : result.data[0].ParentID // 展开二级菜单ID

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

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

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

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

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

            if (_tmenu.type !== 'iframe') {
              try {
                _tmenu.PageParam = JSON.parse(child.PageParam)
              } catch (e) {
                _tmenu.PageParam = {}
              }
              _tmenu.id = n
              _tmenu.MenuID = child.MenuID
              _tmenu.MenuNo = child.MenuNo
              _tmenu.MenuName = child.MenuName
              _tmenu.text = child.MenuName
              return _tmenu
            })
          }
          return _smenu
        }),
        rootSubmenuKeys: result.data.map(item => item.ParentID),
        openKeys: (this.props.collapse || !parentID) ? [] : [parentID]
              _tmenu.type = _tmenu.PageParam.Template || _tmenu.type
            } else {
              _tmenu.LinkUrl = child.LinkUrl
            }

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

      if (tabindex !== null) {
        let opentab = result.data[submenuindex].children[tabindex]
        opentab.selected = true
        this.props.modifyTabview([opentab])
      this.setState({
        subMenulist: menulist,
        rootSubmenuKeys: result.data.map(item => item.ParentID),
        openKeys: this.props.collapse ? [] : [parentID],
        editMenu: this.props.editLevel === 'level3' && menulist.filter(menu => menu.MenuID === this.state.editMenu.MenuID)[0]
      })
      if (tabId) {
        let _menu = menulist.filter(menu => menu.MenuID === submenuId)[0]
        let opentab = _menu && _menu.children.filter(tab => tab.MenuID === tabId)[0]
        if (opentab) {
          opentab.selected = true
          let home = this.props.tabviews[0]
          home.selected = false
          this.props.modifyTabview([home, opentab])
        }
      }
      // this.props.modifyTabview([{
      //   Action: 'Index',
      //   Icon: 'Content/icons/L32X32/RoleM.png',
      //   LinkUrl: 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM',
      //   MenuID: 'MMenu14002DBD0010',
      //   MenuName: '角色权限分配',
      //   MenuNo: 'RoleMenuM',
      //   Ot: '空',
      //   PageParam: '',
      //   SortSub: '720',
      //   id: 3,
      //   selected: true,
      //   type: 'RoleManage'
      // }])
    } else {
      notification.warning({
        top: 92,
        message: result.message,
        duration: 5
      })
    }
  }

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

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

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

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

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

  changemenu(e) {
    if (this.props.editState && this.props.editLevel !== 'HS') {
      e.preventDefault()
      return
    }
    
    let menu = JSON.parse(e.target.dataset.item)
    if (menu.Ot === 'NewPage') {
      window.open(menu.src)
@@ -156,7 +224,9 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.mainMenu && !is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
    if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu)) && nextProps.mainMenu && nextProps.mainMenu.MenuID === 'systemManageView') {
      this.enterManageView(nextProps.mainMenu.MenuID)
    } else if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
      // 主菜单切换，请求2、3级菜单数据
      this.loadsubmenu(nextProps.mainMenu)
    } else if (nextProps.collapse && this.props.collapse !== nextProps.collapse) {
@@ -168,12 +238,7 @@
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu)) || (!this.props.collapse && !is(fromJS(this.props.tabviews), fromJS(nextProps.tabviews)))) {
      // 主菜单切换，或菜单展开下的tab页变化，不会刷新
      return false
    } else {
      return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    }
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  onOpenChange = openKeys => {
@@ -190,9 +255,9 @@
  enterSubEdit = (e) => {
    // 编辑二级菜单
    e.stopPropagation()
    previewList = null
    this.props.resetEditLevel('level2')
    Api.getMainMenuData().then(res => {
    // 获取一级菜单列表
    Api.getSystemConfig({func: 'sPC_Get_MainMenu', debug: 'Y'}).then(res => {
      this.setState({
        mainMenuList: res.data.map(item => {
          return {
@@ -207,393 +272,30 @@
  enterThrEdit = (e, menu) => {
    // 编辑三级菜单
    e.stopPropagation()
    previewList = null
    this.props.resetEditLevel('level3')
    this.setState({editMenu: menu})
  }

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

  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.MenuID
          }
          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.props.editLevel === 'level2') {
      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
        }
      })
    } else if (menu.type === 'edit' && this.props.editLevel === 'level3') {
      this.setState({
        modalOptions: {
          visible: true,
          title: this.state.dict['header.menu.editTitle'],
          level: 'tlevel',
          type: 'edit',
          parentMenu: this.state.editMenu,
          supMenuList: this.state.subMenulist,
          menu: menu.card
        }
      })
  exitEdit = () => {
    if (this.props.editLevel === 'level3') {
      this.setState({editMenu: null})
    }
  }

  createThMenu = () => {
    this.setState({
      modalOptions: {
        visible: true,
        title: this.state.dict['header.menu.addtitle'],
        level: 'tlevel',
        type: 'add',
        parentMenu: this.state.editMenu,
        supMenuList: this.state.subMenulist,
        menu: null
      }
    })
  }

  handleSubBtn = (type) => {
    // 操作按钮
    if (this.props.editLevel === 'level2') {
      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)
      }
    } else {
      if (type === 'add') {
        this.setState({
          createThirdMenu: true
          // modalOptions: {
          //   visible: true,
          //   title: this.state.dict['header.menu.addtitle'],
          //   level: 'tlevel',
          //   type: 'add',
          //   parentMenu: this.state.editMenu,
          //   supMenuList: this.state.subMenulist,
          //   menu: null
          // }
        })
      } else if (type === 'thaw') {
        this.setState({
          thawMvisible: true
        })
        Api.submitInterface({
          func: 'sPC_Get_FrozenMenu',
          ParentID: this.state.editMenu.MenuID,
          TYPE: 30
        }).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.editMenu.children))) {
          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
    })
    this.props.resetEditLevel(false)
  }

  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.props.editLevel || this.props.editLevel === 'level1') &&
      <aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '') + (this.props.editState ? ' edit' : '')}>
        {!(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') &&
          <Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
          {editShow && <li className="sup-menu"><Icon onClick={this.enterSubEdit} className="edit-check" type="edit" /></li>}
          {this.state.subMenulist.map((item, index) => {
          {this.state.subMenulist && this.state.subMenulist.map((item, index) => {
            return (
              <SubMenu
                key={item.MenuID}
@@ -604,9 +306,9 @@
                  </span>
                }
              >
                {editShow && <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}>
                {editShow ? <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}>
                  <Icon onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check" type="edit" />
                </li>}
                </li> : null}
                {item.children.map(cell => {
                  return (
                    <Menu.Item key={cell.MenuID}>
@@ -618,124 +320,24 @@
            )
          })}
        </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>
        {this.props.editLevel === 'level2' ?
          <EditSecMenu
            menulist={this.state.subMenulist}
            supMenuList={this.state.mainMenuList}
            supMenu={this.props.mainMenu}
            reload={this.reload}
            exitEdit={this.exitEdit}
          /> : null
        }
        {this.props.editLevel === 'level3' && this.state.editMenu && !this.state.menuLoading &&
          <div>
            <div className="cus-submenu-title">
              <Icon type={this.state.editMenu.PageParam.Icon} />
              <span>{this.state.editMenu.text}</span>
            </div>
            <DndProvider className="header-drag-menu" backend={HTML5Backend}>
              <DragElement
                list={this.state.editMenu.children}
                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>
        {this.props.editLevel === 'level3' && this.state.subMenulist && this.state.editMenu ?
          <EditThdMenu
            menulist={this.state.editMenu.children}
            supMenuList={this.state.subMenulist}
            supMenu={this.state.editMenu}
            reload={this.reload}
            exitEdit={this.exitEdit}
          /> : null
        }
        <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 === 'level3' && this.state.createThirdMenu && <div className="editboard">
          <div className="workplace">
            <Tabs defaultActiveKey="1" onChange={this.callback}>
              <TabPane tab="新建菜单" key="1">
                <Row>
                  <Col span={8}>
                    <Card
                      title={
                        '基础表格'
                      }>
                      <img src={nortable} alt=""/>
                      <div className="card-operation">
                        <Button type="primary">预览</Button>
                        <Button type="primary" onClick={() => {this.createThMenu()}}>使用模板</Button>
                      </div>
                    </Card>
                  </Col>
                  <Col span={8}>
                    <Card
                      title={
                        '数据表格'
                      }>
                      <img src={nortable} alt=""/>
                      <div className="card-operation">
                        <Button type="primary">预览</Button>
                        <Button type="primary" onClick={() => {this.createThMenu()}}>使用模板</Button>
                      </div>
                    </Card>
                  </Col>
                </Row>
              </TabPane>
              {/* <TabPane tab="三级菜单" key="2">
                <Card
                  // className="level2-left"
                  title={
                    <div>
                      <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>
                  }>
                  <img src={nortable} alt=""/>
                </Card>
              </TabPane> */}
            </Tabs>
          </div>
        </div>}
      </aside>
    )
  }