import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Radio, Tooltip, InputNumber } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
// import './index.scss'
|
|
class SettingForm extends Component {
|
static propTpyes = {
|
setting: PropTypes.object,
|
inputSubmit: PropTypes.func
|
}
|
|
state = {
|
advanceType: '',
|
show: ''
|
}
|
|
UNSAFE_componentWillMount () {
|
const { setting } = this.props
|
|
this.setState({
|
advanceType: setting.advanceType || 'modal',
|
show: setting.show || 'true'
|
})
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
render() {
|
const { setting } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { advanceType, show } = this.state
|
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={12}>
|
<Form.Item label="搜索按钮">
|
{getFieldDecorator('show', {
|
initialValue: setting.show || 'true'
|
})(
|
<Radio.Group onChange={(e) => this.setState({show: e.target.value})}>
|
<Radio value="true">显示</Radio>
|
<Radio value="false">隐藏</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="高级搜索的展开方式。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
高级搜索
|
</Tooltip>
|
}>
|
{getFieldDecorator('advanceType', {
|
initialValue: setting.advanceType || 'modal'
|
})(
|
<Radio.Group onChange={(e) => this.setState({advanceType: e.target.value})}>
|
<Radio value="modal">弹窗</Radio>
|
<Radio value="drawer">抽屉</Radio>
|
<Radio value="pulldown">下拉</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
{advanceType === 'drawer' ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="抽屉展开的方向。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
弹出方向
|
</Tooltip>
|
}>
|
{getFieldDecorator('drawerPlacement', {
|
initialValue: setting.drawerPlacement || 'right'
|
})(
|
<Radio.Group style={{whiteSpace: 'nowrap'}}>
|
<Radio value="right">右侧</Radio>
|
<Radio value="left">左侧</Radio>
|
<Radio value="top">上侧</Radio>
|
<Radio value="bottom">下侧</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{advanceType !== 'pulldown' ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="高级搜索框的宽度，注：当宽度值小于100时表示占窗口的百分比，大于100时表示宽度的绝对值。当使用上下显示的抽屉时代表抽屉高度。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
弹窗宽度
|
</Tooltip>
|
}>
|
{getFieldDecorator('advanceWidth', {
|
initialValue: setting.advanceWidth || 1000
|
})(<InputNumber min={10} max={3000} precision={0} onPressEnter={this.props.inputSubmit}/>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="搜索及重置按钮所占比例。栅格布局，每行等分为24列。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
比例
|
</Tooltip>
|
}>
|
{getFieldDecorator('searchRatio', {
|
initialValue: setting.searchRatio || 6,
|
})(<InputNumber min={1} max={24} precision={0} onPressEnter={this.props.inputSubmit}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="搜索按钮距左侧的百分比，参照搜索条件的名称宽度。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
按钮偏移
|
</Tooltip>
|
}>
|
{getFieldDecorator('searchLwidth', {
|
initialValue: setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3,
|
})(<InputNumber min={0} max={100} precision={1} onPressEnter={this.props.inputSubmit}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="搜索和重置按钮的圆角。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
按钮圆角
|
</Tooltip>
|
}>
|
{getFieldDecorator('borderRadius', {
|
initialValue: setting.borderRadius || '',
|
})(<InputNumber min={0} precision={0} onPressEnter={this.props.inputSubmit}/>)}
|
</Form.Item>
|
</Col>
|
{show === 'true' ? <Col span={12}>
|
<Form.Item label="重置时">
|
{getFieldDecorator('resetContrl', {
|
initialValue: setting.resetContrl || 'init',
|
})(
|
<Radio.Group>
|
<Radio value="init">恢复初始值</Radio>
|
<Radio value="clear">清空</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(SettingForm)
|
