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 './index.scss'
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
config: PropTypes.object,
|
updateConfig: PropTypes.func
|
}
|
|
changeCount = (val) => {
|
if (typeof(val) !== 'number') {
|
val = ''
|
}
|
this.props.updateConfig({...this.props.config, everyPCount: val})
|
}
|
|
changePrintWidth = (val) => {
|
if (typeof(val) !== 'number') {
|
val = ''
|
}
|
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 = () => {
|
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={this.pageSizeChange}>
|
<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.onLayoutChange(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.onPaddingChange(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.onPrintPageChange(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', {
|
initialValue: config.everyPCount || 15,
|
rules: [
|
{
|
required: true,
|
message: '请输入每页数!'
|
}
|
]
|
})(<InputNumber min={1} max={1000} precision={1} onChange={this.changeCount}/>)}
|
</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="针对不规则纸张，可自定义设置打印高度和宽度，注：同时设置打印宽度和高度后方可生效。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
自定义
|
</Tooltip>
|
}>
|
{getFieldDecorator('printCustom', {
|
initialValue: config.printCustom || 'false'
|
})(
|
<Radio.Group onChange={(e) => {this.onPrintCustomChange(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={this.changePrintWidth}/>)}
|
</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}/>)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
