2019-12-18

king

2019-12-18 1a14ff6035932eadfb6ef7970e3adb24b4e158a6

 src/templates/modalconfig/settingform/index.jsx

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

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    data: PropTypes.object
    dict: PropTypes.object,  // 字典项
    config: PropTypes.object // 表单配置信息
  }

  state = {
    fields: null
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props
    let fields = []

    if (config.groups.length > 0) {
      config.groups.forEach(group => {
        group.sublist.forEach(item => {
          if (item.field && (item.type === 'text' || item.type === 'number')) {
            fields.push(item)
          }
        })
      })
    } else if (config.fields.length > 0) {
      config.fields.forEach(f => {
        if (f.field && (f.type === 'text' || f.type === 'number')) {
          fields.push(f)
        }
      })
    }
    console.log(fields)
    this.setState({
      fields: fields
    })
  }

  handleConfirm = () => {
@@ -23,7 +52,8 @@
  }

  render() {
    const { data } = this.props
    const { config, dict } = this.props
    const { fields } = this.state
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
@@ -36,27 +66,73 @@
        sm: { span: 16 }
      }
    }

    return (
      <Form {...formItemLayout} className="ant-advanced-search-form modal-setting-form">
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="标题">
              {getFieldDecorator('title', {
                initialValue: data.title
                initialValue: config.setting.title
              })(<Input placeholder="" autoComplete="off"/>)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="宽度">
              {getFieldDecorator('width', {
                initialValue: data.width
              })(<InputNumber min={30} max={90} precision={0} />)}
                initialValue: config.setting.width
              })(<InputNumber min={10} max={90} precision={0} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="焦点">
              {getFieldDecorator('focus', {
                initialValue: config.setting.focus || ''
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  <Select.Option value="">
                    {dict['header.form.empty']}
                  </Select.Option>
                  {fields.map(option =>
                    <Select.Option id={option.uuid} title={option.label} key={option.uuid} value={option.field}>
                      {option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="完成后">
              {getFieldDecorator('finish', {
                initialValue: config.setting.finish || 'close'
              })(
                <Radio.Group>
                  <Radio value="close">关闭</Radio>
                  <Radio value="unclose">不关闭</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="点击空白处">
              {getFieldDecorator('clickouter', {
                initialValue: config.setting.clickouter || 'unclose'
              })(
                <Radio.Group>
                  <Radio value="close">关闭</Radio>
                  <Radio value="unclose">不关闭</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="列数">
              {getFieldDecorator('cols', {
                initialValue: data.cols
                initialValue: config.setting.cols
              })(
                <Radio.Group>
                  <Radio value="1">1列</Radio>
@@ -69,7 +145,7 @@
          <Col span={12}>
            <Form.Item label="挂载对象">
              {getFieldDecorator('container', {
                initialValue: data.container || 'view'
                initialValue: config.setting.container || 'view'
              })(
                <Radio.Group>
                  <Radio value="view">页面</Radio>