From f6626b05f1275cc2f8ca77f773d4f6a6af1b0a89 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 21 十一月 2022 16:11:55 +0800
Subject: [PATCH] 2022-11-21

---
 src/templates/zshare/codemirror/index.jsx |   60 ++++++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/templates/zshare/codemirror/index.jsx b/src/templates/zshare/codemirror/index.jsx
index 98b324a..24f6872 100644
--- a/src/templates/zshare/codemirror/index.jsx
+++ b/src/templates/zshare/codemirror/index.jsx
@@ -2,9 +2,10 @@
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
 import { Dropdown, Menu } from 'antd'
-import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined } from '@ant-design/icons'
+import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined, FormatPainterOutlined } from '@ant-design/icons'
 
 import {UnControlled as CodeMirror} from 'react-codemirror2'
+import sqlFormatter from '@/utils/sqlFormatter.js'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/sql/sql'
 import 'codemirror/mode/xml/xml'
@@ -26,7 +27,6 @@
   }
 
   state = {
-    editor: null,   // code瀵硅薄
     defaultVal: '', // 鍒濆鍊�
     value: '',      // 瀹炴椂鍐呭
     options: null,  // mode : text/xml, text/css, text/javascript銆乼ext/x-mysql ; theme : cobalt - 榛戝簳
@@ -34,6 +34,8 @@
     style: {fontSize: '18px', lineHeight: '32px'},
     display: true
   }
+
+  editor = null
 
   UNSAFE_componentWillMount () {
     let options = {
@@ -55,15 +57,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 +75,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,12 +101,52 @@
     }
 
     // 鍒囨崲瀛椾綋澶у皬锛屽埛鏂扮紪杈戝櫒绐楀彛锛岃В鍐宠皟鏁村悗鐨勯�夋嫨鍖哄煙閿欎贡闂
-    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)
+    })
+
+    this.setState({display: false, defaultVal: _sql}, () => {
+      this.setState({display: true})
+    })
+    
+    this.props.onChange(_sql)
+  }
+
   render() {
+    const { mode } = this.props
     const { defaultVal, options, fullScreen, style, display } = this.state
     const menu = (
       <Menu>
@@ -149,6 +191,7 @@
 
     return (
       <div className="code-mirror-wrap" style={fullScreen ? style : null}>
+        {!mode && !fullScreen ? <FormatPainterOutlined onClick={this.handleFormat}/> : null}
         {!fullScreen ? <FullscreenOutlined onClick={this.fullScreenChange}/> : null}
         {fullScreen ? <FullscreenExitOutlined onClick={this.fullScreenChange}/> : null}
         {fullScreen ? <Dropdown overlay={menu} placement="bottomRight">
@@ -158,8 +201,9 @@
           className="code-mirror-area"
           value={defaultVal}
           options={options}
+          editorDidMount={editor => { this.editor = editor }}
           onChange={(editor, data, value) => {
-            this.setState({editor, value})
+            this.setState({value})
             this.props.onChange(value)
           }}
         /> : null}

--
Gitblit v1.8.0