2024-08-25

king

2024-08-25 326aa6b3effaccc71cfe0775d47b0f29eb3695a6

 src/views/printTemplate/index.jsx

@@ -1,11 +1,1030 @@
import React, {Component} from 'react'
import { DndProvider } from 'react-dnd'
import { is, fromJS } from 'immutable'
import HTML5Backend from 'react-dnd-html5-backend'
import { Card, notification, Row, Button, Modal, Input, Switch } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, CaretRightOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import DragElement from './dragelement'
import MutilForm from './mutilform'
import SourceElement from './dragelement/source'
import {
  printItems,
  originConfig,
  getpageform,
  getTextForm,
  getBarcodeForm,
  getQrcodeForm,
  getImageForm,
  getElement,
  barurl,
  qrurl,
  imgurl
} from './option.js'
import { langs } from '@/store/options'
import Utils from '@/utils/utils.js'
import printCtrl from './print.js'
import Api from '@/api'
import './index.scss'

const { confirm } = Modal
let dropPoint = null
let origin = null
let timer = null
let preorigin = null
let nextorigin = null

class PrintTemplate extends Component {
  state = {
    config: null,
    oriConfig: null,
    ID: null,
    langName: '',
    editItemId: '',
    editItemType: '',
    fields: [],
    formlist: null,
    saveloading: false,
    upPlus: 1,
    upMinus: 1,
    leftPlus: 1,
    leftMinus: 1,
    debug: true
  }

  getclickpoint = (e) => {
    const { config } = this.state
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    let screenX = e.clientX
    let screenY = e.clientY + scrollTop
    let offsetT = screenY - 75
    let _width = parseInt(document.getElementById('darea').style.width)
    let offsetL = screenX - (document.body.offsetWidth - _width - 40) / 2

    let cx = Math.floor(offsetL / _width * config.width)
    let cy = Math.floor(offsetT / parseInt(document.getElementById('darea').style.height) * config.height)

    return {
      cx: cx,
      cy: cy
    }
  }

  UNSAFE_componentWillMount () {
    try {
      let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))

      if (param.lang) {
        sessionStorage.setItem('lang', param.lang)
      }

      this.setState({
        langName: sessionStorage.getItem('lang') !== 'zh-CN' && langs[sessionStorage.getItem('lang')] ? `（${langs[sessionStorage.getItem('lang')]}）` : '',
        ID: param.ID
      })
    } catch (e) {
      notification.warning({
        top: 92,
        message: '模板信息解析错误！',
        duration: 5
      })
    }
  }

  componentDidMount () {
    // 点击切换编辑元素
    document.getElementById('darea').addEventListener('click', (e) => {
      e.stopPropagation()
      let position = this.getclickpoint(e)
      let cx = position.cx
      let cy = position.cy
      let _selectItem = null

      let _config = fromJS(this.state.config).toJS()

      _config.elements.forEach(element => {
        let x = +element.left
        let y = +element.top
        let width = +element.width
        let height = +element.height
        let rotate = +element.rotate
        if (rotate === 90 || rotate === 270) {
          let _c = width
          x = x + width / 2 - height / 2
          y = y + height / 2 - width / 2
          width = height
          height = _c
        }
        if (width === 0) {
          x -= 2
          width = 4
        }
        if (height === 0) {
          y -= 2
          height = 4
        }
        if (cx >= x && cx <= x + width && cy >= y && cy <= y + height) {
          _selectItem = element
        }
      })

      if (!_selectItem) {
        _selectItem = _config
      } else {
        _config.elements = _config.elements.filter(ele => ele.uuid !== _selectItem.uuid)
        _config.elements.push(_selectItem)
      }

      let _formlist = null

      if (_selectItem.type === 'Template') {
        _formlist = getpageform(_selectItem)
      } else if (_selectItem.type === 'text') {
        _formlist = getTextForm(_selectItem, this.state.fields)
      } else if (_selectItem.type === 'barcode') {
        _formlist = getBarcodeForm(_selectItem, this.state.fields)
      } else if (_selectItem.type === 'qrcode') {
        _formlist = getQrcodeForm(_selectItem, this.state.fields)
      } else if (_selectItem.type === 'image') {
        _formlist = getImageForm(_selectItem, this.state.fields)
      }

      this.setState({
        config: _config,
        editItemId: _selectItem.uuid,
        editItemType: _selectItem.type,
        formlist: _formlist
      }, () => {
        this.resetview()
      })
    })

    // 触发拖动事件
    document.getElementById('darea').addEventListener('mousedown', (e) => {
      const { config } = this.state

      if (!this.state.editItemType || this.state.editItemType === 'Template') {
        origin = null
        return
      }

      let _selectItem = fromJS(this.state.config.elements.filter(ele => ele.uuid === this.state.editItemId)[0]).toJS()
      let _preItem = fromJS(_selectItem).toJS()

      let position = this.getclickpoint(e)
      let cx = position.cx
      let cy = position.cy
      let x = +_selectItem.left
      let y = +_selectItem.top
      let width = +_selectItem.width
      let height = +_selectItem.height
      let rotate = +_selectItem.rotate
      if (rotate === 90 || rotate === 270) {
        let _c = width
        x = x + width / 2 - height / 2
        y = y + height / 2 - width / 2
        width = height
        height = _c
      }
      if (width === 0) {
        x -= 4
        width = 8
      }
      if (height === 0) {
        y -= 4
        height = 8
      }

      if (cx > x && cx < x + width && cy > y && cy < y + height) {
        if (width > 3 && height > 3 && cx > x + width - 3 && cx < x + width + 2 && cy > y + height - 3 && cy < y + height + 2) {
          origin = {
            cx: cx,
            cy: cy,
            width: +_selectItem.width,
            height: +_selectItem.height
          }
          timer = setInterval(() => {
            if (JSON.stringify(preorigin) !== JSON.stringify(nextorigin)) {
              preorigin = nextorigin
              let _width = origin.width + (nextorigin.cx - origin.cx)
              let _height = origin.height + (nextorigin.cy - origin.cy)

              if (_width < 0) {
                _width = 0
              } else if (_selectItem.left + _width > config.width) {
                _width = config.width - _selectItem.left
              }
              if (_height < 0) {
                _height = 0
              } else if (_height + _selectItem.top > config.height) {
                _height = config.height - _selectItem.top
              }

              _selectItem.width = _width
              _selectItem.height = _height

              let result = this.resetItem(_selectItem)

              if (!is(fromJS(result), fromJS(_preItem))) {
                _preItem = fromJS(result).toJS()
                this.FormRef.resetForm(result)

                config.elements = config.elements.map(item => {
                  if (item.uuid === result.uuid) return result
  
                  return item
                })
  
                this.setState({
                  config: config
                }, () => {
                  this.resetview()
                })
              }
            }
          }, 100)
        } else {
          origin = {
            cx: cx,
            cy: cy,
            left: +_selectItem.left,
            top: +_selectItem.top
          }
          timer = setInterval(() => {
            if (JSON.stringify(preorigin) !== JSON.stringify(nextorigin)) {
              preorigin = nextorigin
              let _left = origin.left + (nextorigin.cx - origin.cx)
              let _top = origin.top + (nextorigin.cy - origin.cy)

              if (_left < 0) {
                _left = 0
              } else if (_left + _selectItem.width > config.width) {
                _left = config.width - _selectItem.width
              }
              if (_top < 0) {
                _top = 0
              } else if (_top + _selectItem.height > config.height) {
                _top = config.height - _selectItem.height
              }

              _selectItem.left = _left
              _selectItem.top = _top

              let result = this.resetItem(fromJS(_selectItem).toJS())

              if (!is(fromJS(result), fromJS(_preItem))) {
                _preItem = fromJS(result).toJS()
                this.FormRef.resetForm(result)

                config.elements = config.elements.map(item => {
                  if (item.uuid === result.uuid) return result
  
                  return item
                })
  
                this.setState({
                  config: config
                }, () => {
                  this.resetview()
                })
              }
            }
          }, 100)
        }
      } else {
        origin = null
      }
    })
    document.getElementById('darea').addEventListener('mousemove', (e) => {
      if (!this.state.editItemType || this.state.editItemType === 'Template' || !origin) {
        return
      }
      let position = this.getclickpoint(e)
      nextorigin = {
        cx: position.cx,
        cy: position.cy
      }
    })
    document.getElementById('darea').addEventListener('mouseup', (e) => {
      origin = null
      clearInterval(timer)
    })
    document.getElementById('darea').addEventListener('mouseleave', (e) => {
      origin = null
      clearInterval(timer)
    })

    // 元素添加
    document.getElementById('darea').addEventListener('drop', (e) => {
      dropPoint = this.getclickpoint(e)
    })
    
    this.handleResize()
    window.addEventListener('resize', this.handleResize)

    this.loadconfig()

    document.onkeydown = (event) => {
      const { editItemId, editItemType } = this.state
      let e = event || window.event
      let keyCode = e.keyCode || e.which || e.charCode

      if (keyCode === 46 && editItemId && editItemType !== 'Template') {
        this.deleteItem()
      }
      if (e.ctrlKey && keyCode === 81 && editItemId && editItemType !== 'Template') {
        this.copyItem()
      }
    }
  }

  handleResize = () => {
    if (document.body.offsetWidth < 1360) {
      document.getElementById('darea').style.width = '600px'
    } else if (document.body.offsetWidth < 1500) {
      document.getElementById('darea').style.width = '700px'
    } else if (document.body.offsetWidth < 1920) {
      document.getElementById('darea').style.width = '800px'
    } else {
      document.getElementById('darea').style.width = '1000px'
    }
  }

  resetbox = () => {
    const { config, debug } = this.state

    let ratio = (config.height || 1) / (config.width || 1)

    document.getElementById('darea').style.height = parseInt(document.getElementById('darea').style.width) * ratio + 'px'

    printCtrl.sketch(config, null, debug)
  }

  resetview () {
    const { config, editItemId, debug } = this.state

    printCtrl.sketch(config, editItemId, debug)
  }

  /**
   * @description 获取模板配置信息
   */
  async loadconfig () {
    let param = {
      func: 's_PrintTemplateMGetData',
      ID: this.state.ID
    }

    let result = await Api.getCloudConfig(param)

    if (result.status) {
      let _config = ''
      if (result.ConfigParam) {
        try {
          _config = JSON.parse(window.decodeURIComponent(window.atob(result.ConfigParam)))
        } catch (e) {
          notification.warning({
            top: 92,
            message: '配置信息解析错误！',
            duration: 5
          })
          _config = ''
        }
      }

      if (!_config) {
        _config = originConfig
      }

      _config.name = result.PrintTempName || ''
      _config.remark = result.Remark || ''
      _config.PrintTempNO = result.PrintTempNO || ''
      _config.type = 'Template'
      _config.uuid = Utils.getuuid()

      let tables = []

      if (result.data && result.data.length > 0) {
        result.data.forEach(item => {
          if (item.TableName) {
            tables.push(item.TableName)
          }
        })

        tables = Array.from(new Set(tables))
      }

      this.loadFields(tables)

      this.handleResize()
      this.setState({
        config: _config,
        oriConfig: fromJS(_config).toJS(),
        editItemId: _config.uuid,
        editItemType: _config.type,
        formlist: getpageform(_config)
      }, () => {
        this.resetbox()
      })
    } else {
      notification.warning({
        top: 92,
        message: result.message,
        duration: 5
      })
    }
  }

  switchbox = () => {
    const { config } = this.state

    this.setState({
      editItemId: config.uuid,
      editItemType: config.type,
      formlist: getpageform(config)
    }, () => {
      this.resetview()
    })
  }

  /**
   * @description 获取可用字段
   */
  loadFields (tables) {
    if (tables.length === 0) {
      let _fields = [{
        value: '',
        text: '空',
        type: ''
      }, {
        value: 'other_field',
        text: '其他',
        type: ''
      }]

      this.setState({
        fields: _fields
      })
      return
    }

    let deffers = tables.map(name => {
      return new Promise(resolve => {
        Api.getCloudConfig({func: 'sPC_Get_FieldName', TBName: name}).then(res => {
          resolve(res)
        })
      })
    })
    Promise.all(deffers).then(response => {
      let _fields = [{
        value: '',
        text: '空',
        type: ''
      }]
      let error = null
      let _f = new Map()
      
      response.forEach(res => {
        if (res.status) {
          res.FDName.forEach(item => {
            if (item.FieldName && !_f.has(item.FieldName)) {
              _f.set(item.FieldName, true)
    
              _fields.push({
                value: item.FieldName,
                text: item.FieldDec + '(' + item.FieldName + ')',
                type: item.FieldType
              })
            }
          })
        } else {
          error = res
        }
      })

      if (error) {
        notification.warning({
          top: 92,
          message: error.message,
          duration: 5
        })
        return
      }

      _fields.push({
        value: 'other_field',
        text: '其他',
        type: ''
      })

      this.setState({
        fields: _fields
      })
    })
  }

  dropcard = (item) => {
    const { config } = this.state

    let position = null

    if (dropPoint) {
      position = dropPoint
      dropPoint = null
    } else {
      return
    }

    let _width = Math.floor(config.width / 4)
    let _height = Math.floor(_width / 2)
    let _cx = Math.floor(position.cx - _width / 2)
    let _cy = Math.floor(position.cy - _height / 2)

    if (_cx < 0) { // 元素添加时，避免超出边界
      _cx = 0
    } else if (_cx + _width > config.width) {
      _cx = Math.floor(config.width - _width)
    }

    if (_cy < 0) {
      _cy = 0
    } else if (_cy + _height > config.height) {
      _cy = Math.floor(config.height - _height)
    }

    let _selectItem = null
    let _formlist = null
    if (item.subType === 'text') {
      _selectItem = getElement(item.subType, Utils.getuuid(), _cx, _cy, _width, _height)
      _formlist = getTextForm(_selectItem, this.state.fields)
    } else if (item.subType === 'barcode') {
      _selectItem = getElement(item.subType, Utils.getuuid(), _cx, _cy, _width, _height, barurl, config.width)
      _formlist = getBarcodeForm(_selectItem, this.state.fields)
    } else if (item.subType === 'qrcode') {
      _selectItem = getElement(item.subType, Utils.getuuid(), _cx, _cy, _width, _height, qrurl)
      _formlist = getQrcodeForm(_selectItem, this.state.fields)
    } else if (item.subType === 'image') {
      _selectItem = getElement(item.subType, Utils.getuuid(), _cx, _cy, _width, _height, imgurl)
      _formlist = getImageForm(_selectItem, this.state.fields)
    }

    config.elements.push(_selectItem)

    this.setState({
      config: config,
      editItemId: _selectItem.uuid,
      editItemType: _selectItem.type,
      formlist: _formlist
    }, () => {
      this.resetview()
    })
    
  }

  resetItem = (_item) => {
    const { config } = this.state
    let oriItem = fromJS(config.elements.filter(ele => ele.uuid === _item.uuid)[0]).toJS() // 源编辑元素
    _item.width = +_item.width
    _item.height = +_item.height

    let _boxwidth = +config.width
    let _boxheight = +config.height
    let _left = +_item.left
    let _top = +_item.top
    let _width = _item.width
    let _height = _item.height

    if (_left < 0) {
      _item.left = 0
    }
    if (_top < 0) {
      _item.top = 0
    }

    if (_left + _width > _boxwidth) {
      _item.width = _boxwidth - _left
    }

    if (_top + _height > _boxheight) {
      _item.height = _boxheight - _top
    }

    if (_item.type === 'barcode') {
      _item.barcodeWidth = +_item.barcodeWidth
      _item.barcodeHeight = +_item.barcodeHeight

      if (oriItem.width !== _item.width || oriItem.height !== _item.height) {
        _item.barcodeWidth = _item.width * 0.8
        _item.barcodeHeight = _item.height * 0.6
      } else if (_item.barcodeLabel === 'true') {
        if (_item.barcodeWidth > _item.width) {
          _item.barcodeWidth = _item.width 
        }
        let fsize = Math.floor(_item.fontSize / 2)
        if (_item.barcodeHeight + fsize > _item.height) {
          _item.barcodeHeight = _item.height - fsize
        }
      } else {
        if (_item.barcodeWidth > _item.width) {
          _item.barcodeWidth = _item.width
        }
        if (_item.barcodeHeight > _item.height) {
          _item.barcodeHeight = _item.height
        }
      }
    } else if (_item.type === 'qrcode') {
      _item.qrcodeWidth = +_item.qrcodeWidth

      if (oriItem.width !== _item.width || oriItem.height !== _item.height) {
        if (_item.height > _item.width) {
          _item.qrcodeWidth = _item.width * 0.9
        } else if (_item.width > _item.height) {
          _item.qrcodeWidth = _item.height * 0.9
        }
      } else {
        if (_item.qrcodeWidth > _item.width) {
          _item.qrcodeWidth = _item.width
        }
        if (_item.qrcodeWidth > _item.height) {
          _item.qrcodeWidth = _item.height
        }
      }
    } else if (_item.type === 'image') {
      _item.imgWidth = +_item.imgWidth

      if (oriItem.width !== _item.width || oriItem.height !== _item.height) {
          _item.imgWidth = _item.width * 0.9
          _item.imgHeight = _item.height * 0.9
      } else {
        if (_item.imgWidth > _item.width) {
          _item.imgWidth = _item.width
        }
        if (_item.imgHeight > _item.height) {
          _item.imgHeight = _item.height
        }
      }
    }

    return _item
  }

  handleSubmit = () => {
    const { config } = this.state

    this.FormRef.handleConfirm().then(response => {
      let res = fromJS(response).toJS()
      if (res.type === 'Template') {
        res.width = parseInt(res.width)
        res.height = parseInt(res.height)

        if (res.width < 1) {
          res.width = 1
          this.FormRef.resetForm({width: 1})
        } else if (res.height < 1) {
          res.height = 1
          this.FormRef.resetForm({height: 1})
        }

        this.setState({
          config: {...config, ...res}
        }, () => {
          if (res.width !== config.width || res.height !== config.height) {
            this.resetbox()
          }
        })
      } else {
        if (res.type === 'barcode') {
          res.url = barurl
        } else if (res.type === 'qrcode') {
          res.url = qrurl
        } else if (res.type === 'image') {
          res.url = imgurl
        }

        let result = this.resetItem(res)

        if (!is(fromJS(result), fromJS(res))) {
          this.FormRef.resetForm(result)
        }

        config.elements = config.elements.map(item => {
          if (item.uuid === result.uuid) return result

          return item
        })

        this.setState({
          config: config
        }, () => {
          this.resetview()
        })
      }
    })
  }

  copyItem = () => {
    const { editItemId, config, fields } = this.state

    let cell = config.elements.filter(item => item.uuid === editItemId)[0]

    if (!cell) return

    let item = {...cell}

    item.left = item.left + parseInt(item.width / 4)
    item.top = item.top + parseInt(item.height / 4)
    item.uuid = Utils.getuuid()

    if (item.left + item.width > config.width) {
      item.left = config.width - item.width
    }
    if (item.top + item.height > config.height) {
      item.top = config.height - item.height
    }

    let _config = fromJS(config).toJS()
    
    _config.elements.push(item)

    let _formlist = []
    if (item.type === 'text') {
      _formlist = getTextForm(item, fields)
    } else if (item.type === 'barcode') {
      _formlist = getBarcodeForm(item, fields)
    } else if (item.type === 'qrcode') {
      _formlist = getQrcodeForm(item, fields)
    } else if (item.type === 'image') {
      _formlist = getImageForm(item, fields)
    }

    this.setState({
      config: _config,
      editItemId: item.uuid,
      editItemType: item.type,
      formlist: _formlist
    }, () => {
      this.resetview()
    })
  }

  deleteItem = () => {
    const that = this
    const { editItemId, config } = this.state

    confirm({
      title: '确定删除该元素吗？',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        config.elements = config.elements.filter(item => item.uuid !== editItemId)

        that.setState({
          config: config,
          editItemId: config.uuid,
          editItemType: config.type,
          formlist: getpageform(config)
        }, () => {
          that.resetview()
        })
      },
      onCancel() {}
    })
  }

  submitConfig = () => {
    const { config, oriConfig } = this.state

    if (is(fromJS(config), fromJS(oriConfig))) {
      notification.success({
        top: 92,
        message: '当前模板未修改，无需保存。',
        duration: 5
      })
      return
    } else if (config.height / config.width > 10 || config.width / config.height > 10) {
      notification.warning({
        top: 92,
        message: '纸张纵横比不可超过10!',
        duration: 5
      })
      return
    }

    this.setState({
      saveloading: true
    })

    let _config = ''

    try {
      _config = window.btoa(window.encodeURIComponent(JSON.stringify(config)))
    } catch (e) {
      notification.warning({
        top: 92,
        message: '编译错误!',
        duration: 5
      })
      return
    }

    let param = {
      func: 's_PrintTemplateMSub',
      ID: this.state.ID,
      ConfigParam: _config,
      Images: '',
      PrintTempName: config.name,
      Remark: config.remark,
      PrintTempNO: config.PrintTempNO
    }

    new Promise(resolve => {
      printCtrl.sketch(config, null, false).then(res => {
        let param = {
          Base64Img: res
        }

        if (window.GLOB.cloudServiceApi) {
          param.rduri = window.GLOB.cloudServiceApi
          param.userid = sessionStorage.getItem('CloudUserID') || ''
          param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
        }
        
        Api.fileuploadbase64(param).then(result => { // 图片上传，并获取图片路径
          if (result.status) {
            let url = result.Images
            let baseurl = ''

            if (window.GLOB.cloudServiceApi) {
              baseurl = window.GLOB.cloudServiceApi.replace(/webapi(.*)$/, '')
            } else {
              baseurl = window.GLOB.baseurl
            }

            url = url.match(/^http/) || url.match(/^\/\//) ? url : baseurl + url

            resolve(url)
          } else {
            notification.warning({
              top: 92,
              message: result.message,
              duration: 5
            })
            this.setState({
              saveloading: false
            })
            resolve(false)
          }
        })
      })
    }).then(res => {
      if (!res) return
      param.Images = res

      return Api.getCloudConfig(param)
    }).then(res => {
      if (!res) return

      if (res.status) {
        notification.success({
          top: 92,
          message: '保存成功',
          duration: 2
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      }
      this.setState({
        oriConfig: fromJS(config).toJS(),
        saveloading: false
      })
    })
  }

  change = (e, type) => {
    let val = e.target.value
    val = parseInt(val)

    if (isNaN(val)) {
      val = ''
    }
    this.setState({[type]: val})
  }

  updatePosition = (type) => {
    let val = 0
    if (type === 'upPlus') {
      val = this.state.upPlus || 0
    } else if (type === 'upMinus') {
      val = this.state.upMinus || 0
    } else if (type === 'leftPlus') {
      val = this.state.leftPlus || 0
    } else if (type === 'leftMinus') {
      val = this.state.leftMinus || 0
    }

    if (!val) return

    let config = fromJS(this.state.config).toJS()

    if (type === 'upPlus') {
      config.elements = config.elements.map(item => {
        item.top = (item.top || 0) + val
        return item
      })
    } else if (type === 'upMinus') {
      config.elements = config.elements.map(item => {
        item.top = (item.top || 0) - val
        return item
      })
    } else if (type === 'leftPlus') {
      config.elements = config.elements.map(item => {
        item.left = (item.left || 0) + val
        return item
      })
    } else if (type === 'leftMinus') {
      config.elements = config.elements.map(item => {
        item.left = (item.left || 0) - val
        return item
      })
    }

    this.setState({
      config: config,
      editItemId: config.uuid,
      editItemType: config.type,
      formlist: getpageform(config)
    }, () => {
      this.resetview()
    })
  }

  changeDebug = (val) => {
    this.setState({
      debug: val
    }, () => {
      this.resetview()
    })
  }

  render () {
    const { debug, langName } = this.state
    
    return (
      <div className="print-template">

        <DndProvider backend={HTML5Backend}>
          <header className="print-header-container ant-menu-dark">
            模板制作{langName}
            <div>快捷键：Delete（删除元素）、ctrl + q（复制元素）</div>
          </header>
          <aside className="tools">
            <Card className="tool-bar" title="工具栏">
              {printItems.map((item, index) => {
                return (<SourceElement key={index} content={item}/>)
              })}
            </Card>
            <Card className="move-bar" title="整体移动">
              <Input addonBefore={<ArrowUpOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('upMinus')}/>} onChange={(e) => this.change(e, 'upMinus')} value={this.state.upMinus} />
              <Input addonBefore={<ArrowDownOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('upPlus')}/>} onChange={(e) => this.change(e, 'upPlus')} value={this.state.upPlus} />
              <Input addonBefore={<ArrowLeftOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('leftMinus')}/>} onChange={(e) => this.change(e, 'leftMinus')} value={this.state.leftMinus} />
              <Input addonBefore={<ArrowRightOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('leftPlus')}/>} onChange={(e) => this.change(e, 'leftPlus')} value={this.state.leftPlus} />
              <div style={{marginTop: '10px'}}>
                <span>调试模式：</span><Switch checked={debug} onChange={this.changeDebug} />
              </div>
            </Card>
          </aside>
          <div className="switchbox" onClick={this.switchbox}></div>
          <DragElement dropcard={this.dropcard} />
          <aside className="setting">
            {this.state.editItemId ?
              <Card title="状态栏">
                {this.state.formlist ?
                  <MutilForm
                    config={this.state.config}
                    formlist={this.state.formlist}
                    inputSubmit={this.handleSubmit}
                    editItem={{uuid: this.state.editItemId, type: this.state.editItemType}}
                    wrappedComponentRef={(inst) => this.FormRef = inst}
                  /> : null
                }
                <div className="operation">
                  {this.state.editItemType === 'Template' ?
                    <Row gutter={24}>
                      <Button type="primary" onClick={this.submitConfig} loading={this.state.saveloading}>保存</Button>
                    </Row> : null
                  }
                  {this.state.editItemType !== 'Template' ?
                    <Row gutter={24}>
                      <Button type="danger" onClick={this.deleteItem}>删除</Button>
                    </Row> : null
                  }
                </div>
              </Card> : null
            }
          </aside>
        </DndProvider>
      </div>
    )
  }