2021-01-24

king

2021-01-24 d36c27e80e668b3bc1dcd687a18a2f2d125b32db

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

@@ -9,6 +9,8 @@
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

class SettingForm extends Component {
  static propTpyes = {
    config: PropTypes.object,     // 页面配置
@@ -21,6 +23,8 @@

  state = {
    interType: 'system',
    procMode: 'system',
    requestMode: 'system',
    funcTooltip: '',
    funcRules: []
  }
@@ -55,6 +59,8 @@

    this.setState({
      interType: setting.interType || 'system',
      procMode: setting.procMode || 'system',
      requestMode: setting.requestMode || 'system',
      funcTooltip: tooltip,
      funcRules: rules
    })
@@ -156,12 +162,18 @@
      this.setState({
        interType: value
      })
    } else if (key === 'sysInterface') {
      if (value === 'true') {
        this.props.form.setFieldsValue({
          interface: window.GLOB.mainSystemApi || ''
        })
      }
    } else if (key === 'procMode') {
      this.setState({
        procMode: value
      })
    } else if (key === 'requestMode') {
      this.setState({
        requestMode: value
      })
    } else if (key === 'sysInterface' && value === 'true') {
      this.props.form.setFieldsValue({
        interface: window.GLOB.mainSystemApi || ''
      })
    }
  }

@@ -176,7 +188,7 @@
  render() {
    const { setting, dict, menu, config, columns } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, funcRules, funcTooltip } = this.state
    const { interType, funcRules, funcTooltip, procMode, requestMode } = this.state

    const formItemLayout = {
      labelCol: {
@@ -230,10 +242,11 @@
                    },
                  ]
                })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, '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>
@@ -254,7 +267,89 @@
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' ? <Col span={12}>
            {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="system">前置脚本</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('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' || 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 === '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('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" />
@@ -278,19 +373,6 @@
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={12}>
              <Form.Item label="接口地址">
                {getFieldDecorator('interface', {
                  initialValue: setting.interface || '',
                  rules: [
                    {
                      required: true,
                      message: dict['form.required.input'] + '接口地址!'
                    },
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={12}>
              <Form.Item label="外部函数">
                {getFieldDecorator('outerFunc', {
                  initialValue: setting.outerFunc || '',
@@ -306,7 +388,7 @@
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
            {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={'使用系统函数时，需填写数据源。注：数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}>
                  <Icon type="question-circle" />
@@ -318,7 +400,7 @@
                })(<CodeMirror />)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' ? <Col span={12}>
            {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
                  <Icon type="question-circle" />
@@ -334,7 +416,7 @@
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            {interType === 'system' ? <Col span={12}>
            {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={12}>
              <Form.Item label="默认sql">
                {getFieldDecorator('default', {
                  initialValue: setting.default || 'true'
@@ -378,6 +460,44 @@
                })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
              </Form.Item>
            </Col>
            {interType === 'custom' ? <Col span={12}>
              <Form.Item label="回调方式">
                {getFieldDecorator('callbackType', {
                  initialValue: setting.callbackType || 'default'
                })(
                <Radio.Group>
                  <Radio value="default">默认脚本</Radio>
                  <Radio value="script">自定义脚本</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('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="执行次数">
                {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', {