2021-11-12

king

2021-11-12 0c84df247914f893ef5e41d57a422e10a2dc814c

 src/templates/modalconfig/settingform/index.jsx

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

import { formRule } from '@/utils/option.js'
import StyleInput from '@/menu/stylecontroller/styleInput'
import './index.scss'
// import './index.scss'

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,     // 字典项
    config: PropTypes.object,   // 表单配置信息
    isSubTab: PropTypes.bool,   // 是否为子标签
    inputSubmit: PropTypes.any  // 回车提交事件
@@ -25,7 +26,7 @@
    let fields = []

    config.fields.forEach(f => {
      if (f.field && ['select', 'link', 'text', 'number'].includes(f.type) && f.hidden !== 'true' && f.readonly !== 'true') {
      if (f.field && ['select', 'link', 'text', 'number', 'textarea'].includes(f.type) && f.hidden !== 'true' && f.readonly !== 'true') {
        fields.push(f)
      }
    })
@@ -64,7 +65,7 @@
  }

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

@@ -80,7 +81,7 @@
    }

    return (
      <Form {...formItemLayout} className="ant-advanced-search-form modal-setting-form">
      <Form {...formItemLayout}>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="标题">
@@ -105,7 +106,7 @@
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="宽度小于100时为百分率，大于100时为绝对值。">
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                宽度
              </Tooltip>
            }>
@@ -115,19 +116,41 @@
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="焦点">
            <Form.Item label="初始焦点">
              {getFieldDecorator('focus', {
                initialValue: config.setting.focus || ''
              })(
                <Select
                  showSearch
                  allowClear
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  <Select.Option value="">
                    {dict['model.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={
              <Tooltip placement="topLeft" title="执行失败时需要聚焦的表单。">
                <QuestionCircleOutlined className="mk-form-tip" />
                失败焦点
              </Tooltip>
            }>
              {getFieldDecorator('errFocus', {
                initialValue: config.setting.errFocus || ''
              })(
                <Select
                  showSearch
                  allowClear
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {fields.map(option =>
                    <Select.Option key={option.uuid} value={option.uuid}>
                      {option.label}
                    </Select.Option>
                  )}
@@ -159,7 +182,7 @@
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
          {appType !== 'mob' ? <Col span={12}>
            <Form.Item label="点击空白处">
              {getFieldDecorator('clickouter', {
                initialValue: config.setting.clickouter || 'unclose'
@@ -170,9 +193,31 @@
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="需要通过数据源查询的选项，是否使用缓存。">
                <QuestionCircleOutlined className="mk-form-tip" />
                选项查询
              </Tooltip>
            }>
              {getFieldDecorator('cache', {
                initialValue: config.setting.cache || 'true'
              })(
                <Radio.Group>
                  <Radio value="true">缓存</Radio>
                  <Radio value="false">实时</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="显示方式">
            <Form.Item label={
              <Tooltip placement="topLeft" title="打印按钮中无效。">
                <QuestionCircleOutlined className="mk-form-tip" />
                显示方式
              </Tooltip>
            }>
              {getFieldDecorator('display', {
                initialValue: display || 'modal'
              })(
@@ -210,6 +255,18 @@
              )}
            </Form.Item>
          </Col> : null}
          {display === 'drawer' && appType !== 'mob' ? <Col span={12}>
            <Form.Item label="表单类型">
              {getFieldDecorator('formType', {
                initialValue: config.setting.formType || 'edit'
              })(
                <Radio.Group style={{whiteSpace: 'nowrap'}}>
                  <Radio value="edit">编辑</Radio>
                  <Radio value="check">查看</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label="左边距">
              {getFieldDecorator('paddingLeft', {
@@ -228,6 +285,24 @@
              )}
            </Form.Item>
          </Col> : null}
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label="按钮名称">
              {getFieldDecorator('btnName', {
                initialValue: config.setting.btnName || '确定'
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col> : null}
          {appType === 'mob' ? <Col span={12}>
            <Form.Item label="按钮位置">
              {getFieldDecorator('btnPosition', {
                initialValue: config.setting.btnPosition || 'bottom'
              })(
                <Radio.Group style={{whiteSpace: 'nowrap'}}>
                  <Radio value="bottom">下侧</Radio>
                  <Radio value="top">上侧</Radio>
                </Radio.Group>)}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )