thirdmenu

king

2019-11-05 fa80db0a824464cd0cbc46d5207021263211236d

 src/components/sidemenu/index.jsx

@@ -3,7 +3,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Menu, Icon, Button, notification, Modal, Spin} from 'antd'
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'
@@ -14,9 +14,11 @@
import enUS from '@/locales/en-US/header.js'
import Api from '@/api'
import './index.scss'
import nortable from '@/assets/img/normaltable.jpg'

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

class Sidemenu extends Component {
@@ -29,8 +31,9 @@
  }

  state = {
    mainMenuList: null,
    subMenulist: null,
    mainMenuList: null, // 一级菜单，编辑调整上级菜单时获取
    subMenulist: null, // 二级菜单
    editMenu: null, // 编辑三级菜单时设置
    rootSubmenuKeys: null,
    modalOptions: {
      visible: false,
@@ -43,6 +46,7 @@
    menuLoading: false,
    thawMvisible: false,
    thawmenulist: null,
    createThirdMenu: false,
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    openKeys: null
  }
@@ -66,32 +70,43 @@
      this.setState({
        menuLoading: false,
        subMenulist: result.data.map((item, i) => {
          item.id = i
          item.text = item.MenuNameP
          let _smenu = {}
          _smenu.id = i
          _smenu.MenuID = item.ParentID
          _smenu.text = item.MenuNameP
          try {
            item.PageParam = JSON.parse(item.PageParamP)
            _smenu.PageParam = JSON.parse(item.PageParamP)
          } catch (e) {
            item.PageParam = {Icon: 'folder'}
            _smenu.PageParam = {Icon: 'folder'}
          }
          if (item.FunMenu) {
            item.children = item.FunMenu.map((child, n) => {
            _smenu.children = item.FunMenu.map((child, n) => {
              let _tmenu = {}
              let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 待完善
              child.src = '#/main/' + _msg
              _tmenu.src = '#/main/' + _msg
              if (child.LinkUrl === 'CommonTable') {
                child.type = 'CommonTable'
                _tmenu.type = 'CommonTable'
              } else if (child.LinkUrl === 'DataManage') {
                child.type = 'DataManage'
                _tmenu.type = 'DataManage'
              } else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
                child.type = 'RoleManage'
                _tmenu.type = 'RoleManage'
              } else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
                child.type = 'iframe'
                _tmenu.type = 'iframe'
              }
              child.id = n
              child.text = item.MenuName
              return child
              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 item
          return _smenu
        }),
        rootSubmenuKeys: result.data.map(item => item.ParentID),
        openKeys: (this.props.collapse || !parentID) ? [] : [parentID]
@@ -102,6 +117,20 @@
        opentab.selected = true
        this.props.modifyTabview([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'
      // }])
    }
  }

@@ -167,12 +196,20 @@
      this.setState({
        mainMenuList: res.data.map(item => {
          return {
            id: item.MenuID,
            MenuID: item.MenuID,
            text: item.MenuName
          }
        })
      })
    })
  }

  enterThrEdit = (e, menu) => {
    // 编辑三级菜单
    e.stopPropagation()
    previewList = null
    this.props.resetEditLevel('level3')
    this.setState({editMenu: menu})
  }

  handlePreviewList = (List) => {
@@ -198,7 +235,7 @@
        onOk() {
          let param = {
            func: 'sPC_MainMenu_Del',
            MenuID: menu.card.ParentID
            MenuID: menu.card.MenuID
          }
          return Api.submitInterface(param).then(res => {
            if (res.status) {
@@ -214,7 +251,7 @@
        },
        onCancel() {}
      })
    } else if (menu.type === 'edit') {
    } else if (menu.type === 'edit' && this.props.editLevel === 'level2') {
      this.setState({
        modalOptions: {
          visible: true,
@@ -226,84 +263,188 @@
          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
        }
      })
    }
  }

  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 (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
              }
    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 {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
          this.props.resetEditLevel(false)
        }
      })
    } 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 {
      } else if (type === 'close') {
        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)
      }
    }
  }

@@ -451,22 +592,25 @@
      <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') &&
          <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) => {
            return (
              <SubMenu
                key={item.ParentID}
                key={item.MenuID}
                title={
                  <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>{item.text}</span>
                  </span>
                }
              >
                {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>}
                {item.children.map(cell => {
                  return (
                    <Menu.Item key={cell.MenuID}>
                      <a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.MenuName}</a>
                      <a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.text}</a>
                    </Menu.Item>
                  )
                })}
@@ -479,6 +623,29 @@
            <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 === '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}
              />
@@ -520,39 +687,55 @@
          {!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">
        {this.props.editLevel === 'level3' && this.state.createThirdMenu && <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" />
              <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>
                  </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>
                  }>
                  <img src={nortable} alt=""/>
                </Card>
              </TabPane>
              </TabPane> */}
            </Tabs>
          </div>
        </div>} */}
        </div>}
      </aside>
    )
  }