king
2025-05-13 1a176e4bdba485301385caac1a29102e598d25cc
src/menu/datasource/verifycard/settingform/index.jsx
@@ -1,41 +1,62 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, Tooltip, notification, Select, InputNumber, Cascader } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Radio, Tooltip, notification, Select, InputNumber, Cascader, Modal, Button } from 'antd'
import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import MenuUtils from '@/utils/utils-custom.js'
import { checkSQL } from '@/utils/utils-custom.js'
import CodeMirror from '@/templates/zshare/codemirror'
import KeyInterface from '@/components/keyInterface'
import './index.scss'
const { TextArea } = Input
class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,       // 字典项
    updateStatus: PropTypes.func,
    updateColumns: PropTypes.func,
    addProcess: PropTypes.func,
    config: PropTypes.object,     // 组件配置
    setting: PropTypes.object,    // 数据源配置
    modules: PropTypes.array,     // 可绑定的上级组件
    columns: PropTypes.array,     // 列设置
    scripts: PropTypes.array,     // 自定义脚本
  }
  state = {
    interType: this.props.setting.interType || 'system',
    laypage: this.props.setting.laypage || 'true',
    setting: null,
    modules: [],
    usefulFields: [],
    useMSearch: this.props.setting.useMSearch || 'false',
    sysInterface: this.props.setting.sysInterface || 'false',
    supModule: this.props.setting.supModule || [],
    appType: sessionStorage.getItem('appType')
    innerRules: [],
    innertip: '',
    MenuType: sessionStorage.getItem('MenuType') || '',
    ismain: false,
    visible: false
  }
  UNSAFE_componentWillMount () {
    const { config } = this.props
    const { config, setting } = this.props
    let modules = MenuUtils.getSupModules(window.GLOB.customMenu.components, config.uuid) || []
    let menu = window.GLOB.customMenu
    let modules = []
    let ismain = false
    if (menu.Template === 'BaseTable') {
      ismain = config.name === '主表'
    }
    if (config.type === 'interface') {
      menu.components.forEach(item => {
        if (item.type === 'module' && item.subtype === 'account') {
          modules.push({
            value: item.uuid,
            label: item.name
          })
        }
      })
    } else {
      modules = MenuUtils.getSupModules(menu.components, config.uuid, menu.interfaces)
    }
    modules.unshift({
      value: 'empty',
@@ -43,83 +64,69 @@
    })
    let usefulFields = sessionStorage.getItem('permFuncField')
    let innerRules = []
    let innertip = ''
    if (usefulFields) {
      try {
        usefulFields = JSON.parse(usefulFields)
        if (usefulFields.length > 0) {
          innertip = '开头可用字符:' + usefulFields.join(', ')
          let str = '^(' + usefulFields.join('|') + ')'
          let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g')
          innerRules.push({
            pattern: _patten,
            message: formRule.func.innerMessage
          })
        }
      } catch (e) {
        usefulFields = []
        innerRules = []
      }
    } else {
      usefulFields = []
    }
    this.setState({modules, usefulFields})
    let _setting = fromJS(setting).toJS()
    _setting.interType = setting.interType || 'system'
    _setting.laypage = setting.laypage || 'true'
    _setting.useMSearch = setting.useMSearch || 'false'
    _setting.sysInterface = setting.sysInterface || 'false'
    _setting.supModule = setting.supModule || []
    _setting.execute = setting.execute || 'true'
    if (_setting.supModule.length > 0 && _setting.supModule[0] !== 'empty') {
      let has = MenuUtils.checkSupModules(modules, _setting.supModule.slice(-1)[0])
      if (!has) {
        _setting.supModule = []
      }
    }
    this.setState({modules, innerRules, innertip, setting: _setting, ismain})
  }
  handleConfirm = () => {
    const { appType } = this.state
    const { config } = this.props
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.sync = values.sync || 'false'
          if (appType === 'mob' && values.useMSearch === 'true') {
            values.syncRefresh = 'true'
          if (['navbar', 'balcony', 'menubar', 'interface'].includes(config.type)) {
            values.onload = 'true'
          }
          if (values.interType === 'system' && values.onload === 'false') {
            values.sync = 'false'
          }
          if (values.interType === 'system' && values.database === 'sso') {
            values.sync = 'false'
          }
          // 数据源前端验证
          if (values.interType === 'system' && values.execute !== 'false' && !values.dataresource) {
            notification.warning({
              top: 92,
              message: '请填写内部函数或数据源!',
              duration: 5
            })
            reject()
            return
          } else if (values.interType === 'system' && values.execute !== 'false' && values.dataresource) {
            let _quot = values.dataresource.match(/'{1}/g)
            let _lparen = values.dataresource.match(/\({1}/g)
            let _rparen = values.dataresource.match(/\){1}/g)
          if (values.interType === 'system' && values.execute !== 'false' && values.dataresource) {
            let pass = checkSQL(values.dataresource)
            _quot = _quot ? _quot.length : 0
            _lparen = _lparen ? _lparen.length : 0
            _rparen = _rparen ? _rparen.length : 0
            if (_quot % 2 !== 0) {
              notification.warning({
                top: 92,
                message: '数据源中\'必须成对出现',
                duration: 5
              })
              reject()
              return
            } else if (_lparen !== _rparen) {
              notification.warning({
                top: 92,
                message: '数据源中()必须成对出现',
                duration: 5
              })
              reject()
              return
            } else if (/--/ig.test(values.dataresource)) {
              notification.warning({
                top: 92,
                message: '数据源中,不可出现字符 -- ,注释请用 /*内容*/',
                duration: 5
              })
              reject()
              return
            }
            let error = Utils.verifySql(values.dataresource)
            if (error) {
              notification.warning({
                top: 92,
                message: '数据源中不可使用' + error,
                duration: 5
              })
            if (!pass) {
              reject()
              return
            }
@@ -133,35 +140,74 @@
    })
  }
  onRadioChange = (e, key) => {
    let value = e.target.value
  onOptionChange = (value, key) => {
    let setting = fromJS(this.state.setting).toJS()
    setting[key] = value
    if (key === 'interType') {
      this.setState({
        interType: value
      })
    }
  }
  onSysInter = (e) => {
    let value = e.target.value
    this.setState({
      sysInterface: value
    })
    if (value === 'true') {
    this.setState({setting})
    if (key === 'sysInterface' && value === 'true') {
      this.props.form.setFieldsValue({interface: window.GLOB.mainSystemApi})
    }
    this.props.updateStatus(setting)
  }
  changeSupModule = (val) => {
    this.setState({supModule: val})
  addProcess = () => {
    this.setState({visible: true})
  }
  execAddProcess = (type) => {
    let _sql = this.props.form.getFieldValue('dataresource')
    let tableName = this.props.form.getFieldValue('tableName') || '表名'
    if (type === 'flowstart') {
      _sql = _sql + `\n/* select a.*, w.remark as remark_w, w.statusname  as statusname_w,w.status as status_w,w.works_flow_param,w.works_flow_detail_id,w.modifydate as modifydate_w  from (select * from ${tableName} where status=0 and deleted=0 $@ and createuserid=@userid@ @$) a
    inner join (select * from  s_my_works_flow  where works_flow_code=@works_flow_code@ and status=0 and deleted=0) w on a.id=w.works_flow_id */`
    } else if (type === 'flowcheck') {
      _sql = _sql + `\n/* select a.*, w.remark as remark_w, w.statusname  as statusname_w,w.status as status_w,w.works_flow_param,w.works_flow_detail_id,w.modifydate as modifydate_w
    from (select * from ${tableName} where status=0 and deleted=0 ) a
    inner join (select * from  s_my_works_flow  where works_flow_code=@works_flow_code@ and status>0 and status<888 and deleted=0) w
    on a.id=w.works_flow_id
    $@ inner join (select works_flow_id  from s_my_works_flow_role where userid=@userid@ and  works_flow_code=@works_flow_code@ and deleted=0 ) r
    on r.works_flow_id=w.works_flow_id @$ */`
    }
    this.props.form.setFieldsValue({
      dataresource: _sql
    })
    this.setState({visible: false})
    this.props.addProcess()
  }
  addSql = () => {
    let tableName = this.props.form.getFieldValue('tableName')
    if (!tableName) {
      notification.warning({
        top: 92,
        message: '请添加表名。',
        duration: 5
      })
      return
    }
    let _sql = this.props.form.getFieldValue('dataresource')
    if (/^\s*$/.test(_sql)) {
      this.props.form.setFieldsValue({
        dataresource: `select * from ${tableName} where deleted=0`
      })
    }
    this.props.updateColumns(tableName)
  }
  render() {
    const { setting, columns, config } = this.props
    const { columns, config, hasMainSearch } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, modules, useMSearch, laypage, supModule, usefulFields, appType, sysInterface } = this.state
    const { setting, modules, innerRules, innertip, MenuType, visible } = this.state
    const formItemLayout = {
      labelCol: {
@@ -174,24 +220,23 @@
      }
    }
    let tooltip = null
    let rules = []
    if (usefulFields.length > 0) {
      tooltip = '开头可用字符:' + usefulFields.join(', ')
      let str = '^(' + usefulFields.join('|') + ')'
      let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g')
      rules.push({
        pattern: _patten,
        message: formRule.func.innerMessage
      })
    }
    return (
      <div className="model-datasource-setting-form-box">
        <Form {...formItemLayout} className="model-setting-form">
          <Row gutter={24}>
            {config.type === 'interface' ? <Col span={8}>
              <Form.Item label="数据源名称">
                {getFieldDecorator('name', {
                  initialValue: setting.name,
                  rules: [
                    {
                      required: true,
                      message: '请输入数据源名称!'
                    }
                  ]
                })(<Input placeholder="" autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
@@ -199,54 +244,69 @@
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '表名!'
                      message: '请输入表名!'
                    },
                    {
                      max: 50,
                      message: '表名最长为50个字符!'
                    },
                    {
                      pattern: /^[a-zA-Z0-9@_]+$/,
                      message: '表名只可使用字母、数字以及_'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
                })(
                  setting.interType === 'system' && ((columns.length === 0 && config.subtype !== 'basetable') || !setting.dataresource) ?
                  <Input placeholder="" autoComplete="off" addonAfter={<PlusOutlined onClick={this.addSql} />}/> :
                  <Input placeholder="" autoComplete="off"/>
                  )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="接口类型">
                {getFieldDecorator('interType', {
                  initialValue: interType,
                  initialValue: setting.interType,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '接口类型!'
                      message: '请选择接口类型!'
                    },
                  ]
                })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}>
                <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'interType')}}>
                  <Radio value="system">系统</Radio>
                  <Radio value="inner">内部</Radio>
                  <Radio value="outer">外部</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {interType === 'outer' ? <Col span={8}>
              <Form.Item label="系统接口">
            {setting.interType === 'outer' ? <Col span={8} className="compact">
              <Form.Item label={
                <Tooltip placement="topLeft" title="业务系统指同一sso下的其他业务系统,外部系统指不同sso下的其他业务系统。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  系统类型
                </Tooltip>
              }>
                {getFieldDecorator('sysInterface', {
                  initialValue: sysInterface,
                  initialValue: setting.sysInterface,
                  rules: [
                    {
                      required: true,
                      message: '请选择是否使用系统接口!'
                      message: '请选择系统类型!'
                    }
                  ]
                })(
                <Radio.Group onChange={this.onSysInter}>
                  <Radio value="true">是</Radio>
                  <Radio value="false">否</Radio>
                <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'sysInterface')}}>
                  <Radio value="false">业务</Radio>
                  <Radio value="true">单点</Radio>
                  <Radio value="external">外部</Radio>
                  <Radio value="custom">自定义</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' ? <Col span={8}>
              <Form.Item label={tooltip ?
                <Tooltip placement="topLeft" title={tooltip}>
            {setting.interType === 'inner' ? <Col span={8}>
              <Form.Item label={innertip ?
                <Tooltip placement="topLeft" title={innertip}>
                  <QuestionCircleOutlined className="mk-form-tip" />
                  内部函数
                </Tooltip> : '内部函数'
@@ -256,28 +316,41 @@
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '内部函数!'
                      message: '请输入内部函数!'
                    },
                    ...rules
                    ...innerRules
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col className="outer-interface" span={24}>
            {setting.interType === 'outer' && setting.sysInterface !== 'external' ? <Col className="outer-interface" span={24}>
              <Form.Item label="接口地址">
                {getFieldDecorator('interface', {
                  initialValue: setting.interface || (sysInterface === 'true' ? window.GLOB.mainSystemApi : ''),
                  initialValue: setting.interface || (setting.sysInterface === 'true' ? window.GLOB.mainSystemApi : ''),
                  rules: [
                    {
                      required: sysInterface !== 'true' ? true : false,
                      message: this.props.dict['form.required.input'] + '接口地址!'
                      required: setting.sysInterface !== 'true' ? true : false,
                      message: '请输入接口地址!'
                    }
                  ]
                })(<TextArea rows={2} readOnly={sysInterface === 'true'}/>)}
                })(<TextArea rows={2} readOnly={setting.sysInterface === 'true'}/>)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' && sysInterface !== 'true' ? <Col className="outer-interface" span={24}>
              <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址,为空时使用接口地址">
            {setting.interType === 'outer' && setting.sysInterface === 'external' ? <Col className="outer-interface" span={24}>
              <Form.Item label="接口地址">
                {getFieldDecorator('exInterface', {
                  initialValue: setting.exInterface,
                  rules: [
                    {
                      required: true,
                      message: '请编辑接口地址!'
                    }
                  ]
                })(<KeyInterface type="develop"/>)}
              </Form.Item>
            </Col> : null}
            {setting.interType === 'outer' && (setting.sysInterface === 'false' || setting.sysInterface === 'custom') ? <Col className="outer-interface" span={24}>
              <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址,为空时使用接口地址。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  正式地址
                </Tooltip>
@@ -287,29 +360,56 @@
                })(<TextArea rows={2}/>)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={8}>
            {setting.interType === 'outer' && setting.sysInterface === 'external' ? <Col className="outer-interface" span={24}>
              <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  正式地址
                </Tooltip>
              }>
                {getFieldDecorator('exProInterface', {
                  initialValue: setting.exProInterface || ''
                })(<KeyInterface type="product"/>)}
              </Form.Item>
            </Col> : null}
            {setting.interType === 'outer' && setting.sysInterface === 'custom' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
              <Form.Item labelCol={{xs: { span: 24 }, sm: { span: 2 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 22 }} } label={
                <Tooltip placement="topLeft" title="外部接口入参及出参的自定义处理。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  自定义脚本
                </Tooltip>
              }>
                {getFieldDecorator('js_script', {
                  initialValue: setting.js_script || ''
                })(<CodeMirror mode="text/javascript" theme="cobalt" />)}
              </Form.Item>
            </Col> : null}
            {setting.interType === 'outer' ? <Col span={8}>
              <Form.Item label="外部函数">
                {getFieldDecorator('outerFunc', {
                  initialValue: setting.outerFunc || '',
                  rules: [
                  ]
                  initialValue: setting.outerFunc || ''
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
            {setting.interType === 'system' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
              {window.GLOB.process && !['invoice', 'invTable'].includes(config.subtype) ? <span className="process-btn" onClick={this.addProcess}>工作流</span> : null}
              <Form.Item labelCol={{xs: { span: 24 }, sm: { span: 2 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 22 }} } label={
                <Tooltip placement="topLeft" title={`使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 '';查询替换符 $select@ -> /* 或 ''、 @select$ -> */ 或 '';统计替换符 $sum@ -> /* 或 ''、 @sum$ -> */ 或 ''。`}>
                <Tooltip placement="topLeft" title={`使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 ''。`}>
                  <QuestionCircleOutlined className="mk-form-tip" />
                  数据源
                </Tooltip>
              }>
                {getFieldDecorator('dataresource', {
                  initialValue: setting.dataresource || ''
                  initialValue: setting.dataresource || '',
                  rules: [
                    {
                      required: setting.execute !== 'false' ? true : false,
                      message: '请输入数据源!'
                    }
                  ]
                })(<CodeMirror />)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' ? <Col span={8}>
            {setting.interType === 'system' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'查询时,搜索条件以where条件拼接进入sql,统计时,将数据源中以“@+搜索字段+@”的内容,以搜索条件中的值进行替换后,提交查询,注:查询类型仅在使用系统函数时有效。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -325,47 +425,56 @@
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
            {!['invTable'].includes(config.subtype) ? <Col span={8}>
              <Form.Item label="主键">
                {getFieldDecorator('primaryKey', {
                  initialValue: setting.primaryKey || ''
                })(
                  <Select>
                  <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                    {columns.map((option, i) =>
                      <Select.Option key={i} value={option.field}>
                        {option.label}
                        {`${option.label}(${option.field})`}
                      </Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col>
            </Col> : null}
            {/* 数组数据,需设置排序规则 */}
            {config.format === 'array' ? <Col span={8}>
              <Form.Item label="默认排序">
              <Form.Item label={
                <Tooltip placement="topLeft" title="如果在自定义脚本中使用了@pageSize@或@orderBy@,请在数据源中单独写排序语句。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  默认排序
                </Tooltip>
              }>
                {getFieldDecorator('order', {
                  initialValue: setting.order || 'ID desc',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '默认排序!'
                      message: '请输入默认排序!'
                    },
                    {
                      pattern: /^[^'+]+$/,
                      message: '排序中不可使用\'与+'
                    }
                  ]
                })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' ? <Col span={8}>
            {setting.interType === 'system' ? <Col span={8}>
              <Form.Item label="默认sql">
                {getFieldDecorator('execute', {
                  initialValue: setting.execute || 'true'
                  initialValue: setting.execute
                })(
                <Radio.Group>
                <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'execute')}}>
                  <Radio value="true">执行</Radio>
                  <Radio value="false">不执行</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {!['navbar', 'balcony', 'menubar'].includes(config.type) && (!config.wrap || config.wrap.supType !== 'multi') ? <Col span={8}>
            {!['balcony', 'menubar', 'commonbar', 'tabbar', 'invTable'].includes(config.subtype) && (!config.wrap || config.wrap.supType !== 'multi') && MenuType !== 'billPrint' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'该组件如果受其他组件控制,请选项相应的组件,没有时选“无”。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -373,15 +482,15 @@
                </Tooltip>
              }>
                {getFieldDecorator('supModule', {
                  initialValue: supModule,
                  initialValue: setting.supModule,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '上级组件!'
                      message: '请选择上级组件!'
                    }
                  ]
                })(
                  <Cascader options={modules} onChange={this.changeSupModule} expandTrigger="hover" placeholder="" />
                  <Cascader options={modules} onChange={(val) => {this.onOptionChange(val, 'supModule')}} expandTrigger="hover" placeholder="" />
                )}
              </Form.Item>
            </Col> : null}
@@ -390,41 +499,63 @@
                {getFieldDecorator('laypage', {
                  initialValue: setting.laypage || 'true'
                })(
                  <Radio.Group onChange={(e) => this.setState({laypage: e.target.value})}>
                  <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'laypage')}}>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.pageable && laypage !== 'false' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择分页时有效。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  每页数量
                </Tooltip>
              }>
            {config.pageable && setting.laypage !== 'false' ? <Col span={8}>
              <Form.Item label="每页数量">
                {getFieldDecorator('pageSize', {
                  initialValue: setting.pageSize || 10,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '每页数量!'
                      message: '请输入每页数量!'
                    }
                  ]
                })(<InputNumber min={1} max={500} precision={0} />)}
              </Form.Item>
            </Col> : null}
            {/* 1、不分页且不存在上级模块 */}
            {!['navbar'].includes(config.type) && !['editable'].includes(config.subtype) && (!config.pageable || (config.pageable && laypage === 'false')) && (!supModule || supModule.length === 0 || supModule[0] === 'empty') ? <Col span={8}>
            {setting.interType === 'inner' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时,是否与其他组件一同加载数据,注:仅在使用系统函数,且初始化加载数据时有效,分页请求时无效。'}>
                <Tooltip placement="topLeft" title="当选择“是”时,内部函数的传参会增加 username 与 fullname。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  记录用户
                </Tooltip>
              }>
                {getFieldDecorator('recordUser', {
                  initialValue: setting.recordUser || 'false'
                })(
                <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'recordUser')}}>
                  <Radio value="false">否</Radio>
                  <Radio value="true">是</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {setting.interType === 'system' ? <Col span={8}>
              <Form.Item label="数据库">
                {getFieldDecorator('database', {
                  initialValue: setting.database || 'local'
                })(
                <Radio.Group>
                  <Radio value="local">本地</Radio>
                  <Radio value="sso">单点</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {/* 1、不分页且不存在上级模块 */}
            {!['navbar', 'interface', 'calendar'].includes(config.type) && !['editable', 'basetable', 'dualdatacard', 'invoice', 'invTable'].includes(config.subtype) && (!config.pageable || (config.pageable && setting.laypage === 'false')) && (setting.supModule.length === 0 || setting.supModule[0] === 'empty') && setting.interType === 'system' && setting.onload !== 'false' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时,是否与其他组件一同加载数据。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
                  同步查询
                </Tooltip>
              }>
                {getFieldDecorator('sync', {
                  initialValue: setting.sync || 'true'
                  initialValue: setting.sync || 'false'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
@@ -433,9 +564,9 @@
                )}
              </Form.Item>
            </Col> : null}
            {!['navbar', 'balcony', 'menubar'].includes(config.type) ? <Col span={8}>
            {!['navbar', 'balcony', 'menubar'].includes(config.type) && !['basetable', 'invoice', 'invTable'].includes(config.subtype) ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'优先使用同级的搜索条件组件,同级搜索不存在时,依次向上选取,与当前组件的搜索条件一同用作数据过滤(当前组件的搜索条件优先)。'}>
                <Tooltip placement="topLeft" title={config.type === 'interface' ? '单独搜索组件可作为公共数据源的搜索条件。' : '优先使用同级的搜索条件组件,同级搜索不存在时,依次向上选取,与当前组件的搜索条件一同用作数据过滤(当前组件的搜索条件优先)。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
                  外部搜索
                </Tooltip>
@@ -443,55 +574,184 @@
                {getFieldDecorator('useMSearch', {
                  initialValue: setting.useMSearch || 'true'
                })(
                  <Radio.Group onChange={(e) => this.setState({useMSearch: e.target.value})}>
                  <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'useMSearch')}}>
                    <Radio value="true">使用{!hasMainSearch ? <Tooltip placement="top" title="无可使用的外部搜索条件"><span className="mk-dot"></span></Tooltip> : null}</Radio>
                    <Radio value="false">不使用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'basetable' && !this.state.ismain ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="是否使用主表的搜索条件">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  主表搜索
                </Tooltip>
              }>
                {getFieldDecorator('useMSearch', {
                  initialValue: setting.useMSearch || 'false'
                })(
                  <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'useMSearch')}}>
                    <Radio value="true">使用</Radio>
                    <Radio value="false">不使用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {!['navbar', 'balcony', 'menubar'].includes(config.type) && useMSearch === 'true' && appType !== 'mob' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'外层搜索条件改变时,是否刷新当前组件数据。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
                  同步刷新
                </Tooltip>
              }>
                {getFieldDecorator('syncRefresh', {
                  initialValue: setting.syncRefresh || 'true'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            <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>
            {!['navbar', 'balcony', 'menubar'].includes(config.type) ? <Col span={8}>
            {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) ? <Col span={8}>
              <Form.Item label="初始化数据">
                {getFieldDecorator('onload', {
                  initialValue: setting.onload || 'true'
                })(
                  <Radio.Group>
                  <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'onload')}}>
                    <Radio value="true">加载</Radio>
                    <Radio value="false">不加载</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {setting.interType === 'system' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="使用后端sql脚本时有效。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  事务
                </Tooltip>
              }>
                {getFieldDecorator('transact', {
                  initialValue: setting.transact || 'false'
                })(
                  <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'transact')}}>
                    <Radio value="true">启用</Radio>
                    <Radio value="false">禁用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.type === 'interface' && ((setting.supModule && setting.supModule[0] === 'empty') || MenuType === 'billPrint') ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="初始化加载将在页面加载前执行。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  加载方式
                </Tooltip>
              }>
                {getFieldDecorator('loadlevel', {
                  initialValue: setting.loadlevel || 'default'
                })(
                  <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'loadlevel')}}>
                    <Radio value="default">默认</Radio>
                    <Radio value="init">初始化</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.type === 'interface' && MenuType !== 'billPrint' ? <Col span={8}>
              <Form.Item label="定时器">
                {getFieldDecorator('timer', {
                  initialValue: setting.timer || ''
                })(
                  <Select onChange={(value) => {this.onOptionChange(value, 'timer')}}>
                    <Select.Option value=""> 无 </Select.Option>
                    <Select.Option value="2s"> 2秒 </Select.Option>
                    <Select.Option value="5s"> 5秒 </Select.Option>
                    <Select.Option value="15s"> 15秒 </Select.Option>
                    <Select.Option value="30s"> 30秒 </Select.Option>
                    <Select.Option value="1min"> 1分钟 </Select.Option>
                    <Select.Option value="5min"> 5分钟 </Select.Option>
                    <Select.Option value="10min"> 10分钟 </Select.Option>
                    <Select.Option value="15min"> 15分钟 </Select.Option>
                    <Select.Option value="30min"> 30分钟 </Select.Option>
                    <Select.Option value="1hour"> 1小时 </Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            {config.type === 'interface' && setting.timer ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="定时器执行次数。注:0表示没有限制。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  执行次数
                </Tooltip>
              }>
                {getFieldDecorator('timerRepeats', {
                  initialValue: setting.timerRepeats || 0
                })(<InputNumber min={0} max={500} precision={0} />)}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'dualdatacard' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="子表在主表中的数据集名称,使用 sub_data_string 时数据以 JSON 字符串形式返回(字段集中需添加 sub_data_string 字段);当主表字段存在 sub_data_string 且值不为空时,优先使用主表的 sub_data_string。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  子表字段
                </Tooltip>
              }>
                {getFieldDecorator('subdata', {
                  initialValue: setting.subdata || 'sub_data',
                  rules: [
                    {
                      required: true,
                      message: '请输入子表字段!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'dualdatacard' ? <Col span={8}>
              <Form.Item label="子表主键">
                {getFieldDecorator('subKey', {
                  initialValue: setting.subKey || ''
                })(
                  <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                    {this.props.subColumns.map((option, i) =>
                      <Select.Option key={i} value={option.field}>
                        {`${option.label}(${option.field})`}
                      </Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'dualdatacard' ? <Col span={8}>
              <Form.Item label="子表BID">
                {getFieldDecorator('subBID', {
                  initialValue: setting.subBID || ''
                })(
                  <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                    {this.props.subColumns.map((option, i) =>
                      <Select.Option key={i} value={option.field}>
                        {`${option.label}(${option.field})`}
                      </Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            {setting.onload !== 'false' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="可延迟初始化数据的加载时间,单位毫秒(ms)。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  延时加载
                </Tooltip>
              }>
                {getFieldDecorator('delay', {
                  initialValue: setting.delay,
                })(<InputNumber min={0} max={60000} precision={0} />)}
              </Form.Item>
            </Col> : null}
          </Row>
        </Form>
        <Modal
          wrapClassName="mk-flow-type"
          visible={visible}
          width={400}
          onCancel={() => this.setState({visible: false})}
          footer={[
            <Button key="cancel" className="mk-green" onClick={() => this.execAddProcess('flowstart')}>发起</Button>,
            <Button key="confirm" className="mk-primary" onClick={() => this.execAddProcess('flowcheck')}>审批</Button>
          ]}
          destroyOnClose
        >
          请选择工作流类型。
        </Modal>
      </div>
    )
  }