2021-12-22

king

2021-12-22 5223edbcccfed84a33a706e5637ee65a61f377aa

 src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx

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

import Api from '@/api'
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import CodeMirror from '@/templates/zshare/codemirror'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor'))
const { TextArea } = Input

class SettingForm extends Component {
@@ -26,6 +29,7 @@
    interType: 'system',
    procMode: 'script',
    requestMode: 'system',
    tableType: '',
    funcTooltip: '',
    funcRules: []
  }
@@ -62,6 +66,7 @@
      interType: setting.interType || 'system',
      procMode: setting.procMode || 'script',
      requestMode: setting.requestMode || 'system',
      tableType: setting.tableType,
      funcTooltip: tooltip,
      funcRules: rules
    })
@@ -190,7 +195,7 @@
  render() {
    const { setting, dict, menu, config, columns } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, funcRules, funcTooltip, procMode, requestMode } = this.state
    const { interType, funcRules, funcTooltip, procMode, requestMode, tableType } = this.state

    const formItemLayout = {
      labelCol: {
@@ -229,7 +234,7 @@
                {getFieldDecorator('tableType', {
                  initialValue: setting.tableType
                })(
                  <Radio.Group>
                  <Radio.Group onChange={(e) => this.setState({tableType: e.target.value})}>
                    <Radio value="">不可选</Radio>
                    <Radio value="radio">单选</Radio>
                    <Radio value="checkbox">多选</Radio>
@@ -293,7 +298,7 @@
            {interType === 'custom' && procMode === 'inner' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={funcTooltip}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  前置函数
                </Tooltip>
              }>
@@ -329,7 +334,7 @@
            {interType === 'outer' || interType === 'custom' ? <Col className="data-source" span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="正式系统所使用的的接口地址。">
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  正式地址
                </Tooltip>
              }>
@@ -375,7 +380,7 @@
            {interType === 'inner' || (interType === 'custom' && requestMode === 'inner') ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={funcTooltip}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  内部函数
                </Tooltip>
              }>
@@ -414,7 +419,7 @@
            {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
              <Form.Item help={'数据ID：' + menu.MenuID} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={
                <Tooltip placement="topLeft" title={`使用系统函数时，需填写数据源。注：数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 ''；查询替换符 $select@ -> /* 或 ''、 @select$ -> */ 或 ''；统计替换符 $sum@ -> /* 或 ''、 @sum$ -> */ 或 ''。`}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  数据源
                </Tooltip>
              }>
@@ -426,7 +431,7 @@
            {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  查询类型
                </Tooltip>
              }>
@@ -514,7 +519,7 @@
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'同步执行：外部接口调用成功后再请求数据；异步执行：外部接口调用与请求数据同时进行。'}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  执行方式
                </Tooltip>
              }>
@@ -530,7 +535,7 @@
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'如果自定义接口不支持跨域请求，会通过当前系统转发。'}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  跨域请求
                </Tooltip>
              }>
@@ -590,7 +595,7 @@
            {config.Template === 'CommonTable' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'含有合并列或表格出现横向滚动时会显示异常，请慎用！'}>
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  表头固定
                </Tooltip>
              }>
@@ -616,8 +621,114 @@
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'表格的内边距，从大到小依次递减。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
                  表格大小
                </Tooltip>
              }>
                {getFieldDecorator('size', {
                  initialValue: setting.size || 'middle'
                })(
                <Radio.Group>
                  <Radio value="default">大</Radio>
                  <Radio value="middle">中</Radio>
                  <Radio value="small">小</Radio>
                  {/* <Radio value="mini">微</Radio> */}
                </Radio.Group>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="事务">
                {getFieldDecorator('transaction', {
                  initialValue: setting.transaction || 'false'
                })(
                <Radio.Group>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="使用急速模式时，表格中的标记、双击事件、格式化、行合并、前缀、后缀、字段透视等效果将无效，且数据都会以文本格式显示。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  模式
                </Tooltip>
              }>
                {getFieldDecorator('tableMode', {
                  initialValue: setting.tableMode || 'compatible'
                })(
                <Radio.Group>
                  <Radio value="compatible">兼容</Radio>
                  <Radio value="fast">急速</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="数据加载时，是否显示加载中的遮罩。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  遮罩
                </Tooltip>
              }>
                {getFieldDecorator('mask', {
                  initialValue: setting.mask || 'show'
                })(
                <Radio.Group>
                  <Radio value="show">显示</Radio>
                  <Radio value="hidden">隐藏</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="在搜索条件存在时，是否显示搜索和重置按钮。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  搜索按钮
                </Tooltip>
              }>
                {getFieldDecorator('show', {
                  initialValue: setting.show || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">显示</Radio>
                  <Radio value="false">隐藏</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {tableType !== '' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="在启用无人值守功能时无效。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  首行选中
                </Tooltip>
              }>
                {getFieldDecorator('selected', {
                  initialValue: setting.selected || 'false'
                })(
                <Radio.Group>
                  <Radio value="false">无</Radio>
                  <Radio value="init">初始化</Radio>
                  <Radio value="always">数据加载</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择分页时有效，默认为10条。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  每页数量
                </Tooltip>
              }>
                {getFieldDecorator('pageSize', {
                  initialValue: setting.pageSize || '',
                })(<InputNumber min={1} max={500} precision={0} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="高级搜索弹窗的宽度，注：当宽度值小于100时表示占窗口的百分比，大于100时表示宽度的绝对值。">
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  高级搜索
                </Tooltip>
              }>
@@ -629,7 +740,7 @@
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="双击表格中行，触发的按钮。">
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined className="mk-form-tip" />
                  双击事件
                </Tooltip>
              }>
@@ -644,6 +755,37 @@
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="空值时高度自适应。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  table高度
                </Tooltip>
              }>
                {getFieldDecorator('height', {
                  initialValue: setting.height
                })(<InputNumber min={10} max={3000} precision={0}/>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="默认值rgba(0, 0, 0, 0.65)">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  字体颜色
                </Tooltip>
              }>
                {getFieldDecorator('color', {
                  initialValue: setting.color
                })(<MKColor config={{initval: setting.color || 'rgba(0, 0, 0, 0.65)'}} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="字体大小">
                {getFieldDecorator('fontSize', {
                  initialValue: setting.fontSize || 14
                })(<InputNumber min={12} max={50} precision={0}/>)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>