From 07acb5f4dc11e484801ccfcd95eee8845128c62a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 26 十一月 2019 22:41:29 +0800
Subject: [PATCH] 2019-11-26-01
---
src/tabviews/commontable/mainSearch/index.jsx | 220 ++++++++++++++++++++++++++++++------------------------
1 files changed, 122 insertions(+), 98 deletions(-)
diff --git a/src/tabviews/commontable/mainSearch/index.jsx b/src/tabviews/commontable/mainSearch/index.jsx
index c8bb8e8..f41c9f4 100644
--- a/src/tabviews/commontable/mainSearch/index.jsx
+++ b/src/tabviews/commontable/mainSearch/index.jsx
@@ -1,15 +1,10 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-// import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Button, Select, DatePicker } from 'antd'
import moment from 'moment'
-import Utils from '@/utils/utils.js'
import './index.scss'
-const {MonthPicker, WeekPicker} = DatePicker
-const dateFormat = 'YYYY-MM-DD'
-const weekFormat = 'YYYYMMDD'
-const monthFormat = 'YYYY-MM'
+const {MonthPicker, WeekPicker, RangePicker} = DatePicker
class MainSearch extends Component {
static propTpyes = {
@@ -18,32 +13,22 @@
}
state = {
- formats: null, // 浜嬩欢鏍￠獙瑙勫垯
- match: null // 鎼滅储鏉′欢鍖归厤瑙勫垯
+ match: null, // 鎼滅储鏉′欢鍖归厤瑙勫垯
+ style: null
}
UNSAFE_componentWillMount () {
- console.log(this.props.searchlist)
- // let formats = {}
- // let match = {}
- // this.props.searchlist.forEach(item => {
- // if (item.Type === 'date') {
- // // formats[item.FieldName] = dateFormat
- // formats[item.FieldName] = weekFormat
- // } else if (item.ID === 'WHE1400200905') {
- // formats[item.FieldName] = monthFormat
- // }
- // match[item.FieldName] = item.Op
- // })
- // this.setState({
- // formats: formats,
- // match: match
- // })
+ let match = {}
+ let style = {}
+ this.props.searchlist.forEach(item => {
+ match[item.field] = item.match
+ style[item.field] = item.type
+ })
+ this.setState({
+ match: match,
+ style: style
+ })
}
-
- // shouldComponentUpdate (nextProps, nextState) {
- // return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
- // }
getFields() {
const { getFieldDecorator } = this.props.form
@@ -64,7 +49,7 @@
{getFieldDecorator(item.field, {initialValue: item.initval })(
<Select
showSearch
- onChange={(val) => {this.selectChange(item.field, val)}}
+ onChange={this.searchChange}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{item.options.map(option =>
@@ -76,43 +61,58 @@
</Col>
)
} else if (item.type === 'date') { // 鏃堕棿鎼滅储
- if (item.ID === 'WHE14002009024') {
- fields.push(
- <Col span={6} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.field, {initialValue: moment('2019-09-14', dateFormat) })(
- <DatePicker format={dateFormat} onChange={(val) => {this.timeChange(item.field, val)}} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.ID === 'WHE1400200905') {
- fields.push(
- <Col span={6} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.field, {initialValue: moment('2019-09', monthFormat) })(
- <MonthPicker format={monthFormat} onChange={(val) => {this.timeChange(item.FieldName, val)}} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.ID === 'WHE1400200902') {
- fields.push(
- <Col span={6} key={index}>
- <Form.Item label={item.Label}>
- {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
- <WeekPicker onChange={(val) => {this.timeChange(item.FieldName, val)}} />
- )}
- </Form.Item>
- </Col>
- )
- }
+ fields.push(
+ <Col span={6} key={index}>
+ <Form.Item label={item.label}>
+ {getFieldDecorator(item.field, {initialValue: item.initval ? moment().subtract(item.initval, 'days') : null })(
+ <DatePicker onChange={this.searchChange} />
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'datemonth') {
+ fields.push(
+ <Col span={6} key={index}>
+ <Form.Item label={item.label}>
+ {getFieldDecorator(item.field, {initialValue: item.initval ? moment().subtract(item.initval, 'month') : null })(
+ <MonthPicker onChange={this.searchChange} />
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'dateweek') {
+ fields.push(
+ <Col span={6} key={index}>
+ <Form.Item label={item.label}>
+ {getFieldDecorator(item.field, {initialValue: item.initval ? moment().subtract(item.initval * 7, 'days') : null })(
+ <WeekPicker onChange={this.searchChange} />
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'daterange') {
+ fields.push(
+ <Col className="daterange" span={6} key={index}>
+ <Form.Item label={item.label}>
+ {getFieldDecorator(item.field,
+ {
+ initialValue: item.initval ? [moment().subtract(item.initval, 'days'), moment().subtract(item.initval === 1 ? 1 : 0, 'days')] : [null, null]
+ })(
+ <RangePicker
+ placeholder={['寮�濮嬫棩鏈�', '缁撴潫鏃ユ湡']}
+ renderExtraFooter={() => 'extra footer'}
+ onChange={this.searchChange}
+ />
+ )}
+ </Form.Item>
+ </Col>
+ )
}
})
if (this.props.searchlist.length >= 4) { // 娣诲姞鎼滅储銆侀噸缃寜閽�
fields.push(
- <Col span={this.props.searchlist.length % 4 ? 6 : 24} style={{ textAlign: 'right' }} key="actions">
+ <Col span={this.props.searchlist.length % 4 ? 6 : 24} style={{paddingLeft: '112px'}} key="actions">
<Button type="primary" htmlType="submit">
{this.props.dict['main.search']}
</Button>
@@ -141,21 +141,17 @@
// 鍥炶溅鎴栫偣鍑绘悳绱�
e.preventDefault()
this.props.form.validateFields((err, values) => {
- this.getFieldsValues(values)
+ let searches = this.getFieldsValues(values)
+ this.props.refreshdata(searches)
})
}
- selectChange = (key, val) => {
- // 鏉′欢閫夋嫨鍒囨崲
- this.props.form.validateFields((err, values) => {
- this.getFieldsValues(Object.assign({}, values, {[key]: val}))
- })
- }
-
- timeChange = (key, val) => {
- // 鏃堕棿鍒囨崲
- this.props.form.validateFields((err, values) => {
- this.getFieldsValues(Object.assign({}, values, {[key]: val}))
+ searchChange = () => {
+ this.setState({}, () => {
+ this.props.form.validateFields((err, values) => {
+ let searches = this.getFieldsValues(values)
+ this.props.refreshdata(searches)
+ })
})
}
@@ -163,46 +159,74 @@
// 閲嶇疆
this.props.form.resetFields()
this.props.form.validateFields((err, values) => {
- this.getFieldsValues(values)
+ let searches = this.getFieldsValues(values)
+ this.props.refreshdata(searches)
})
}
- getFieldsValues = (searches) => {
+ getFieldsValues = (values) => {
// 鑾峰彇鎼滅储鏉′欢鍊�
let search = []
- Object.keys(searches).forEach(key => {
- if (searches[key] && typeof(searches[key]) === 'object') {
- if (this.state.formats[key] === weekFormat) {
- search.push({
- type: 'date',
- key: key,
- value: moment(searches[key]).startOf('week').format(this.state.formats[key]) + ' ' + moment(searches[key]).endOf('week').format(this.state.formats[key]),
- op: this.state.match[key]
- })
- } else {
- search.push({
- type: 'date',
- key: key,
- value: moment(searches[key]).format(this.state.formats[key]),
- op: this.state.match[key]
- })
+ Object.keys(values).forEach(key => {
+ if (this.state.style[key] === 'daterange') {
+ let _value = ''
+ if (values[key].length > 0) {
+ _value = [moment(values[key][0]).format('YYYY-MM-DD'), moment(values[key][1]).format('YYYY-MM-DD')]
}
- } else if (searches[key] && searches[key] !== '-1') {
search.push({
- type: 'text',
+ type: this.state.style[key],
key: key,
- value: searches[key],
- op: this.state.match[key]
+ value: _value,
+ match: this.state.match[key]
+ })
+ } else if (this.state.style[key] === 'dateweek') {
+ let _value = ''
+ if (values[key]) {
+ _value = [moment(values[key]).startOf('week').format('YYYY-MM-DD'), moment(values[key]).endOf('week').format('YYYY-MM-DD')]
+ }
+ search.push({
+ type: this.state.style[key],
+ key: key,
+ value: _value,
+ match: this.state.match[key]
+ })
+ } else if (this.state.style[key] === 'date') {
+ let _value = ''
+ if (values[key]) {
+ _value = moment(values[key]).format('YYYY-MM-DD')
+ }
+ search.push({
+ type: this.state.style[key],
+ key: key,
+ value: _value,
+ match: this.state.match[key]
+ })
+ } else if (this.state.style[key] === 'datemonth') {
+ let _value = ''
+ if (values[key]) {
+ _value = moment(values[key]).format('YYYY-MM')
+ }
+ search.push({
+ type: this.state.style[key],
+ key: key,
+ value: _value,
+ match: this.state.match[key]
+ })
+ } else {
+ search.push({
+ type: this.state.style[key],
+ key: key,
+ value: values[key],
+ match: this.state.match[key]
})
}
})
- search = Utils.jointsearchkey(search)
- this.props.refreshdata(search)
+ return search
}
render() {
return (
- <Form className="ant-advanced-search-form main-search" onSubmit={this.handleSearch}>
+ <Form className="ant-advanced-search-form commontable-main-search" onSubmit={this.handleSearch}>
<Row gutter={24}>{this.getFields()}</Row>
</Form>
)
--
Gitblit v1.8.0