2021-07-28

king

2021-07-28 137fb8ea6af2789b3238b22bac31d80bced41dfe

 src/templates/modalconfig/settingform/index.jsx

@@ -1,7 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, InputNumber, Select } from 'antd'
import { Form, Row, Col, Input, Radio, InputNumber, Select, Tooltip, Icon } from 'antd'
import { formRule } from '@/utils/option.js'
import StyleInput from '@/menu/stylecontroller/styleInput'
import './index.scss'

class SettingForm extends Component {
@@ -14,11 +15,13 @@

  state = {
    fields: null,
    display: this.props.config.setting.display,
    appType: sessionStorage.getItem('appType')
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props
    const { appType, display } = this.state
    let fields = []

    config.fields.forEach(f => {
@@ -27,8 +30,14 @@
      }
    })

    let _display = display 
    if (appType === 'mob' && display !== 'prompt' && display !== 'drawer') {
      _display = 'drawer'
    }

    this.setState({
      fields: fields
      fields: fields,
      display: _display
    })
  }

@@ -56,7 +65,7 @@

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

    const formItemLayout = {
@@ -86,13 +95,25 @@
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="宽度">
          {appType !== 'mob' ? <Col span={12}>
            <Form.Item label="宽度（%）">
              {getFieldDecorator('width', {
                initialValue: config.setting.width
              })(<InputNumber min={10} max={90} precision={0} />)}
              })(<InputNumber min={10} max={90} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col>
          </Col> : null}
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="宽度小于100时为百分率，大于100时为绝对值。">
                <Icon type="question-circle" />
                宽度
              </Tooltip>
            }>
              {getFieldDecorator('width', {
                initialValue: config.setting.width
              })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="焦点">
              {getFieldDecorator('focus', {
@@ -114,7 +135,7 @@
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
          {appType !== 'mob' ? <Col span={12}>
            <Form.Item label="表单排列">
              {getFieldDecorator('align', {
                initialValue: config.setting.align || 'left_right'
@@ -125,7 +146,7 @@
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="完成后">
              {getFieldDecorator('finish', {
@@ -150,7 +171,20 @@
              )}
            </Form.Item>
          </Col>
          {!this.props.isSubTab && appType !== 'pc' ? <Col span={12}>
          <Col span={12}>
            <Form.Item label="显示方式">
              {getFieldDecorator('display', {
                initialValue: display || 'modal'
              })(
                <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({display: e.target.value})}>
                  {appType !== 'mob' ? <Radio value="modal">模态框</Radio> : null}
                  <Radio value="prompt">是否框</Radio>
                  <Radio value="drawer">抽屉</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {!this.props.isSubTab && !appType && display === 'modal' ? <Col span={12}>
            <Form.Item label="挂载对象">
              {getFieldDecorator('container', {
                initialValue: config.setting.container || 'tab'
@@ -162,18 +196,38 @@
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="显示方式">
              {getFieldDecorator('display', {
                initialValue: config.setting.display || 'modal'
          {display === 'drawer' ? <Col span={12}>
            <Form.Item label="抽屉方向">
              {getFieldDecorator('placement', {
                initialValue: config.setting.placement || 'right'
              })(
                <Radio.Group>
                  <Radio value="modal">模态框</Radio>
                  <Radio value="prompt">是否框</Radio>
                <Radio.Group style={{whiteSpace: 'nowrap'}}>
                  <Radio value="right">右侧</Radio>
                  <Radio value="left">左侧</Radio>
                  <Radio value="top">上侧</Radio>
                  <Radio value="bottom">下侧</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          </Col> : null}
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label="左边距">
              {getFieldDecorator('paddingLeft', {
                initialValue: config.setting.paddingLeft || '10px'
              })(
                <StyleInput options={['px', '%']} />
              )}
            </Form.Item>
          </Col> : null}
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label="右边距">
              {getFieldDecorator('paddingRight', {
                initialValue: config.setting.paddingRight || '10px'
              })(
                <StyleInput options={['px', '%']} />
              )}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )