import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, InputNumber, Select, Radio, Tooltip, Input } from 'antd'
|
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'
|
|
// import './index.scss'
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
config: PropTypes.object,
|
updateConfig: PropTypes.func
|
}
|
|
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({...config, [key]: value})
|
|
if (['pageSize', 'pageLayout', 'pagePadding', 'printCustom'].includes(key)) {
|
this.resetPage()
|
}
|
}
|
|
resetPage = () => {
|
this.setState({}, () => {
|
const { config } = this.props
|
|
if (config.printCustom !== 'true') return
|
|
let pageSize = config.pageSize || 'A4'
|
let pageLayout = config.pageLayout !== 'horizontal' ? 'vertical' : 'horizontal'
|
let pagePadding = config.pagePadding !== 'without' ? 'default' : 'without'
|
|
let pageParam = {
|
A4: {
|
vertical: 980,
|
horizontal: 1200,
|
verticaldefault: 1.455,
|
verticalwithout: 1.411,
|
horizontaldefault: 0.679,
|
horizontalwithout: 0.701,
|
},
|
A3: {
|
vertical: 1200,
|
horizontal: 1600,
|
verticaldefault: 1.441,
|
verticalwithout: 1.410,
|
horizontaldefault: 0.688,
|
horizontalwithout: 0.703,
|
},
|
A5: {
|
vertical: 700,
|
horizontal: 1000,
|
verticaldefault: 1.478,
|
verticalwithout: 1.413,
|
horizontaldefault: 0.669,
|
horizontalwithout: 0.700,
|
}
|
}
|
|
let width = pageParam[pageSize][pageLayout]
|
let height = Math.floor(width * pageParam[pageSize][pageLayout + pagePadding])
|
|
this.props.updateConfig({...config, printHeight: height, printWidth: width})
|
this.props.form.setFieldsValue({printHeight: height, printWidth: width})
|
})
|
}
|
|
render() {
|
const { config } = this.props
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout}>
|
<Row>
|
<Col span={24}>
|
<Form.Item label="菜单名称">
|
<span style={{display: 'inline-block', wordBreak: 'break-all', lineHeight: 1.5}}>
|
{config.MenuName}
|
</span>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="菜单参数">
|
<span style={{display: 'inline-block', wordBreak: 'break-all', lineHeight: 1.5}}>
|
{config.MenuNo}
|
</span>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="打印尺寸">
|
{getFieldDecorator('pageSize', {
|
initialValue: config.pageSize || 'A4',
|
rules: [
|
{
|
required: true,
|
message: '请选择打印尺寸!'
|
}
|
]
|
})(
|
<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>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="打印布局">
|
{getFieldDecorator('pageLayout', {
|
initialValue: config.pageLayout || 'vertical',
|
rules: [
|
{
|
required: true,
|
message: '请选择打印布局!'
|
}
|
]
|
})(
|
<Radio.Group onChange={(e) => this.selectChange('pageLayout', e.target.value)}>
|
<Radio value="vertical">纵向</Radio>
|
<Radio value="horizontal">横向</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="打印边距">
|
{getFieldDecorator('pagePadding', {
|
initialValue: config.pagePadding || 'default',
|
rules: [
|
{
|
required: true,
|
message: '请选择打印边距!'
|
}
|
]
|
})(
|
<Radio.Group onChange={(e) => this.selectChange('pagePadding', e.target.value)}>
|
<Radio value="default">默认</Radio>
|
<Radio value="without">无</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="页面布局">
|
{getFieldDecorator('printPage', {
|
initialValue: config.printPage || 'auto'
|
})(
|
<Radio.Group onChange={(e) => this.selectChange('printPage', e.target.value)}>
|
<Radio value="auto">自适应</Radio>
|
<Radio value="page">分页</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
{config.printPage === 'page' ? <Col span={24}>
|
<Form.Item label="每页数(条)">
|
{getFieldDecorator('everyPCount', {
|
initialValue: config.everyPCount || 15,
|
rules: [
|
{
|
required: true,
|
message: '请输入每页数!'
|
}
|
]
|
})(<InputNumber min={1} max={1000} precision={1} onChange={(val) => this.selectChange('everyPCount', val)}/>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={24}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="针对不规则纸张，可自定义设置打印高度和宽度，注：同时设置打印宽度和高度后方可生效。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
自定义
|
</Tooltip>
|
}>
|
{getFieldDecorator('printCustom', {
|
initialValue: config.printCustom || 'false'
|
})(
|
<Radio.Group onChange={(e) => this.selectChange('printCustom', e.target.value)}>
|
<Radio value="false">不启用</Radio>
|
<Radio value="true">启用</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
{config.printCustom === 'true' ? <Col span={24}>
|
<Form.Item label="打印宽度">
|
{getFieldDecorator('printWidth', {
|
initialValue: config.printWidth || ''
|
})(<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={(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>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
