2021-02-02

king

2021-02-02 316877c1d9e5b6d92334f30b03d97d7e833cd934

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

New file
@@ -0,0 +1,488 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Icon, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd'
import moment from 'moment'

import Utils from '@/utils/utils.js'
import Api from '@/api'
import SettingUtils from '../utils'
import CodeMirror from '@/templates/zshare/codemirror'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const { Paragraph } = Typography
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))

class CustomForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    setting: PropTypes.object,      // 设置
    scripts: PropTypes.array,       // 自定义脚本列表
    searches: PropTypes.array,      // 搜索条件
    regoptions: PropTypes.any,      // 正则替换
    scriptsChange: PropTypes.func,  // 自定义脚本切换时验证
    scriptsUpdate: PropTypes.func   // 表单
  }

  state = {
    editItem: null,
    loading: false,
    usefulFields: '',
    systemScripts: [],
    scriptsColumns: [
      {
        title: 'SQL',
        dataIndex: 'sql',
        width: '60%',
        render: (text) => {
          let title = text.match(/^\s*\/\*.+\*\//)
          title = title && title[0] ? title[0] : ''
          text = title ? text.replace(title, '') : text

          return (
            <div>
              {title ? <span style={{color: '#a50'}}>{title}</span> : null}
              <Paragraph copyable ellipsis={{ rows: 4, expandable: true }}>{text}</Paragraph>
            </div>
          )
        }
      },
      {
        title: '执行位置',
        dataIndex: 'position',
        width: '13%',
        render: (text, record) => {
          if (record.position === 'front') {
            return 'sql前'
          } else {
            return 'sql后'
          }
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: '12%',
        render: (text, record) => record.status === 'false' ?
          (
            <div>
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
            </div>
          ) :
          (
            <div>
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
          )
      },
      {
        title: '操作',
        align: 'center',
        width: '15%',
        dataIndex: 'operation',
        render: (text, record) =>
          (<div style={{textAlign: 'center'}}>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span>
            <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.handleDelete(record)
            }>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
            </Popconfirm>
          </div>)
      }
    ]
  }

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

    let _usefulFields = []
    let scriptsColumns = fromJS(this.state.scriptsColumns).toJS()

    if (searches) {
      searches.forEach(item => {
        if (!item.field) return
        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)
        }
      })
      _usefulFields = _usefulFields.join(', ')
      scriptsColumns = scriptsColumns.filter(item => {
        if (item.dataIndex === 'sql') {
          item.width = '70%'
        }
        return item.dataIndex !== 'position'
      })
    } else {
      _usefulFields = null
    }

    this.setState({
      usefulFields: _usefulFields,
      scripts: fromJS(scripts).toJS(),
      scriptsColumns
    })
  }

  componentDidMount () {
    this.getsysScript()
  }

  getsysScript = () => {
    let _scriptSql = `Select distinct func+Remark as funcname,longparam, s.Sort from  s_custom_script s inner join (select OpenID from sapp where ID=@Appkey@) p on s.openid = case when s.appkey='' then s.openid else p.OpenID end order by s.Sort`

    _scriptSql = Utils.formatOptions(_scriptSql)

    let _sParam = {
      func: 'sPC_Get_SelectedList',
      LText: _scriptSql,
      obj_name: 'data',
      arr_field: 'funcname,longparam'
    }
    
    _sParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    _sParam.secretkey = Utils.encrypt(_sParam.LText, _sParam.timestamp)
    _sParam.open_key = Utils.encryptOpenKey(_sParam.secretkey, _sParam.timestamp) // 云端数据验证
    
    Api.getSystemConfig(_sParam).then(res => {
      if (res.status) {
        let _scripts = res.data.map(item => {
          let _item = {
            name: item.funcname,
            value: window.decodeURIComponent(window.atob(item.longparam))
          }
          return _item
        })

        this.setState({
          systemScripts: _scripts
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      }
    })
  }

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

  handleConfirm = () => {
    const { scripts, editItem } = this.state
    
    let _sql = this.props.form.getFieldValue('sql')

    if (!_sql) {
      notification.warning({
        top: 92,
        message: '请填写自定义脚本！',
        duration: 5
      })
      return
    } else if (/^\s+$/.test(_sql)) {
      notification.warning({
        top: 92,
        message: '自定义脚本不可为空！',
        duration: 5
      })
      return
    }

    let values = {
      uuid: editItem && editItem.uuid ? editItem.uuid : Utils.getuuid(),
      sql: _sql,
    }

    if (this.props.form.getFieldValue('position')) {
      values.position = this.props.form.getFieldValue('position')
    }

    let _quot = values.sql.match(/'{1}/g)
    let _lparen = values.sql.match(/\({1}/g)
    let _rparen = values.sql.match(/\){1}/g)

    _quot = _quot ? _quot.length : 0
    _lparen = _lparen ? _lparen.length : 0
    _rparen = _rparen ? _rparen.length : 0

    if (_quot % 2 !== 0) {
      notification.warning({
        top: 92,
        message: 'sql中\'必须成对出现',
        duration: 5
      })
      return
    } else if (_lparen !== _rparen) {
      notification.warning({
        top: 92,
        message: 'sql中()必须成对出现',
        duration: 5
      })
      return
    } else if (/--/ig.test(values.sql)) {
      notification.warning({
        top: 92,
        message: '自定义sql语句中，不可出现字符 -- ，注释请用 /*内容*/',
        duration: 5
      })
      return
    }

    let error = Utils.verifySql(values.sql, 'customscript')

    if (error) {
      notification.warning({
        top: 92,
        message: 'sql中不可使用' + error,
        duration: 5
      })
      return
    }

    let _scripts = fromJS(scripts).toJS()

    if (editItem && editItem.uuid) {
      _scripts = _scripts.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      _scripts.push(values)
    }

    let param = {
      func: 's_debug_sql',
      exec_type: 'y',
      LText: SettingUtils.getCustomDebugSql(_scripts, this.props.regoptions)
    }
    param.LText = Utils.formatOptions(param.LText)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt('', param.timestamp)
    
    this.setState({loading: true})
    Api.getLocalConfig(param).then(result => {
      if (result.status) {
        this.setState({
          loading: false,
          scripts: _scripts,
          editItem: null
        })
  
        this.props.scriptsUpdate(_scripts)
        this.props.form.setFieldsValue({
          sql: ''
        })
      } else {
        this.setState({loading: false})
        Modal.error({
          title: result.message
        })
      }
    })
  }

  selectScript = (value, option) => {
    if (!value || !option) return
    let _sql = this.props.form.getFieldValue('sql')
    if (_sql) {
      _sql = _sql + ` 

      `
    }

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

    this.props.form.setFieldsValue({
      sql: _sql
    })
  }

  handleEdit = (record) => {
    const { usefulFields } = this.state
    this.setState({
      editItem: record
    })

    if (usefulFields) {
      this.props.form.setFieldsValue({
        sql: record.sql
      })
    } else {
      this.props.form.setFieldsValue({
        sql: record.sql,
        position: record.position || 'back'
      })
    }

    this.scrolltop()
  }

  scrolltop = () => {
    let node = document.getElementById('model-setting-form-body').parentNode

    if (node && node.scrollTop) {
      let inter = Math.ceil(node.scrollTop / 10)

      let timer = setInterval(() => {
        if (node.scrollTop - inter > 0) {
          node.scrollTop = node.scrollTop - inter
        } else {
          node.scrollTop = 0
          clearInterval(timer)
        }
      }, 10)
    }
  }

  changeScripts = (scripts) => {
    this.setState({scripts})
    this.props.scriptsUpdate(scripts)
  }

  handleStatus = (record) => {
    let scripts = fromJS(this.state.scripts).toJS()
    record.status = record.status === 'false' ? 'true' : 'false'

    scripts = scripts.map(item => {
      if (item.uuid === record.uuid) {
        return record
      } else {
        return item
      }
    })

    this.setState({scripts})
    this.props.scriptsUpdate(scripts)
  }

  handleDelete = (record) => {
    let scripts = fromJS(this.state.scripts).toJS()
    scripts = scripts.filter(item => item.uuid !== record.uuid)

    this.setState({ scripts })
    this.props.scriptsUpdate(scripts)
  }

  render() {
    const { setting, scripts } = this.props
    const { getFieldDecorator } = this.props.form
    const { usefulFields, scriptsColumns, systemScripts } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }

    return (
      <div className="modal-menu-setting-script">
        <Form {...formItemLayout}>
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item label={'回调表名'} style={{whiteSpace: 'nowrap', margin: 0}}>
                {setting.cbTable}
              </Form.Item>
            </Col>
            <Col span={16}>
              <Form.Item label={'报错字段'} style={{margin: 0}}>
                ErrorCode, retmsg
              </Form.Item>
            </Col>
            {usefulFields ? <Col span={24} className="sqlfield">
              <Form.Item label={'可用字段'}>
                id, bid, loginuid, sessionuid, userid, username, fullname, appkey, time_id{usefulFields ? ', ' + usefulFields : ''}
              </Form.Item>
            </Col> : null}
            {!usefulFields ? <Col span={24} className="sqlfield">
              <Form.Item label={'可用字段'}>
                id, bid, loginuid, sessionuid, userid, username, fullname, appkey, time_id
              </Form.Item>
            </Col> : null}
            {!usefulFields ? <Col span={8} style={{whiteSpace: 'nowrap'}}>
              <Form.Item style={{marginBottom: 0}} label="执行位置">
                {getFieldDecorator('position', {
                  initialValue: 'front'
                })(
                  <Radio.Group>
                    <Radio value="front">sql前</Radio>
                    <Radio value="back">sql后</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            <Col span={10} className="quick-add">
              <Form.Item label={'快捷添加'} style={{marginBottom: 0}}>
                <Select
                  allowClear
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={this.selectScript}
                >
                  {!usefulFields ? <Select.Option key="default" value={`declare @${setting.cbTable} table (mk_api_key nvarchar(100),mk_level nvarchar(10),mk_id nvarchar(50),mk_bid nvarchar(50))\n/*@${setting.cbTable}_data table (mk_level nvarchar(10),mk_id nvarchar(50),mk_bid nvarchar(50))*/`}>默认sql</Select.Option> : null}
                  {systemScripts.map((option, i) =>
                    <Select.Option style={{whiteSpace: 'normal'}} key={i} value={option.value}>{option.name}</Select.Option>
                  )}
                </Select>
              </Form.Item>
            </Col>
            <Col span={6} className="add">
              <Button onClick={this.handleConfirm} loading={this.state.loading} className="mk-green" style={{marginTop: 5, marginBottom: 15, marginLeft: 30}}>
                保存
              </Button>
              <Button onClick={this.handleCancel} style={{marginTop: 5, marginBottom: 15, marginLeft: 10}}>
                取消
              </Button>
            </Col>
            <Col span={24} className="sql">
              <Form.Item label={'sql'}>
                {getFieldDecorator('sql', {
                  initialValue: ''
                })(<CodeMirror />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <EditTable data={scripts} actions={['move']} columns={scriptsColumns} onChange={this.changeScripts}/>
      </div>
    )
  }
}

export default Form.create()(CustomForm)