2020-02-21

king

2020-02-21 063b983daaf51a7f1e8677bde1e9c0e618866c91

 src/tabviews/tableshare/mutilform/index.jsx

@@ -2,33 +2,56 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification } from 'antd'
import moment from 'moment'
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import FileUpload from '../fileupload'
import './index.scss'

const {MonthPicker} = DatePicker
const { TextArea } = Input

class MainSearch extends Component {
  static propTpyes = {
    action: PropTypes.object,    // 按钮信息、表单列表
    dict: PropTypes.object,      // 字典项
    data: PropTypes.any,         // 表格数据
    BData: PropTypes.any,        // 主表数据
    configMap: PropTypes.object, // 按钮及下拉表单配置信息集
    inputSubmit: PropTypes.func  // input回车提交
  }

  state = {
    cols: 2,
    datatype: null,
    readtype: null,
    formlist: []
    readin: null,
    fieldlen: null,
    formlist: [],
    record: {}
  }

  UNSAFE_componentWillMount () {
    let cols = 2
    if (this.props.action.setting && this.props.action.setting.cols) {
      cols = parseInt(this.props.action.setting.cols)
      if (cols > 3 || cols < 1) {
        cols = 2
      }
    }

    this.setState({
      cols: cols
    })
  }

  componentDidMount () {
    const { data } = this.props
    const { data, BData } = this.props
    let action = JSON.parse(JSON.stringify(this.props.action))

    
    let datatype = {}
    let readtype = {}
    let readin = {}
    let fieldlen = {}
    let formlist = []
    if (action.groups.length > 0) {
      action.groups.forEach(group => {
@@ -42,23 +65,33 @@
          })
        }

        group.sublist.forEach(item => {
          datatype[item.field] = item.type
          readtype[item.field] = item.readonly === 'true'
          formlist.push(item)
        })
        formlist.push(...group.sublist)
      })
    } else {
      formlist = action.fields.map(item => {
        datatype[item.field] = item.type
        readtype[item.field] = item.readonly === 'true'

        return item
      })
      formlist = action.fields
    }

    let _inputfields = formlist.filter(item => item.type === 'text' || item.type === 'number') // 用于过滤下拉菜单关联表单

    formlist = formlist.map(item => {
      if (item.type === 'select' || item.type === 'link') {
      let _readin = item.readin !== 'false'
      if (item.type === 'linkMain' || item.type === 'funcvar') {
        _readin = false
      }

      let _fieldlen = item.fieldlength || 50
      if (item.type === 'textarea' || item.type === 'fileupload') {
        _fieldlen = item.fieldlength || 512
      } else if (item.type === 'number') {
        _fieldlen = item.decimal ? item.decimal : 0
      }

      datatype[item.field] = item.type
      readtype[item.field] = item.readonly === 'true'
      readin[item.field] = _readin
      fieldlen[item.field] = _fieldlen

      if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
        if (item.setAll === 'true') {
          item.options.unshift({
            key: Utils.getuuid(),
@@ -72,9 +105,16 @@
        }

        item.oriOptions = JSON.parse(JSON.stringify(item.options))
      }

      if (!/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
        if (item.linkSubField && item.linkSubField.length > 0) {
          let _fields = _inputfields.map(_item => _item.field)
          item.linkSubField = item.linkSubField.filter(_item => _fields.includes(_item))
        }
      }
      
      if (item.type === 'linkMain' && BData && BData.hasOwnProperty(item.field)) {
        item.initval = BData[item.field]
      } else if (_readin && !/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
        item.initval = this.props.data[item.field]
      }

@@ -82,7 +122,7 @@
    })

    let error = false

    
    formlist = formlist.map(item => {
      if (item.type === 'link') {
        let supItem = formlist.filter(form => form.field === item.linkField)[0]
@@ -104,7 +144,7 @@
    if (error) {
      notification.warning({
        top: 92,
        message: '关联菜单设置错误！',
        message: this.props.dict['main.form.link.error'],
        duration: 10
      })
    }
@@ -112,6 +152,8 @@
    this.setState({
      readtype: readtype,
      datatype: datatype,
      readin: readin,
      fieldlen: fieldlen,
      formlist: formlist
    }, () => {
      if (action.setting && action.setting.focus) {
@@ -124,13 +166,13 @@
            input.select()
          })
        } catch {
          console.warn('表单获取失败！')
          console.warn('focus error！')
        }
      }
    })
  }

  resetform = (formlist, supfields, index) => {
  resetform = (formlist, supfields, index, fieldsvalue) => {
    index++
    let subfields = []

@@ -139,7 +181,8 @@
        if (item.type === 'link' && item.linkField === supfield.field) {
          item.options = item.oriOptions.filter(option => option.parentId === supfield.initval)
          item.initval = item.options[0] ? item.options[0].Value : ''
          item.hiden = true

          fieldsvalue[item.field] = item.initval
  
          subfields.push(item)
        }
@@ -148,57 +191,80 @@
    })

    if (subfields.length === 0 || index > 6) {
      return formlist
      return {formlist: formlist, fieldsvalue: fieldsvalue}
    } else {
      return this.resetform(formlist, subfields, index)
      return this.resetform(formlist, subfields, index, fieldsvalue)
    }
  }

  selectChange = (_field, value) => {
  selectChange = (_field, value, option) => {
    const { record } = this.state
    let formlist = JSON.parse(JSON.stringify(this.state.formlist))

    let subfields = []
    let fieldsvalue = {}
    let _record = {}
    formlist = formlist.map(item => {
      if (item.type === 'link' && item.linkField === _field.field) {
        item.options = item.oriOptions.filter(option => option.parentId === value)
        item.initval = item.options[0] ? item.options[0].Value : ''
        item.hiden = true

        fieldsvalue[item.field] = item.initval

        subfields.push(item)
      }
      return item
    })

    if (subfields.length === 0) return

    formlist = this.resetform(formlist, subfields, 0)
    this.setState({
      formlist: formlist
    }, () => {
      this.setState({
        formlist: formlist.map(item => {
          item.hiden = false
          return item
        })
    
    // 表单切换时，更新关联字段
    if (_field.type === 'select' && _field.linkSubField && _field.linkSubField.length > 0 && option.props.data) {
      let _data = option.props.data
      _field.linkSubField.forEach(subfield => {
        if (this.props.form.getFieldValue(subfield) !== undefined) {
          fieldsvalue[subfield] = _data[subfield] || ''
        } else {
          _record[subfield] = _data[subfield] || ''
        }
      })
    })
    }

    if (subfields.length === 0) {
      if (Object.keys(fieldsvalue).length > 0) {
        this.props.form.setFieldsValue(fieldsvalue)
      }
      if (Object.keys(_record).length > 0) {
        this.setState({
          record: {...record, ..._record}
        })
      }
    } else {
      let result = this.resetform(formlist, subfields, 0, fieldsvalue)

      if (Object.keys(result.fieldsvalue).length > 0) {
        this.props.form.setFieldsValue(fieldsvalue)
      }

      let _param = {
        formlist: result.formlist
      }

      if (Object.keys(_record).length > 0) {
        _param.record = {...record, ..._record}
      }

      this.setState(_param)
    }
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const { cols } = this.state

    const fields = []
    let cols = 2
    if (this.props.action.setting && this.props.action.setting.cols) {
      cols = parseInt(this.props.action.setting.cols)
      if (cols > 3 || cols < 1) {
        cols = 2
      }
    }

    this.state.formlist.forEach((item, index) => {
      if ((!item.field && item.type !== 'title') || item.hiden) return

      if ((!item.field && item.type !== 'title') || item.hidden === 'true') return
      
      if (item.type === 'title') {
        fields.push(
          <Col span={24} key={index}>
@@ -206,6 +272,26 @@
          </Col>
        )
      } else if (item.type === 'text') {
        let _max = item.fieldlength || 50
        let _rules = []
        if (item.regular) {
          if (item.regular === 'number') {
            _rules = [{
              pattern: /^[0-9]*$/ig,
              message: formRule.input.numbermsg
            }]
          } else if (item.regular === 'letter') {
            _rules = [{
              pattern: /^[a-zA-Z]*$/ig,
              message: formRule.input.lettermsg
            }]
          } else if (item.regular === 'letter&number') {
            _rules = [{
              pattern: /^[a-zA-Z0-9]*$/ig,
              message: formRule.input.letternummsg
            }]
          }
        }
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
@@ -215,7 +301,12 @@
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                  },
                  {
                    max: _max,
                    message: formRule.input.formMessage.replace('@max', _max)
                  },
                  ..._rules
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
@@ -226,7 +317,7 @@
        let max = (item.max || item.max === 0) ? item.max : Infinity
        let _initval = item.initval
        let precision = (item.decimal || item.decimal === 0) ? item.decimal : null
        

        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
@@ -234,19 +325,24 @@
                initialValue: _initval,
                rules: [
                  {
                    required: item.required === 'true',
                    required: true,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(
                precision === null ?
                <InputNumber initialValue={_initval} min={min} max={max} disabled={item.readonly === 'true'} onPressEnter={this.handleSubmit} /> :
                <InputNumber initialValue={_initval} min={min} max={max} precision={precision} disabled={item.readonly === 'true'} onPressEnter={this.handleSubmit} />
                <InputNumber min={min} max={max} disabled={item.readonly === 'true'} onPressEnter={this.handleSubmit} /> :
                <InputNumber min={min} max={max} precision={precision} disabled={item.readonly === 'true'} onPressEnter={this.handleSubmit} />
                )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select' || item.type === 'link') { // 下拉搜索
        let hasSubField = false
        if (item.linkSubField && item.linkSubField.length > 0) { // 存在关联字段，数据存储
          hasSubField = true
        }
        
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
@@ -262,11 +358,10 @@
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.selectChange(item, value)}}
                  // getPopupContainer={() => document.getElementById('form-box')}
                  onChange={(value, option) => {this.selectChange(item, value, option)}}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
                    <Select.Option id={option.key} data={hasSubField ? option : ''} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
                  )}
                </Select>
              )}
@@ -302,7 +397,7 @@
        )
      } else if (item.type === 'date') { // 时间搜索
        let _initval = this.props.data ? this.props.data[item.field] : ''
        if (_initval) {
        if (_initval && this.state.readin[item.field]) {
          _initval = moment(_initval, 'YYYY-MM-DD')
        } else {
          _initval = item.initval ? moment().subtract(item.initval, 'days') : null
@@ -326,7 +421,7 @@
        )
      } else if (item.type === 'datemonth') {
        let _initval = this.props.data ? this.props.data[item.field] : ''
        if (_initval) {
        if (_initval && this.state.readin[item.field]) {
          _initval = moment(_initval, 'YYYY-MM')
        } else {
          _initval = item.initval ? moment().subtract(item.initval, 'month') : null
@@ -350,7 +445,7 @@
        )
      } else if (item.type === 'datetime') {
        let _initval = this.props.data ? this.props.data[item.field] : ''
        if (_initval) {
        if (_initval && this.state.readin[item.field]) {
          _initval = moment(_initval, 'YYYY-MM-DD HH:mm:ss')
        } else {
          _initval = item.initval ? moment().subtract(item.initval, 'days') : null
@@ -374,9 +469,8 @@
          </Col>
        )
      } else if (item.type === 'fileupload') {
        // let filelist = this.props.data ? this.props.data[item.field] : item.initval
        let filelist = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png,https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png'
        if (filelist) {
        let filelist = this.props.data ? this.props.data[item.field] : item.initval
        if (filelist && this.state.readin[item.field]) {
          try {
            filelist = filelist.split(',').map((url, index) => {
              return {
@@ -390,6 +484,8 @@
          } catch {
            filelist = []
          }
        } else {
          filelist = []
        }

        fields.push(
@@ -409,6 +505,58 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'linkMain') {
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'funcvar') {
        // fields.push(
        //   <Col span={24 / cols} key={index}>
        //     <Form.Item label={item.label}>
        //       {getFieldDecorator(item.field, {
        //         initialValue: item.linkfield || '',
        //       })(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} />)}
        //     </Form.Item>
        //   </Col>
        // )
      } else if (item.type === 'textarea') {
        let _labelcol = cols !== 3 ? 8 / cols : 3
        let _wrapcol = cols !== 3 ? 16 + (cols - 1) * 4 : 21
        let _style = {}
        if (cols === 2) {
          _style.paddingLeft = '7px'
        }
        fields.push(
          <Col span={24} key={index} className="textarea-row" style={{..._style}}>
            <Form.Item label={item.label} labelCol={{xs: { span: 24 }, sm: { span: _labelcol }}} wrapperCol={ {xs: { span: 24 }, sm: { span: _wrapcol }} }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval || '',
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  },
                  {
                    max: formRule.textarea.max,
                    message: formRule.textarea.message
                  }
                ]
              })(<TextArea autosize={{ minRows: 2, maxRows: 6 }} disabled={item.readonly === 'true'} />)}
            </Form.Item>
          </Col>
        )
      }
    })
    
@@ -416,63 +564,65 @@
  }

  handleConfirm = () => {
    const { record } = this.state
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let search = []
          // 隐藏表单
          this.state.formlist.forEach(item => {
            if (!item.field) return

            if (item.type === 'funcvar') {
              search.push({
                type: 'funcvar',
                readonly: 'true',
                readin: false,
                fieldlen: this.state.fieldlen[item.field],
                key: item.field,
                value: ''
              })
            } else if (item.hidden === 'true') {
              let _val = item.initval
              if (record.hasOwnProperty(item.field)) {
                _val = record[item.field]
              }
              search.push({
                type: this.state.datatype[item.field],
                readonly: this.state.readtype[item.field],
                readin: this.state.readin[item.field],
                fieldlen: this.state.fieldlen[item.field],
                key: item.field,
                value: _val
              })
            }
          })

          Object.keys(values).forEach(key => {
            let _value = ''
            if (this.state.datatype[key] === 'datetime') {
              let _value = ''
              if (values[key]) {
                _value = moment(values[key]).format('YYYY-MM-DD HH:mm:ss')
              }
              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: _value
              })
            } else if (this.state.datatype[key] === 'datemonth') {
              let _value = ''
              if (values[key]) {
                _value = moment(values[key]).format('YYYY-MM')
              }
              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: _value
              })
            } else if (this.state.datatype[key] === 'date') {
              let _value = ''
              if (values[key]) {
                _value = moment(values[key]).format('YYYY-MM-DD')
              }
              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: _value
              })
            } else if (this.state.datatype[key] === 'number') {
              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: values[key]
              })
              _value = values[key]

            } else if (this.state.datatype[key] === 'multiselect') {
              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: values[key] ? values[key].join(',') : ''
              })
              _value = values[key] ? values[key].join(',') : ''

            } else if (this.state.datatype[key] === 'fileupload') {
              let vals = []
              
              if (values[key].length > 0) {

              if (values[key] && values[key].length > 0) {
                values[key].forEach(_val => {
                  if (_val.origin && _val.url) {
                    vals.push(_val.url)
@@ -482,22 +632,25 @@
                })
              }

              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: vals.join(',')
              })
              _value = vals.join(',')
            } else if (this.state.datatype[key] === 'text') {
              _value = values[key].replace(/(^\s*|\s*$) | \t* | \v*/ig, '')

            } else {
              search.push({
                type: this.state.datatype[key],
                readonly: this.state.readtype[key],
                key: key,
                value: values[key].replace(/(^\s*|\s*$)/ig, '')
                // value: values[key].replace(/[\x00-\xff]+/ig, '')
              })
              _value = values[key]
              
            }

            search.push({
              type: this.state.datatype[key],
              readonly: this.state.readtype[key],
              readin: this.state.readin[key],
              fieldlen: this.state.fieldlen[key],
              key: key,
              value: _value
            })
          })

          resolve(search)
        } else {
          reject(err)