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