2020-07-16

king

2020-07-16 9a82bce9cf0ed4a51c1b0b0669eaa38cedbace07

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

@@ -1,8 +1,16 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Radio, Select, Tooltip, Icon, notification, InputNumber } from 'antd'
// import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Radio, Select, Tooltip, Icon, notification } from 'antd'
import moment from 'moment'
// import CodeMirror from '@uiw/react-codemirror'

// import 'codemirror/theme/monokai.css'
// import 'codemirror/theme/eclipse.css'
// import 'codemirror/addon/selection/active-line'
// import 'codemirror/addon/hint/javascript-hint'
// import 'codemirror/addon/hint/show-hint'
// import 'codemirror/addon/hint/show-hint.css'

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -13,28 +21,26 @@

class SettingForm extends Component {
  static propTpyes = {
    type: PropTypes.string,      // 菜单类型
    dict: PropTypes.object,      // 字典项
    menu: PropTypes.object,      // 菜单信息
    config: PropTypes.object,    // 页面配置信息
    formlist: PropTypes.array,   // 表单信息
    menuId: PropTypes.string,    // 菜单Id
    setting: PropTypes.object,   // 数据源配置
    columns: PropTypes.array,    // 列设置
    scripts: PropTypes.array,    // 自定义脚本
  }

  state = {
    
    interType: this.props.setting.interType || 'inner',
    structure: this.props.setting.structure || 'array'
  }

  handleConfirm = (otype) => {
    const { menu } = this.props
    const { setting } = this.state
    const { setting } = this.props
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values = {...setting, ...values}

          // 数据源前端验证
          if (values.interType === 'inner' && !values.innerFunc && values.default !== 'false' && !values.dataresource) {
          if (values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' && !values.dataresource) {
            notification.warning({
              top: 92,
              message: '请填写内部函数或数据源！',
@@ -42,7 +48,7 @@
            })
            reject()
            return
          } else if (values.interType === 'inner' && !values.innerFunc && values.default !== 'false' && values.dataresource) {
          } else if (values.interType === 'inner' && !values.innerFunc && 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)
@@ -57,6 +63,7 @@
                message: '数据源中\'必须成对出现',
                duration: 5
              })
              reject()
              return
            } else if (_lparen !== _rparen) {
              notification.warning({
@@ -64,6 +71,7 @@
                message: '数据源中()必须成对出现',
                duration: 5
              })
              reject()
              return
            } else if (/--/ig.test(values.dataresource)) {
              notification.warning({
@@ -71,6 +79,7 @@
                message: '数据源中，不可出现字符 -- ，注释请用 /*内容*/',
                duration: 5
              })
              reject()
              return
            }

@@ -89,15 +98,13 @@

          // 数据源保存
          if (
            values.interType === 'inner' && !values.innerFunc &&
            values.default !== 'false' &&
            /[^\s]+\s+[^\s]+/ig.test(values.dataresource) &&
            this.props.config.setting.dataresource !== values.dataresource
            values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' &&
            /[^\s]+\s+[^\s]+/ig.test(values.dataresource) && setting.dataresource !== values.dataresource
          ) {
            let param = {
              func: 's_DataSrc_Save',
              LText: values.dataresource,
              MenuID: menu.MenuID
              MenuID: this.props.menuId
            }
    
            param.LText = Utils.formatOptions(param.LText)
@@ -107,17 +114,7 @@
            Api.getLocalConfig(param)
          }

          if (otype === 'change') {
            this.setState({
              setting: values,
            }, () => {
              resolve()
            })
          } else {
            values.customScript = this.getCustomScript(values)

            this.sqlverify(values, resolve, reject)
          }
          resolve(values)
        } else {
          reject(err)
        }
@@ -127,217 +124,23 @@

  onRadioChange = (e, key) => {
    let value = e.target.value
    let _formlist = fromJS(this.state.formlist).toJS()

    if (key === 'interType') {
      this.setState({
        formlist: _formlist.map(item => {
          item.hidden = false

          if (value === 'inner' && ['sysInterface', 'interface', 'outerFunc'].includes(item.key)) {
            item.initVal = this.props.form.getFieldValue(item.key)
            item.hidden = true
          } else if (value === 'outer' && ['innerFunc', 'dataresource', 'queryType'].includes(item.key)) {
            item.initVal = this.props.form.getFieldValue(item.key)
            item.hidden = true
          }
          
          return item
        })
        interType: value
      })
    } else if (key === 'sysInterface') {
      if (value === 'true') {
        this.props.form.setFieldsValue({
          interface: window.GLOB.mainSystemApi || ''
        })
      }
    } else if (key === 'structure') {
      this.setState({
        formlist: _formlist.map(item => {
          if (item.key === 'interface') {
            item.readonly = value === 'true'
          }
          
          return item
        })
        structure: value
      })
    }
  }

  getFields(formlist) {
    const { getFieldDecorator } = this.props.form
    const fields = []

    formlist.forEach((item, index) => {
      if (item.hidden || item.forbid) return

      if (item.type === 'text') { // 文本搜索
        let rules = item.rules || []
        
        fields.push(
          <Col span={8} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  },
                  ...rules
                ]
              })(<Input placeholder={item.placeholder || ''} autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || 6,
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={0} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => {
                    return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                      option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }}
                  onChange={(value) => {this.selectChange(item.key, value)}}
                  getPopupContainer={() => document.getElementById('model-table-setting-form')}
                >
                  {item.options.map((option, i) =>
                    <Select.Option id={i} key={i} value={option.value}>
                      {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, item.key)}}>
                  {
                    item.options.map((option, i) => {
                      return (
                        <Radio key={i} value={option.value}>{option.text}</Radio>
                      )
                    })
                  }
                </Radio.Group>,
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'datasource') {
        fields.push(
          <Col span={24} key={index} style={{paddingLeft: '7px'}}>
            <Form.Item labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } help={item.help} label={
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip>
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(<TextArea rows={4} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'textarea') {
        fields.push(
          <Col span={20} offset={4} key={index}>
            <Form.Item className="text-area">
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={4} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'multiselect') { // 多选
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || []
              })(
                <Select
                  showSearch
                  mode="multiple"
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {item.options.map((option, i) =>
                    <Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      }
    })

    return fields
  }

  render() {
    const { columns, setting } = this.props
    const { getFieldDecorator } = this.props.form
    // const { formlist } = this.state
    const { interType, structure } = this.state

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -350,22 +153,196 @@
    }

    return (
      <div className="model-table-setting-form-box">
        <Form {...formItemLayout} className="model-table-setting-form">
      <div className="mob-datasource-setting-form-box">
        <Form {...formItemLayout} className="mob-setting-form">
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item label="名称">
                {getFieldDecorator('label', {
                  initialValue: '',
                {getFieldDecorator('name', {
                  initialValue: setting.name,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '名称!'
                      message: this.props.dict['mob.required.input'] + '名称!'
                    },
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
                  initialValue: setting.tableName,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['mob.required.input'] + '表名!'
                    },
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="数据结构">
                {getFieldDecorator('structure', {
                  initialValue: structure,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['mob.required.select'] + '表名!'
                    },
                  ]
                })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, 'structure')}}>
                  <Radio value="array">数组</Radio>
                  <Radio value="field">字段</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="接口类型">
                {getFieldDecorator('interType', {
                  initialValue: interType,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['mob.required.select'] + '接口类型!'
                    },
                  ]
                })(
                <Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}>
                  <Radio value="inner">内部</Radio>
                  <Radio value="outer">外部</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {interType === 'inner' ? <Col span={8}>
              <Form.Item label="内部函数">
                {getFieldDecorator('innerFunc', {
                  initialValue: setting.innerFunc || '',
                  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['mob.required.input'] + '接口地址!'
                    },
                  ]
                })(<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 === '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={
                <Tooltip placement="topLeft" title={'使用系统函数时，需填写数据源。注：数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}>
                  <Icon type="question-circle" />
                  数据源
                </Tooltip>
              }>
                {getFieldDecorator('dataresource', {
                  initialValue: setting.dataresource || ''
                })(<TextArea rows={4} />)}
                {/* <CodeMirror
                  value={'code'}
                  options={{
                    theme: 'eclipse',
                    lineNumbers: false,
                    mode: 'SQL',
                    extraKeys: {"Ctrl": "autocomplete"},
                    styleActiveLine: true
                  }}
                /> */}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' ? <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}
            {structure === 'array' ? <Col span={8}>
              <Form.Item label="主键">
                {getFieldDecorator('primaryKey', {
                  initialValue: setting.primaryKey || ''
                })(
                  <Select onChange={(value) => {this.selectChange('primaryKey', value)}}>
                    {columns.map((option, i) =>
                      <Select.Option key={i} value={option.value}>
                        {option.text}
                      </Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            {structure === 'array' ? <Col span={8}>
              <Form.Item label="默认排序">
                {getFieldDecorator('order', {
                  initialValue: setting.order || ''
                })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {structure === 'array' ? <Col span={8}>
              <Form.Item label="分页">
                {getFieldDecorator('laypage', {
                  initialValue: setting.laypage || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">是</Radio>
                  <Radio value="false">否</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col> : null}
            
            {interType === 'inner' ? <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('search', {
                  initialValue: setting.search || 'true'
                })(
                <Radio.Group>
                  <Radio value="true">接收</Radio>
                  <Radio value="false">不接收</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>