monacoEditor实现快捷键保存、校验sql、代码格式化

dlink-admin/src/main/java/com/dlink/controller/CatalogueController.java

@@ -206,7 +206,7 @@ public class CatalogueController {
     }
 
     /**
-     * 创建节点和作业
+     * 重命名节点和作业
      */
     @PutMapping("/toRename")
     public Result toRename(@RequestBody Catalogue catalogue) throws Exception {

dlink-web/package.json

@@ -74,6 +74,7 @@
     "react-helmet-async": "^1.0.4",
     "react-highlight-words": "^0.17.0",
     "react-monaco-editor": "^0.43.0",
+    "sql-formatter": "^4.0.2",
     "umi": "^3.5.0",
     "umi-request": "^1.0.8"
   },

dlink-web/src/components/Studio/StudioConsole/StudioExplain/index.tsx

@@ -3,7 +3,8 @@ import {connect} from "umi";
 import {Button, Tag, Space, Typography, Modal,} from 'antd';
 import {ConsoleSqlOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
-import React, {useRef, useState} from "react";
+import {explainSql} from "@/pages/FlinkSqlStudio/service";
+import {useRef, useState, useEffect} from "react";
 
 const {Paragraph} = Typography;
 
@@ -25,17 +26,41 @@ export type StudioExplainProps = {
   data: Partial<ExplainItem>;
 }
 const StudioExplain = (props: any) => {
-
+  const [explainData, setExplainData] = useState([]);
   const {
-    onCancel: handleModalVisible,
+    onClose,
     modalVisible,
-    data,
+    current,
+    currentSession,
   } = props;
 
+  useEffect(() => {
+    let selectsql = null;
+    if (current.monaco.current) {
+      let selection = current.monaco.current.editor.getSelection();
+      selectsql = current.monaco.current.editor.getModel().getValueInRange(selection);
+    }
+    if (selectsql == null || selectsql == '') {
+      selectsql = current.value;
+    }
+    let useSession = !!currentSession.session;
+    let param = {
+      ...current.task,
+      useSession: useSession,
+      session: currentSession.session,
+      configJson: JSON.stringify(current.task.config),
+      statement: selectsql,
+    };
+    const result = explainSql(param);
+    result.then(res => {
+      setExplainData(res.datas);
+    })
+  }, [])
+
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>关闭</Button>
+        <Button onClick={onClose}>关闭</Button>
       </>
     );
   };
@@ -49,7 +74,7 @@ const StudioExplain = (props: any) => {
             filterType: 'light',
           }}
           rowKey="id"
-          dataSource={data}
+          dataSource={explainData}
           pagination={{
             pageSize: 5,
           }}
@@ -66,7 +91,7 @@ const StudioExplain = (props: any) => {
                 return (
                   <Space size={0}>
                     <Tag color="blue" key={row.type}>
-                    <ConsoleSqlOutlined /> {row.type}
+                      <ConsoleSqlOutlined/> {row.type}
                     </Tag>
                   </Space>
                 );
@@ -125,7 +150,6 @@ const StudioExplain = (props: any) => {
       </>)
   };
 
-
   return (
     <Modal
       width={800}
@@ -133,13 +157,14 @@ const StudioExplain = (props: any) => {
       title="FlinkSql 语法和逻辑检查"
       visible={modalVisible}
       footer={renderFooter()}
-          onCancel={() => handleModalVisible()}
+      onCancel={onClose}
     >
       {renderContent()}
     </Modal>
   );
-          };
+};
 
-          export default connect(({Studio}: {Studio: StateType}) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
-        }))(StudioExplain);
+  currentSession: Studio.currentSession,
+}))(StudioExplain);

dlink-web/src/components/Studio/StudioEdit/index.tsx

-import React, {useEffect, useImperativeHandle, useRef} from 'react';
+import React, {useEffect, useImperativeHandle, useRef,useState} from 'react';
 import * as _monaco from "monaco-editor";
 import MonacoEditor from "react-monaco-editor";
-import {BaseDataSourceField, BaseDataSourceHeader, CompletionItem} from "./data";
-import styles from './index.less';
 import {StateType} from "@/pages/FlinkSqlStudio/model";
-import {connect} from "umi";
+import {connect,Dispatch} from "umi";
 import {DocumentStateType} from "@/pages/Document/model";
 import {DocumentTableListItem} from "@/pages/Document/data";
 import {parseSqlMetaData} from "@/components/Studio/StudioEvent/Utils";
 import {Column, MetaData} from "@/components/Studio/StudioEvent/data";
+import StudioExplain from "@/components/Studio/StudioConsole/StudioExplain";
+import {format} from "sql-formatter";
 
 let provider = {
   dispose: () => {},
@@ -34,11 +34,11 @@ const FlinkSqlEditor = (props:any) => {
       },
     tabs,
     fillDocuments,
-    dispatch,
     } = props;
 
   const editorInstance:any = useRef<any>();
   const monacoInstance: any = useRef();
+  const [modalVisible, handleModalVisible] = useState<boolean>(false);
 
   const getTabIndex = ():number=>{
     for(let i=0;i<tabs.panes.length;i++){
@@ -84,14 +84,7 @@ const FlinkSqlEditor = (props:any) => {
 
   const onChangeHandle = (val: string, event: { changes: { text: any }[] }) => {
     let sqlMetaData = parseSqlMetaData(val);
-    dispatch({
-      type: "Studio/saveSqlMetaData",
-      payload: {
-        activeKey:tabs.panes[tabIndex].key,
-        sqlMetaData,
-        isModified: true,
-      },
-    });
+    props.saveMetaData(sqlMetaData,tabs,tabIndex);
     onChange(val,event);
     /*const curWord = event.changes[0].text;
     if (curWord === ';') {
@@ -100,11 +93,7 @@ const FlinkSqlEditor = (props:any) => {
       return;
     }
     cache.current = val;*/
-    dispatch({
-      type: "Studio/saveSql",
-      payload: val,
-    });
-
+    props.saveSql(val);
   };
 
   const buildSuggestions = () => {
@@ -152,6 +141,16 @@ const FlinkSqlEditor = (props:any) => {
   const editorDidMountHandle = (editor: any, monaco: any) => {
     monacoInstance.current = monaco;
     editorInstance.current = editor;
+    editor.addCommand(monaco.KeyMod.CtrlCmd|monaco.KeyCode.KEY_1,function (){
+      props.saveText(tabs,tabIndex);
+    })
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd|monaco.KeyCode.KEY_2,function (){
+      handleModalVisible(true);
+    })
+    editor.addCommand(monaco.KeyMod.CtrlCmd|monaco.KeyCode.KEY_3,function (){
+      editor.getAction(['editor.action.formatDocument'])._run();
+    })
     provider.dispose();// 清空提示项
     // 提示项设值
     provider = monaco.languages.registerCompletionItemProvider('sql', {
@@ -163,10 +162,23 @@ const FlinkSqlEditor = (props:any) => {
       // quickSuggestions: false,
       // triggerCharacters: ['$', '.', '='],
     });
+    monaco.languages.registerDocumentRangeFormattingEditProvider('sql', {
+      provideDocumentRangeFormattingEdits(model, range, options) {
+        var formatted = format(model.getValueInRange(range), {
+          indent: ' '.repeat(options.tabSize)
+        });
+        return [
+          {
+            range: range,
+            text: formatted
+          }
+        ];
+      }
+    });
     editor.focus();
   };
 
-return (
+  return (
     <React.Fragment>
       <MonacoEditor
         ref={tabs.panes[tabIndex].monaco}
@@ -179,9 +191,33 @@ return (
         theme="vs-dark"
         editorDidMount={editorDidMountHandle}
       />
+      <StudioExplain
+        modalVisible={modalVisible}
+        onClose={()=>{handleModalVisible(false)}}
+        visible={modalVisible}
+      />
     </React.Fragment>
-);
-};
+  )
+}
+
+const mapDispatchToProps = (dispatch:Dispatch)=>({
+  saveText:(tabs:any,tabIndex:any)=>dispatch({
+    type: "Studio/saveTask",
+    payload: tabs.panes[tabIndex].task,
+  }),
+  saveSql:(val:any)=>dispatch({
+    type: "Studio/saveSql",
+    payload: val,
+  }),
+  saveMetaData:(sqlMetaData:any,tabs:any,tabIndex:any)=>dispatch({
+             type: "Studio/saveSqlMetaData",
+             payload: {
+               activeKey:tabs.panes[tabIndex].key,
+               sqlMetaData,
+               isModified: true,
+             }
+           })
+})
 
 export default connect(({ Studio,Document }: { Studio: StateType,Document: DocumentStateType }) => ({
   current: Studio.current,
@@ -189,4 +225,4 @@ export default connect(({ Studio,Document }: { Studio: StateType,Document: Docum
   tabs: Studio.tabs,
   monaco: Studio.monaco,
   fillDocuments: Document.fillDocuments,
-}))(FlinkSqlEditor);
+}),mapDispatchToProps)(FlinkSqlEditor);

dlink-web/src/components/Studio/StudioMenu/index.tsx

@@ -130,36 +130,7 @@ const StudioMenu = (props: any) => {
   };
 
   const onCheckSql = () => {
-    let selectsql = null;
-    if (current.monaco.current) {
-      let selection = current.monaco.current.editor.getSelection();
-      selectsql = current.monaco.current.editor.getModel().getValueInRange(selection);
-    }
-    if (selectsql == null || selectsql == '') {
-      selectsql = current.value;
-    }
-    let useSession = !!currentSession.session;
-    let param = {
-      ...current.task,
-      useSession: useSession,
-      session: currentSession.session,
-      configJson: JSON.stringify(current.task.config),
-      statement: selectsql,
-    };
-    const taskKey = (Math.random() * 1000) + '';
-    notification.success({
-      message: `新任务【${param.jobName}】正在检查`,
-      description: param.statement.substring(0, 40) + '...',
-      duration: null,
-      key: taskKey,
-      icon: <SmileOutlined style={{color: '#108ee9'}}/>,
-    });
-    const result = explainSql(param);
     handleModalVisible(true);
-    result.then(res => {
-      notification.close(taskKey);
-      setExplainData(res.datas);
-    })
   };
 
   const onGetStreamGraph=()=>{
@@ -431,12 +402,8 @@ const StudioMenu = (props: any) => {
         </Row>
       </Col>
       <StudioExplain
-        onCancel={() => {
-          handleModalVisible(false);
-          setExplainData([]);
-        }}
         modalVisible={modalVisible}
-        data={explainData}
+        onClose={()=>{handleModalVisible(false)}}
       />
       <Modal
         width={1000}