2024-08-25

king

2024-08-25 ae170a9d58b4f91a225eada1dc83ed4a116b8d50

 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, Input, Icon } 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'
@@ -19,6 +20,7 @@
  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'
@@ -34,7 +36,9 @@
class PrintTemplate extends Component {
  state = {
    config: null,
    oriConfig: null,
    ID: null,
    langName: '',
    editItemId: '',
    editItemType: '',
    fields: [],
@@ -43,7 +47,8 @@
    upPlus: 1,
    upMinus: 1,
    leftPlus: 1,
    leftMinus: 1
    leftMinus: 1,
    debug: true
  }

  getclickpoint = (e) => {
@@ -65,16 +70,24 @@
  }

  UNSAFE_componentWillMount () {
    let _param = window.atob(this.props.match.params.param)
    let _params = {}
    _param.split('&').forEach(cell => {
      let _cell = cell.split('=')
      _params[_cell[0]] = _cell[1]
    })
    try {
      let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))

    this.setState({
      ID: _params.ID
    })
      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 () {
@@ -86,7 +99,7 @@
      let cy = position.cy
      let _selectItem = null

      let _config = JSON.parse(JSON.stringify(this.state.config))
      let _config = fromJS(this.state.config).toJS()

      _config.elements.forEach(element => {
        let x = +element.left
@@ -154,8 +167,8 @@
        return
      }

      let _selectItem = JSON.parse(JSON.stringify(this.state.config.elements.filter(ele => ele.uuid === this.state.editItemId)[0]))
      let _preItem = JSON.parse(JSON.stringify(_selectItem))
      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
@@ -212,7 +225,7 @@
              let result = this.resetItem(_selectItem)

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

                config.elements = config.elements.map(item => {
@@ -259,7 +272,7 @@
              let result = this.resetItem(fromJS(_selectItem).toJS())

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

                config.elements = config.elements.map(item => {
@@ -318,6 +331,9 @@
      if (keyCode === 46 && editItemId && editItemType !== 'Template') {
        this.deleteItem()
      }
      if (e.ctrlKey && keyCode === 81 && editItemId && editItemType !== 'Template') {
        this.copyItem()
      }
    }
  }

@@ -334,19 +350,19 @@
  }

  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)
  }

  /**
@@ -402,6 +418,7 @@
      this.handleResize()
      this.setState({
        config: _config,
        oriConfig: fromJS(_config).toJS(),
        editItemId: _config.uuid,
        editItemType: _config.type,
        formlist: getpageform(_config)
@@ -411,7 +428,7 @@
    } else {
      notification.warning({
        top: 92,
        message: result.ErrMesg,
        message: result.message,
        duration: 5
      })
    }
@@ -452,7 +469,7 @@

    let deffers = tables.map(name => {
      return new Promise(resolve => {
        Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: name}).then(res => {
        Api.getCloudConfig({func: 'sPC_Get_FieldName', TBName: name}).then(res => {
          resolve(res)
        })
      })
@@ -487,7 +504,7 @@
      if (error) {
        notification.warning({
          top: 92,
          message: error.ErrMesg,
          message: error.message,
          duration: 5
        })
        return
@@ -680,12 +697,6 @@
        } else if (res.type === 'qrcode') {
          res.url = qrurl
        } else if (res.type === 'image') {
          if (res.value && res.value.length > 0) {
            let url = res.value[0].url || res.value[0].response
            res.value = url || ''
          } else {
            res.value = ''
          }
          res.url = imgurl
        }

@@ -710,8 +721,53 @@
    })
  }

  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 that = this
    const { editItemId, config } = this.state

    confirm({
@@ -721,13 +777,13 @@
      onOk() {
        config.elements = config.elements.filter(item => item.uuid !== editItemId)

        _this.setState({
        that.setState({
          config: config,
          editItemId: config.uuid,
          editItemType: config.type,
          formlist: getpageform(config)
        }, () => {
          _this.resetview()
          that.resetview()
        })
      },
      onCancel() {}
@@ -735,9 +791,16 @@
  }

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

    if (config.height / config.width > 10 || config.width / config.height > 10) {
    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!',
@@ -754,7 +817,7 @@

    try {
      _config = window.btoa(window.encodeURIComponent(JSON.stringify(config)))
    } catch {
    } catch (e) {
      notification.warning({
        top: 92,
        message: '编译错误!',
@@ -774,14 +837,35 @@
    }

    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,
              message: result.message,
              duration: 5
            })
            this.setState({
@@ -808,11 +892,12 @@
      } else {
        notification.warning({
          top: 92,
          message: res.ErrMesg,
          message: res.message,
          duration: 5
        })
      }
      this.setState({
        oriConfig: fromJS(config).toJS(),
        saveloading: false
      })
    })
@@ -876,11 +961,24 @@
    })
  }

  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">模板制作</header>
          <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) => {
@@ -888,10 +986,13 @@
              })}
            </Card>
            <Card className="move-bar" title="整体移动">
              <Input addonBefore={<Icon title="距上" type="arrow-up" />} addonAfter={<Icon onClick={() => this.updatePosition('upPlus')} type="plus" />} onChange={(e) => this.change(e, 'upPlus')} value={this.state.upPlus} />
              <Input addonBefore={<Icon title="距上" type="arrow-up" />} addonAfter={<Icon onClick={() => this.updatePosition('upMinus')} type="minus" />} onChange={(e) => this.change(e, 'upMinus')} value={this.state.upMinus} />
              <Input addonBefore={<Icon title="距左" type="arrow-left" />} addonAfter={<Icon onClick={() => this.updatePosition('leftPlus')} type="plus" />} onChange={(e) => this.change(e, 'leftPlus')} value={this.state.leftPlus} />
              <Input addonBefore={<Icon title="距左" type="arrow-left" />} addonAfter={<Icon onClick={() => this.updatePosition('leftMinus')} type="minus" />} onChange={(e) => this.change(e, 'leftMinus')} value={this.state.leftMinus} />
              <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>