cjd-parkball/src/components/formBuilder/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React, { PureComponent } from 'react'
import { Form, Row, Col } from 'antd'
import classnames from 'classnames'
import { errorTip } from '../utilities'
import Field from './field'
import './index.scss'

const FormContext = React.createContext('form')

const FormProvider = FormContext.Provider

const verifyParams = (fields) => {
  if (Object.prototype.toString.call(fields) !== '[object Array]') {
    errorTip('FormBuilder', 'fields 应为数组类型')
    return false
  }

  return true
}

@Form.create()
export default class extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      fields: this.handleRelations(props.fields),
    }
  }

  setFieldsConfig = (key, options) => {
    const { fields } = this.state
    const newFields = fields.map((item) => {
      let newItem = item
      if (item.name === key) {
        newItem = Object.assign({}, newItem, options)
      }
      return newItem
    })
    this.setState({
      fields: newFields,
    })
  }

  handleRelations (fields) {
    const { form } = this.props
    if (fields && verifyParams(fields)) {
      return fields.map((item) => {
        const { relations = [], ...otherConfigs } = item
        const triggerConfig = {}
        relations.forEach((i) => {
          triggerConfig[i.triggerAction] = true
          triggerConfig[`${i.triggerAction}Func`] = []
          triggerConfig[`${i.triggerAction}Func`].push((value) => {
            i.triggerFun ? i.triggerFun({ value, form: Object.assign(form, { setFieldsConfig: this.setFieldsConfig }), partner: this.getPartnerValue(i.otherPartner)}) :
            form.setFieldsValue({[i.targetKey]: value.target ? value.target.value : value})
          })
        })
        return {
          ...otherConfigs,
          triggerConfig,
        }
      })
    }
    return []
  }


  // 获取partner的值
  getPartnerValue (partners) {
    const { form } = this.props
    if (partners) {
      const partnerValue = {}
      partners.forEach((item) => {
        partnerValue[item.sourceKey] = item.getValue ? item.getValue({ value: form.getFieldValue(item.sourceKey), form }) :  form.getFieldValue(item.sourceKey)
      })
      return partnerValue
    }
    return {}
  }

  static Field = Field

  static Fields (props) {
    const span = 24 / (props.column || 1)
    return verifyParams(props.fields) && (
      <FormContext.Consumer>
        {
          form => (<Row className="pk-form-content">
          {
            props.fields.map(field => (
              <Col span={span}>
                <Field key={field.name} field={field} {...form} />
              </Col>
            ))
          }
        </Row>)
        }
      </FormContext.Consumer>
    )
  }

  getFieldsValue () {
    this.props.form.getFieldsValue()
  }

  setFieldsValue (fields) {
    this.props.form.getFieldsValue(fields)
  }

  handleSubmit (e) {
    e.preventDefault()
    const { validateScroll = true, form, onSubmit } = this.props
    if (validateScroll) {
      this.props.form.validateFieldsAndScroll((err, values) => {
        onSubmit({ err, values }, form, e)
      })
    } else {
      this.props.form.validateFields((err, values) => {
        onSubmit({ err, values }, form, e)
      })
    }
  }

  getReadyValue () {
    return this.props.form.validateFields((err, values) => {
      if (err) {
        return false
      }

      return {
        values, form: this.props.form,
      }
    })
  }

  render () {
    const {
      layout = 'horizontal', children, form, column,
    } = this.props

    const { fields } = this.state
    const span = 24 / (column || 1)

    return (
      <FormProvider value={this.props}>
        <Form
          className={classnames('pk-form', layout)}
          onSubmit={e => this.handleSubmit(e)}
        >
          {
            fields.length ? (<Row className="pk-form-content">
              {
                fields.map(field => (
                  <Col span={span}>
                    <Field key={field.name} field={field} form={form} />
                  </Col>
                ))
              }
            </Row>) : null
          }
          {children}
        </Form>
      </FormProvider>
    )
  }
}