2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

 src/templates/menuconfig/editthdmenu/index.jsx

@@ -1,9 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { connect } from 'react-redux'
import { DndProvider } from 'react-dnd'
import { withRouter } from 'react-router-dom'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin, Icon, Col, Card, Tabs, Row, Input } from 'antd'
import { notification, Modal, Button, Spin, Col, Card, Tabs, Row, Input } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import moment from 'moment'

import Api from '@/api'
@@ -14,11 +17,12 @@
import treepage from '@/assets/img/treepage.jpg'
import calendar from '@/assets/img/calendar.jpg'
import customImg from '@/assets/img/custom.jpg'

import MkIcon from '@/components/mk-icon'
import Preview from './preview'
import MenuForm from './menuform'
import TransferForm from '@/templates/zshare/basetransferform'
import Utils from '@/utils/utils.js'
import MenuUtils from '@/utils/utils-custom.js'
import DragElement from '../menuelement'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import './index.scss'
@@ -50,7 +54,7 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    thawmenulist: null,     // 已冻结的二级菜单
    type: '',               // 操作类型，新建或编辑菜单
    thawMvisible: false,    // 解除冻结模态框
@@ -76,8 +80,16 @@
    btnTabConfig: null,     // 打开新标签按钮配置
    handleMVisible: false,  // 添加或修改菜单模态框（角色权限分配等）
    sysMenu: false,         // 添加或编辑菜单（角色权限分配等）
    fstMenuId: null,        // 一级菜单Id
    fstMenuList: null       // 一级菜单列表
    targetKeys: []          // 解冻菜单列表 
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  /**
@@ -106,7 +118,7 @@
      })
    } else if (menu.type === 'close') {
      confirm({
        title: this.state.dict['model.menu.close'].replace('@M', menu.card.text),
        title: this.state.dict['model.menu.close'].replace('@M', menu.card.MenuName),
        content: '',
        onOk() {
          let param = {
@@ -130,25 +142,13 @@
    } else if (menu.type === 'edit') {
      let _menu = fromJS(menu.card).toJS()

      delete _menu.id
      delete _menu.src
      delete _menu.text

      if (_menu.PageParam && _menu.PageParam.Template === 'RolePermission') { // 单页面修改
      if (_menu.PageParam && (_menu.PageParam.Template === 'RolePermission' || _menu.PageParam.Template === 'NewPage')) { // 单页面修改
        _menu.Template = _menu.PageParam.Template
        _menu.url = _menu.PageParam.url

        if (!this.state.fstMenuId) {
          notification.warning({
            top: 92,
            message: '菜单加载中，请稍后重试！',
            duration: 5
          })
          return
        }

        _menu.fstMenuId = _menu.FstId
        _menu.supMenuList = this.props.supMenuList
        _menu.fstMenuId = this.state.fstMenuId || ''
        _menu.fstMenuList = this.state.fstMenuList || []
        _menu.fstMenuList = this.props.menuTree
  
        this.setState({
          handleMVisible: true,
@@ -181,9 +181,9 @@
          }

          _menu.LongParam = _LongParam
          _menu.fstMenuId = _menu.FstId
          _menu.supMenuList = this.props.supMenuList
          _menu.fstMenuId = this.state.fstMenuId || ''
          _menu.fstMenuList = this.state.fstMenuList || []
          _menu.fstMenuList = this.props.menuTree
          _menu.open_edition = res.open_edition || ''

          // 检测模板是否存在
@@ -193,7 +193,7 @@
          if (_Template.length === 0) {
            notification.warning({
              top: 92,
              message: this.state.dict['model.menu.template.empty'],
              message: '菜单模板丢失，请重新选择模板！',
              duration: 5
            })

@@ -205,7 +205,7 @@
            }, () => {
              document.getElementById('root').style.overflowY = 'hidden'
            })
          } else if (_menu.fstMenuId) {
          } else {
            this.setState({
              type: 'edit',
              editMenu: _menu,
@@ -213,12 +213,6 @@
              tabview: _menu.PageParam.Template
            }, () => {
              document.getElementById('root').style.overflowY = 'hidden'
            })
          } else {
            _menu.loadingFstMenuId = true
            this.setState({
              type: 'edit',
              editMenu: _menu
            })
          }
        } else {
@@ -247,15 +241,6 @@
        return
      }

      if (!this.state.fstMenuId) {
        notification.warning({
          top: 92,
          message: '菜单加载中，请稍后重试！',
          duration: 5
        })
        return
      }

      this.setState({
        tabview: 'template',
        editMenu: {
@@ -268,8 +253,8 @@
          isSubtable: '', // 是否为主子表
          ParentId: this.props.supMenu.MenuID,
          supMenuList: this.props.supMenuList,
          fstMenuId: this.state.fstMenuId,
          fstMenuList: this.state.fstMenuList,
          fstMenuId: this.props.mainMenu.MenuID,
          fstMenuList: this.props.menuTree,
          menuSort: (this.props.menulist.length + 1) * 10 // 新建菜单设置排序
        }
      }, () => {
@@ -285,7 +270,8 @@
        return
      }
      this.setState({
        thawMvisible: true
        thawMvisible: true,
        targetKeys: []
      })
      Api.getSystemConfig({
        func: 'sPC_Get_FrozenMenu',
@@ -346,13 +332,27 @@
        this.props.exitEdit()
      }
    } else if (type === 'close') {
      this.props.exitEdit()
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
        let _this = this

        confirm({
          title: '菜单顺序已调整，放弃保存吗？',
          content: '',
          onOk() {
            _this.props.exitEdit()
          },
          onCancel() {}
        })
      } else {
        this.props.exitEdit()
      }
    }
  }

  thawMemuSubmit = () => {
    const { targetKeys } = this.state
    // 三级菜单解除冻结
    if (this.refs.trawmenu.state.targetKeys.length === 0) {
    if (targetKeys.length === 0) {
      notification.warning({
        top: 92,
        message: this.state.dict['form.required.select'] + this.state.dict['model.menu'],
@@ -362,7 +362,7 @@
      this.setState({
        confirmLoading: true
      })
      let defers = this.refs.trawmenu.state.targetKeys.map(item => {
      let defers = targetKeys.map(item => {
        return new Promise((resolve) => {
          Api.getSystemConfig({
            func: 'sPC_MainMenu_ReDel',
@@ -388,6 +388,7 @@
          this.setState({
            confirmLoading: false,
            thawMvisible: false,
            targetKeys: [],
            thawmenulist: null
          })
          this.props.reload()
@@ -400,7 +401,8 @@
    // 解除冻结-取消
    this.setState({
      thawMvisible: false,
      thawmenulist: null
      thawmenulist: null,
      targetKeys: []
    })
  }

@@ -427,27 +429,35 @@
  useTemplate = (template, useType) => {
    let editMenu = fromJS(this.state.editMenu).toJS()

    if (!this.state.fstMenuId) {
      notification.warning({
        top: 92,
        message: '菜单加载中，请稍后重试！',
        duration: 5
      })
      return
    }
    editMenu.fstMenuId = this.props.mainMenu.MenuID
    editMenu.fstMenuList = this.props.menuTree

    if (!editMenu.fstMenuId) {
      editMenu.fstMenuId = this.state.fstMenuId
      editMenu.fstMenuList = this.state.fstMenuList
    }

    if (useType === 'sys' && (template.type === 'RolePermission' || template.type === 'CustomPage')) { // 独立页面
    if (useType === 'sys' && (template.type === 'RolePermission' || template.type === 'NewPage')) { // 独立页面
      let _menu = {
        ...editMenu,
        MenuID: Utils.getuuid(),
        MenuName: template.title,
        Template: template.type,
        ParentId: this.props.supMenu.MenuID,
        menuSort: (this.props.menulist.length + 1) * 10,
        isSystem: true
      }

      this.setState({
        handleMVisible: true,
        sysMenu: _menu
      })
      return
    } else if (template.type === 'CustomPage') {
      let _menu = {
        ...editMenu,
        MenuID: Utils.getuuid(),
        MenuName: template.title,
        Template: template.type,
        ParentId: this.props.supMenu.MenuID,
        OriginMenuId: template.uuid || '',
        menuSort: (this.props.menulist.length + 1) * 10,
        isSystem: true
      }

      this.setState({
@@ -519,7 +529,7 @@

      this.setState({
        loading: false,
        tabview: template.type === 'CustomPage' ? '' : template.type,
        tabview: template.type,
        editMenu: {
          ...editMenu,
          type: template.type,
@@ -529,26 +539,12 @@
        }
      })

      if (template.type === 'CustomPage') { // 使用自定义的已有菜单
        // let _menu = {
        //   ...editMenu,
        //   MenuID: Utils.getuuid(),
        //   MenuName: template.title,
        //   Template: template.type,
        //   ParentID: this.props.supMenu.MenuID,
        // }
  
        // this.setState({
        //   handleMVisible: true,
        //   sysMenu: _menu
        // })
        return
      }
      document.getElementById('root').style.overflowY = 'hidden'
    })
  }

  getUsedTemplate = () => {
    const { memberLevel } = this.props
    let { sysTemplates } = this.state
    const illust = { // 模板图片，用于已使用模板
      CommonTable: mainsubtable,
@@ -562,11 +558,15 @@
      let hasRolePermission = false

      res.UserTemp.forEach(temp => {
        if (temp.Template === 'RolePermission') {
        if (temp.Template === 'NewPage') {
          return
        } else if (temp.Template === 'RolePermission') {
          hasRolePermission = true
          return
        } else if (temp.Template === 'CustomPage' && memberLevel < 20) {
          return
        }

        
        _templates.push({
          uuid: temp.MenuID,
          title: temp.MenuName,
@@ -575,15 +575,15 @@
        })
      })

      if (!hasRolePermission) {
        sysTemplates = sysTemplates.map(temp => {
          if (temp.type === 'RolePermission') {
            temp.hidden = false
          }
      sysTemplates = sysTemplates.map(temp => {
        if (temp.type === 'RolePermission' && !hasRolePermission) {
          temp.hidden = false
        } else if (temp.type === 'CustomPage' && memberLevel < 20) {
          temp.hidden = true
        }

          return temp
        })
      }
        return temp
      })

      this.setState({
        usedTemplates: _templates,
@@ -618,7 +618,7 @@
    let sysTemplates = fromJS(this.state.sysTemplates).toJS()

    // 角色权限分配模板，只可以添加一次
    if (sysMenu.isSystem && sysMenu.Template === 'RolePermission') {
    if (sysMenu.isSystem && (sysMenu.Template === 'RolePermission')) {
      sysTemplates = sysTemplates.map(temp => {
        if (temp.type === sysMenu.type) {
          temp.hidden = true
@@ -629,6 +629,15 @@
    }

    this.menuFormRef.handleConfirm().then(res => {
      let PageParam = {
        Template: sysMenu.Template,
        OpenType: 'newtab'
      }

      if (sysMenu.Template === 'NewPage') {
        PageParam.OpenType = 'NewPage'
        PageParam.url = res.url
      }

      let param = {
        func: 'sPC_TrdMenu_AddUpt',
@@ -639,10 +648,14 @@
        MenuNo: res.MenuNo,
        Template: sysMenu.Template,
        MenuName: res.MenuName,
        PageParam: JSON.stringify({Template: sysMenu.Template, OpenType: 'newtab'}),
        PageParam: JSON.stringify(PageParam),
        LongParam: '',
        LText: '',
        LTexttb: ''
      }

      if (sysMenu.menuSort) { // 菜单新建时设置排序
        param.Sort = sysMenu.menuSort
      }

      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
@@ -652,93 +665,89 @@
        confirmLoading: true
      })

      Api.getSystemConfig(param).then(response => {
        if (response.status) {
          this.setState({
            sysTemplates: sysTemplates,
            confirmLoading: false,
            handleMVisible: false,
            sysMenu: '',
            tabview: ''
          })

          this.props.reload()
        } else {
          this.setState({
            confirmLoading: false
          })
          notification.warning({
            top: 92,
            message: response.message,
            duration: 5
          })
        }
      })
    })
  }


  UNSAFE_componentWillMount () {
    this.getUsedTemplate()

    this.setState({
      menulist: this.props.menulist
    })
  }

  componentDidMount () {
    let _param = {
      func: 's_Get_FSMenusForOpen',
      SndMenuID: this.props.supMenu.MenuID,
      TYPE: 20,
      TypeCharOne: 'PC'
    }
    this.setState({
      loading: true
    })

    Api.getSystemConfig(_param).then(result => {
      if (result.status) {
        this.setState({
          loading: false,
          fstMenuId: result.FstIDSeleted,
          fstMenuList: result.data.map(smenu => {
            let _smenu = {
              MenuID: smenu.FstID,
              text: smenu.FstName,
              options: smenu.SndData.map(menu => {
                return {
                  MenuID: menu.SndID,
                  text: menu.SndName,
                }
              })
            }

            return _smenu
          })
        }, () => {
          let _menu = this.state.editMenu ? fromJS(this.state.editMenu).toJS() : null
      if (sysMenu.Template === 'CustomPage' && sysMenu.OriginMenuId) {
        this.copyMenu(param, sysMenu.OriginMenuId)
      } else {
        Api.getSystemConfig(param).then(response => {
          if (response.status) {
            this.setState({
              sysTemplates: sysTemplates,
              confirmLoading: false,
              handleMVisible: false,
              sysMenu: '',
              tabview: ''
            })
  
          if (!_menu || !_menu.loadingFstMenuId) {
            return
            this.props.reload()
            document.getElementById('root').style.overflowY = 'unset'
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: response.message,
              duration: 5
            })
          }
        })
      }
    })
  }

  copyMenu = (param, MenuId) => {
    Api.getSystemConfig({
      func: 'sPC_Get_LongParam',
      MenuID: MenuId
    }).then(result => {
      if (result.status) {
        let config = null
  
          delete _menu.loadingFstMenuId
          _menu.fstMenuId = this.state.fstMenuId
          _menu.fstMenuList = this.state.fstMenuList
        try {
          config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null
        } catch (e) {
          console.warn('Parse Failure')
          config = null
        }
  
          this.setState({
            type: 'edit',
            editMenu: _menu,
            loading: false,
            tabview: _menu.PageParam.Template
          }, () => {
            document.getElementById('root').style.overflowY = 'hidden'
          })
        if (config) {
          config.uuid = param.MenuID
          config.MenuID = param.MenuID
          config.parentId = param.ParentID
          config.MenuName = param.MenuName
          config.MenuNo = param.MenuNo
          config.easyCode = ''
          config.components = MenuUtils.resetConfig(config.components)
          config.enabled = false

          param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config)))
        }

        Api.getSystemConfig(param).then(response => {
          if (response.status) {
            this.setState({
              confirmLoading: false,
              handleMVisible: false,
              sysMenu: '',
              tabview: ''
            })
  
            this.props.reload()
            document.getElementById('root').style.overflowY = 'unset'
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: response.message,
              duration: 5
            })
          }
        })
      } else {
        this.setState({
          loading: false
          confirmLoading: false
        })
        notification.warning({
          top: 92,
@@ -746,6 +755,14 @@
          duration: 5
        })
      }
    })
  }

  UNSAFE_componentWillMount () {
    this.getUsedTemplate()

    this.setState({
      menulist: this.props.menulist
    })
  }

@@ -778,14 +795,14 @@
            <div className="tipcard card5" style={{backgroundImage: 'url(' + card5 + ')'}}>
              <p>编辑状态中，菜单之外区域会锁定，查看系统数据请点击。</p>
              <div>
                <a target="blank" href="#/main" >新页面</a>
                <span className="new-view" onClick={() => {window.open('#/main')}} >新页面</span>
              </div>
            </div>
          </div> : null
        }
        <div className="cus-submenu-title">
          <Icon type={this.props.supMenu.PageParam.Icon} />
          <span>{this.props.supMenu.text}</span>
          <MkIcon type={this.props.supMenu.PageParam.Icon} />
          <span>{this.props.supMenu.MenuName}</span>
        </div>
        <DndProvider backend={HTML5Backend}>
          <DragElement
@@ -795,7 +812,7 @@
          />
        </DndProvider>
        <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
          <Icon type="plus" />
          <PlusOutlined />
        </div>
        <div className="menu-btn">
          <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{dict['model.thaw'] + dict['model.menu']}</Button>
@@ -924,7 +941,7 @@
          destroyOnClose
        >
          {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
          {this.state.thawmenulist && <TransferForm ref="trawmenu" menulist={this.state.thawmenulist}/>}
          {this.state.thawmenulist && <TransferForm onChange={(vals) => this.setState({targetKeys: vals})} menulist={this.state.thawmenulist}/>}
        </Modal>
        {/* 添加系统菜单 */}
        <Modal
@@ -938,6 +955,7 @@
          <MenuForm
            menu={this.state.sysMenu}
            dict={dict}
            inputSubmit={this.memuSubmit}
            wrappedComponentRef={(inst) => this.menuFormRef = inst}
          />
        </Modal>
@@ -947,4 +965,16 @@
  }
}

export default EditMenu
const mapStateToProps = (state) => {
  return {
    mainMenu: state.mainMenu,
    menuTree: state.menuTree,
    memberLevel: state.memberLevel
  }
}

const mapDispatchToProps = () => {
  return {}
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditMenu))