datamanage-update

king

2019-10-15 ee32a69f9a7f25c37757325dc28ac7b5127dceca

 src/components/mutilform/index.jsx

@@ -1,42 +1,39 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, DatePicker } from 'antd'
import { Form, Row, Col, Input, InputNumber, 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 timeFormat = 'YYYY-MM-DD HH:mm:ss'

class MainSearch extends Component {
  static propTpyes = {
    formlist: PropTypes.array, // 搜索条件列表
    dict: PropTypes.object, // 字典项
    data: PropTypes.object // 表格数据
    data: PropTypes.any, // 表格数据
    cols: PropTypes.number
  }

  state = {
    formats: null, // 事件校验规则
    match: null // 搜索条件匹配规则
    datatype: null
  }

  UNSAFE_componentWillMount () {
    let formats = {}
    let match = {}
    let datatype = {}
    this.props.formlist.forEach(item => {
      if (item.Type === 'date') {
        // formats[item.FieldName] = dateFormat
        formats[item.FieldName] = weekFormat
      } else if (item.ID === 'WHE1400200905') {
        formats[item.FieldName] = monthFormat
      if (item.InputType === 'date') {
        formats[item.FieldName] = dateFormat
      } else if (item.InputType === 'datetime') {
        formats[item.FieldName] = timeFormat
      }
      match[item.FieldName] = item.Op
      datatype[item.FieldName] = item.InputType
    })
    this.setState({
      formats: formats,
      match: match
      datatype: datatype
    })
  }

@@ -44,31 +41,61 @@
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.props.formlist.forEach((item, index) => {
      if (item.InputType === 'text' || item.InputType === 'string') { // 文本搜索
      if (item.Hide !== 'false') return // input隐藏

      let validate = item.Validate ? JSON.parse(item.Validate) : {} // 检验是否必填
      let _required = validate.required || false
      if (item.InputType === 'text') { // 文本搜索
        fields.push(
          <Col span={12} key={index}>
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: this.props.data[item.FieldName],
                initialValue: this.props.data ? this.props.data[item.FieldName] : item.InitVal,
                rules: [
                  {
                    required: item.required,
                    required: _required,
                    message: this.props.dict['main.form.required.input'] + item.Label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.ReadOnly === 'true'} />)}
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'spinner') { // 数字
        validate.min = (validate.min || validate.min === 0) ? validate.min : -Infinity
        validate.max = (validate.max || validate.max === 0) ? validate.max : Infinity
        validate.precision = (validate.precision || validate.precision === 0) ? validate.precision : ''
        let _initval = (this.props.data ? this.props.data[item.FieldName] : item.InitVal) || 0
        let model = <InputNumber initialValue={_initval} disabled={item.readonly} min={validate.min} max={validate.max} />

        if (validate.precision === +validate.precision) { // 数据精度
          model = <InputNumber initialValue={_initval} disabled={item.readonly} min={validate.min} max={validate.max} precision={validate.precision} />
        }
        
        fields.push(
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: _initval,
                rules: [
                  {
                    required: _required,
                    message: this.props.dict['main.form.required.input'] + item.Label + '!'
                  }
                ]
              })(model)}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: this.props.data[item.FieldName],
                initialValue: this.props.data ? this.props.data[item.FieldName] : item.InitVal,
                rules: [
                  {
                    required: item.required,
                    required: _required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
@@ -76,6 +103,7 @@
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById('form-box')}
                >
                  {item.DynOptions.map(option =>
                    <Select.Option id={option.id} title={option.text} key={option.id} value={option.id}>{option.text}</Select.Option>
@@ -86,37 +114,43 @@
          </Col>
        )
      } else if (item.InputType === 'date') { // 时间搜索
        if (item.ID === 'WHE14002009024') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09-14', dateFormat) })(
                  <DatePicker format={dateFormat} />
                )}
              </Form.Item>
            </Col>
          )
        } else if (item.ID === 'WHE1400200905') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09', monthFormat) })(
                  <MonthPicker format={monthFormat} />
                )}
              </Form.Item>
            </Col>
          )
        } else if (item.ID === 'WHE1400200902') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
                  <WeekPicker />
                )}
              </Form.Item>
            </Col>
          )
        }
        let _initval = this.props.data ? this.props.data[item.FieldName] : item.InitVal
        fields.push(
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: _initval ? moment(_initval, dateFormat) : null,
                rules: [
                  {
                    required: _required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
              })(
                <DatePicker getCalendarContainer={() => document.getElementById('form-box')} format={dateFormat} />
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'datetime') {
        let _initval = this.props.data ? this.props.data[item.FieldName] : item.InitVal
        fields.push(
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: _initval ? moment(_initval, timeFormat) : null,
                rules: [
                  {
                    required: _required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
              })(
                <DatePicker showTime format={timeFormat} />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    
@@ -128,7 +162,21 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
          let formdata = {}
          Object.keys(values).forEach(key => {
            if (values[key] && typeof(values[key]) === 'object') {
              formdata[key] = moment(values[key]).format(this.state.formats[key])
            } else if (values[key] || values[key] === 0) {
              if (this.state.datatype[key] === 'spinner') {
                formdata[key] = parseFloat(values[key])
              } else {
                formdata[key] = values[key].replace(/\t|\v|\n|\r/g,'')
              }
            } else {
              formdata[key] = ''
            }
          })
          resolve(formdata)
        } else {
          reject(err)
        }
@@ -139,39 +187,6 @@
  handleReset = () => {
    // 重置
    this.props.form.resetFields()
  }

  getFieldsValues = (searches) => {
    // 获取搜索条件值
    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]
          })
        }
      } else if (searches[key] && searches[key] !== '-1') {
        search.push({
          type: 'text',
          key: key,
          value: searches[key],
          op: this.state.match[key]
        })
      }
    })
    search = Utils.jointsearchkey(search)
    this.props.refreshdata(search)
  }

  render() {
@@ -186,7 +201,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form">
      <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )