2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/views/printTemplate/index.jsx

@@ -2,7 +2,7 @@
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, Icon } from 'antd'
import DragElement from './dragelement'
import MutilForm from './mutilform'
import SourceElement from './dragelement/source'
@@ -19,6 +19,7 @@
  qrurl,
  imgurl
} from './option.js'
import options from '@/store/options.js'
import Utils from '@/utils/utils.js'
import printCtrl from './print.js'
import Api from '@/api'
@@ -39,7 +40,11 @@
    editItemType: '',
    fields: [],
    formlist: null,
    saveloading: false
    saveloading: false,
    upPlus: 1,
    upMinus: 1,
    leftPlus: 1,
    leftMinus: 1
  }

  getclickpoint = (e) => {
@@ -676,12 +681,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
        }

@@ -750,7 +749,7 @@

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

    new Promise(resolve => {
      printCtrl.sketch(config, null).then(res => {
        Api.fileuploadbase64(res, 'cloud').then(result => { // 图片上传，并获取图片路径
        let param = {
          Base64Img: res
        }

        if (options.cloudServiceApi) {
          param.rduri = options.cloudServiceApi
          param.userid = sessionStorage.getItem('CloudUserID') || ''
          param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
        }
        
        Api.fileuploadbase64(param).then(result => { // 图片上传，并获取图片路径
          if (result.status) {
            resolve(Utils.getcloudurl(result.Images))
          } else {
@@ -814,17 +823,81 @@
    })
  }

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

  render () {
    return (
      <div className="print-template">
        <DndProvider backend={HTML5Backend}>
          <header className="print-header-container ant-menu-dark">模板制作</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={<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} />
            </Card>
          </aside>
          <div className="switchbox" onClick={this.switchbox}></div>
          <DragElement dropcard={this.dropcard} />