2024-08-25

king

2024-08-25 ae170a9d58b4f91a225eada1dc83ed4a116b8d50

 src/views/printTemplate/index.jsx

@@ -20,7 +20,7 @@
  qrurl,
  imgurl
} from './option.js'
import options from '@/store/options.js'
import { langs } from '@/store/options'
import Utils from '@/utils/utils.js'
import printCtrl from './print.js'
import Api from '@/api'
@@ -36,7 +36,9 @@
class PrintTemplate extends Component {
  state = {
    config: null,
    oriConfig: null,
    ID: null,
    langName: '',
    editItemId: '',
    editItemType: '',
    fields: [],
@@ -68,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 () {
@@ -89,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
@@ -157,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
@@ -215,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 => {
@@ -262,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 => {
@@ -320,6 +330,9 @@

      if (keyCode === 46 && editItemId && editItemType !== 'Template') {
        this.deleteItem()
      }
      if (e.ctrlKey && keyCode === 81 && editItemId && editItemType !== 'Template') {
        this.copyItem()
      }
    }
  }
@@ -405,6 +418,7 @@
      this.handleResize()
      this.setState({
        config: _config,
        oriConfig: fromJS(_config).toJS(),
        editItemId: _config.uuid,
        editItemType: _config.type,
        formlist: getpageform(_config)
@@ -414,7 +428,7 @@
    } else {
      notification.warning({
        top: 92,
        message: result.ErrMesg,
        message: result.message,
        duration: 5
      })
    }
@@ -455,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)
        })
      })
@@ -490,7 +504,7 @@
      if (error) {
        notification.warning({
          top: 92,
          message: error.ErrMesg,
          message: error.message,
          duration: 5
        })
        return
@@ -707,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({
@@ -718,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() {}
@@ -732,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!',
@@ -776,19 +842,30 @@
          Base64Img: res
        }

        if (options.cloudServiceApi) {
          param.rduri = options.cloudServiceApi
        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({
@@ -815,11 +892,12 @@
      } else {
        notification.warning({
          top: 92,
          message: res.ErrMesg,
          message: res.message,
          duration: 5
        })
      }
      this.setState({
        oriConfig: fromJS(config).toJS(),
        saveloading: false
      })
    })
@@ -892,12 +970,15 @@
  }

  render () {
    const { debug } = this.state
    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) => {