2024-06-19

king

2024-06-19 9ff5920c0a58771219b134a7b46b7d0c1e1542ad

 src/templates/zshare/codemirror/index.jsx

@@ -1,10 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Dropdown, Menu } from 'antd'
import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined } from '@ant-design/icons'
import { Dropdown, Menu, Modal, notification } from 'antd'
import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined, FormatPainterOutlined, SwapOutlined } from '@ant-design/icons'

import {UnControlled as CodeMirror} from 'react-codemirror2'
import sqlFormatter from '@/utils/sqlFormatter.js'
import ReplaceForm from './replaceform'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/xml/xml'
@@ -22,20 +24,25 @@
    value: PropTypes.string, // 内容
    mode: PropTypes.any,     // 可选，语言模式，默认为sql
    theme: PropTypes.any,    // 可选，主题样式
    func: PropTypes.any,     // 编辑存储过程
    onChange: PropTypes.func // 内容变化时回调
  }

  state = {
    editor: null,   // code对象
    defaultVal: '', // 初始值
    value: '',      // 实时内容
    options: null,  // mode : text/xml, text/css, text/javascript、text/x-mysql ; theme : cobalt - 黑底
    fullScreen: false,
    style: {fontSize: '18px', lineHeight: '32px'},
    display: true
    display: true,
    visible: false
  }

  editor = null

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

    let options = {
      lineNumbers: true,
      lineWrapping: true,
@@ -48,6 +55,7 @@
    }

    this.setState({
      style: func ? {fontSize: '14px', lineHeight: '25px'} : {fontSize: '18px', lineHeight: '32px'},
      value: this.props.value || '',
      defaultVal: this.props.value || '',
      options
@@ -55,15 +63,15 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { value, editor } = this.state
    const { value } = this.state

    if (value !== nextProps.value) {
      this.setState({
        value: nextProps.value || ''
      })

      if (editor && editor.setValue) {
        editor.setValue(nextProps.value || '')
      if (this.editor && this.editor.setValue) {
        this.editor.setValue(nextProps.value || '')
      } else {
        this.setState({
          defaultVal: nextProps.value || ''
@@ -73,7 +81,7 @@
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS({...this.state, value: '', editor: ''}), fromJS({...nextState, value: '', editor: ''}))
    return !is(fromJS({...this.state, value: ''}), fromJS({...nextState, value: ''}))
  }

  fullScreenChange = () => {
@@ -99,13 +107,90 @@
    }

    // 切换字体大小，刷新编辑器窗口，解决调整后的选择区域错乱问题
    this.setState({style: _style, display: false, editor: null, defaultVal: this.state.value}, () => {
    this.setState({style: _style, display: false, defaultVal: this.state.value}, () => {
      this.setState({display: true})
    })
  }

  handleFormat = () => {
    let _sql = this.state.value
    
    if (!_sql) return

    let getuuid = () => {
      let uuid = []
      let _options = '0123456789abcdefghigklmnopqrstuv'
      for (let i = 0; i < 19; i++) {
        uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
      }
      return '\'' + uuid.join('') + '\''
    }

    let arr = []
    _sql = _sql.replace(/@[0-9a-zA-Z_]+@/g, (word) => {
      let uuid = getuuid()
      arr.push({id: uuid, value: word})
      return uuid
    })

    _sql = sqlFormatter.format(_sql.replace(/\s{2,}/g, ' '))
    // _sql = _sql.replace(/case\n\s+when\s/ig, (word) => {
    //   return word.replace(/case/, '').replace(/when/, 'case when')
    // })
    
    _sql = _sql.replace(/\$\s\*\s\//g, '$*/').replace(/\*\s\//g, '*/')

    arr.forEach(item => {
      _sql = _sql.replace(item.id, item.value)
    })

    _sql = _sql.replace(/,\n\s*/g, ',')

    this.setState({display: false, defaultVal: _sql}, () => {
      this.setState({display: true})
    })
    
    this.props.onChange(_sql)
  }

  submit = () => {
    let _sql = this.state.value

    this.ReplaceRef.handleConfirm().then(res => {
      let reg = new RegExp(res.origin, 'ig')
      let times = _sql.match(reg)

      if (!times) {
        notification.warning({
          top: 92,
          message: '未查询到字符《' + res.origin + '》。',
          duration: 5
        })
        return
      }

      localStorage.setItem(window.GLOB.sysSign + 'sql_char', JSON.stringify([res.origin, res.value]))

      _sql = _sql.replace(reg, res.value)

      this.setState({display: false, defaultVal: _sql}, () => {
        this.setState({display: true})
      })
      
      this.props.onChange(_sql)

      notification.success({
        top: 92,
        message: `共替换${times.length}处字符《${res.origin}》。`,
        duration: 5
      })
      this.setState({ visible: false })
    })
  }

  render() {
    const { defaultVal, options, fullScreen, style, display } = this.state
    const { mode, func } = this.props
    const { defaultVal, options, fullScreen, style, display, visible } = this.state
    const menu = (
      <Menu>
        <Menu.Item
@@ -148,22 +233,39 @@
    )

    return (
      <div className="code-mirror-wrap" style={fullScreen ? style : null}>
        {!fullScreen ? <FullscreenOutlined onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <FullscreenExitOutlined onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <Dropdown overlay={menu} placement="bottomRight">
          <FontSizeOutlined />
        </Dropdown> : null}
        {display ? <CodeMirror
          className="code-mirror-area"
          value={defaultVal}
          options={options}
          onChange={(editor, data, value) => {
            this.setState({editor, value})
            this.props.onChange(value)
          }}
        /> : null}
      </div>
      <>
        <div className={'code-mirror-wrap ' + (fullScreen ? 'mk-fullscreen' : '')} style={fullScreen || func ? style : null}>
          {!mode ? <FormatPainterOutlined title="格式化" onClick={this.handleFormat}/> : null}
          <FullscreenOutlined title="最大化" onClick={this.fullScreenChange}/>
          <FullscreenExitOutlined title="向下还原" onClick={this.fullScreenChange}/>
          {fullScreen || func ? <Dropdown overlayClassName="mk-mirror-font" overlay={menu} placement="bottomRight">
            <FontSizeOutlined />
          </Dropdown> : null}
          {!mode ? <SwapOutlined title="字符替换" onClick={() => this.setState({visible: true})}/> : null}
          {display ? <CodeMirror
            className="code-mirror-area"
            value={defaultVal}
            options={options}
            editorDidMount={editor => { this.editor = editor }}
            onChange={(editor, data, value) => {
              this.setState({value})
              this.props.onChange(value)
            }}
          /> : null}
        </div>
        <Modal
          title="字符替换"
          visible={visible}
          width={500}
          maskClosable={false}
          okText="替换"
          onOk={this.submit}
          onCancel={() => {this.setState({ visible: false })}}
          destroyOnClose
        >
          <ReplaceForm inputSubmit={this.submit} wrappedComponentRef={(inst) => this.ReplaceRef = inst}/>
        </Modal>
      </>
    )
  }
}