2019-12-10

king

2019-12-10 88f02c2c018fb1e5c171bd4975dac534c584c3ba

 src/templates/modalconfig/modalform/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, Icon, Radio, notification } from 'antd'
import { Form, Row, Col, Input, Select, Icon, Radio, notification, InputNumber } from 'antd'
import EditTable from '../editable'
import './index.scss'

@@ -19,17 +19,57 @@
    formlist: null,
    dateoptions: {
      date: [{value: '', text: '空'}, {value: '0', text: '当天'}, {value: 1, text: '前一天'}, {value: 3, text: '前三天'}, {value: 7, text: '前七天'}, {value: 30, text: '前30天'}],
      dateweek: [{value: '', text: '空'}, {value: '0', text: '本周'}, {value: 1, text: '上周'}, {value: 3, text: '前三周'}, {value: 7, text: '前七周'}],
      datemonth: [{value: '', text: '空'}, {value: '0', text: '本月'}, {value: 1, text: '上月'}, {value: 3, text: '前三月'}, {value: 7, text: '前七月'}],
      daterange: [{value: '', text: '空'}, {value: '0', text: '今天'}, {value: 1, text: '昨天'}, {value: 3, text: '前三天'}, {value: 7, text: '前七天'}, {value: 30, text: '前30天'}],
      datemonth: [{value: '', text: '空'}, {value: '0', text: '本月'}, {value: 1, text: '上月'}, {value: 3, text: '前三月'}, {value: 6, text: '前六月'}],
      datetime: [{value: '', text: '空'}, {value: '0', text: '现在'}, {value: 1, text: '昨天'}, {value: 3, text: '前三天'}, {value: 7, text: '前七天'}, {value: 30, text: '前30天'}],
    }
  }

  UNSAFE_componentWillMount () {
    let formlist = JSON.parse(JSON.stringify(this.props.formlist))

    let type = formlist.filter(cell => cell.key === 'type')[0].initVal
    let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
    let _options = ['label', 'field', 'initval', 'type', 'readonly'] // 默认显示项

    if ((type === 'select' || type === 'link') && resourceType === '0') { // 选择类型、自定义资源
      _options = [..._options, 'resourceType', 'setAll', 'options']
    } else if ((type === 'select' || type === 'link') && resourceType === '1') { // 选择类型、数据源
      _options = [..._options, 'resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']
    } else if (type === 'number') {
      _options = [..._options, 'decimal']
    }

    if (type === 'link') { // 关联类型、增加关联字段
      _options = [..._options, 'linkField']
    }
    
    this.setState({
      openType: type,
      resourceType: resourceType,
      formlist: formlist.map(form => {
        if (this.state.dateoptions.hasOwnProperty(type) && form.key === 'initval') {
          form.options = this.state.dateoptions[type]
          form.type = 'select'
        } else if (type === 'number' && form.key === 'initval') {
          form.type = 'number'
          form.initVal = 0
        }
        form.hidden = !_options.includes(form.key)
        return form
      })
    })
  }

  openTypeChange = (key, value) => {
    if (key === 'type') {
      let _options = ['label', 'field', 'initval', 'type']
      if (value === 'select' || value === 'link') { // 切换类型为选择或关联时，来源默认为自定义
      let _options = ['label', 'field', 'initval', 'type', 'readonly']

      if ((value === 'select' || value === 'link') && this.state.resourceType === '0') { // 选择类型、自定义资源
        _options = [..._options, 'resourceType', 'setAll', 'options']
      } else if ((value === 'select' || value === 'link') && this.state.resourceType === '1') { // 选择类型、数据源
        _options = [..._options, 'resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']
      } else if (value === 'number') {
        _options = [..._options, 'decimal']
      }
      
      if (value === 'link') {
@@ -38,17 +78,20 @@
      
      this.setState({
        openType: value,
        resourceType: '0',
        formlist: this.state.formlist.map(form => {
          form.hidden = !_options.includes(form.key)
          if (form.key === 'initval') {
            if (this.state.dateoptions.hasOwnProperty(value)) {
              form.options = this.state.dateoptions[value]
              form.type = 'select'
              form.initVal = ''
            } else if (value === 'number') {
              form.type = 'number'
              form.initVal = 0
            } else {
              form.type = 'text'
              form.initVal = ''
            }
            form.initVal = ''
            form.hidden = true
          }
          return form
@@ -70,7 +113,7 @@
    const { openType } = this.state
    let value = e.target.value
    if (key === 'resourceType') {
      let _options = ['label', 'field', 'initval', 'type', 'resourceType', 'setAll']
      let _options = ['label', 'field', 'initval', 'type', 'resourceType', 'setAll', 'readonly']
      if (value === '0') {
        _options = [..._options, 'options']
      } else if (value === '1') {
@@ -113,6 +156,40 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        if (item.key === 'decimal') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.label}>
                {getFieldDecorator(item.key, {
                  initialValue: item.initVal || 0,
                  rules: [
                    {
                      required: !!item.required,
                      message: this.props.dict['form.required.input'] + item.label + '!'
                    }
                  ]
                })(<InputNumber min={0} max={18} precision={0} />)}
              </Form.Item>
            </Col>
          )
        } else {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.label}>
                {getFieldDecorator(item.key, {
                  initialValue: item.initVal || 0,
                  rules: [
                    {
                      required: !!item.required,
                      message: this.props.dict['form.required.input'] + item.label + '!'
                    }
                  ]
                })(<InputNumber />)}
              </Form.Item>
            </Col>
          )
        }
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
@@ -130,7 +207,7 @@
                  showSearch
                  filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.openTypeChange(item.key, value)}}
                  getPopupContainer={() => document.getElementById('commontable-search-form-box')}
                  getPopupContainer={() => document.getElementById('modal-fields-form-box')}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.value} title={option.text} key={option.value} value={option.value}>
@@ -237,39 +314,6 @@
    })
  }

  resetForm = (formlist) => {
    if (!formlist) return
    let type = formlist.filter(cell => cell.key === 'type')[0].initVal
    let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
    let _options = ['label', 'field', 'initval', 'type'] // 默认显示项
    if ((type === 'select' || type === 'link') && resourceType === '0') { // 选择类型、自定义资源
      _options = [..._options, 'resourceType', 'setAll', 'options']
    } else if ((type === 'select' || type === 'link') && resourceType === '1') { // 选择类型、数据源
      _options = [..._options, 'resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']
    }

    if (type === 'link') { // 关联类型、增加关联字段
      _options = [..._options, 'linkField']
    }
    
    this.setState({
      openType: type,
      resourceType: resourceType,
      formlist: formlist.map(form => {
        if (this.state.dateoptions.hasOwnProperty(type) && form.key === 'initval') {
          form.options = this.state.dateoptions[type]
          form.type = 'select'
        }
        form.hidden = !_options.includes(form.key)
        return form
      })
    })
  }

  UNSAFE_componentWillMount () {
    this.resetForm(this.props.formlist)
  }

  render() {
    const formItemLayout = {
      labelCol: {
@@ -282,7 +326,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form commontable-search-form" id="commontable-search-form-box">
      <Form {...formItemLayout} className="ant-advanced-search-form modal-fields-form" id="modal-fields-form-box">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )