2020-09-14

king

2020-09-14 76427d51a079a5fd1f45bf7188249e7a4647ae05

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

@@ -1,6 +1,6 @@
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, Icon, notification, Select } from 'antd'
import moment from 'moment'

import Api from '@/api'
@@ -11,16 +11,43 @@

class SettingForm extends Component {
  static propTpyes = {
    type: PropTypes.string,       // 菜单类型，main或subtable
    dict: PropTypes.object,       // 字典项
    menuId: PropTypes.string,     // 菜单Id
    permFuncField: PropTypes.any, // 菜单Id
    menu: PropTypes.object,       // 菜单信息
    permFuncField: PropTypes.any, // 存储过程可用开始字符
    setting: PropTypes.object,    // 数据源配置
    columns: PropTypes.array,     // 列设置
    scripts: PropTypes.array,     // 自定义脚本
  }

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

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

    let tooltip = null
    let rules = []

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

      rules.push({
        pattern: _patten,
        message: formRule.func.innerMessage
      })
    }

    this.setState({
      interType: setting.interType || 'system',
      funcTooltip: tooltip,
      funcRules: rules
    })
  }

  handleConfirm = () => {
@@ -30,15 +57,15 @@
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          // 数据源前端验证
          if (values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' && !values.dataresource) {
          if (values.interType === 'system' && values.default !== 'false' && !values.dataresource) {
            notification.warning({
              top: 92,
              message: '请填写内部函数或数据源！',
              message: '请填写数据源！',
              duration: 5
            })
            reject()
            return
          } else if (values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' && values.dataresource) {
          } else if (values.interType === 'system' && values.default !== 'false' && values.dataresource) {
            let _quot = values.dataresource.match(/'{1}/g)
            let _lparen = values.dataresource.match(/\({1}/g)
            let _rparen = values.dataresource.match(/\){1}/g)
@@ -88,17 +115,17 @@

          // 数据源保存
          if (
            values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' &&
            values.interType === 'system' && values.default !== 'false' &&
            /[^\s]+\s+[^\s]+/ig.test(values.dataresource) && setting.dataresource !== values.dataresource
          ) {
            let param = {
              func: 's_DataSrc_Save',
              LText: values.dataresource,
              MenuID: this.props.menuId
              MenuID: this.props.menu.MenuID
            }
    
            param.LText = Utils.formatOptions(param.LText)
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
            param.secretkey = Utils.encrypt(param.LText, param.timestamp)
    
            Api.getLocalConfig(param)
@@ -119,13 +146,27 @@
      this.setState({
        interType: value
      })
    } else if (key === 'sysInterface') {
      if (value === 'true') {
        this.props.form.setFieldsValue({
          interface: window.GLOB.mainSystemApi || ''
        })
      }
    }
  }

  primaryKeyChange = (val) => {
    if (val) {
      this.props.form.setFieldsValue({
        order: `${val} desc`
      })
    }
  }

  render() {
    const { setting, permFuncField } = this.props
    const { setting, dict, menu, type, columns } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType } = this.state
    const { interType, funcRules, funcTooltip } = this.state

    const formItemLayout = {
      labelCol: {
@@ -138,92 +179,125 @@
      }
    }

    let tooltip = null
    let rules = []

    if (permFuncField && permFuncField.length > 0) {
      tooltip = '开头可用字符：' + permFuncField.join(', ')
      let str = '^(' + permFuncField.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">
      <div className="model-table-datasource-setting-form-box">
        <Form {...formItemLayout} className="model-setting-form">
          <Row gutter={24}>
            <Col span={8}>
            <Col span={12}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
                  initialValue: setting.tableName,
                  initialValue: setting.tableName || '',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '表名!'
                      message: dict['form.required.input'] + '表名!'
                    },
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="接口类型">
            <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: this.props.dict['form.required.select'] + '接口类型!'
                      message: dict['form.required.select'] + dict['header.form.intertype'] + '!'
                    },
                  ]
                })(
                <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}>
            {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 === 'inner' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={funcTooltip}>
                  <Icon type="question-circle" />
                  内部函数
                </Tooltip> : '内部函数'
                </Tooltip>
              }>
                {getFieldDecorator('innerFunc', {
                  initialValue: setting.innerFunc || '',
                  rules: rules
                  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={8}>
            {interType === 'outer' ? <Col span={12}>
              <Form.Item label="接口地址">
                {getFieldDecorator('interface', {
                  initialValue: setting.interface || '',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '接口地址!'
                      message: dict['form.required.input'] + '接口地址!'
                    },
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'outer' ? <Col span={8}>
            {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 === 'inner' ? <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={
            {interType === '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" />
                  数据源
@@ -234,7 +308,7 @@
                })(<CodeMirror />)}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' ? <Col span={8}>
            {interType === 'system' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
                  <Icon type="question-circle" />
@@ -250,25 +324,10 @@
                </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 === 'inner' ? <Col span={8}>
            {interType === 'system' ? <Col span={12}>
              <Form.Item label="默认sql">
                {getFieldDecorator('execute', {
                  initialValue: setting.execute || 'true'
                {getFieldDecorator('default', {
                  initialValue: setting.default || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">执行</Radio>
@@ -276,7 +335,51 @@
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
            <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 || '',
                  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>
            <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'
@@ -287,6 +390,28 @@
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {type === 'main' ? <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}
            {type === 'main' ? <Col span={12}>
              <Form.Item label="表头固定">
                {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}
          </Row>
        </Form>
      </div>