2020-06-18

king

2020-06-18 f59a500d24291d7f54b71dcca939a2a23dedca7c

 src/tabviews/zshare/mutilform/index.jsx

@@ -1,7 +1,10 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification } from 'antd'
import moment from 'moment'

import Api from '@/api'
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import FileUpload from '../fileupload'
@@ -12,29 +15,32 @@

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

  state = {
    cols: 2,
    datatype: null,
    readtype: null,
    readin: null,
    fieldlen: null,
    formlist: [],
    record: {}
    cols: 2,         // 显示为多少列
    datatype: null,  // 数据类型
    readtype: null,  // 是否只读
    readin: null,    // 行数据是否写入
    fieldlen: null,  // 字段长度
    formlist: [],    // 表单项
    encrypts: [],    // 加密字段
    intercepts: [],  // 截取字段
    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) {
      if (cols > 4 || cols < 1) {
        cols = 2
      }
    }
@@ -46,13 +52,15 @@

  componentDidMount () {
    const { data, BData } = this.props
    let action = JSON.parse(JSON.stringify(this.props.action))
    let action = fromJS(this.props.action).toJS()
    
    let datatype = {}
    let readtype = {}
    let readin = {}
    let fieldlen = {}
    let formlist = []
    let encrypts = []
    let intercepts = []

    if (action.groups.length > 0) {
      action.groups.forEach(group => {
@@ -75,12 +83,26 @@
    let _inputfields = formlist.filter(item => item.type === 'text' || item.type === 'number') // 用于过滤下拉菜单关联表单

    formlist = formlist.map(item => {
      if (item.type === 'title') return item

      // 加密字段
      if (item.type === 'textarea' && item.encryption === 'true') {
        encrypts.push(item.field)
      }

      // 字符截取字段
      if (item.interception === 'true') {
        intercepts.push(item.field)
      }

      // 数据写入
      let _readin = item.readin !== 'false'
      if (item.type === 'linkMain' || item.type === 'funcvar') {
        _readin = false
      }

      item.initVal = item.initval ? JSON.parse(JSON.stringify(item.initval)) : '' // 用于受控值的表单，隐藏时传默认值
      // 用于受控值的表单，隐藏时传默认值(未使用？)
      item.initVal = typeof(item.initval) === 'object' ? fromJS(item.initval).toJS() : item.initval

      let _fieldlen = item.fieldlength || 50
      if (item.type === 'textarea' || item.type === 'fileupload' || item.type === 'multiselect') {
@@ -103,26 +125,85 @@
          })
        }

        if (item.resourceType === '1' && this.props.configMap.hasOwnProperty(item.uuid)) {
          item.options = [...item.options, ...this.props.configMap[item.uuid]]
        }
        // 保存初始列表，用于关联菜单控制
        item.oriOptions = fromJS(item.options).toJS()

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

        // 下级表单控制-字段写入
        if (item.linkSubField && item.linkSubField.length > 0) {
          let _fields = _inputfields.map(_item => _item.field)
          item.linkSubField = item.linkSubField.filter(_item => _fields.includes(_item))
        }
      }

      let newval = ''

      if (item.type === 'linkMain' && BData && BData.hasOwnProperty(item.field)) {
        item.initval = BData[item.field]
        newval = BData[item.field]
      } else if (item.type !== 'linkMain' && _readin && !/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
        item.initval = this.props.data[item.field]
        newval = this.props.data[item.field]
      } else if (item.type === 'date') { // 时间搜索
        if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
          newval = this.props.data[item.field]
        }
        if (newval) {
          newval = moment(newval, 'YYYY-MM-DD')
          newval = newval.format('YYYY-MM-DD') === 'Invalid date' ? '' : newval
        }
        if (!newval && item.initval) {
          newval = moment().subtract(item.initval, 'days')
        } else if (!newval) {
          newval = null
        }
      } else if (item.type === 'datemonth') {
        if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
          newval = this.props.data[item.field]
        }
        if (newval) {
          newval = moment(newval, 'YYYY-MM')
          newval = newval.format('YYYY-MM') === 'Invalid date' ? '' : newval
        }
        if (!newval && item.initval) {
          newval = moment().subtract(item.initval, 'month')
        } else if (!newval) {
          newval = null
        }
      } else if (item.type === 'datetime') {
        if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
          newval = this.props.data[item.field]
        }
        if (newval) {
          newval = moment(newval, 'YYYY-MM-DD HH:mm:ss')
          newval = newval.format('YYYY-MM-DD HH:mm:ss') === 'Invalid date' ? '' : newval
        }
        if (!newval && item.initval) {
          newval = moment().subtract(item.initval, 'days')
        } else if (!newval) {
          newval = null
        }
      }

      // 加密字段，解密处理
      if (item.type === 'textarea' && item.encryption === 'true' && newval !== '') {
        try {
          newval = window.decodeURIComponent(window.atob(newval))
        } catch (e) {
          console.warn(e)
        }
      }

      // 读取表格数据或设有时间的初始值
      item.initval = newval !== '' ? newval : item.initval

      // 下拉表单，存在上级菜单时，生成显示值列表，优先以数字判断
      if (item.supvalue) {
        item.supvalue = item.supvalue.split(',')
        let supvals = []
        item.supvalue.split(',').forEach(val => {
          supvals.push(val)
          if (/^([-]?(0|[1-9][0-9]*)(\.[0-9]+)?)$/.test(val)) {
            supvals.push(+val)
          }
        })
        item.supvalue = supvals
      }

      return item
@@ -141,9 +222,11 @@
          notification.warning({
            top: 92,
            message: '未查询到表单《' + item.label + '》关联字段！',
            duration: 10
            duration: 5
          })
          item.supInitVal = ''
        } else {
          item.supInitVal = supItem.initval
          item.options = item.oriOptions.filter(option => option.parentId === supItem.initval)
        }
      }
@@ -156,6 +239,8 @@
      datatype: datatype,
      readin: readin,
      fieldlen: fieldlen,
      encrypts: encrypts,
      intercepts: intercepts,
      formlist: formlist
    }, () => {
      if (action.setting && action.setting.focus) {
@@ -171,8 +256,115 @@
          console.warn('focus error！')
        }
      }
      // 用来更新state，防止受控表单初始时不显示
      this.setState({
        loaded: true
      })
      this.improveActionForm()
    })
  }

  /**
   * @description 获取下拉表单选项信息
   */
  improveActionForm = () => {
    const { formlist } = this.state
    let deffers = []

    formlist.forEach(item => {
      if (!['select', 'link', 'multiselect'].includes(item.type) || item.resourceType !== '1') return

      let param = {
        func: 'sPC_Get_SelectedList',
        LText: item.data_sql,
        obj_name: 'data',
        arr_field: item.arr_field
      }

      if (this.props.BID) {
        param.BID = this.props.BID
      }

      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
      param.secretkey = Utils.encrypt(param.LText, param.timestamp)

      if (this.props.menuType === 'HS') { // 云端数据验证
        param.open_key = Utils.encrypt(param.secretkey, param.timestamp, true)
      }

      deffers.push(
        new Promise(resolve => {
          Api.getSystemCacheConfig(param, item.database === 'sso').then(res => {
            res.$search = item
            resolve(res)
          })
        })
      ) 
    })

    if (deffers.length === 0) return

    let _field = {}
    let error = ''
    Promise.all(deffers).then(result => {
      result.forEach(res => {
        if (res.status) {
          let options = res.data.map(cell => {
            let item = {
              key: Utils.getuuid(),
              Value: cell[res.$search.valueField],
              Text: cell[res.$search.valueText]
            }

            if (res.$search.type === 'link') {
              item.parentId = cell[res.$search.linkField]
            } else if (res.$search.type === 'select' && res.$search.linkSubField && res.$search.linkSubField.length > 0) {
              res.$search.linkSubField.forEach(_field => {
                item[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
              })
            }

            return item
          })

          _field[res.$search.uuid] = options
        } else {
          error = res
        }
      })

      if (error) {
        notification.warning({
          top: 92,
          message: error.message,
          duration: 5
        })
      }

      let _formlist = formlist.map(item => {
        if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
          if (item.resourceType === '1' && _field.hasOwnProperty(item.uuid)) {
            item.oriOptions = [...item.oriOptions, ..._field[item.uuid]]
          }
        }
        return item
      })
  
      _formlist = _formlist.map(item => {
        if (item.type === 'link') {
          if (item.supInitVal) {
            item.options = item.oriOptions.filter(option => option.parentId === item.supInitVal)
          } else {
            item.options = item.oriOptions
          }
        } else if (item.type === 'select' || item.type === 'multiselect') {
          item.options = item.oriOptions
        }
        return item
      })

      this.setState({
        formlist: _formlist
      })
    })
  }
@@ -184,10 +376,13 @@
    supfields.forEach(supfield => {
      formlist = formlist.map(item => {
        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 : ''

          fieldsvalue[item.field] = item.initval
          if (this.props.form.getFieldValue(item.field) !== undefined) {
            fieldsvalue[item.field] = item.initval
          }
  
          subfields.push(item)
        }
@@ -204,7 +399,7 @@

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

    let subfields = []
    let fieldsvalue = {}
@@ -214,7 +409,9 @@
        item.options = item.oriOptions.filter(option => option.parentId === value)
        item.initval = item.options[0] ? item.options[0].Value : ''

        fieldsvalue[item.field] = item.initval
        if (this.props.form.getFieldValue(item.field) !== undefined) {
          fieldsvalue[item.field] = item.initval
        }

        subfields.push(item)
      }
@@ -226,9 +423,9 @@
      let _data = option.props.data
      _field.linkSubField.forEach(subfield => {
        if (this.props.form.getFieldValue(subfield) !== undefined) {
          fieldsvalue[subfield] = _data[subfield] || ''
          fieldsvalue[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
        } else {
          _record[subfield] = _data[subfield] || ''
          _record[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
        }
      })
    }
@@ -282,10 +479,6 @@
    const fields = []

    formlist.forEach((item, index) => {
      // if ((!item.field && item.type !== 'title') || item.hidden === 'true') return

      // if (item.supField && !item.supvalue.includes(this.props.form.getFieldValue(item.supField))) return

      if (item.type === 'title') {
        fields.push(
          <Col span={24} key={index}>
@@ -311,13 +504,18 @@
              pattern: /^[a-zA-Z0-9]*$/ig,
              message: formRule.input.letternummsg
            }]
          } else if (item.regular === 'funcname') {
            _rules = [{
              pattern: /^[\u4E00-\u9FA50-9a-zA-Z_]*$/ig,
              message: formRule.input.funcname
            }]
          }
        }
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval || '',
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
@@ -420,17 +618,11 @@
          </Col>
        )
      } else if (item.type === 'date') { // 时间搜索
        let _initval = this.props.data ? this.props.data[item.field] : ''
        if (_initval && this.state.readin[item.field]) {
          _initval = moment(_initval, 'YYYY-MM-DD')
        } else {
          _initval = item.initval ? moment().subtract(item.initval, 'days') : null
        }
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
@@ -444,17 +636,11 @@
          </Col>
        )
      } else if (item.type === 'datemonth') {
        let _initval = this.props.data ? this.props.data[item.field] : ''
        if (_initval && this.state.readin[item.field]) {
          _initval = moment(_initval, 'YYYY-MM')
        } else {
          _initval = item.initval ? moment().subtract(item.initval, 'month') : null
        }
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
@@ -468,17 +654,11 @@
          </Col>
        )
      } else if (item.type === 'datetime') {
        let _initval = this.props.data ? this.props.data[item.field] : ''
        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
        }
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
@@ -486,7 +666,6 @@
                  }
                ]
              })(
                // <DatePicker showTime getCalendarContainer={() => document.getElementById('form-box')} />
                <DatePicker showTime disabled={item.readonly === 'true'} />
              )}
            </Form.Item>
@@ -546,28 +725,20 @@
          </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 _max = item.fieldlength || 512
        let _labelcol = cols !== 3 ? 8 / cols : 3
        let _wrapcol = cols !== 3 ? 16 + (cols - 1) * 4 : 21
        let _style = {}
        if (cols === 2) {
        if (cols === 2 || cols === 4) {
          _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 || '',
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
@@ -589,7 +760,14 @@
  }

  handleConfirm = () => {
    const { record } = this.state
    const { record, intercepts } = this.state
    let _encrypts = fromJS(this.state.encrypts).toJS()
    let _format = {
      date: 'YYYY-MM-DD',
      datemonth: 'YYYY-MM',
      datetime: 'YYYY-MM-DD HH:mm:ss'
    }

    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
@@ -599,54 +777,77 @@
          this.state.formlist.forEach(item => {
            if (!item.field) return

            let _item = null
            if (item.type === 'funcvar') {
              search.push({
              _item = {
                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]
                _encrypts = _encrypts.filter(_field => _field !== item.field) // 隐藏字段，不参与加密处理
              }
              search.push({
              
              _item = {
                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
              })
              }
            } else if (item.supField && !item.supvalue.includes(this.props.form.getFieldValue(item.supField))) {
              search.push({
              _item = {
                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: item.initVal
              })
                value: item.initval
              }
            }

            if (!_item) return

            if (item.type === 'date' || item.type === 'datemonth' || item.type === 'datetime') {
              if (_item.value && _item.value.format) {
                _item.value = _item.value.format(_format[item.type])
              } else if (!_item.value) {
                _item.value = ''
              }
            }

            search.push(_item)
          })

          Object.keys(values).forEach(key => {
            if (values[key] === undefined) { // 表单异常？？？
              if (search.filter(s => s.key === key).length === 0) {
                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: ''
                })
              }
              return
            }

            let _value = ''
            if (this.state.datatype[key] === 'datetime') {
              if (values[key]) {
                _value = moment(values[key]).format('YYYY-MM-DD HH:mm:ss')
              }
              _value = values[key] ? moment(values[key]).format('YYYY-MM-DD HH:mm:ss') : ''
            } else if (this.state.datatype[key] === 'datemonth') {
              if (values[key]) {
                _value = moment(values[key]).format('YYYY-MM')
              }
              _value = values[key] ? moment(values[key]).format('YYYY-MM') : ''
            } else if (this.state.datatype[key] === 'date') {
              if (values[key]) {
                _value = moment(values[key]).format('YYYY-MM-DD')
              }
              _value = values[key] ? moment(values[key]).format('YYYY-MM-DD') : ''
            } else if (this.state.datatype[key] === 'number') {
              _value = values[key]

@@ -667,9 +868,12 @@
              }

              _value = vals.join(',')
            } else if (this.state.datatype[key] === 'text') {
              _value = values[key].replace(/(^\s*|\s*$) | \t* | \v*/ig, '')
            } else if (this.state.datatype[key] === 'text' || this.state.datatype[key] === 'textarea') {
              _value = values[key].replace(/\t*|\v*/g, '') // 去除制表符

              if (intercepts.includes(key)) {              // 去除首尾空格
                _value = _value.replace(/(^\s*|\s*$)/g, '')
              }
            } else {
              _value = values[key]
              
@@ -684,6 +888,23 @@
              value: _value
            })
          })

          // 含有加密字段时，对表单值进行加密
          if (_encrypts && _encrypts.length > 0) {
            search = search.map(item => {
              let _value = item.value
              if (_encrypts.includes(item.key)) {
                try {
                  _value = window.btoa(window.encodeURIComponent(_value))
                } catch (e) {
                  console.warn(e)
                }
              }
              item.value = _value

              return item
            })
          }

          resolve(search)
        } else {
@@ -714,11 +935,25 @@
    let _formlist = []
    let rowIndex = 0
    let colIndex = 0
    let filtration = {}

    // 表单分行，避免排列不整齐
    formlist.forEach(item => {
      if ((!item.field && item.type !== 'title') || item.hidden === 'true' || item.type === 'funcvar') return
      if (item.supField) { // 多层表单控制
        let _supVal = this.props.form.getFieldValue(item.supField)

      if (item.supField && !item.supvalue.includes(this.props.form.getFieldValue(item.supField))) return
        if (_supVal === undefined && filtration[item.supField]) {
          _supVal = filtration[item.supField]
        }

        if (item.supvalue.includes(_supVal)) {
          let _subVal = this.props.form.getFieldValue(item.field)
          filtration[item.field] = _subVal === undefined ? item.initval : _subVal
        } else {
          return
        }
      }

      _formlist[rowIndex] = _formlist[rowIndex] || []
      if (item.type === 'textarea' || item.type === 'title') {
@@ -742,7 +977,6 @@

    return (
      <Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
        {/* <Row gutter={24}>{this.getFields(formlist)}</Row> */}
        {_formlist.map((formrow, index) => <Row key={index} gutter={24}>{this.getFields(formrow)}</Row>)}
      </Form>
    )