2022-10-17

king

2022-10-17 e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5

 src/menu/components/share/normalform/index.jsx

@@ -1,14 +1,28 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Tooltip, Icon, InputNumber, Select, Radio, Cascader } from 'antd'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Tooltip, InputNumber, Select, Radio, Cascader } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable'))

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,      // 字典项
    formlist: PropTypes.array,   // 表单
    inputSubmit: PropTypes.func  // 回车事件
  }

  state = {
    formlist: [],
  }

  UNSAFE_componentWillMount() {
    const { formlist } = this.props

    this.setState({formlist: fromJS(formlist).toJS()})
  }

  handleConfirm = () => {
@@ -32,141 +46,81 @@
    }
  }

  getFields() {
    const { formlist } = this.props
    const { getFieldDecorator } = this.props.form
    const fields = []
  optionChange = (item, val) => {
    if (item.key === 'click') {
      this.setState({formlist: fromJS(this.state.formlist).toJS().map(cell => {
        if (!['menu', 'menuType', 'open', 'joint', 'menus'].includes(cell.key)) return cell
        
        if (val === 'menu') {
          cell.hidden = !['menu', 'open', 'joint'].includes(cell.key)
        } else if (val === 'menus') {
          cell.hidden = !['menuType', 'open', 'joint', 'menus'].includes(cell.key)
        } else {
          cell.hidden = true
        }

    if (!formlist) return []
        return cell
      })})
    }
  }

  getFields() {
    const { formlist } = this.state
    const { getFieldDecorator } = this.props.form

    const fields = []

    formlist.forEach((item, index) => {
      if (item.hidden || item.forbid) return
      

      let content = null
      let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> : item.label
    
      if (item.type === 'text') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col>
        )
        content = (<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit}/>)
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Select mode={item.multi ? 'multiple' : ''}>
                  {item.options.map((option, index) =>
                    <Select.Option key={index} value={option.field || option.value}>
                      {option.label || option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
        content = (<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.handleSubmit}/>)
      } else if (item.type === 'select') {
        content = (<Select mode={item.multi ? 'multiple' : ''}>
          {item.options.map((option, index) =>
            <Select.Option key={index} value={option.field || option.value}>
              {option.label || option.text}
            </Select.Option>
          )}
        </Select>)
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Radio.Group disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}>
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
                    )
                  })}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
        content = (<Radio.Group onChange={(e) => this.optionChange(item, e.target.value)}>
          {item.options.map(option => {
            return (
              <Radio key={option.value} value={option.field || option.value}>{option.label || option.text}</Radio>
            )
          })}
        </Radio.Group>)
      } else if (item.type === 'cascader') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || [],
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Cascader options={item.options} placeholder=""/>
              )}
            </Form.Item>
          </Col>
        )
        content = (<Cascader options={item.options} placeholder=""/>)
      } else if (item.type === 'table') {
        content = (<MKTable columns={item.columns || []} actions={item.actions || []}/>)
      }

      if (!content) return

      fields.push(
        <Col span={item.span || 12} key={index}>
          <Form.Item label={label}>
            {getFieldDecorator(item.key, {
              initialValue: item.initVal,
              rules: [
                {
                  required: item.required,
                  message: (item.type === 'select' || item.type === 'cascader' ?  '请选择' : '请输入') + item.label + '!'
                }
              ]
            })(content)}
          </Form.Item>
        </Col>
      )
    })
    
    return fields
  }

@@ -183,7 +137,7 @@
    }

    return (
      <div className="model-menu-normal-form">
      <div className="plot-base-wrap">
        <Form {...formItemLayout}><Row gutter={16}>{this.getFields()}</Row></Form>
      </div>
    )