| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, InputNumber, Select, Radio, Tooltip } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | import { Form, Row, Col, InputNumber, Select, Radio, Tooltip, Input } from 'antd' |
| | | import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons' |
| | | |
| | | // import './index.scss' |
| | | |
| | |
| | | updateConfig: PropTypes.func |
| | | } |
| | | |
| | | changeCount = (val) => { |
| | | if (typeof(val) !== 'number') { |
| | | val = '' |
| | | selectChange = (key, value) => { |
| | | const { config } = this.props |
| | | |
| | | if (['everyPCount', 'printWidth', 'printHeight'].includes(key)) { |
| | | if (typeof(value) !== 'number') { |
| | | value = '' |
| | | } |
| | | } else if (key === 'callNo') { |
| | | if (!/^[a-zA-Z0-9_]+$/.test(value)) { |
| | | value = '' |
| | | } |
| | | } |
| | | this.props.updateConfig({...this.props.config, everyPCount: val}) |
| | | } |
| | | |
| | | changePrintWidth = (val) => { |
| | | if (typeof(val) !== 'number') { |
| | | val = '' |
| | | this.props.updateConfig({...config, [key]: value}) |
| | | |
| | | if (['pageSize', 'pageLayout', 'pagePadding', 'printCustom'].includes(key)) { |
| | | this.resetPage() |
| | | } |
| | | this.props.updateConfig({...this.props.config, printWidth: val}) |
| | | } |
| | | |
| | | changePrintHeight = (val) => { |
| | | if (typeof(val) !== 'number') { |
| | | val = '' |
| | | } |
| | | this.props.updateConfig({...this.props.config, printHeight: val}) |
| | | } |
| | | |
| | | onPrintPageChange = (val) => { |
| | | this.props.updateConfig({...this.props.config, printPage: val}) |
| | | } |
| | | |
| | | pageSizeChange = (val) => { |
| | | this.props.updateConfig({...this.props.config, pageSize: val}) |
| | | this.resetPage() |
| | | } |
| | | |
| | | onLayoutChange = (val) => { |
| | | this.props.updateConfig({...this.props.config, pageLayout: val}) |
| | | this.resetPage() |
| | | } |
| | | |
| | | onPaddingChange = (val) => { |
| | | this.props.updateConfig({...this.props.config, pagePadding: val}) |
| | | this.resetPage() |
| | | } |
| | | |
| | | onPrintCustomChange = (val) => { |
| | | this.props.updateConfig({...this.props.config, printCustom: val}) |
| | | this.resetPage() |
| | | } |
| | | |
| | | resetPage = () => { |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Select onChange={this.pageSizeChange}> |
| | | <Select onChange={(val) => this.selectChange('pageSize', val)}> |
| | | <Select.Option value="A3">A3</Select.Option> |
| | | <Select.Option value="A4">A4</Select.Option> |
| | | <Select.Option value="A5">A5</Select.Option> |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onLayoutChange(e.target.value)}}> |
| | | <Radio.Group onChange={(e) => this.selectChange('pageLayout', e.target.value)}> |
| | | <Radio value="vertical">纵向</Radio> |
| | | <Radio value="horizontal">横向</Radio> |
| | | </Radio.Group> |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onPaddingChange(e.target.value)}}> |
| | | <Radio.Group onChange={(e) => this.selectChange('pagePadding', e.target.value)}> |
| | | <Radio value="default">默认</Radio> |
| | | <Radio value="without">无</Radio> |
| | | </Radio.Group> |
| | |
| | | {getFieldDecorator('printPage', { |
| | | initialValue: config.printPage || 'auto' |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onPrintPageChange(e.target.value)}}> |
| | | <Radio.Group onChange={(e) => this.selectChange('printPage', e.target.value)}> |
| | | <Radio value="auto">自适应</Radio> |
| | | <Radio value="page">分页</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {/* <Col span={24}> |
| | | <Form.Item label="首页数(条)"> |
| | | {getFieldDecorator('firstCount', { |
| | | initialValue: config.firstCount, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入首页数!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={1} max={1000} precision={1} onChange={this.changeFirstCount}/>)} |
| | | </Form.Item> |
| | | </Col> */} |
| | | {config.printPage === 'page' ? <Col span={24}> |
| | | <Form.Item label="每页数(条)"> |
| | | {getFieldDecorator('everyPCount', { |
| | |
| | | message: '请输入每页数!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={1} max={1000} precision={1} onChange={this.changeCount}/>)} |
| | | })(<InputNumber min={1} max={1000} precision={1} onChange={(val) => this.selectChange('everyPCount', val)}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* <Col span={24}> |
| | | <Form.Item label="尾页数(条)"> |
| | | {getFieldDecorator('lastCount', { |
| | | initialValue: config.lastCount |
| | | })(<InputNumber min={1} max={1000} precision={1} onChange={this.changeLastCount}/>)} |
| | | </Form.Item> |
| | | </Col> */} |
| | | <Col span={24}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="针对不规则纸张,可自定义设置打印高度和宽度,注:同时设置打印宽度和高度后方可生效。"> |
| | |
| | | {getFieldDecorator('printCustom', { |
| | | initialValue: config.printCustom || 'false' |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onPrintCustomChange(e.target.value)}}> |
| | | <Radio.Group onChange={(e) => this.selectChange('printCustom', e.target.value)}> |
| | | <Radio value="false">不启用</Radio> |
| | | <Radio value="true">启用</Radio> |
| | | </Radio.Group> |
| | |
| | | <Form.Item label="打印宽度"> |
| | | {getFieldDecorator('printWidth', { |
| | | initialValue: config.printWidth || '' |
| | | })(<InputNumber min={10} max={9999} precision={0} onChange={this.changePrintWidth}/>)} |
| | | })(<InputNumber min={10} max={9999} precision={0} onChange={(val) => this.selectChange('printWidth', val)}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.printCustom === 'true' ? <Col span={24}> |
| | | <Form.Item label="打印高度"> |
| | | {getFieldDecorator('printHeight', { |
| | | initialValue: config.printHeight || '' |
| | | })(<InputNumber min={10} max={9999} precision={0} onChange={this.changePrintHeight}/>)} |
| | | })(<InputNumber min={10} max={9999} precision={0} onChange={(val) => this.selectChange('printHeight', val)}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={24}> |
| | | <Form.Item label="回调"> |
| | | {getFieldDecorator('callback', { |
| | | initialValue: config.callback || 'false' |
| | | })( |
| | | <Radio.Group onChange={(e) => this.selectChange('callback', e.target.value)}> |
| | | <Radio value="false">不启用</Radio> |
| | | <Radio value="true">启用</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {config.callback === 'true' ? <Col span={24}> |
| | | <Form.Item label="回调函数"> |
| | | s_print_proc <EditOutlined style={{cursor: 'pointer'}} onClick={() => {window.open('#/proc/s_print_proc')}}/> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.callback === 'true' ? <Col span={24}> |
| | | <Form.Item label="回调参数"> |
| | | {getFieldDecorator('callNo', { |
| | | initialValue: config.callNo || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请填写回调参数!' |
| | | }, |
| | | { |
| | | pattern: /^[a-zA-Z0-9_]+$/, |
| | | message: '回调参数只可使用字母、数字以及_' |
| | | } |
| | | ] |
| | | })(<Input onChange={(e) => this.selectChange('callNo', e.target.value)}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Row> |