2022-06-18

king

2022-06-18 fe21d23b147ed5cec22b4f76a88840b05495d4ad

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

@@ -1,7 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, notification, Modal, Spin, Tabs } from 'antd'
import { Form, notification, Modal, Spin, Tabs, Typography, Popconfirm, Button } from 'antd'
import { CheckCircleOutlined, StopOutlined, SwapOutlined, DeleteOutlined, BorderOutlined } from '@ant-design/icons'
import moment from 'moment'

import Api from '@/api'
@@ -9,9 +10,12 @@
import SettingUtils from './utils.jsx'
import asyncComponent from '@/utils/asyncComponent'
import DataSource from './datasource'
import MinView from '@/assets/img/minview.png'
import './index.scss'

const { TabPane } = Tabs
const { Paragraph } = Typography
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
const CustomScript = asyncComponent(() => import('@/templates/zshare/customscript'))
const SimpleScript = asyncComponent(() => import('./simplescript'))

@@ -33,6 +37,9 @@
    regoptions: [],
    setting: null,
    defaultSql: '',
    visible: false,
    script: null,
    scriptValue: '',
    status: {}
  }

@@ -478,6 +485,42 @@
    })
  }

  triggerConfirm = () => {
    const { script, scriptValue, scripts } = this.state
    let _scripts = fromJS(scripts).toJS()

    if (!scriptValue) {
      notification.warning({
        top: 92,
        message: '请输入sql!',
        duration: 5
      })
      return
    }

    if (script) {
      _scripts = _scripts.map(item => {
        if (script.uuid === item.uuid) {
          item.sql = scriptValue
        }
        return item
      })
    } else {
      let _script = {
        uuid: Utils.getuuid(),
        sql: scriptValue,
        $index: _scripts.length + 1,
        status: 'true'
      }

      _scripts.push(_script)
    }

    this.setState({loading: true})

    this.sqlverify(() => {this.setState({scripts: _scripts, script: null, scriptValue: '', loading: false})}, () => {this.setState({loading: false})}, 'verify', _scripts)
  }

  // 自定义脚本更新
  scriptsUpdate = (scripts) => {
    this.setState({scripts})
@@ -493,6 +536,26 @@
    this.setState({cbScripts})
  }

  handleDelete = (item) => {
    const { script, scripts } = this.state

    if (script && script.uuid === item.uuid) {
      this.setState({script: null})
    }
    this.setState({scripts: scripts.filter(cell => cell.uuid !== item.uuid)})
  }

  handleStatus = (item) => {
    item.status = item.status === 'false' ? 'true' : 'false'

    this.setState({scripts: this.state.scripts.map(cell => {
      if (cell.uuid === item.uuid) {
        return item
      }
      return cell
    })})
  }

  updateStatus = (status) => {
    let _status = {...this.state.status, ...status}
    this.setState({status: _status})
@@ -501,7 +564,7 @@

  render() {
    const { config, menu, dict } = this.props
    const { loading, activeKey, setting, defaultSql, columns, scripts, preScripts, cbScripts, status, regoptions } = this.state
    const { loading, activeKey, setting, defaultSql, columns, scripts, preScripts, cbScripts, status, regoptions, visible, script, scriptValue } = this.state

    return (
      <div className="model-table-setting-form-box" id="model-setting-form-body">
@@ -525,6 +588,17 @@
              {scripts.length ? <span className="count-tip">{scripts.length}</span> : null}
            </span>
          } disabled={!(status.interType === 'system' || (status.interType === 'custom' && status.requestMode === 'system'))} key="scripts">
            <BorderOutlined className="full-scripts" onClick={() => {
              if (this.scriptsForm && (this.scriptsForm.state.editItem || (this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))))) {
                notification.warning({
                  top: 92,
                  message: '请保存自定义脚本！',
                  duration: 5
                })
                return
              }
              this.setState({visible: true, script: null, scriptValue: ''})
            }}/>
            <CustomScript
              dict={dict}
              setting={setting}
@@ -569,6 +643,63 @@
            />
          </TabPane>
        </Tabs>
        <Modal
          wrapClassName="model-custom-table-scripts-modal"
          title="自定义脚本"
          visible={visible}
          width={'95vw'}
          maskClosable={false}
          destroyOnClose
        >
          <img className="unfull-scripts" src={MinView} onClick={() => this.setState({visible: false, script: null})} alt=""/>
          <div className="script-table-wrap">
            {scripts.map(item => {
              let title = item.sql.match(/^\s*\/\*.+\*\//)
              title = title && title[0] ? title[0] : ''
              let _text = title ? item.sql.replace(title, '') : item.sql

              return (
                <div className={'script-item ' + (script && script.uuid === item.uuid ? 'active' : '') } key={item.uuid}>
                  <div style={{cursor: 'pointer'}} onClick={() => {
                    this.setState({script: item, scriptValue: item.sql})
                  }}>
                    {title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null}
                    <Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph>
                    <div>{item.status === 'false' ?
                      <span style={{color: '#ff4d4f', marginLeft: '20px'}}>
                        禁用
                        <StopOutlined style={{marginLeft: '5px'}} />
                      </span> : 
                      <span style={{color: '#26C281', marginLeft: '20px'}}>
                        启用
                        <CheckCircleOutlined style={{marginLeft: '5px'}}/>
                      </span>}
                    </div>
                  </div>
                  <div style={{textAlign: 'right'}}>
                    <span className="operation-btn" onClick={() => this.handleStatus(item)} style={{color: '#8E44AD'}}><SwapOutlined /></span>
                    <Popconfirm
                      overlayClassName="popover-confirm"
                      title={this.props.dict['model.query.delete']}
                      onConfirm={() => this.handleDelete(item)
                    }>
                      <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
                    </Popconfirm>
                  </div>
                </div>
              )
            })}
          </div>
          <div className="script-button">
            <Button onClick={this.triggerConfirm} loading={loading} className="mk-green" style={{marginBottom: 15, marginLeft: 40}}>
              {script ? '保存' : '添加'}
            </Button>
            <Button onClick={() => {this.setState({script: null, scriptValue: ''})}} style={{marginBottom: 15, marginLeft: 10}}>
              取消
            </Button>
          </div>
          <CodeMirror value={scriptValue} onChange={(val) => {this.setState({scriptValue: val})}}></CodeMirror>
        </Modal>
      </div>
    )
  }