2022-10-17

king

2022-10-17 e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5

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

@@ -1,13 +1,14 @@
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 asyncComponent from '@/utils/asyncComponent'
import './index.scss'
// import './index.scss'

const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor'))
@@ -16,7 +17,6 @@
class SettingForm extends Component {
  static propTpyes = {
    config: PropTypes.object,     // 页面配置
    dict: PropTypes.object,       // 字典项
    menu: PropTypes.object,       // 菜单信息
    setting: PropTypes.object,    // 数据源配置
    columns: PropTypes.array,     // 列设置
@@ -26,8 +26,9 @@

  state = {
    interType: 'system',
    procMode: 'script',
    requestMode: 'system',
    sysInterface: 'false',
    controlField: '',
    tableType: '',
    funcTooltip: '',
    funcRules: []
  }
@@ -62,8 +63,9 @@

    this.setState({
      interType: setting.interType || 'system',
      procMode: setting.procMode || 'script',
      requestMode: setting.requestMode || 'system',
      controlField: setting.controlField || '',
      sysInterface: setting.sysInterface || 'false',
      tableType: setting.tableType,
      funcTooltip: tooltip,
      funcRules: rules
    })
@@ -147,7 +149,7 @@
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
            param.secretkey = Utils.encrypt(param.LText, param.timestamp)
    
            Api.getLocalConfig(param)
            Api.genericInterface(param)
          }

          resolve(values)
@@ -165,18 +167,15 @@
      this.setState({
        interType: value
      })
    } else if (key === 'procMode') {
    } else if (key === 'sysInterface') {
      this.setState({
        procMode: value
        sysInterface: value
      })
    } else if (key === 'requestMode') {
      this.setState({
        requestMode: value
      })
    } else if (key === 'sysInterface' && value === 'true') {
      this.props.form.setFieldsValue({
        interface: window.GLOB.mainSystemApi || ''
      })
      if (value === 'true') {
        this.props.form.setFieldsValue({
          interface: window.GLOB.mainSystemApi || ''
        })
      }
    }
    this.props.updateStatus({[key]: value})
  }
@@ -190,9 +189,9 @@
  }

  render() {
    const { setting, dict, menu, config, columns } = this.props
    const { setting, menu, config, columns } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, funcRules, funcTooltip, procMode, requestMode } = this.state
    const { interType, funcRules, funcTooltip, tableType, controlField, sysInterface } = this.state

    const formItemLayout = {
      labelCol: {
@@ -206,525 +205,446 @@
    }

    return (
      <div className="model-table-datasource-setting-form-box">
        <Form {...formItemLayout} className="model-setting-form">
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
                  initialValue: setting.tableName || '',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '表名!'
                    },
                    {
                      max: 50,
                      message: '表名最长为50个字符!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="表格属性">
                {getFieldDecorator('tableType', {
                  initialValue: setting.tableType
                })(
                  <Radio.Group>
                    <Radio value="">不可选</Radio>
                    <Radio value="radio">单选</Radio>
                    <Radio value="checkbox">多选</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={dict['header.form.intertype']}>
                {getFieldDecorator('interType', {
                  initialValue: interType,
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.select'] + dict['header.form.intertype'] + '!'
                    },
                  ]
                })(
                <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.onRadioChange(e, 'interType')}}>
                  <Radio value="system">系统</Radio>
                  <Radio value="inner">内部</Radio>
                  <Radio value="outer">外部</Radio>
                  <Radio value="custom">自定义</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {interType === 'outer' ? <Col span={12}>
              <Form.Item label={dict['header.form.sysInterface']}>
                {getFieldDecorator('sysInterface', {
                  initialValue: setting.sysInterface || 'false',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.select'] + dict['header.form.sysInterface'] + '!'
                    },
                  ]
                })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, 'sysInterface')}}>
                  <Radio value="true">{dict['model.true']}</Radio>
                  <Radio value="false">{dict['model.false']}</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="参数处理">
                {getFieldDecorator('procMode', {
                  initialValue: procMode,
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.select'] + '参数处理方式!'
                    },
                  ]
                })(
                <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.onRadioChange(e, 'procMode')}}>
                  <Radio value="script">前置脚本</Radio>
                  <Radio value="inner">前置函数</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' && procMode === 'inner' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={funcTooltip}>
                  <Icon type="question-circle" />
                  前置函数
                </Tooltip>
              }>
                {getFieldDecorator('prevFunc', {
                  initialValue: setting.prevFunc || '',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '前置函数!'
                    },
                    {
                      max: formRule.func.max,
                      message: formRule.func.maxMessage
                    },
                    ...funcRules
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' || interType === 'custom' ? <Col className="data-source" span={24}>
              <Form.Item label="测试地址">
                {getFieldDecorator('interface', {
                  initialValue: setting.interface || '',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '测试地址!'
                    },
                  ]
                })(<TextArea rows={2} />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' || interType === 'custom' ? <Col className="data-source" span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="正式系统所使用的的接口地址。">
                  <Icon type="question-circle" />
                  正式地址
                </Tooltip>
              }>
                {getFieldDecorator('proInterface', {
                  initialValue: setting.proInterface || ''
                })(<TextArea rows={2} />)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="请求方式">
                {getFieldDecorator('method', {
                  initialValue: setting.method || 'post',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.select'] + '请求方式!'
                    },
                  ]
                })(
                <Radio.Group>
                  <Radio value="get">GET</Radio>
                  <Radio value="post">POST</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="数据请求">
                {getFieldDecorator('requestMode', {
                  initialValue: requestMode,
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.select'] + '数据请求方式!'
                    },
                  ]
                })(
                <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.onRadioChange(e, 'requestMode')}}>
                  <Radio value="system">系统函数</Radio>
                  <Radio value="inner">内部函数</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' || (interType === 'custom' && requestMode === 'inner') ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={funcTooltip}>
                  <Icon type="question-circle" />
                  内部函数
                </Tooltip>
              }>
                {getFieldDecorator('innerFunc', {
                  initialValue: setting.innerFunc || '',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '内部函数!'
                    },
                    {
                      max: formRule.func.max,
                      message: formRule.func.maxMessage
                    },
                    ...funcRules
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={12}>
              <Form.Item label="外部函数">
                {getFieldDecorator('outerFunc', {
                  initialValue: setting.outerFunc || '',
                  rules: [
                    {
                      pattern: formRule.func.pattern,
                      message: formRule.func.message
                    }, {
                      max: formRule.func.max,
                      message: formRule.func.maxMessage
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {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" />
                  数据源
                </Tooltip>
              }>
                {getFieldDecorator('dataresource', {
                  initialValue: setting.dataresource || ''
                })(<CodeMirror />)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
                  <Icon type="question-circle" />
                  查询类型
                </Tooltip>
              }>
                {getFieldDecorator('queryType', {
                  initialValue: setting.queryType || 'query'
                })(
                <Radio.Group>
                  <Radio value="query">查询</Radio>
                  <Radio value="statistics">统计</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={12}>
              <Form.Item label="默认sql">
                {getFieldDecorator('default', {
                  initialValue: setting.default || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">执行</Radio>
                  <Radio value="false">不执行</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label="主键">
                {getFieldDecorator('primaryKey', {
                  initialValue: setting.primaryKey || ''
                })(
                  <Select onChange={this.primaryKeyChange}>
                    <Select.Option key="empty" value="">未设置</Select.Option>
                    {columns.map((option, i) =>
                      <Select.Option key={i} value={option.value}>
                        {option.text}
                      </Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="默认排序">
                {getFieldDecorator('order', {
                  initialValue: setting.order || 'ID desc',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '默认排序!'
                    },
                    {
                      max: formRule.input.max,
                      message: formRule.input.message
                    }
                  ]
                })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
              </Form.Item>
            </Col>
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="回调方式">
                {getFieldDecorator('callbackType', {
                  initialValue: setting.callbackType || 'script'
                })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, 'callbackType')}}>
                  <Radio value="default">默认脚本</Radio>
                  <Radio value="script">自定义脚本</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="回调表名">
                {getFieldDecorator('cbTable', {
                  initialValue: setting.cbTable || '',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '回调表名!'
                    },
                    {
                      max: formRule.input.max,
                      message: formRule.input.message
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'同步执行：外部接口调用成功后再请求数据；异步执行：外部接口调用与请求数据同时进行。'}>
                  <Icon type="question-circle" />
                  执行方式
                </Tooltip>
              }>
                {getFieldDecorator('execType', {
                  initialValue: setting.execType || 'sync'
                })(
                <Radio.Group>
                  <Radio value="sync">同步</Radio>
                  <Radio value="async">异步</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'如果自定义接口不支持跨域请求，会通过当前系统转发。'}>
                  <Icon type="question-circle" />
                  跨域请求
                </Tooltip>
              }>
                {getFieldDecorator('cross', {
                  initialValue: setting.cross || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">支持</Radio>
                  <Radio value="false">不支持</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="执行次数">
                {getFieldDecorator('execTime', {
                  initialValue: setting.execTime || 'once'
                })(
                <Radio.Group>
                  <Radio value="always">始终</Radio>
                  <Radio value="once">一次</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label="是否分页">
                {getFieldDecorator('laypage', {
                  initialValue: setting.laypage || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">{dict['model.true']}</Radio>
                  <Radio value="false">{dict['model.false']}</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="初始化">
                {getFieldDecorator('onload', {
                  initialValue: setting.onload || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">加载数据</Radio>
                  <Radio value="false">不加载数据</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {config.Template === 'CommonTable' ? <Col span={12}>
              <Form.Item label="按钮固定">
                {getFieldDecorator('actionfixed', {
                  initialValue: setting.actionfixed === 'true' || setting.actionfixed === true ? 'true' : 'false'
                })(
                <Radio.Group>
                  <Radio value="true">{dict['model.true']}</Radio>
                  <Radio value="false">{dict['model.false']}</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {config.Template === 'CommonTable' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'含有合并列或表格出现横向滚动时会显示异常，请慎用！'}>
                  <Icon type="question-circle" />
                  表头固定
                </Tooltip>
              }>
                {getFieldDecorator('columnfixed', {
                  initialValue: setting.columnfixed === 'true' || setting.columnfixed === true ? 'true' : 'false'
                })(
                <Radio.Group>
                  <Radio value="true">{dict['model.true']}</Radio>
                  <Radio value="false">{dict['model.false']}</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label="边框">
                {getFieldDecorator('bordered', {
                  initialValue: setting.bordered || 'true'
                })(
                <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={'表格的内边距，从大到小依次递减。'}>
                  <Icon type="question-circle" />
                  表格大小
                </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="使用急速模式时，表格中的标记、双击事件、格式化、行合并、前缀、后缀、字段透视等效果将无效，且数据都会以文本格式显示。">
                  <Icon type="question-circle" />
                  模式
                </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="高级搜索弹窗的宽度，注：当宽度值小于100时表示占窗口的百分比，大于100时表示宽度的绝对值。">
                  <Icon type="question-circle" />
                  高级搜索
                </Tooltip>
              }>
                {getFieldDecorator('advanceWidth', {
                  initialValue: setting.advanceWidth || 1000
                })(<InputNumber min={10} max={3000} precision={0}/>)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="双击表格中行，触发的按钮。">
                  <Icon type="question-circle" />
                  双击事件
                </Tooltip>
              }>
                {getFieldDecorator('doubleClick', {
                  initialValue: setting.doubleClick || ''
                })(
                  <Select allowClear>
                    {config.action.map(option =>
                      <Select.Option key={option.uuid} value={option.uuid}>{option.label}</Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="空值时高度自适应。">
                  <Icon type="question-circle" />
                  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)">
                  <Icon type="question-circle" />
                  字体颜色
                </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>
      <Form {...formItemLayout}>
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="表名">
              {getFieldDecorator('tableName', {
                initialValue: setting.tableName || '',
                rules: [
                  {
                    required: true,
                    message: '请输入表名!'
                  },
                  {
                    max: 50,
                    message: '表名最长为50个字符!'
                  },
                  {
                    pattern: /^[a-zA-Z_]+$/,
                    message: '表名只可使用字母以及_'
                  }
                ]
              })(<Input placeholder={''} autoComplete="off" />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="接口类型">
              {getFieldDecorator('interType', {
                initialValue: interType,
                rules: [
                  {
                    required: true,
                    message: '请选择接口类型!'
                  },
                ]
              })(
              <Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}>
                <Radio value="system">系统</Radio>
                <Radio value="inner">内部</Radio>
                <Radio value="outer">外部</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="表格属性">
              {getFieldDecorator('tableType', {
                initialValue: setting.tableType
              })(
                <Radio.Group onChange={(e) => this.setState({tableType: e.target.value})}>
                  <Radio value="">不可选</Radio>
                  <Radio value="radio">单选</Radio>
                  <Radio value="checkbox">多选</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {interType === 'outer' ? <Col span={8}>
            <Form.Item label="系统接口">
              {getFieldDecorator('sysInterface', {
                initialValue: sysInterface,
                rules: [
                  {
                    required: true,
                    message: '请选择系统接口!'
                  },
                ]
              })(
              <Radio.Group onChange={(e) => {this.onRadioChange(e, 'sysInterface')}}>
                <Radio value="true">是</Radio>
                <Radio value="false">否</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col> : null}
          {interType === 'outer' ? <Col className="mk-through-line3" span={24}>
            <Form.Item label="接口地址">
              {getFieldDecorator('interface', {
                initialValue: setting.interface || (interType === 'outer' && sysInterface === 'true' ? window.GLOB.mainSystemApi : ''),
                rules: [
                  {
                    required: interType === 'outer' && sysInterface === 'true' ? false : true,
                    message: '请输入接口地址!'
                  },
                ]
              })(<TextArea rows={2} readOnly={interType === 'outer' && sysInterface === 'true'}/>)}
            </Form.Item>
          </Col> : null}
          {interType === 'outer' && sysInterface !== 'true' ? <Col className="mk-through-line3" span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="正式系统所使用的的接口地址。">
                <QuestionCircleOutlined className="mk-form-tip" />
                正式地址
              </Tooltip>
            }>
              {getFieldDecorator('proInterface', {
                initialValue: setting.proInterface || ''
              })(<TextArea rows={2} />)}
            </Form.Item>
          </Col> : null}
          {interType === 'inner' ? <Col span={8}>
            <Form.Item label={
              <Tooltip placement="topLeft" title={funcTooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                内部函数
              </Tooltip>
            }>
              {getFieldDecorator('innerFunc', {
                initialValue: setting.innerFunc || '',
                rules: [
                  {
                    required: true,
                    message: '请输入内部函数!'
                  },
                  {
                    max: formRule.func.max,
                    message: formRule.func.maxMessage
                  },
                  ...funcRules
                ]
              })(<Input placeholder={''} autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {interType === 'outer' ? <Col span={8}>
            <Form.Item label="外部函数">
              {getFieldDecorator('outerFunc', {
                initialValue: setting.outerFunc || '',
                rules: [
                  {
                    pattern: formRule.func.pattern,
                    message: formRule.func.message
                  }, {
                    max: formRule.func.max,
                    message: formRule.func.maxMessage
                  }
                ]
              })(<Input placeholder={''} autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {interType === 'system' ? <Col span={24} className="mk-through-line3">
            <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$ -> */ 或 ''。`}>
                <QuestionCircleOutlined className="mk-form-tip" />
                数据源
              </Tooltip>
            }>
              {getFieldDecorator('dataresource', {
                initialValue: setting.dataresource || ''
              })(<CodeMirror />)}
            </Form.Item>
          </Col> : null}
          {interType === 'system' ? <Col span={8}>
            <Form.Item label={
              <Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
                <QuestionCircleOutlined className="mk-form-tip" />
                查询类型
              </Tooltip>
            }>
              {getFieldDecorator('queryType', {
                initialValue: setting.queryType || 'query'
              })(
              <Radio.Group>
                <Radio value="query">查询</Radio>
                <Radio value="statistics">统计</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col> : null}
          {interType === 'system' ? <Col span={8}>
            <Form.Item label="默认sql">
              {getFieldDecorator('default', {
                initialValue: setting.default || 'true'
              })(
              <Radio.Group>
                <Radio value="true">执行</Radio>
                <Radio value="false">不执行</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col> : null}
          <Col span={8}>
            <Form.Item label="主键">
              {getFieldDecorator('primaryKey', {
                initialValue: setting.primaryKey || ''
              })(
                <Select onChange={this.primaryKeyChange}>
                  <Select.Option key="empty" value="">未设置</Select.Option>
                  {columns.map((option, i) =>
                    <Select.Option key={i} value={option.value}>
                      {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="默认排序">
              {getFieldDecorator('order', {
                initialValue: setting.order || 'ID desc',
                rules: [
                  {
                    required: true,
                    message: '请输入默认排序!'
                  },
                  {
                    max: formRule.input.max,
                    message: formRule.input.message
                  }
                ]
              })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="是否分页">
              {getFieldDecorator('laypage', {
                initialValue: setting.laypage || 'true'
              })(
              <Radio.Group>
                <Radio value="true">是</Radio>
                <Radio value="false">否</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="初始化">
              {getFieldDecorator('onload', {
                initialValue: setting.onload || 'true'
              })(
              <Radio.Group>
                <Radio value="true">加载数据</Radio>
                <Radio value="false">不加载数据</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
          {config.Template === 'CommonTable' ? <Col span={8}>
            <Form.Item label="按钮固定">
              {getFieldDecorator('actionfixed', {
                initialValue: setting.actionfixed === 'true' || setting.actionfixed === true ? 'true' : 'false'
              })(
              <Radio.Group>
                <Radio value="true">是</Radio>
                <Radio value="false">否</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col> : null}
          {/* {config.Template === 'CommonTable' ? <Col span={8}>
            <Form.Item label={
              <Tooltip placement="topLeft" title={'含有合并列或表格出现横向滚动时会显示异常，请慎用！'}>
                <QuestionCircleOutlined className="mk-form-tip" />
                表头固定
              </Tooltip>
            }>
              {getFieldDecorator('columnfixed', {
                initialValue: setting.columnfixed === 'true' || setting.columnfixed === true ? 'true' : 'false'
              })(
              <Radio.Group>
                <Radio value="true">是</Radio>
                <Radio value="false">否</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col> : null} */}
          <Col span={8}>
            <Form.Item label="边框">
              {getFieldDecorator('bordered', {
                initialValue: setting.bordered || 'true'
              })(
              <Radio.Group>
                <Radio value="true">有</Radio>
                <Radio value="false">无</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <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={8}>
            <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={8}>
            <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={8}>
            <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>
          {tableType !== '' ? <Col span={8}>
            <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={8}>
            <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={8}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="双击表格中行，触发的按钮。">
                <QuestionCircleOutlined className="mk-form-tip" />
                双击事件
              </Tooltip>
            }>
              {getFieldDecorator('doubleClick', {
                initialValue: setting.doubleClick || ''
              })(
                <Select allowClear>
                  {config.action.map(option =>
                    <Select.Option key={option.uuid} value={option.uuid}>{option.label}</Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={8}>
            <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={8}>
            <Form.Item className="mk-color-move" 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={8}>
            <Form.Item label="字体大小">
              {getFieldDecorator('fontSize', {
                initialValue: setting.fontSize || 14
              })(<InputNumber min={12} max={50} precision={0}/>)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="用于控制行数据是否可选择。">
                <QuestionCircleOutlined className="mk-form-tip" />
                禁用字段
              </Tooltip>
            }>
              {getFieldDecorator('controlField', {
                initialValue: setting.controlField || ''
              })(
                <Select allowClear onChange={(val) => this.setState({controlField: val})}>
                  {columns.map((option, i) =>
                    <Select.Option key={i} value={option.value}>
                      {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          {controlField ? <Col span={8}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="当字段值与控制值相等时，行数据会禁用，多个值用逗号分隔。">
                <QuestionCircleOutlined className="mk-form-tip" />
                控制值
              </Tooltip>
            }>
              {getFieldDecorator('controlVal', {
                initialValue: setting.controlVal || ''
              })(<Input autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )
  }
}