2022-07-27

king

2022-07-27 fbf25a99e0bc643be89b0f9dd0efed7867f1490e

 src/views/design/sidemenu/editthdmenu/index.jsx

@@ -5,34 +5,21 @@
import { DndProvider } from 'react-dnd'
import { withRouter } from 'react-router-dom'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin, Col, Card, Tabs, Row, Input } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { notification, Modal, Button } from 'antd'
import moment from 'moment'

import Api from '@/api'
import { sysTemps } from '@/utils/option.js'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import mainsubtable from '@/assets/img/mainsubtable.jpg'
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'

import card1 from '@/assets/img/card-bg2.jpg'
import card2 from '@/assets/img/card-bg5.jpg'
import card3 from '@/assets/img/card-bg8.jpg'
import card4 from '@/assets/img/card-bg7.jpg'
import card5 from '@/assets/img/card-bg6.jpg'

const MenuForm = asyncLoadComponent(() => import('../thdmenuform'))
const ComTableConfig = asyncLoadComponent(() => import('@/templates/comtableconfig'))
const TreePageConfig = asyncLoadComponent(() => import('@/templates/treepageconfig'))
const CalendarPageConfig = asyncLoadComponent(() => import('@/templates/calendarconfig'))
@@ -41,12 +28,9 @@
const SubTable = asyncLoadComponent(() => import('@/templates/subtableconfig'))

const { confirm } = Modal
const { TabPane } = Tabs
const { Search } = Input

class EditMenu extends Component {
  static propTpyes = {
    reload: PropTypes.func,      // 菜单修改后刷新
    menulist: PropTypes.any,     // 三级菜单列表
    exitEdit: PropTypes.func,    // 退出编辑状态
    supMenu: PropTypes.object,   // 对应的上级菜单
@@ -55,19 +39,10 @@

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    thawmenulist: null,     // 已冻结的二级菜单
    type: '',               // 操作类型，新建或编辑菜单
    thawMvisible: false,    // 解除冻结模态框
    confirmLoading: false,  // 提交中。。。
    selectTemp: '',         // 选择模板
    usedTemplates: null,    // 已使用模板列表
    tempSearchKey: '',      // 菜单名称过滤值
    loading: false,         // 编辑菜单或使用已使用模板时，获取配置信息
    preview: null,          // 图片预览url
    pretemplate: null,      // 预览模板
    btnParam: null,         // 编辑按钮的配置信息
    menulist: null,         // 编辑中的菜单
    sysTemplates: sysTemps, // 系统模板
    tabview: '',            // 选择模板窗口（template）、基础表格配置（CommonTable）、表单（Modal）、子表（SubTable）
    editMenu: null,         // 编辑菜单
    editAction: null,       // 编辑按钮
@@ -79,8 +54,8 @@
    btnTab: null,           // 打开新标签或当前页面刷新的按钮
    btnTabConfig: null,     // 打开新标签按钮配置
    handleMVisible: false,  // 添加或修改菜单模态框（角色权限分配等）
    sysMenu: false,         // 添加或编辑菜单（角色权限分配等）
    targetKeys: []          // 解冻菜单列表 
    sysMenu: null,          // 添加或编辑菜单（角色权限分配等）
    change: false
  }

  /**
@@ -97,7 +72,8 @@
   */
  handlePreviewList = (List) => {
    this.setState({
      menulist: List
      menulist: List,
      change: !is(fromJS(List), fromJS(this.props.menulist))
    })
  }

@@ -108,15 +84,16 @@
   * 3、菜单编辑，查询菜单配置信息，信息正确，进入对应编辑页面
   */
  handleMenu = (menu) => {
    const _this = this

    if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
    if (this.state.change) {
      notification.warning({
        top: 92,
        message: this.state.dict['model.menu.presave'],
        duration: 5
      })
    } else if (menu.type === 'close') {
      return
    }
    
    if (menu.type === 'close') {
      confirm({
        title: `确定删除菜单《${menu.card.MenuName}》吗？`,
        content: '',
@@ -127,7 +104,7 @@
          }
          return Api.getSystemConfig(param).then(res => {
            if (res.status) {
              _this.props.reload()
              MKEmitter.emit('mkUpdateMenuList')
            } else {
              notification.warning({
                top: 92,
@@ -142,9 +119,9 @@
    } else if (menu.type === 'edit') {
      let _menu = fromJS(menu.card).toJS()

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

        _menu.fstMenuId = _menu.FstId
        _menu.supMenuList = this.props.supMenuList
@@ -158,181 +135,103 @@
        return
      }

      // let _param = ''
      // if (card.type === 'CustomPage') {
      //   _param = {
      //     MenuType: 'custom',
      //     MenuId: card.MenuID,
      //     ParentId: card.ParentId,
      //     MenuName: card.MenuName,
      //     MenuNo: card.MenuNo
      //   }
      //   _param = window.btoa(window.encodeURIComponent(JSON.stringify(_param)))
      // }
      // window.open(`#/menudesign/${_param}`)}

      let param = {
        func: 'sPC_Get_LongParam',
        MenuID: _menu.MenuID
      }
      // let param = {
      //   func: 'sPC_Get_LongParam',
      //   MenuID: _menu.MenuID
      // }

      this.setState({
        loading: true
      })
      // this.setState({
      //   loading: true
      // })

      Api.getSystemConfig(param).then(res => {
        if (res.status) {
          let _LongParam = ''
          if (res.LongParam) {
            try {
              _LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
            } catch (e) {
              console.warn('Parse Failure')
              _LongParam = ''
            }
          }
      // Api.getSystemConfig(param).then(res => {
      //   if (res.status) {
      //     let _LongParam = ''
      //     if (res.LongParam) {
      //       try {
      //         _LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
      //       } catch (e) {
      //         console.warn('Parse Failure')
      //         _LongParam = ''
      //       }
      //     }

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

          // 检测模板是否存在
          let _Template = this.state.sysTemplates.filter(temp => temp.type === _menu.PageParam.Template)

          // 模板不存在时错误提示
          if (_Template.length === 0) {
            notification.warning({
              top: 92,
              message: '菜单模板丢失，请重新选择模板！',
              duration: 5
            })

            this.setState({
              type: 'edit',
              editMenu: _menu,
              loading: false,
              tabview: 'template'
            }, () => {
              document.getElementById('root').style.overflowY = 'hidden'
            })
          } else {
            this.setState({
              type: 'edit',
              editMenu: _menu,
              loading: false,
              tabview: _menu.PageParam.Template
            }, () => {
              document.getElementById('root').style.overflowY = 'hidden'
            })
          }
        } else {
          this.setState({
            loading: false
          })
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
      })
          
      //     this.setState({
      //       editMenu: _menu,
      //       loading: false,
      //       tabview: _menu.PageParam.Template
      //     }, () => {
      //       document.getElementById('root').style.overflowY = 'hidden'
      //     })
      //   } else {
      //     this.setState({
      //       loading: false
      //     })
      //     notification.warning({
      //       top: 92,
      //       message: res.message,
      //       duration: 5
      //     })
      //   }
      // })
    }
  }

  handleSubBtn = (type) => {
    // 操作按钮：添加、解除冻结、确认及关闭
    if (type === 'add') { // 点击添加时，展开模板
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
        notification.warning({
          top: 92,
          message: this.state.dict['model.menu.presave'],
          duration: 5
    if (type === 'confirm') {
      let param  = {
        func: 'sPC_Menu_SortUpt',
        LText: this.state.menulist.map((item, index) => {
          return 'select \'' + item.MenuID + '\' as Menuid,' + (index + 1) * 10 + ' as sort'
        })
        return
      }

      this.setState({
        tabview: 'template',
        editMenu: {
          MenuID: Utils.getuuid(),
          MenuName: '',
          MenuNo: '',
          type: '',
          PageParam: '',
          LongParam: '',
          isSubtable: '', // 是否为主子表
          ParentId: this.props.supMenu.MenuID,
          supMenuList: this.props.supMenuList,
          fstMenuId: this.props.mainMenu.MenuID,
          fstMenuList: this.props.menuTree,
          menuSort: (this.props.menulist.length + 1) * 10 // 新建菜单设置排序
        }
      }, () => {
        document.getElementById('root').style.overflowY = 'hidden'
      })
    } else if (type === 'thaw') {
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
        notification.warning({
          top: 92,
          message: this.state.dict['model.menu.presave'],
          duration: 5
        })
        return
      }
      this.setState({
        thawMvisible: true,
        targetKeys: []
      })
      Api.getSystemConfig({
        func: 'sPC_Get_FrozenMenu',
        ParentID: this.props.supMenu.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: 5
          })
        }
      })
    } else if (type === 'confirm') {
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
        let _this = this
        let param  = {
          func: 'sPC_Menu_SortUpt',
          LText: this.state.menulist.map((item, index) => {
            return 'select \'' + item.MenuID + '\' as Menuid,' + (index + 1) * 10 + ' as sort'
          })
        }
      param.LText = param.LText.join(' union ') // sql拼接
      param.LText = Utils.formatOptions(param.LText) // 关键字符替换，base64加密
      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') // 时间戳
      param.secretkey = Utils.encrypt(param.LText, param.timestamp) // md5密钥

        param.LText = param.LText.join(' union ') // sql拼接
        param.LText = Utils.formatOptions(param.LText) // 关键字符替换，base64加密
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') // 时间戳
        param.secretkey = Utils.encrypt(param.LText, param.timestamp) // md5密钥

        confirm({
          title: this.state.dict['model.menu.resetorder'],
          content: '',
          onOk() {
            return Api.getSystemConfig(param).then(res => {
              if (res.status) {
                _this.props.reload()
              } else {
                notification.warning({
                  top: 92,
                  message: res.message,
                  duration: 5
                })
              }
            })
          },
          onCancel() {}
        })
      } else {
        this.props.exitEdit()
      }
      confirm({
        title: '确认调整菜单顺序吗？',
        content: '',
        onOk() {
          return Api.getSystemConfig(param).then(res => {
            if (res.status) {
              MKEmitter.emit('mkUpdateMenuList')
            } else {
              notification.warning({
                top: 92,
                message: res.message,
                duration: 5
              })
            }
          })
        },
        onCancel() {}
      })
    } else if (type === 'close') {
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
      if (this.state.change) {
        let _this = this

        confirm({
@@ -347,248 +246,6 @@
        this.props.exitEdit()
      }
    }
  }

  thawMemuSubmit = () => {
    const { targetKeys } = this.state
    // 三级菜单解除冻结
    if (targetKeys.length === 0) {
      notification.warning({
        top: 92,
        message: this.state.dict['form.required.select'] + this.state.dict['model.menu'],
        duration: 5
      })
    } else {
      this.setState({
        confirmLoading: true
      })
      let defers = targetKeys.map(item => {
        return new Promise((resolve) => {
          Api.getSystemConfig({
            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: 10
          })
        } else {
          this.setState({
            confirmLoading: false,
            thawMvisible: false,
            targetKeys: [],
            thawmenulist: null
          })
          this.props.reload()
        }
      })
    }
  }

  thawMemuCancel = () => {
    // 解除冻结-取消
    this.setState({
      thawMvisible: false,
      thawmenulist: null,
      targetKeys: []
    })
  }

  previewPicture = (template) => {
    if (template.disabled) return
    // 图片预览
    this.setState({
      preview: template.url,
      pretemplate: template
    })
  }

  cancelPrePicture = () => {
    // 关闭图片预览
    this.setState({
      preview: null
    })
  }

  /**
   * @description 使用模板
   * 1、使用系统模板时，使用系统配置
   * 2、使用已有菜单模板时，获取菜单配置信息，标记为user（复制菜单按钮）
   */
  useTemplate = (template, useType) => {
    let editMenu = fromJS(this.state.editMenu).toJS()

    editMenu.fstMenuId = this.props.mainMenu.MenuID
    editMenu.fstMenuList = this.props.menuTree

    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({
        handleMVisible: true,
        sysMenu: _menu
      })
      return
    }

    new Promise(resolve => {
      if (useType === 'sys') {
        resolve(true)
      } else {
        let param = {
          func: 'sPC_Get_LongParam',
          MenuID: template.uuid
        }
        this.setState({
          loading: true
        })

        Api.getSystemConfig(param).then(result => {
          if (!result.status) {
            notification.warning({
              top: 92,
              message: result.message,
              duration: 5
            })
            resolve(false)
          } else {
            let _config = ''
            if (result.LongParam) {
              try {
                _config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
                _config.type = 'user'
              } catch (e) {
                console.warn('Parse Failure')
                _config = ''
              }
            }

            if (_config) {
              template.baseconfig = _config
              resolve(true)
            } else {
              notification.warning({
                top: 92,
                message: '模板信息获取失败！',
                duration: 5
              })
              resolve(false)
            }
          }
        })
      }
    }).then(res => {
      if (!res) { // 错误时，重置状态
        this.setState({
          loading: false
        })
        return
      }

      // 选择模板：添加菜单时(不存在menuId)
      let _PageParam = {
        OpenType: editMenu.PageParam ? editMenu.PageParam.OpenType : 'newtab',
        Template: template.type
      }

      this.setState({
        loading: false,
        tabview: template.type,
        editMenu: {
          ...editMenu,
          type: template.type,
          PageParam: _PageParam,
          LongParam: template.baseconfig,
          isSubtable: template.isSubtable
        }
      })

      document.getElementById('root').style.overflowY = 'hidden'
    })
  }

  getUsedTemplate = () => {
    let { sysTemplates } = this.state
    let memberLevel = Utils.getMemberLevel()
    const illust = { // 模板图片，用于已使用模板
      CommonTable: mainsubtable,
      TreePage: treepage,
      CalendarPage: calendar,
      CustomPage: customImg
    }

    Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'menu'}).then(res => {
      let _templates = []

      res.UserTemp.forEach(temp => {
        if (temp.Template === 'NewPage' || temp.Template === 'RolePermission') {
          return
        } else if (temp.Template === 'CustomPage' && memberLevel < 20) {
          temp.disabled = true
          temp.disTitle = '会员等级不够，无开发权限。'
        }
        
        _templates.push({
          uuid: temp.MenuID,
          title: temp.MenuName,
          type: temp.Template,
          url: illust[temp.Template],
          disabled: temp.disabled || false,
          disTitle: temp.disTitle || ''
        })
      })

      sysTemplates = sysTemplates.map(temp => {
        if (temp.type === 'CustomPage' && memberLevel < 20) {
          temp.disabled = true
          temp.disTitle = '会员等级不够，无开发权限。'
        }

        return temp
      })

      this.setState({
        usedTemplates: _templates,
        sysTemplates: sysTemplates
      })
    })
  }

  exittabview = () => {
@@ -616,17 +273,6 @@
    const { sysMenu } = this.state
    let sysTemplates = fromJS(this.state.sysTemplates).toJS()

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

    //     return temp
    //   })
    // }

    this.menuFormRef.handleConfirm().then(res => {
      let PageParam = {
        Template: sysMenu.Template,
@@ -653,10 +299,6 @@
        LTexttb: ''
      }

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

      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
      param.secretkey = Utils.encrypt(param.LText, param.timestamp)

@@ -664,33 +306,29 @@
        confirmLoading: true
      })

      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: ''
            })
  
            this.props.reload()
            document.getElementById('root').style.overflowY = 'unset'
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: response.message,
              duration: 5
            })
          }
        })
      }
      Api.getSystemConfig(param).then(response => {
        if (response.status) {
          this.setState({
            sysTemplates: sysTemplates,
            confirmLoading: false,
            handleMVisible: false,
            sysMenu: '',
            tabview: ''
          })

          MKEmitter.emit('mkUpdateMenuList')
          document.getElementById('root').style.overflowY = 'unset'
        } else {
          this.setState({
            confirmLoading: false
          })
          notification.warning({
            top: 92,
            message: response.message,
            duration: 5
          })
        }
      })
    })
  }

@@ -731,7 +369,7 @@
              tabview: ''
            })
  
            this.props.reload()
            MKEmitter.emit('mkUpdateMenuList')
            document.getElementById('root').style.overflowY = 'unset'
          } else {
            this.setState({
@@ -758,8 +396,6 @@
  }

  UNSAFE_componentWillMount () {
    this.getUsedTemplate()

    this.setState({
      menulist: this.props.menulist
    })
@@ -768,37 +404,17 @@
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
      this.setState({
        menulist: nextProps.menulist
        menulist: nextProps.menulist,
        change: false
      })
    }
  }

  render () {
    const { dict } = this.state
    const { change } = this.state

    return (
      <div className="third-edit-box">
        {!this.state.tabview ?
          <div className="mask">
            <div className="tipcard card1" style={{backgroundImage: 'url(' + card1 + ')'}}>
              拖动三级菜单可调整顺序，顺序调整后，请点击确定按钮保存。
            </div>
            <div className="tipcard card2" style={{backgroundImage: 'url(' + card2 + ')'}}>
              点击编辑图标会根据菜单模板，进入相应的模板编辑页面，点击删除图标可删除菜单。
            </div>
            <div className="tipcard card3" style={{backgroundImage: 'url(' + card3 + ')'}}>
              点击解除冻结按钮，可还原已删除的三级菜单。
            </div>
            <div className="tipcard card4" style={{backgroundImage: 'url(' + card4 + ')'}}>
              点击添加图标，会显示系统模板和已使用模板，选择已使用模板时，会复制已添加菜单的配置信息。
            </div>
            <div className="tipcard card5" style={{backgroundImage: 'url(' + card5 + ')'}}>
              <p>编辑状态中，菜单之外区域会锁定，查看系统数据请点击。</p>
              <div>
                <span className="new-view" onClick={() => {window.open('#/main')}} >新页面</span>
              </div>
            </div>
          </div> : null
        }
        <div className="cus-submenu-title">
          <MkIcon type={this.props.supMenu.PageParam.Icon} />
          <span>{this.props.supMenu.MenuName}</span>
@@ -810,86 +426,29 @@
            handleMenu={this.handleMenu}
          />
        </DndProvider>
        <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
          <PlusOutlined />
        </div>
        <div className="menu-btn">
          <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{dict['model.thaw'] + dict['model.menu']}</Button>
          <Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{dict['model.confirm']}</Button>
          <Button onClick={() => {this.handleSubBtn('close')}}>{dict['model.close']}</Button>
          <Button type="primary" className="mk-save-menu" disabled={!change} onClick={() => {this.handleSubBtn('confirm')}}>保存</Button>
          <Button onClick={() => {this.handleSubBtn('close')}}>关闭</Button>
        </div>
        {this.state.tabview === 'template' ?
          <div className="editboard">
            <div className="workplace">
              <Button className="top-btn mk-yellow" onClick={this.exittabview}>{dict['model.cancel']}</Button>
              {this.state.tabview === 'template' && <Tabs defaultActiveKey="1">
                <TabPane tab="系统模板" key="1">
                  <Row>
                    {this.state.sysTemplates.map((template, index) => {
                      // if (template.hidden) return null

                      return (
                        <Col key={`${index}`} className={template.disabled ? 'disabled' : ''} title={template.disTitle || ''} span={8}>
                          <Card
                            title={template.title}>
                            <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                            <div className="card-operation">
                              <Button type="primary" onClick={() => {this.useTemplate(template, 'sys')}}>使用模板</Button>
                            </div>
                          </Card>
                        </Col>
                      )
                    })}
                  </Row>
                </TabPane>
                <TabPane tab="已使用模板" key="2">
                  <Row>
                    <Col span={8}>
                      <Search placeholder="请输入菜单名称" defaultValue={this.state.tempSearchKey} onSearch={value => {this.setState({tempSearchKey: value})}} enterButton />
                    </Col>
                  </Row>
                  <Row>
                    {this.state.usedTemplates && this.state.usedTemplates.map((template, index) => {
                      if (template.title.toLowerCase().indexOf(this.state.tempSearchKey.toLowerCase()) >= 0) {
                        return (
                          <Col key={template.type + index} className={template.disabled ? 'disabled' : ''} title={template.disTitle || ''} span={6}>
                            <Card
                              title={template.title}>
                              <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                              <div className="card-operation">
                                <Button type="primary" onClick={() => {this.useTemplate(template, 'user')}}>使用模板</Button>
                              </div>
                            </Card>
                          </Col>
                        )
                      } else {
                        return ''
                      }
                    })}
                  </Row>
                </TabPane>
              </Tabs>}
            </div>
          </div> : null
        }
        
        {this.state.tabview === 'TreePage' ?
          <TreePageConfig
            menu={this.state.editMenu}
            reloadmenu={() => {this.props.reload()}}
            reloadmenu={() => {MKEmitter.emit('mkUpdateMenuList')}}
            handleView={this.handleView}
          /> : null
        }
        {this.state.tabview === 'CalendarPage' ?
          <CalendarPageConfig
            menu={this.state.editMenu}
            reloadmenu={() => {this.props.reload()}}
            reloadmenu={() => {MKEmitter.emit('mkUpdateMenuList')}}
            handleView={this.handleView}
          /> : null
        }
        {this.state.tabview === 'CommonTable' ?
          <ComTableConfig
            menu={this.state.editMenu}
            reloadmenu={() => {this.props.reload()}}
            reloadmenu={() => {MKEmitter.emit('mkUpdateMenuList')}}
            handleView={this.handleView}
          /> : null
        }
@@ -927,38 +486,22 @@
            handleView={this.handleView}
          /> : null
        }
        {/* 图片预览 */}
        <Preview cancel={this.cancelPrePicture} preview={this.state.preview} template={this.state.pretemplate} confirm={this.useTemplate}/>
        {/* 解冻菜单模态框 */}
        <Modal
          title={dict['model.thaw'] + dict['model.menu']}
          width={600}
          visible={this.state.thawMvisible}
          onOk={this.thawMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.thawMemuCancel}
          destroyOnClose
        >
          {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
          {this.state.thawmenulist && <TransferForm onChange={(vals) => this.setState({targetKeys: vals})} menulist={this.state.thawmenulist}/>}
        </Modal>
        {/* 添加系统菜单 */}
        <Modal
          title={this.state.sysMenu && this.state.sysMenu.isSystem ? dict['model.add'] + dict['model.menu'] : dict['model.update'] + dict['model.menu']}
          title="修改菜单"
          visible={this.state.handleMVisible}
          width={600}
          onOk={this.memuSubmit}
          confirmLoading={this.state.confirmLoading}
          confirmLoading={this.state.loading}
          onCancel={() => {this.setState({handleMVisible: false})}}
          destroyOnClose
        >
          <MenuForm
            menu={this.state.sysMenu}
            dict={dict}
            inputSubmit={this.memuSubmit}
            wrappedComponentRef={(inst) => this.menuFormRef = inst}
          />
        </Modal>
        {this.state.loading && <Spin className="loading-thdmenu" size="large" />}
      </div>
    )
  }