import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Select, DatePicker } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
|
|
class AdvanceSearch extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典
|
searchValues: PropTypes.object, // 搜索条件值
|
searchlist: PropTypes.array, // 搜索条件列表
|
handleSearch: PropTypes.func // 搜索条件提交
|
}
|
|
state = {
|
dict: this.props.dict,
|
formId: Utils.getuuid(), // 搜索表单Id
|
searchlist: fromJS(this.props.searchlist).toJS()
|
}
|
|
resetform = (formlist, supfields, index, fieldsvalue) => {
|
index++
|
let subfields = []
|
|
supfields.forEach(supfield => {
|
formlist = formlist.map(item => {
|
if (item.type === 'link' && item.linkField === supfield.field) {
|
item.options = item.oriOptions.filter(option => option.ParentID === supfield.initval || option.Value === '')
|
item.initval = item.options[0] ? item.options[0].Value : ''
|
|
if (this.props.form.getFieldValue(item.field) !== undefined) {
|
fieldsvalue[item.field] = item.initval
|
}
|
|
subfields.push(item)
|
}
|
return item
|
})
|
})
|
|
if (subfields.length === 0 || index > 6) {
|
return formlist
|
} else {
|
return this.resetform(formlist, subfields, index, fieldsvalue)
|
}
|
}
|
|
selectChange = (_field, value) => {
|
let formlist = fromJS(this.state.searchlist).toJS()
|
|
let subfields = []
|
let fieldsvalue = {}
|
formlist = formlist.map(item => {
|
if (item.type === 'link' && item.linkField === _field.field) {
|
item.options = item.oriOptions.filter(option => option.ParentID === value || option.Value === '')
|
item.initval = item.options[0] ? item.options[0].Value : ''
|
|
if (this.props.form.getFieldValue(item.field) !== undefined) {
|
fieldsvalue[item.field] = item.initval
|
}
|
|
subfields.push(item)
|
}
|
return item
|
})
|
|
if (subfields.length === 0) {
|
return
|
}
|
|
formlist = this.resetform(formlist, subfields, 0, fieldsvalue)
|
|
if (Object.keys(fieldsvalue).length > 0) {
|
this.props.form.setFieldsValue(fieldsvalue)
|
}
|
|
this.setState({
|
searchlist: formlist
|
})
|
}
|
|
getFields() {
|
const { getFieldDecorator } = this.props.form
|
const { searchValues } = this.props
|
const { dict, formId } = this.state
|
const fields = []
|
|
this.state.searchlist.forEach((item, index) => {
|
if (item.advanced !== 'true' || item.Hide === 'true') return
|
|
let initval = searchValues[item.field] || ''
|
if (item.type === 'text') { // 文本搜索
|
fields.push(
|
<Col span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field, {
|
initialValue: initval,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.input'] + item.label + '!'
|
}
|
]
|
})(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.props.handleSearch} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select' || item.type === 'link') { // 下拉搜索
|
fields.push(
|
<Col span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field, {
|
initialValue: initval,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
onChange={(value) => {this.selectChange(item, value)}}
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
|
>
|
{item.options.map((option, i) =>
|
<Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'multiselect') { // 下拉多选
|
fields.push(
|
<Col span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field, {
|
initialValue: initval,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
mode="multiple"
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
|
>
|
{item.options.map((option, i) =>
|
<Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'date') { // 时间搜索
|
fields.push(
|
<Col span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field, {
|
initialValue: initval || null,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<DatePicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'datemonth') {
|
fields.push(
|
<Col span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field, {
|
initialValue: initval || null,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<MonthPicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'dateweek') {
|
fields.push(
|
<Col span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field, {
|
initialValue: initval || null,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<WeekPicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'daterange') {
|
let _defaultValue = initval
|
|
if (!initval) {
|
_defaultValue = [null, null]
|
}
|
|
fields.push(
|
<Col className="daterange" span={item.ratio || 6} key={index}>
|
<Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
|
{getFieldDecorator(item.field,
|
{
|
initialValue: _defaultValue,
|
rules: [
|
{
|
required: item.required,
|
message: dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<RangePicker
|
placeholder={['开始日期', '结束日期']}
|
renderExtraFooter={() => 'extra footer'}
|
getCalendarContainer={() => formId ? document.getElementById(formId) : document.body}
|
/>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
|
return fields
|
}
|
|
handleConfirm = () => {
|
// 回车或点击搜索
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFields((err, values) => {
|
if (!err) {
|
resolve(values)
|
}
|
})
|
})
|
}
|
|
render() {
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="advance-search" id={this.state.formId}>
|
<Row gutter={24}>{this.getFields()}</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(AdvanceSearch)
|
