From 9ff5920c0a58771219b134a7b46b7d0c1e1542ad Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 19 六月 2024 23:50:13 +0800
Subject: [PATCH] 2024-06-19
---
src/templates/zshare/codemirror/index.jsx | 154 ++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 128 insertions(+), 26 deletions(-)
diff --git a/src/templates/zshare/codemirror/index.jsx b/src/templates/zshare/codemirror/index.jsx
index 98b324a..dfe9c2b 100644
--- a/src/templates/zshare/codemirror/index.jsx
+++ b/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銆乼ext/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>
+ </>
)
}
}
--
Gitblit v1.8.0