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 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,
|
ID: null,
|
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 () {
|
let _param = window.atob(this.props.match.params.param)
|
let _params = {}
|
_param.split('&').forEach(cell => {
|
let _cell = cell.split('=')
|
_params[_cell[0]] = _cell[1]
|
})
|
|
this.setState({
|
ID: _params.ID
|
})
|
}
|
|
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 = JSON.parse(JSON.stringify(this.state.config))
|
|
_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 = JSON.parse(JSON.stringify(this.state.config.elements.filter(ele => ele.uuid === this.state.editItemId)[0]))
|
let _preItem = JSON.parse(JSON.stringify(_selectItem))
|
|
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 = JSON.parse(JSON.stringify(result))
|
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 = JSON.parse(JSON.stringify(result))
|
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,
|
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 _this = this
|
const { editItemId, config } = this.state
|
|
confirm({
|
title: '确定删除该元素吗？',
|
okText: '确定',
|
cancelText: '取消',
|
onOk() {
|
config.elements = config.elements.filter(item => item.uuid !== editItemId)
|
|
_this.setState({
|
config: config,
|
editItemId: config.uuid,
|
editItemType: config.type,
|
formlist: getpageform(config)
|
}, () => {
|
_this.resetview()
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
submitConfig = () => {
|
const { config } = this.state
|
|
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({
|
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 } = this.state
|
|
return (
|
<div className="print-template">
|
<DndProvider backend={HTML5Backend}>
|
<header className="print-header-container ant-menu-dark">
|
模板制作
|
<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>
|
)
|
}
|
}
|
|
export default PrintTemplate
|
