2024-05-21

king

2024-05-21 a4466960bfd628036aa2b6f9aa706f75215482bc

 src/views/printTemplate/index.jsx

@@ -2,7 +2,8 @@
import { DndProvider } from 'react-dnd'
import { is, fromJS } from 'immutable'
import HTML5Backend from 'react-dnd-html5-backend'
import { Card, notification, Row, Button, Modal } from 'antd'
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'
@@ -39,7 +40,12 @@
    editItemType: '',
    fields: [],
    formlist: null,
    saveloading: false
    saveloading: false,
    upPlus: 1,
    upMinus: 1,
    leftPlus: 1,
    leftMinus: 1,
    debug: true
  }

  getclickpoint = (e) => {
@@ -49,7 +55,7 @@
    let screenY = e.clientY + scrollTop
    let offsetT = screenY - 75
    let _width = parseInt(document.getElementById('darea').style.width)
    let offsetL = screenX - (document.body.offsetWidth - _width - 30) / 2
    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)
@@ -98,12 +104,12 @@
          height = _c
        }
        if (width === 0) {
          x -= 4
          width = 8
          x -= 2
          width = 4
        }
        if (height === 0) {
          y -= 4
          height = 8
          y -= 2
          height = 4
        }
        if (cx >= x && cx <= x + width && cy >= y && cy <= y + height) {
          _selectItem = element
@@ -251,8 +257,8 @@

              _selectItem.left = _left
              _selectItem.top = _top
              
              let result = this.resetItem(_selectItem)

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

              if (!is(fromJS(result), fromJS(_preItem))) {
                _preItem = JSON.parse(JSON.stringify(result))
@@ -305,6 +311,19 @@
    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 = () => {
@@ -314,23 +333,25 @@
      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 } = this.state
    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)
    printCtrl.sketch(config, null, debug)
  }

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

    printCtrl.sketch(config, editItemId)
    printCtrl.sketch(config, editItemId, debug)
  }

  /**
@@ -353,7 +374,7 @@
          notification.warning({
            top: 92,
            message: '配置信息解析错误！',
            duration: 10
            duration: 5
          })
          _config = ''
        }
@@ -369,10 +390,21 @@
      _config.type = 'Template'
      _config.uuid = Utils.getuuid()

      if (result.data && result.data[0] && result.data[0].TableName) {
        this.loadFields(result.data[0].TableName)
      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,
        editItemId: _config.uuid,
@@ -384,8 +416,8 @@
    } else {
      notification.warning({
        top: 92,
        message: result.ErrMesg,
        duration: 10
        message: result.message,
        duration: 5
      })
    }
  }
@@ -405,44 +437,77 @@
  /**
   * @description 获取可用字段
   */
  async loadFields (TBName) {
    let param = {
      func: 'sPC_Get_FieldName',
      TBName: TBName
  loadFields (tables) {
    if (tables.length === 0) {
      let _fields = [{
        value: '',
        text: '空',
        type: ''
      }, {
        value: 'other_field',
        text: '其他',
        type: ''
      }]

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

    let result = await Api.getCloudConfig(param)

    if (result.status) {
    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()

      result.FDName.forEach(item => {
        if (item.FieldName && !_f.has(item.FieldName)) {
          _f.set(item.FieldName, true)

          _fields.push({
            value: item.FieldName,
            text: item.FieldDec,
            type: item.FieldType
      
      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
      })
    } else {
      notification.warning({
        top: 92,
        message: result.ErrMesg,
        duration: 10
      })
    }
    })
  }

  dropcard = (item) => {
@@ -503,16 +568,18 @@
    
  }

  resetItem = (item) => {
    let _item = JSON.parse(JSON.stringify(item))
  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
    let _width = _item.width
    let _height = _item.height

    if (_left < 0) {
      _item.left = 0
@@ -530,25 +597,58 @@
    }

    if (_item.type === 'barcode') {
      if (+_item.barcodeWidth > +_item.width) {
        _item.barcodeWidth = +_item.width
      }
      if (+_item.barcodeHeight > +_item.height) {
        _item.barcodeHeight = +_item.height
      _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') {
      if (+_item.qrcodeWidth > +_item.width) {
        _item.qrcodeWidth = +_item.width
      }
      if (+_item.qrcodeWidth > +_item.height) {
        _item.qrcodeWidth = +_item.height
      _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') {
      if (+_item.imgWidth > +_item.width) {
        _item.imgWidth = +_item.width
      }
      if (+_item.imgHeight > +_item.height) {
        _item.imgHeight = +_item.height
      _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
        }
      }
    }

@@ -558,7 +658,8 @@
  handleSubmit = () => {
    const { config } = this.state

    this.FormRef.handleConfirm().then(res => {
    this.FormRef.handleConfirm().then(response => {
      let res = fromJS(response).toJS()
      if (res.type === 'Template') {
        res.width = parseInt(res.width)
        res.height = parseInt(res.height)
@@ -608,6 +709,51 @@
    })
  }

  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 _this = this
    const { editItemId, config } = this.state
@@ -639,7 +785,7 @@
      notification.warning({
        top: 92,
        message: '纸张纵横比不可超过10!',
        duration: 10
        duration: 5
      })
      return
    }
@@ -652,11 +798,11 @@

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

    new Promise(resolve => {
      printCtrl.sketch(config, null).then(res => {
        Api.fileuploadbase64(res, 'cloud').then(result => { // 图片上传，并获取图片路径
      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) {
            resolve(Utils.getcloudurl(result.Images))
            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.ErrMesg,
              duration: 10
              message: result.message,
              duration: 5
            })
            this.setState({
              saveloading: false
@@ -706,8 +873,8 @@
      } else {
        notification.warning({
          top: 92,
          message: res.ErrMesg,
          duration: 10
          message: res.message,
          duration: 5
        })
      }
      this.setState({
@@ -716,17 +883,97 @@
    })
  }

  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 } = this.state
    
    return (
      <div className="print-template">
        <DndProvider backend={HTML5Backend}>
          <header className="print-header-container ant-menu-dark">模板制作</header>
          <header className="print-header-container ant-menu-dark">
            模板制作
            <div>快捷键：Delete（删除元素）、ctrl + q（复制元素）</div>
          </header>
          <aside className="tools">
            <Card title="工具栏">
            <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} />