2020-10-21

king

2020-10-21 5423c7caa9723e0b232ea6c5ef4aaf90bd7a3334

 src/tabviews/zshare/mutilform/index.jsx

@@ -1,7 +1,7 @@
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 { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification, Checkbox, Radio, Tooltip, Icon } from 'antd'
import moment from 'moment'

import Api from '@/api'
@@ -9,6 +9,8 @@
import { formRule, calendarColors } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import FileUpload from '../fileupload'
import CustomSwitch from './customSwitch'
import CheckCard from './checkCard'
import './index.scss'

const {MonthPicker} = DatePicker
@@ -120,7 +122,7 @@
      writein[item.field] = item.writein !== 'false'
      fieldlen[item.field] = _fieldlen

      if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
      if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect' || item.type === 'radio' || item.type === 'checkbox') {
        if (item.setAll === 'true') {
          item.options.unshift({
            key: Utils.getuuid(),
@@ -192,6 +194,14 @@
          newval = window.decodeURIComponent(window.atob(newval))
        } catch (e) {
          console.warn(e)
        }
      } else if (item.type === 'switch' && newval !== '') { // 开关只接收固定值
        if (newval !== item.closeVal && newval !== item.openVal) {
          newval = ''
        } else if (newval === item.openVal) {
          newval = true
        } else {
          newval = false
        }
      }

@@ -277,7 +287,7 @@
    const { formlist } = this.state

    // 需要动态获取下拉菜单的表单
    let deForms = formlist.filter(item => ['select', 'link', 'multiselect'].includes(item.type) && item.resourceType === '1' && (item.type === 'link' || item.hidden !== 'true'))
    let deForms = formlist.filter(item => ['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && item.resourceType === '1' && (item.type === 'link' || item.hidden !== 'true'))

    if (deForms.length === 0) {
      return
@@ -395,17 +405,21 @@
      delete result.status

      let _formlist = formlist.map(item => {
        if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
        if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
          let options = result[item.field].map(cell => {
            let _cell = {
              key: Utils.getuuid(),
              Value: cell[item.valueField],
              Text: cell[item.valueText]
            let _cell = { key: Utils.getuuid() }

            if (item.type !== 'checkcard') {
              _cell.Value = cell[item.valueField]
              _cell.Text = cell[item.valueText]
            } else {
              _cell.$value = cell[item.valueField]
              _cell = {..._cell, ...cell}
            }
    
            if (item.type === 'link') {
              _cell.ParentID = cell[item.linkField]
            } else if (item.type === 'select' && item.linkSubField && item.linkSubField.length > 0) {
            } else if ((item.type === 'select' || item.type === 'radio') && item.linkSubField && item.linkSubField.length > 0) {
              item.linkSubField.forEach(_field => {
                _cell[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
              })
@@ -427,7 +441,7 @@
            } else {
              item.options = item.oriOptions
            }
          } else if (item.type === 'select' || item.type === 'multiselect') {
          } else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
            item.options = item.oriOptions
          }
          return item
@@ -485,17 +499,21 @@
      delete result.status

      let _formlist = formlist.map(item => {
        if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
        if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
          let options = result[item.field].map(cell => {
            let _cell = {
              key: Utils.getuuid(),
              Value: cell[item.valueField],
              Text: cell[item.valueText]
            let _cell = { key: Utils.getuuid() }

            if (item.type !== 'checkcard') {
              _cell.Value = cell[item.valueField]
              _cell.Text = cell[item.valueText]
            } else {
              _cell.$value = cell[item.valueField]
              _cell = {..._cell, ...cell}
            }
    
            if (item.type === 'link') {
              _cell.ParentID = cell[item.linkField]
            } else if (item.type === 'select' && item.linkSubField && item.linkSubField.length > 0) {
            } else if ((item.type === 'select' || item.type === 'radio') && item.linkSubField && item.linkSubField.length > 0) {
              item.linkSubField.forEach(_field => {
                _cell[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
              })
@@ -517,7 +535,7 @@
            } else {
              item.options = item.oriOptions
            }
          } else if (item.type === 'select' || item.type === 'multiselect') {
          } else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
            item.options = item.oriOptions
          }
          return item
@@ -554,7 +572,7 @@
    }
  }

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

@@ -576,15 +594,18 @@
    })
    
    // 表单切换时，更新关联字段
    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] || _data[subfield] === 0) ? _data[subfield] : ''
        } else {
          _record[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
        }
      })
    if ((_field.type === 'select' || _field.type === 'radio') && _field.linkSubField && _field.linkSubField.length > 0) {
      let _data = _field.options.filter(op => op.Value === value)[0]

      if (_data) {
        _field.linkSubField.forEach(subfield => {
          if (this.props.form.getFieldValue(subfield) !== undefined) {
            fieldsvalue[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
          } else {
            _record[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
          }
        })
      }
    }

    if (subfields.length === 0) {
@@ -629,17 +650,47 @@
    callback()
  }

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

    const fields = []
    let filtration = {}

    formlist.forEach((item, index) => {
      if ((!item.field && item.type !== 'title' && item.type !== 'hint') || item.hidden === 'true' || item.type === 'funcvar') return
      if (item.supField) { // 多层表单控制
        let _supVal = this.props.form.getFieldValue(item.supField)

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

      let _colspan = 24 / cols
      if (item.entireLine === 'true') {
        _colspan = 24
      }

      if (item.type === 'title') {
        fields.push(
          <Col span={24} key={index}>
            <p>{item.label}</p>
          </Col>
        )
      } else if (item.type === 'hint') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item colon={!!item.label} label={item.label || ' '} className="hint">
              <div className="message">{item.message}</div>
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'text') {
@@ -669,8 +720,13 @@
          }
        }
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -693,8 +749,13 @@
        let precision = (item.decimal || item.decimal === 0) ? item.decimal : null

        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                rules: [
@@ -716,8 +777,13 @@
        )
      } else if (item.type === 'color') { // 颜色选择
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -727,7 +793,7 @@
                  }
                ]
              })(
                <Select onChange={(value, option) => {this.selectChange(item, value, option)}} disabled={item.readonly === 'true'}>
                <Select disabled={item.readonly === 'true'}>
                  {calendarColors.map(option =>
                    <Select.Option key={option.name} style={{background: option.value, color: '#ffffff'}} value={option.name}>{option.name}</Select.Option>
                  )}
@@ -736,15 +802,109 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select' || item.type === 'link') { // 下拉搜索
        let hasSubField = false
        if (item.linkSubField && item.linkSubField.length > 0) { // 存在关联字段，数据存储
          hasSubField = true
        }
      } else if (item.type === 'checkcard') { // 多选框
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            } className="checkcard">
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(<CheckCard card={item} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'switch') { // 多选框
        fields.push(
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(<CustomSwitch Item={item} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'checkbox') { // 多选框
        let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
        
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Checkbox.Group disabled={item.readonly === 'true'}>
                  {item.options.map(option => <Checkbox key={option.key} title={option.Text} value={option.Value}>{option.Text}</Checkbox>)}
                </Checkbox.Group>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') { // 单选框
        fields.push(
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Radio.Group disabled={item.readonly === 'true'} onChange={(e) => {this.selectChange(item, e.target.value)}}>
                  {item.options.map(option => <Radio key={option.key} value={option.Value}>{option.Text}</Radio>)}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select' || item.type === 'link') { // 下拉搜索
        fields.push(
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -757,11 +917,11 @@
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value, option) => {this.selectChange(item, value, option)}}
                  onChange={(value) => {this.selectChange(item, value)}}
                  disabled={item.readonly === 'true'}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.key} data={hasSubField ? option : ''} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
                    <Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
                  )}
                </Select>
              )}
@@ -771,8 +931,13 @@
      } else if (item.type === 'multiselect') { // 多选
        let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                rules: [
@@ -798,8 +963,13 @@
        )
      } else if (item.type === 'date') { // 时间搜索
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -816,8 +986,13 @@
        )
      } else if (item.type === 'datemonth') {
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -834,8 +1009,13 @@
        )
      } else if (item.type === 'datetime') {
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -871,8 +1051,13 @@
        }

        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: filelist,
                rules: [
@@ -889,8 +1074,13 @@
        )
      } else if (item.type === 'linkMain') {
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
          <Col span={_colspan} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -907,15 +1097,14 @@
        // 函数变量字段，默认不显示
      } 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 || 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 }} }>
          <Col span={24} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -1034,7 +1223,7 @@
            } else if (this.state.datatype[key] === 'number') {
              _value = values[key]

            } else if (this.state.datatype[key] === 'multiselect') {
            } else if (this.state.datatype[key] === 'multiselect' || this.state.datatype[key] === 'checkbox') {
              _value = values[key] ? values[key].join(',') : ''

            } else if (this.state.datatype[key] === 'fileupload') {
@@ -1104,7 +1293,7 @@
  }

  render() {
    const { formlist, cols } = this.state
    const { cols } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -1116,52 +1305,9 @@
      }
    }

    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 (_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') {
        if (colIndex === 0) {
          _formlist[rowIndex].push(item)
        } else {
          rowIndex++
          _formlist[rowIndex] = [item]
        }
        rowIndex++
        colIndex = 0
      } else {
        _formlist[rowIndex].push(item)
        colIndex++
      }
      if (colIndex >= cols) {
        rowIndex++
        colIndex = 0
      }
    })

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