2022-10-17

king

2022-10-17 e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5

 src/templates/sharecomponent/settingcalcomponent/verifycard/settingform/index.jsx

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

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

const { TextArea } = Input

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,       // 字典项
    menuId: PropTypes.string,     // 菜单Id
    permFuncField: PropTypes.any, // 菜单Id
    setting: PropTypes.object,    // 数据源配置
    columns: PropTypes.array,     // 列设置
    scripts: PropTypes.array,     // 自定义脚本
@@ -21,6 +22,24 @@

  state = {
    interType: this.props.setting.interType || 'system',
    usefulFields: []
  }

  UNSAFE_componentWillMount() {
    let usefulFields = sessionStorage.getItem('permFuncField')
    if (usefulFields) {
      try {
        usefulFields = JSON.parse(usefulFields)
      } catch (e) {
        usefulFields = []
      }
    } else {
      usefulFields = []
    }

    this.setState({
      usefulFields
    })
  }

  handleConfirm = () => {
@@ -101,7 +120,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)
@@ -123,9 +142,9 @@
  }

  render() {
    const { setting, permFuncField } = this.props
    const { setting } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType } = this.state
    const { interType, usefulFields } = this.state

    const formItemLayout = {
      labelCol: {
@@ -141,14 +160,14 @@
    let tooltip = null
    let rules = []

    if (permFuncField && permFuncField.length > 0) {
      tooltip = '开头可用字符：' + permFuncField.join(', ')
      let str = '^(' + permFuncField.join('|') + ')'
    if (usefulFields.length > 0) {
      tooltip = '开头可用字符：' + usefulFields.join(', ')
      let str = '^(' + usefulFields.join('|') + ')'
      let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g')

      rules.push({
        required: true,
        message: this.props.dict['form.required.input'] + '内部函数!'
        message: '请输入内部函数!'
      }, {
        pattern: _patten,
        message: formRule.func.innerMessage
@@ -156,144 +175,146 @@
    }

    return (
      <div className="model-datasource-setting-form-box">
        <Form {...formItemLayout} className="model-setting-form">
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
                  initialValue: setting.tableName,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '表名!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="接口类型">
                {getFieldDecorator('interType', {
                  initialValue: interType,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '接口类型!'
                    },
                  ]
                })(
                <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>
            {interType === 'inner' ? <Col span={8}>
              <Form.Item label={tooltip ?
                <Tooltip placement="topLeft" title={tooltip}>
                  <Icon type="question-circle" />
                  内部函数
                </Tooltip> : '内部函数'
              }>
                {getFieldDecorator('innerFunc', {
                  initialValue: setting.innerFunc || '',
                  rules: rules
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={8}>
              <Form.Item label="接口地址">
                {getFieldDecorator('interface', {
                  initialValue: setting.interface || '',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '接口地址!'
                    },
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={8}>
              <Form.Item label="外部函数">
                {getFieldDecorator('outerFunc', {
                  initialValue: setting.outerFunc || '',
                  rules: [
      <Form {...formItemLayout}>
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="表名">
              {getFieldDecorator('tableName', {
                initialValue: setting.tableName,
                rules: [
                  {
                    required: true,
                    message: '请输入表名!'
                  },
                  {
                    max: 50,
                    message: '表名最长为50个字符!'
                  }
                ]
              })(<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>
          {interType === 'inner' ? <Col span={8}>
            <Form.Item label={tooltip ?
              <Tooltip placement="topLeft" title={tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                内部函数
              </Tooltip> : '内部函数'
            }>
              {getFieldDecorator('innerFunc', {
                initialValue: setting.innerFunc || '',
                rules: rules
              })(<Input placeholder={''} autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {interType === 'outer' ? <Col span={8}>
            <Form.Item label="外部函数">
              {getFieldDecorator('outerFunc', {
                initialValue: setting.outerFunc || '',
                rules: [

                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {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={'使用系统函数时，需填写数据源。注：数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}>
                  <Icon type="question-circle" />
                  数据源
                </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，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
                  <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}
            {/* <Col span={8}>
              <Form.Item label="主键">
                {getFieldDecorator('primaryKey', {
                  initialValue: setting.primaryKey || ''
                })(
                  <Select>
                    {columns.map((option, i) =>
                      <Select.Option key={i} value={option.field}>
                        {option.label}
                      </Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col> */}
            {interType === 'system' ? <Col span={8}>
              <Form.Item label="默认sql">
                {getFieldDecorator('execute', {
                  initialValue: setting.execute || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">执行</Radio>
                  <Radio value="false">不执行</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <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>
          </Row>
        </Form>
      </div>
                ]
              })(<Input placeholder={''} autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {interType === 'outer' ? <Col span={24} className="mk-through-line3">
            <Form.Item label="接口地址">
              {getFieldDecorator('interface', {
                initialValue: setting.interface || '',
                rules: [
                  {
                    required: true,
                    message: '请输入接口地址!'
                  },
                ]
              })(<TextArea rows={2}/>)}
            </Form.Item>
          </Col> : null}
          {interType === 'system' ? <Col span={24} className="mk-through-line3">
            <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('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}
          {/* <Col span={8}>
            <Form.Item label="主键">
              {getFieldDecorator('primaryKey', {
                initialValue: setting.primaryKey || ''
              })(
                <Select>
                  {columns.map((option, i) =>
                    <Select.Option key={i} value={option.field}>
                      {option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col> */}
          {interType === 'system' ? <Col span={8}>
            <Form.Item label="默认sql">
              {getFieldDecorator('execute', {
                initialValue: setting.execute || 'true'
              })(
              <Radio.Group>
                <Radio value="true">执行</Radio>
                <Radio value="false">不执行</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col> : null}
          <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>
        </Row>
      </Form>
    )
  }
}