2019-11-26-01

king

2019-11-26 07acb5f4dc11e484801ccfcd95eee8845128c62a

 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>
    )