From 3cbad93c94c39730e45600efeabdfebcd424c2cc Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 14 一月 2021 19:00:19 +0800 Subject: [PATCH] 2021-01-14 --- src/views/printTemplate/index.jsx | 74 +++++++++++++++++++++++++++++++++++- 1 files changed, 71 insertions(+), 3 deletions(-) diff --git a/src/views/printTemplate/index.jsx b/src/views/printTemplate/index.jsx index b84707d..887525b 100644 --- a/src/views/printTemplate/index.jsx +++ b/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' @@ -39,7 +39,11 @@ editItemType: '', fields: [], formlist: null, - saveloading: false + saveloading: false, + upPlus: 1, + upMinus: 1, + leftPlus: 1, + leftMinus: 1 } getclickpoint = (e) => { @@ -814,17 +818,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} /> -- Gitblit v1.8.0