2020-01-08

king

2020-01-08 669d7cc31eb3728ad09bfb7ce6e615f5c571c14e

 src/templates/tableshare/verifycard/billcodeform/index.jsx

@@ -1,30 +1,54 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Button, notification } from 'antd'
import { Form, Row, Col, Select, Button, InputNumber } from 'antd'
import './index.scss'


class UniqueForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,  // 字典项
    fields: PropTypes.array,  // 表单
    columns: PropTypes.array,  // 表单
    modular: PropTypes.array,  // 表单
    modularDetail: PropTypes.array,  // 表单
    orderChange: PropTypes.func,  // 表单
    orderCheck: PropTypes.func  // 表单
    orderChange: PropTypes.func  // 表单
  }

  state = {
    editItem: null,
    modularDetail: []
    modularDetail: [],
    funFields: [],
    billFields: [],
    type: '1'
  }

  UNSAFE_componentWillMount() {
    let _modularDetail = []
    let _billFields = []
    if (this.props.modular.length > 0) {
      this.setState({
        modularDetail: this.props.modularDetail.filter(item => item.BID === this.props.modular[0].ID)
      })
      _modularDetail = this.props.modularDetail.filter(item => item.BID === this.props.modular[0].ID)
    }

    let fieldMap = new Map()
    this.props.fields.forEach(_field => {
      if (_field.type === 'text' && !fieldMap.has(_field.field)) {
        _billFields.push(_field)
        fieldMap.set(_field.field, true)
      }
    })
    this.props.columns.forEach(_field => {
      if (_field.type === 'text' && !fieldMap.has(_field.field)) {
        _billFields.push(_field)
        fieldMap.set(_field.field, true)
      }
    })

    this.setState({
      modularDetail: _modularDetail,
      funFields: this.props.fields.filter(field => field.type === 'funcvar'),
      billFields: _billFields
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
@@ -34,34 +58,41 @@
      this.setState({
        modularDetail: _detail
      })

      this.props.form.setFieldsValue({
        ModularCode: nextProps.modular[0].ID,
        ModularDetailCode: _detail[0] ? _detail[0].ModularDetailCode : ''
      })
    }
  }

  edit = (record) => {
    let _detail = this.props.modularDetail.filter(item => item.BID === record.ModularCode)
    let _modularDetailCode = ''
    if (record.TypeCharOne === 'Y' || record.TypeCharOne === 'n') {
      let _detail = this.props.modularDetail.filter(item => item.BID === record.ModularCode)
      let _modularDetailCode = ''

    if (_detail.filter(item => item.ModularDetailCode === record.ModularDetailCode).length > 0) {
      _modularDetailCode = record.ModularDetailCode
      if (_detail.filter(item => item.ModularDetailCode === record.ModularDetailCode).length > 0) {
        _modularDetailCode = record.ModularDetailCode
      }

      this.setState({
        type: '2',
        editItem: record,
        modularDetail: _detail
      })
      this.props.form.setFieldsValue({
        field: record.field,
        TypeCharOne: record.TypeCharOne,
        ModularCode: record.ModularCode,
        ModularDetailCode: _modularDetailCode,
      })
    } else {
      this.setState({
        type: '1',
        editItem: record,
      })
      this.props.form.setFieldsValue({
        field: record.field,
        TypeCharOne: record.TypeCharOne,
        Type: record.Type,
        linkField: record.linkField,
      })
    }

    this.setState({
      editItem: record,
      modularDetail: _detail
    })
    this.props.form.setFieldsValue({
      field: record.field,
      TypeCharOne: record.TypeCharOne,
      ModularCode: record.ModularCode,
      ModularDetailCode: _modularDetailCode,
      errmsg: record.errmsg,
      errorCode: record.errorCode
    })
  }

  voucherChange = (value) => {
@@ -75,12 +106,28 @@
    })
  }

  TypeCharOneChange = (value) => {
    if (value === 'Y' || value === 'n') {
      this.setState({
        type: '2'
      })
    } else {
      this.setState({
        type: '1'
      })
    }
  }

  handleConfirm = () => {
    const { funFields, billFields } = this.state
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.uuid = this.state.editItem ? this.state.editItem.uuid : ''

        let _funField = funFields.filter(item => item.field === values.field)[0]
        values.fieldName = _funField ? _funField.label : ''

        // 一级菜单值为20190203125926873D6029A9C511041719420时TypeCharTwo=TableCode，其他用BillCode
        if (values.ModularCode === '20190203125926873D6029A9C511041719420') {
          values.TypeCharTwo = 'TableCode'
@@ -96,22 +143,17 @@
        }
        values.billType = billType[values.TypeCharOne]

        // 设置凭证类型中文名
        let ModularCode = this.props.modular.filter(item => item.ID === values.ModularCode)[0]
        values.ModularCodeName = ModularCode.NameNO
        if (values.TypeCharOne === 'Y' || values.TypeCharOne === 'n') {
          // 设置凭证类型中文名
          let ModularCode = this.props.modular.filter(item => item.ID === values.ModularCode)[0]
          values.ModularCodeName = ModularCode.NameNO

        // 设置流水号位数
        let _detail = this.state.modularDetail.filter(item => item.ModularDetailCode === values.ModularDetailCode)[0]
        values.Type = _detail.Type
        let _vaild = this.props.orderCheck(values)

        if (!_vaild) {
          notification.warning({
            top: 92,
            message: '字段值不可重复',
            duration: 10
          })
          return
          // 设置流水号位数
          let _detail = this.state.modularDetail.filter(item => item.ModularDetailCode === values.ModularDetailCode)[0]
          values.Type = _detail.Type
        } else {
          let _billField = billFields.filter(item => item.field === values.linkField)[0]
          values.linkFieldName = _billField ? _billField.label : ''
        }

        this.props.orderChange(values)
@@ -120,7 +162,6 @@
        })
        this.props.form.setFieldsValue({
          field: '',
          errmsg: ''
        })
      }
    })
@@ -128,6 +169,7 @@

  render() {
    const { getFieldDecorator } = this.props.form
    const { type } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -138,34 +180,35 @@
        sm: { span: 14 }
      }
    }

    return (
      <Form {...formItemLayout} className="verify-form">
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item label={'字段'}>
          <Col span={5}>
            <Form.Item label={'函数变量'}>
              {getFieldDecorator('field', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '字段!'
                  },
                  {
                    pattern: /^[0-9a-zA-Z_]*$/,
                    message: '名称只允许包含数字、字母和下划线，且以指定字符开始。'
                  },
                  {
                    max: 50,
                    message: '名称不超过50个字符。'
                    message: this.props.dict['form.required.input'] + '函数变量!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" />)}
              })(
                <Select>
                  {this.state.funFields.map(option =>
                    <Select.Option id={option.uuid} key={option.uuid} value={option.field}>
                      {option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
          <Col span={5}>
            <Form.Item label={'类型'}>
              {getFieldDecorator('TypeCharOne', {
                initialValue: 'Y',
                initialValue: 'Lp',
                rules: [
                  {
                    required: true,
@@ -173,7 +216,7 @@
                  }
                ]
              })(
                <Select>
                <Select onChange={(value) => {this.TypeCharOneChange(value)}}>
                  <Select.Option value="Y"> 单号 </Select.Option>
                  <Select.Option value="n"> 编码 </Select.Option>
                  <Select.Option value="Lp"> 行号 </Select.Option>
@@ -182,7 +225,41 @@
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
          {type === '1' ? <Col span={5}>
            <Form.Item label={'关联字段'}>
              {getFieldDecorator('linkField', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '关联字段!'
                  }
                ]
              })(
                <Select>
                  {this.state.billFields.map(option =>
                    <Select.Option id={option.uuid} key={option.uuid} value={option.field}>
                      {option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          {type === '1' ? <Col span={5}>
            <Form.Item label={'位数'}>
              {getFieldDecorator('Type', {
                initialValue: 4,
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '位数!'
                  }
                ]
              })(<InputNumber min={1} max={10} precision={0} />)}
            </Form.Item>
          </Col> : null}
          {type === '2' ? <Col span={5}>
            <Form.Item label={'凭证类型'}>
              {getFieldDecorator('ModularCode', {
                initialValue: this.props.modular[0] ? this.props.modular[0].ID : '',
@@ -206,8 +283,8 @@
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
          </Col> : null}
          {type === '2' ? <Col span={5}>
            <Form.Item label={'凭证标识'}>
              {getFieldDecorator('ModularDetailCode', {
                initialValue: this.state.modularDetail[0] ? this.state.modularDetail[0].ModularDetailCode : '',
@@ -230,44 +307,9 @@
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'提示信息'}>
              {getFieldDecorator('errmsg', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '提示信息!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'报错编码'}>
              {getFieldDecorator('errorCode', {
                initialValue: 'E',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '报错编码!'
                  }
                ]
              })(
                <Select>
                  <Select.Option value="E"> E </Select.Option>
                  <Select.Option value="N"> N </Select.Option>
                  <Select.Option value="F"> F </Select.Option>
                  <Select.Option value="NM"> NM </Select.Option>
                  <Select.Option value="S"> S </Select.Option>
                  <Select.Option value="-1"> -1 </Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={2}>
            <Button onClick={this.handleConfirm} type="primary" className="add-row">
          </Col> : null}
          <Col span={4} className="add">
            <Button onClick={this.handleConfirm} type="primary">
              确定
            </Button>
          </Col>