sql编辑页面自动保存

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

@@ -99,7 +99,8 @@ const FlinkSqlEditor = (props:any) => {
       type: "Studio/saveSqlMetaData",
       payload: {
         activeKey:tabs.panes[tabIndex].key,
-        sqlMetaData
+        sqlMetaData,
+        isModified: true,
       },
     });
     onChange(val,event);

dlink-web/src/components/Studio/StudioEvent/DDL.ts

@@ -3,6 +3,21 @@ import FlinkSQL from "./FlinkSQL";
 import {SessionType} from "@/pages/FlinkSqlStudio/model";
 import {Modal,message} from "antd";
 import {addOrUpdateData, getData, handleRemove} from "@/components/Common/crud";
+
+/*--- 保存sql ---*/
+export function saveTask(current:any,dispatch: any){
+  if (current.task) {
+    let task = {
+      ...current.task,
+      statement: current.value,
+    };
+    dispatch && dispatch({
+      type: "Studio/saveTask",
+      payload: task,
+    });
+  }
+}
+
 /*--- 创建会话 ---*/
 export function createSession(session: SessionType,dispatch: any) {
   const res = addOrUpdateData("api/studio/createSession",session)

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

@@ -15,8 +15,8 @@ import {handleAddOrUpdate, postDataArray} from "@/components/Common/crud";
 import {executeSql, explainSql, getStreamGraph} from "@/pages/FlinkSqlStudio/service";
 import StudioHelp from "./StudioHelp";
 import StudioGraph from "./StudioGraph";
-import {showCluster, showTables} from "@/components/Studio/StudioEvent/DDL";
-import {useState} from "react";
+import {showCluster, showTables, saveTask} from "@/components/Studio/StudioEvent/DDL";
+import {useEffect, useState} from "react";
 import StudioExplain from "../StudioConsole/StudioExplain";
 
 const menu = (
@@ -236,21 +236,8 @@ const StudioMenu = (props: any) => {
     return data;
   };
 
-  const saveSqlAndSettingToTask = async () => {
-    const fieldsValue = await form.validateFields();
-    if (current.task) {
-      let task = {
-        ...current.task,
-        statement: current.value,
-        ...fieldsValue
-      };
-      dispatch && dispatch({
-        type: "Studio/saveTask",
-        payload: task,
-      });
-    } else {
-
-    }
+  const saveSqlAndSettingToTask = () => {
+    saveTask(current,dispatch);
   };
 
   const runMenu = (

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

@@ -4,7 +4,7 @@ import {connect} from "umi";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import styles from './index.less';
 import StudioEdit from '../StudioEdit';
-
+import {saveTask} from "@/components/Studio/StudioEvent/DDL";
 const { TabPane } = Tabs;
 
 const EditorTabs = (props: any) => {
@@ -21,6 +21,9 @@ const EditorTabs = (props: any) => {
     if(action=='add'){
       add();
     }else if(action=='remove'){
+      if(current.isModified){
+        saveTask(current,dispatch);
+      }
       remove(targetKey);
     }
   };

dlink-web/src/pages/FlinkSqlStudio/model.ts

@@ -93,6 +93,7 @@ export type TabsItemType = {
   task?: TaskType;
   console: ConsoleType;
   monaco?: any;
+  isModified:boolean;
   sqlMetaData?:SqlMetaData;
 }
 
@@ -180,6 +181,7 @@ const Model: ModelType = {
       value: '',
       closable: false,
       path: ['草稿'],
+      isModified: false,
       task: {
         jobName: '草稿',
         // type: 'standalone',
@@ -217,6 +219,7 @@ const Model: ModelType = {
         key: 0,
         value: '',
         closable: false,
+        isModified: false,
         path: ['草稿'],
         task: {
           jobName: '草稿',
@@ -304,10 +307,12 @@ const Model: ModelType = {
       let newTabs = state.tabs;
       if(newCurrent.key == payload.activeKey){
         newCurrent.sqlMetaData = payload.sqlMetaData;
+        newCurrent.isModified = payload.isModified;
       }
       for (let i = 0; i < newTabs.panes.length; i++) {
         if (newTabs.panes[i].key == payload.activeKey) {
           newTabs.panes[i].sqlMetaData = payload.sqlMetaData;
+          newTabs.panes[i].isModified = payload.isModified;
           break;
         }
       }
@@ -328,6 +333,7 @@ const Model: ModelType = {
         ...state,
         current: {
           ...newCurrent,
+          isModified:false,
         },
         tabs: {
           ...payload,