2022-09-29

king

2022-09-29 b883ae5d7d46fc7a3503236f16a250c2264ea7c7

 src/menu/datasource/verifycard/settingform/index.jsx

@@ -1,5 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Radio, Tooltip, notification, Select, InputNumber, Cascader } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

@@ -22,18 +23,15 @@
  }

  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 || [],
    innerRules: [],
    innertip: '',
    appType: sessionStorage.getItem('appType')
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props
    const { config, setting } = this.props

    let modules = MenuUtils.getSupModules(window.GLOB.customMenu.components, config.uuid) || []

@@ -43,17 +41,36 @@
    })

    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'

    this.setState({modules, innerRules, innertip, setting: _setting})
  }

  handleConfirm = () => {
@@ -69,15 +86,7 @@
          }

          // 数据源前端验证
          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) {
          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)
@@ -133,35 +142,21 @@
    })
  }

  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})
    }
  }

  changeSupModule = (val) => {
    this.setState({supModule: val})
  }

  render() {
    const { setting, columns, config } = this.props
    const { columns, config } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, modules, useMSearch, laypage, supModule, usefulFields, appType, sysInterface } = this.state
    const { setting, modules, innerRules, appType, innertip } = this.state

    const formItemLayout = {
      labelCol: {
@@ -174,24 +169,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: this.props.dict['form.required.input'] + '数据源名称!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
@@ -212,7 +206,7 @@
            <Col span={8}>
              <Form.Item label="接口类型">
                {getFieldDecorator('interType', {
                  initialValue: interType,
                  initialValue: setting.interType,
                  rules: [
                    {
                      required: true,
@@ -220,17 +214,17 @@
                    },
                  ]
                })(
                <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}>
            {setting.interType === 'outer' ? <Col span={8}>
              <Form.Item label="系统接口">
                {getFieldDecorator('sysInterface', {
                  initialValue: sysInterface,
                  initialValue: setting.sysInterface,
                  rules: [
                    {
                      required: true,
@@ -238,15 +232,15 @@
                    }
                  ]
                })(
                <Radio.Group onChange={this.onSysInter}>
                <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'sysInterface')}}>
                  <Radio value="true">是</Radio>
                  <Radio value="false">否</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> : '内部函数'
@@ -258,25 +252,25 @@
                      required: true,
                      message: this.props.dict['form.required.input'] + '内部函数!'
                    },
                    ...rules
                    ...innerRules
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col className="outer-interface" span={24}>
            {setting.interType === 'outer' ? <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,
                      required: setting.sysInterface !== 'true' ? true : false,
                      message: this.props.dict['form.required.input'] + '接口地址!'
                    }
                  ]
                })(<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}>
            {setting.interType === 'outer' && setting.sysInterface !== 'true' ? <Col className="outer-interface" span={24}>
              <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址，为空时使用接口地址">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  正式地址
@@ -287,17 +281,14 @@
                })(<TextArea rows={2}/>)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={8}>
            {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'}}>
              <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$ -> */ 或 ''。`}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -305,11 +296,17 @@
                </Tooltip>
              }>
                {getFieldDecorator('dataresource', {
                  initialValue: setting.dataresource || ''
                  initialValue: setting.dataresource || '',
                  rules: [
                    {
                      required: setting.execute !== 'false' ? true : false,
                      message: this.props.dict['form.required.input'] + '数据源!'
                    }
                  ]
                })(<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" />
@@ -354,18 +351,18 @@
                })(<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}>
            {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) && (!config.wrap || config.wrap.supType !== 'multi') ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'该组件如果受其他组件控制，请选项相应的组件，没有时选“无”。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -373,7 +370,7 @@
                </Tooltip>
              }>
                {getFieldDecorator('supModule', {
                  initialValue: supModule,
                  initialValue: setting.supModule,
                  rules: [
                    {
                      required: true,
@@ -381,7 +378,7 @@
                    }
                  ]
                })(
                  <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,14 +387,14 @@
                {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}>
            {config.pageable && setting.laypage !== 'false' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择分页时有效。">
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -416,7 +413,7 @@
              </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}>
            {!['navbar', 'interface'].includes(config.type) && !['editable'].includes(config.subtype) && (!config.pageable || (config.pageable && setting.laypage === 'false')) && (setting.supModule.length === 0 || setting.supModule[0] === 'empty') ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时，是否与其他组件一同加载数据，注：仅在使用系统函数，且初始化加载数据时有效，分页请求时无效。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -433,7 +430,7 @@
                )}
              </Form.Item>
            </Col> : null}
            {!['navbar', 'balcony', 'menubar'].includes(config.type) ? <Col span={8}>
            {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'优先使用同级的搜索条件组件，同级搜索不存在时，依次向上选取，与当前组件的搜索条件一同用作数据过滤（当前组件的搜索条件优先）。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -443,14 +440,14 @@
                {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">使用</Radio>
                    <Radio value="false">不使用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {!['navbar', 'balcony', 'menubar'].includes(config.type) && useMSearch === 'true' && appType !== 'mob' ? <Col span={8}>
            {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) && setting.useMSearch === 'true' && appType !== 'mob' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'外层搜索条件改变时，是否刷新当前组件数据。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -478,7 +475,7 @@
                </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'
@@ -490,6 +487,39 @@
                )}
              </Form.Item>
            </Col> : null}
            {config.type === 'interface' ? <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}
          </Row>
        </Form>
      </div>