2021-04-07

king

2021-04-07 f3167f8371d19d0ea8fe7d0e7af5517ff0b08cd2

 src/tabviews/zshare/mutilform/index.jsx

@@ -33,7 +33,6 @@
  }

  state = {
    cols: 2,         // 显示为多少列
    datatype: null,  // 数据类型
    readtype: null,  // 是否只读
    readin: null,    // 行数据是否写入
@@ -44,54 +43,21 @@
    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 > 4 || cols < 1) {
        cols = 2
      }
    }

    this.setState({
      cols: cols
    })
  }

  componentDidMount () {
    const { data, BData } = this.props
    let action = fromJS(this.props.action).toJS()
    
    const { data, BData, action } = this.props

    let datatype = {}
    let readtype = {}
    let readin = {}
    let writein = {}
    let fieldlen = {}
    let formlist = []
    let intercepts = []
    let _inputfields = []

    if (action.groups.length > 0) {
      action.groups.forEach(group => {
        if (group.sublist.length === 0) return

        if (!group.default) {
          formlist.push({
            type: 'title',
            label: group.label,
            uuid: group.uuid
          })
        }

        formlist.push(...group.sublist)
      })
    } else {
      formlist = action.fields
    }

    let linkFields = {} // 关联菜单
    let supItemVal = {} // 上级菜单初始值
    let deForms = []    // 需要动态获取下拉菜单的表单

    let formlist = fromJS(action.fields).toJS()

    formlist.forEach(item => {
      if (item.type === 'text' || item.type === 'number') {              // 用于过滤下拉菜单关联表单
@@ -108,7 +74,11 @@
    })

    formlist = formlist.map(item => {
      if (item.type === 'title') return item
      if (item.labelwidth) {
        item.labelCol = {style: {width: item.labelwidth + '%'}}
        item.wrapperCol = {style: {width: (100 - item.labelwidth) + '%'}}
      }
      if (item.type === 'split' || item.type === 'hint') return item

      // 数据自动填充
      let _readin = item.readin !== 'false'
@@ -153,11 +123,11 @@

      if (item.type === 'linkMain') {
        newval = BData && BData[item.field] ? BData[item.field] : ''
      } else if (_readin && !/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
        newval = this.props.data[item.field]
      } else if (_readin && !/^date/.test(item.type) && data && data.hasOwnProperty(item.field)) {
        newval = 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 (_readin && data && data.hasOwnProperty(item.field)) {
          newval = data[item.field]
        }
        if (newval) {
          newval = moment(newval, 'YYYY-MM-DD')
@@ -169,8 +139,8 @@
          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 (_readin && data && data.hasOwnProperty(item.field)) {
          newval = data[item.field]
        }
        if (newval) {
          newval = moment(newval, 'YYYY-MM')
@@ -182,8 +152,8 @@
          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 (_readin && data && data.hasOwnProperty(item.field)) {
          newval = data[item.field]
        }
        if (newval) {
          newval = moment(newval, 'YYYY-MM-DD HH:mm:ss')
@@ -229,7 +199,7 @@
      if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && item.resourceType === '1') {
        deForms.push(item)
      } else if (['select', 'link', 'radio'].includes(item.type) && item.resourceType !== '1') { // 选中第一项
        if (item.initval && item.initval.indexOf('$first') > -1) {
        if (typeof(item.initval) === 'string' && item.initval.indexOf('$first') > -1) {
          item.initval = item.options[0] ? item.options[0].Value : ''
        }
      }
@@ -262,7 +232,9 @@
      formlist
    }, () => {
      if (action.setting && action.setting.focus) {
        this.selectInput(action.setting.focus, 'init')
        setTimeout(() => {
          this.selectInput(action.setting.focus)
        }, 500)
      }
      // 用来更新state，防止受控表单初始时不显示
      this.setState({
@@ -272,7 +244,7 @@
    })
  }

  selectInput = (selectId, type) => {
  selectInput = (selectId) => {
    try {
      let _form = document.getElementById('main-form-box')
      let _inputs = _form.getElementsByTagName('input')
@@ -280,7 +252,7 @@
      _inputs.forEach(input => {
        if (!input || input.id !== selectId) return

        if (input.className === 'ant-select-search__field' && type !== 'init') {
        if (input.className === 'ant-select-search__field') {
          let div = input.parentNode
          while (div && div.parentNode) {
            div = div.parentNode
@@ -462,7 +434,7 @@
          } else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
            item.options = item.oriOptions
          }
          if (['select', 'link', 'radio'].includes(item.type) && item.initval && item.initval.indexOf('$first') > -1) { // 选中第一项
          if (['select', 'link', 'radio'].includes(item.type) && typeof(item.initval) === 'string' && item.initval.indexOf('$first') > -1) { // 选中第一项
            item.initval = item.options[0] ? item.options[0].Value : ''
            values.push({field: item.field, value: item.initval})
          }
@@ -569,7 +541,7 @@
          } else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
            item.options = item.oriOptions
          }
          if (['select', 'link', 'radio'].includes(item.type) && item.initval && item.initval.indexOf('$first') > -1) { // 选中第一项
          if (['select', 'link', 'radio'].includes(item.type) && typeof(item.initval) === 'string' && item.initval.indexOf('$first') > -1) { // 选中第一项
            item.initval = item.options[0] ? item.options[0].Value : ''
            values.push({field: item.field, value: item.initval})
          }
@@ -640,7 +612,7 @@
    // 表单切换时，更新关联字段
    if (_field.linkSubField) {
      let _data = _field.options.filter(op => op.Value === value)[0]

      
      if (_data) {
        _field.linkSubField.forEach(subfield => {
          if (this.props.form.getFieldValue(subfield) !== undefined) {
@@ -716,13 +688,13 @@

  getFields() {
    const { getFieldDecorator } = this.props.form
    const { cols, formlist } = this.state
    const { 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.field && item.type !== 'split' && item.type !== 'hint') || item.hidden === 'true' || item.type === 'funcvar') return
      if (item.supField) { // 多层表单控制
        let _supVal = this.props.form.getFieldValue(item.supField)

@@ -738,21 +710,22 @@
        }
      }

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

      if (item.type === 'title') {
      if (item.type === 'split') {
        fields.push(
          <Col span={24} key={index}>
            <p>{item.label}</p>
            <p className="mk-form-split-line">{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">
          <Col span={item.span || 24} key={index}>
            <Form.Item
              colon={!!item.label}
              label={item.label}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              className="hint"
            >
              <div className="message">{item.message}</div>
            </Form.Item>
          </Col>
@@ -789,13 +762,18 @@
        }

        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -817,13 +795,18 @@
        let precision = (item.decimal || item.decimal === 0) ? item.decimal : null

        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -845,13 +828,18 @@
        )
      } else if (item.type === 'color') { // 颜色选择
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              label={item.tooltip ?
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <Icon type="question-circle" />
                  {item.label}
                </Tooltip> : item.label
              }
            >
              {getFieldDecorator(item.field, {
                initialValue: item.initval || 'transparent',
                rules: [
@@ -868,13 +856,19 @@
        )
      } 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">
          <Col span={item.span || 24} key={index}>
            <Form.Item
              className="checkcard"
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -889,13 +883,18 @@
        )
      } 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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -912,13 +911,18 @@
        let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
        
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              label={item.tooltip ?
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <Icon type="question-circle" />
                  {item.label}
                </Tooltip> : item.label
              }
            >
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                rules: [
@@ -937,13 +941,18 @@
        )
      } 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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -962,13 +971,18 @@
        )
      } 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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -996,13 +1010,18 @@
      } else if (item.type === 'multiselect') { // 多选
        let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              label={item.tooltip ?
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <Icon type="question-circle" />
                  {item.label}
                </Tooltip> : item.label
              }
            >
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                rules: [
@@ -1028,13 +1047,18 @@
        )
      } else if (item.type === 'date') { // 时间搜索
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -1051,13 +1075,18 @@
        )
      } else if (item.type === 'datemonth') {
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -1074,13 +1103,18 @@
        )
      } else if (item.type === 'datetime') {
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -1116,13 +1150,18 @@
        }

        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              label={item.tooltip ?
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <Icon type="question-circle" />
                  {item.label}
                </Tooltip> : item.label
              }
            >
              {getFieldDecorator(item.field, {
                initialValue: filelist,
                rules: [
@@ -1139,13 +1178,18 @@
        )
      } else if (item.type === 'linkMain') {
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -1170,13 +1214,18 @@
          }]
        }
        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
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              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: [
@@ -1198,13 +1247,18 @@
        let _max = item.fieldlength || 512

        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.hidelabel !== 'true' && item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : (item.hidelabel !== 'true' ? item.label : '')
            }>
          <Col span={item.span || 24} key={index}>
            <Form.Item
              extra={item.extra || null}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              label={item.hidelabel !== 'true' && item.tooltip ?
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <Icon type="question-circle" />
                  {item.label}
                </Tooltip> : (item.hidelabel !== 'true' ? item.label : '')
              }
            >
              {getFieldDecorator(item.field, {
                initialValue: item.initval || '',
                rules: [
@@ -1389,21 +1443,16 @@
  }

  render() {
    const { cols } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    const { action } = this.props

    let _align = 'left_right'
    if (action.setting && action.setting.align) {
      _align = action.setting.align
    }

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