2023-03-02

king

2023-03-02 d1f19b794216b37417e114b71c1cd7a2ac3d7748

 src/templates/modalconfig/settingform/index.jsx

@@ -1,43 +1,58 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, InputNumber, Select } from 'antd'
import { formRule } from '@/utils/option.js'
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'

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,     // 字典项
    config: PropTypes.object,   // 表单配置信息
    isSubTab: PropTypes.bool,   // 是否为子标签
    inputSubmit: PropTypes.any  // 回车提交事件
  }

  state = {
    fields: null
    fields: null,
    display: this.props.config.setting.display || 'modal',
    placement: this.props.config.setting.placement || 'right',
    appType: sessionStorage.getItem('appType'),
    viewType: sessionStorage.getItem('editMenuType') || '',
    dialogInput: false
  }

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

    if (config.groups.length > 0) {
      config.groups.forEach(group => {
        group.sublist.forEach(item => {
          if (item.field && (item.type === 'text' || item.type === 'number') && item.hidden !== 'true' && item.readonly !== 'true') {
            fields.push(item)
          }
        })
      })
    } else if (config.fields.length > 0) {
      config.fields.forEach(f => {
        if (f.field && (f.type === 'text' || f.type === 'number') && f.hidden !== 'true' && f.readonly !== 'true') {
          fields.push(f)
    config.fields.forEach(f => {
      if (f.field && ['select', 'link', 'text', 'number', 'textarea'].includes(f.type) && f.hidden !== 'true' && f.readonly !== 'true') {
        fields.push(f)
      }
      if (f.field && f.hidden !== 'true' && f.readonly !== 'true') {
        if (dialogInput === null) {
          dialogInput = ['text', 'number'].includes(f.type)
        } else {
          dialogInput = false
        }
      })
      }
    })

    let _display = display
    if (appType === 'mob' && display === 'modal') {
      _display = 'drawer'
    } else if (appType !== 'mob' && display === 'dialog') {
      _display = 'modal'
    }

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

@@ -64,8 +79,8 @@
  }

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

    const formItemLayout = {
@@ -80,9 +95,9 @@
    }

    return (
      <Form {...formItemLayout} className="ant-advanced-search-form modal-setting-form">
      <Form {...formItemLayout} className="form-setting-wrap">
        <Row gutter={24}>
          <Col span={12}>
          {/* <Col span={12}>
            <Form.Item label="标题">
              {getFieldDecorator('title', {
                initialValue: config.setting.title,
@@ -94,26 +109,61 @@
                ]
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="宽度">
              {getFieldDecorator('width', {
                initialValue: config.setting.width
              })(<InputNumber min={10} max={90} precision={0} />)}
          </Col> */}
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="可选择表单的显示形式，注：标签打印按钮，暂不支持以抽屉显示表单。">
                <QuestionCircleOutlined className="mk-form-tip" />
                显示方式
              </Tooltip>
            }>
              {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="drawer">抽屉</Radio>
                  <Radio value="prompt">是否框</Radio>
                  <Radio value="exec">直接执行</Radio>
                  {appType !== 'mob' ? null : <Radio value="dialog">弹窗</Radio>}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="焦点">
          {display === 'drawer' || display === 'modal' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="小于100时为百分率，大于100时为绝对值。">
                <QuestionCircleOutlined className="mk-form-tip" />
                {display === 'drawer' && (placement === 'top' || placement === 'bottom') ? '高度' : '宽度'}
              </Tooltip>
            }>
              {getFieldDecorator('width', {
                initialValue: config.setting.width || (appType !== 'mob' ? 60 : 100)
              })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col> : null}
          {display === 'dialog' && appType === 'mob' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="小于100时为百分率，大于100时为绝对值。空值时宽度自适应。">
                <QuestionCircleOutlined className="mk-form-tip" />
                宽度
              </Tooltip>
            }>
              {getFieldDecorator('width', {
                initialValue: config.setting.width || ''
              })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col> : null}
          {['dialog', 'drawer', 'modal'].includes(display) ? <Col span={12}>
            <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}
@@ -122,22 +172,78 @@
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="列数">
              {getFieldDecorator('cols', {
                initialValue: config.setting.cols || '2'
          </Col> : null}
          {['drawer', 'modal'].includes(display) ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="执行失败时需要聚焦的表单。">
                <QuestionCircleOutlined className="mk-form-tip" />
                失败焦点
              </Tooltip>
            }>
              {getFieldDecorator('errFocus', {
                initialValue: config.setting.errFocus || ''
              })(
                <Select>
                  <Select.Option value="1">1列</Select.Option>
                  <Select.Option value="2">2列</Select.Option>
                  <Select.Option value="3">3列</Select.Option>
                  <Select.Option value="4">4列</Select.Option>
                <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>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
          </Col> : null}
          {appType === 'mob' && display === 'drawer' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="表单元素与左侧边界的距离。">
                <QuestionCircleOutlined className="mk-form-tip" />
                左边距
              </Tooltip>
            }>
              {getFieldDecorator('paddingLeft', {
                initialValue: config.setting.paddingLeft || '10px'
              })(
                <StyleInput options={['px', '%']} />
              )}
            </Form.Item>
          </Col> : null}
          {appType === 'mob' && display === 'drawer' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="表单元素与右侧边界的距离。">
                <QuestionCircleOutlined className="mk-form-tip" />
                右边距
              </Tooltip>
            }>
              {getFieldDecorator('paddingRight', {
                initialValue: config.setting.paddingRight || '10px'
              })(
                <StyleInput options={['px', '%']} />
              )}
            </Form.Item>
          </Col> : null}
          {appType === 'mob' && display === 'drawer' ? <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' && display === 'drawer' ? <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}
          {['drawer', 'modal'].includes(display) ? <Col span={12}>
            <Form.Item label="完成后">
              {getFieldDecorator('finish', {
                initialValue: config.setting.finish || 'close'
@@ -148,20 +254,81 @@
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="点击空白处">
              {getFieldDecorator('clickouter', {
                initialValue: config.setting.clickouter || 'unclose'
          </Col> : null}
          {['dialog', 'drawer', 'modal'].includes(display) ? <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="close">关闭</Radio>
                  <Radio value="unclose">不关闭</Radio>
                  <Radio value="true">缓存</Radio>
                  <Radio value="false">实时</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {!this.props.isSubTab ? <Col span={12}>
          </Col> : null}
          {display === 'drawer' ? <Col span={12}>
            <Form.Item label="弹出方向">
              {getFieldDecorator('placement', {
                initialValue: placement
              })(
                <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({placement: e.target.value})}>
                  <Radio value="right">右侧</Radio>
                  <Radio value="left">左侧</Radio>
                  <Radio value="top">上侧</Radio>
                  <Radio value="bottom">下侧</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {appType !== 'mob' && (display === 'drawer' || display === 'modal') ? <Col span={12}>
            <Form.Item label="表单排列">
              {getFieldDecorator('align', {
                initialValue: config.setting.align || 'left_right'
              })(
                <Radio.Group>
                  <Radio value="left_right">左右</Radio>
                  <Radio value="up_down">上下</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {appType !== 'mob' && (display === 'drawer' || display === 'modal') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="正常间隙会预留出报错信息的位置，防止表单位置发生变化。">
                <QuestionCircleOutlined className="mk-form-tip" />
                竖向间隙
              </Tooltip>
            }>
              {getFieldDecorator('verticalSpace', {
                initialValue: config.setting.verticalSpace || 'normal'
              })(
                <Radio.Group>
                  <Radio value="normal">正常</Radio>
                  <Radio value="middle">中</Radio>
                  <Radio value="small">小</Radio>
                </Radio.Group>
              )}
            </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}
          {!this.props.isSubTab && !appType && this.state.viewType !== 'popview' && display === 'modal' ? <Col span={12}>
            <Form.Item label="挂载对象">
              {getFieldDecorator('container', {
                initialValue: config.setting.container || 'tab'
@@ -173,18 +340,35 @@
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="显示方式">
              {getFieldDecorator('display', {
                initialValue: config.setting.display || 'modal'
          {['dialog', 'drawer', 'modal'].includes(display) ? <Col span={12}>
            <Form.Item label="点击蒙层">
              {getFieldDecorator('clickouter', {
                initialValue: config.setting.clickouter || 'unclose'
              })(
                <Radio.Group>
                  <Radio value="modal">模态框</Radio>
                  <Radio value="prompt">是否框</Radio>
                  <Radio value="unclose">不关闭</Radio>
                  <Radio value="close">关闭</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          </Col> : null}
          {!appType && display === 'modal' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="是否可拖拽移动模态框。">
                <QuestionCircleOutlined className="mk-form-tip" />
                可移动
              </Tooltip>
            }>
              {getFieldDecorator('moveable', {
                initialValue: config.setting.moveable || 'false'
              })(
                <Radio.Group>
                  <Radio value="false">否</Radio>
                  <Radio value="true">是</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )