2020-05-22

king

2020-05-22 523cec6c87d88b43954a4409a8dfde6aade095a1

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

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Button, notification, Modal, Menu, Icon, Radio, Dropdown } from 'antd'
import { Form, Row, Col, Input, Button, notification, Modal, Select, Radio } from 'antd'
import moment from 'moment'

import Utils from '@/utils/utils.js'
@@ -11,8 +11,10 @@

class CustomForm extends Component {
  static propTpyes = {
    type: PropTypes.string,         // 菜单类型
    dict: PropTypes.object,         // 字典项
    tableName: PropTypes.string,    // 表名
    setting: PropTypes.object,      // 设置
    searches: PropTypes.array,      // 搜索条件
    systemScripts: PropTypes.array, // 系统脚本
    customScripts: PropTypes.array, // 自定义脚本
    scriptsChange: PropTypes.func   // 表单
@@ -20,7 +22,34 @@

  state = {
    editItem: null,
    loading: false
    loading: false,
    usefulFields: ''
  }

  UNSAFE_componentWillMount() {
    const { searches } = this.props

    let _usefulFields = []
    searches.forEach(item => {
      if (item.type === 'group') {
        if (item.transfer === 'true') {
          _usefulFields.push(item.field)
        }
        _usefulFields.push(item.datefield)
        _usefulFields.push(item.datefield + '1')
      } else if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) {
        _usefulFields.push(item.field)
        _usefulFields.push(item.field + '1')
      } else if (_usefulFields.includes(item.field)) {
        _usefulFields.push(item.field + '1')
      } else {
        _usefulFields.push(item.field)
      }
    })

    this.setState({
      usefulFields: _usefulFields.join(', ')
    })
  }

  edit = (record) => {
@@ -34,7 +63,18 @@
    })
  }

  handleCancel = () => {
    this.setState({
      editItem: null
    })
    this.props.form.setFieldsValue({
      sql: ''
    })
  }

  handleConfirm = () => {
    const { searches, setting } = this.props

    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
@@ -101,6 +141,36 @@
          LText: _initsql + values.sql + tail
        }

        param.LText = param.LText.replace(/@\$|\$@/ig, '')

        let allSearch = Utils.initMainSearch(searches)
        allSearch = Utils.getAllSearchOptions(allSearch)

        let regoptions = allSearch.map(item => {
          return {
            reg: new RegExp('@' + item.key + '@', 'ig'),
            value: `'${item.value}'`
          }
        })

        regoptions.push({
          reg: new RegExp('@orderBy@', 'ig'),
          value: setting.order
        })
        if (setting.laypage !== 'false') {
          regoptions.push({
            reg: new RegExp('@pageSize@', 'ig'),
            value: 10
          }, {
            reg: new RegExp('@pageIndex@', 'ig'),
            value: 1
          })
        }
  
        regoptions.forEach(item => {
          param.LText = param.LText.replace(item.reg, item.value)
        })

        param.LText = Utils.formatOptions(param.LText)
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
        param.secretkey = Utils.encrypt(param.LText, param.timestamp)
@@ -129,11 +199,7 @@
    })
  }

  selectScript = (e) => {
    const { systemScripts } = this.props

    let option = systemScripts[+e.key]

  selectScript = (value, option) => {
    let _sql = this.props.form.getFieldValue('sql')
    if (_sql) {
      _sql = _sql + ` 
@@ -142,10 +208,10 @@
    }

    _sql = _sql.replace(/\s{6}$/, '')
    _sql = _sql + `/*${option.name}*/
    _sql = _sql + `/*${option.props.children}*/
    `
    _sql = _sql.replace(/\s{4}$/, '')
    _sql = _sql + option.value
    _sql = _sql + value

    this.props.form.setFieldsValue({
      sql: _sql
@@ -153,8 +219,9 @@
  }

  render() {
    const { systemScripts, tableName } = this.props
    const { systemScripts, setting, type } = this.props
    const { getFieldDecorator } = this.props.form
    const { usefulFields } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -169,9 +236,19 @@
    return (
      <Form {...formItemLayout} className="modal-menu-setting-script">
        <Row gutter={24}>
          {setting.tableName ? <Col span={8}>
            <Form.Item label={'表名'} style={{whiteSpace: 'nowrap', margin: 0}}>
              {setting.tableName}
            </Form.Item>
          </Col> : null}
          <Col span={16}>
            <Form.Item label={'报错字段'} style={{margin: 0}}>
              ErrorCode, retmsg
            </Form.Item>
          </Col>
          <Col span={24} className="sqlfield">
            <Form.Item label={'可用字段'}>
              id, bid, loginuid, sessionuid, userid, appkey
              id, bid, loginuid, sessionuid, userid, appkey, {type === 'main' ? 'out_id, ' : '' }time_id, orderBy{setting.laypage !== 'false' ? ', pageSize, pageIndex': ''}{usefulFields ? ', ' + usefulFields : ''}
            </Form.Item>
          </Col>
          <Col span={8} style={{whiteSpace: 'nowrap'}}>
@@ -186,28 +263,26 @@
              )}
            </Form.Item>
          </Col>
          <Col span={4} style={{lineHeight: '40px', textAlign: 'center'}}>
            <Dropdown trigger={['click']} overlayClassName="mk-normal-dropdown" overlay={
              <Menu onClick={this.selectScript}>
          <Col span={10}>
            <Form.Item label={'快捷添加'} style={{marginBottom: 0}}>
              <Select
                showSearch
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                onChange={this.selectScript}
              >
                {systemScripts.map((option, i) =>
                  <Menu.Item key={i}>{option.name}</Menu.Item>
                  <Select.Option style={{whiteSpace: 'normal'}} key={i} value={option.value}>{option.name}</Select.Option>
                )}
              </Menu>
            }>
              <span style={{color: '#1890ff', display: 'inline-block', cursor: 'pointer'}}>
                快捷添加 <Icon type="down" style={{marginRight: '5px'}} />
              </span>
            </Dropdown>
              </Select>
            </Form.Item>
          </Col>
          <Col span={4} className="add">
            <Button onClick={this.handleConfirm} loading={this.state.loading} className="mk-green" style={{marginBottom: 15, marginLeft: 40}}>
          <Col span={6} className="add">
            <Button onClick={this.handleConfirm} loading={this.state.loading} className="mk-green" style={{marginTop: 5, marginBottom: 15, marginLeft: 30}}>
              保存
            </Button>
          </Col>
          <Col span={8} style={{textAlign: 'right'}}>
            {tableName ? <span style={{maxWidth: '100%', display: 'inline-block', position: 'relative', top: '20px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden'}}>
              表名:  {tableName}
            </span> : null}
            <Button onClick={this.handleCancel} style={{marginTop: 5, marginBottom: 15, marginLeft: 10}}>
              取消
            </Button>
          </Col>
          <Col span={24} className="sql">
            <Form.Item label={'sql'}>