2019-12-31

king

2019-12-31 c41b93d4c5e2146a1d1568887fb8ce1e3144d7fb

 src/tabviews/tableshare/topSearch/index.jsx

@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Button, Select, DatePicker, notification } from 'antd'
import moment from 'moment'
import Utils from '@/utils/utils.js'
import './index.scss'

const {MonthPicker, WeekPicker, RangePicker} = DatePicker
@@ -13,9 +14,10 @@
  }

  state = {
    match: null, // 搜索条件匹配规则
    match: null,            // 搜索条件匹配规则
    style: null,
    searchlist: null
    searchlist: null,
    formId: Utils.getuuid()
  }

  UNSAFE_componentWillMount () {
@@ -72,8 +74,8 @@
    })
  }

  UNSAFE_componentWillReceiveProps() {
    let searchlist = JSON.parse(JSON.stringify(this.props.searchlist))
  UNSAFE_componentWillReceiveProps(nextProps) {
    let searchlist = JSON.parse(JSON.stringify(nextProps.searchlist))
    let _list = []
    let fieldMap = new Map()

@@ -170,7 +172,10 @@
  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []

    this.state.searchlist.forEach((item, index) => {
      if (item.hidden) return

      if (item.type === 'text') { // 文本搜索
        fields.push(
          <Col span={6} key={index}>
@@ -186,12 +191,33 @@
              {getFieldDecorator(item.field, {initialValue: item.initval })(
                <Select
                  showSearch
                  // onChange={this.searchChange}
                  onChange={(value) => {this.selectChange(item, value)}}
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById(this.state.formId)}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
                  {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') { // 下拉多选
        let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
        fields.push(
          <Col span={6} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.field, {initialValue: _initval })(
                <Select
                  showSearch
                  mode="multiple"
                  // onChange={(value) => {this.selectChange(item, value)}}
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById(this.state.formId)}
                >
                  {item.options.map((option, i) =>
                    <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
                  )}
                </Select>
              )}
@@ -203,7 +229,7 @@
          <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} />
                <DatePicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
              )}
            </Form.Item>
          </Col>
@@ -213,7 +239,7 @@
          <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} />
                <MonthPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
              )}
            </Form.Item>
          </Col>
@@ -223,7 +249,7 @@
          <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} />
                <WeekPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
              )}
            </Form.Item>
          </Col>
@@ -251,6 +277,7 @@
                  placeholder={['开始日期', '结束日期']}
                  renderExtraFooter={() => 'extra footer'}
                  onChange={this.searchChange}
                  getCalendarContainer={() => document.getElementById(this.state.formId)}
                />
              )}
            </Form.Item>
@@ -361,6 +388,13 @@
          value: _value,
          match: this.state.match[key]
        })
      } else if (this.state.style[key] === 'multiselect') {
        search.push({
          type: this.state.style[key],
          key: key.replace(/@tail@$/, ''),
          value: values[key],
          match: this.state.match[key]
        })
      } else {
        search.push({
          type: this.state.style[key],
@@ -375,7 +409,7 @@

  render() {
    return (
      <Form className="ant-advanced-search-form top-search" onSubmit={this.handleSearch}>
      <Form className="ant-advanced-search-form top-search" id={this.state.formId} onSubmit={this.handleSearch}>
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )