optimize job edit

gaoyan1998 · Oct 12, 2023 · b2ed547 · b2ed547
1 parent dde0c28
commit b2ed547
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 26 deletions.
diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
@@ -309,6 +309,9 @@ export default {
   'pages.datastudio.editor.stop.job': 'Stop job',
   'pages.datastudio.editor.stop.jobConfirm': 'Are you sure to stop the job [{jobName}]? ',
   'pages.datastudio.editor.submitting': 'The new task [{jobName}] is executing',
+  'pages.datastudio.editor.onlyread': 'Task has been published, modification is prohibited, please go offline first',
+  'pages.datastudio.editor.notsave': 'Current changes are not saved! ',
+  'pages.datastudio.editor.notsave.note': 'Continue will discard the changes, are you sure to continue?',
   'pages.datastudio.to.jobDetail': 'Operation Center',
   'pages.datastudio.explain.validate': 'Validating...',
   'pages.datastudio.explain.validate.allright': 'All Right',

diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
@@ -302,6 +302,9 @@ export default {
   'pages.datastudio.editor.stop.job': '停止作业',
   'pages.datastudio.editor.stop.jobConfirm': '确定停止作业【{jobName}】吗？',
   'pages.datastudio.editor.submitting': '新任务【{jobName}】正在执行',
+  'pages.datastudio.editor.onlyread': '任务已发布，禁止修改，请先下线任务',
+  'pages.datastudio.editor.notsave': '当前修改内容未保存！',
+  'pages.datastudio.editor.notsave.note': '继续将抛弃所修改内容，确定继续吗？',
   'pages.datastudio.to.jobDetail': '运维',
   'pages.datastudio.explain.validate': '正在校验中...',
   'pages.datastudio.explain.validate.allright': '全部正确',

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
@@ -17,25 +17,30 @@
 
 import ContentScroll from '@/components/Scroll/ContentScroll';
 import useThemeValue from '@/hooks/useThemeValue';
-import { STUDIO_TAG_RIGHT_CONTEXT_MENU } from '@/pages/DataStudio/constants';
-import { isDataStudioTabsItemType, isMetadataTabsItemType } from '@/pages/DataStudio/function';
+import {STUDIO_TAG_RIGHT_CONTEXT_MENU} from '@/pages/DataStudio/constants';
+import {getCurrentTab, isDataStudioTabsItemType, isMetadataTabsItemType} from '@/pages/DataStudio/function';
 import Editor from '@/pages/DataStudio/MiddleContainer/Editor';
-import { getTabIcon } from '@/pages/DataStudio/MiddleContainer/function';
+import {getTabIcon} from '@/pages/DataStudio/MiddleContainer/function';
 import KeyBoard from '@/pages/DataStudio/MiddleContainer/KeyBoard';
 import QuickGuide from '@/pages/DataStudio/MiddleContainer/QuickGuide';
-import { StateType, STUDIO_MODEL, TabsItemType, TabsPageType } from '@/pages/DataStudio/model';
-import { RightSide } from '@/pages/DataStudio/route';
+import {StateType, STUDIO_MODEL, TabsItemType, TabsPageType} from '@/pages/DataStudio/model';
+import {RightSide} from '@/pages/DataStudio/route';
 import RightTagsRouter from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter';
-import { connect } from '@@/exports';
-import { ConfigProvider, Divider, Dropdown, Space, Tabs } from 'antd';
-import { MenuInfo } from 'rc-menu/es/interface';
-import React, { useState } from 'react';
+import {connect} from '@@/exports';
+import {ConfigProvider, Divider, Dropdown, Modal, Space, Tabs, Typography} from 'antd';
+import {MenuInfo} from 'rc-menu/es/interface';
+import React, {useState} from 'react';
+import {ExclamationCircleFilled} from "@ant-design/icons";
+import {l} from "@/utils/intl";
+
+const {Text} = Typography;
+const { confirm } = Modal;
 
 type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
 
 const MiddleContainer = (props: any) => {
   const {
-    tabs: { panes, activeKey },
+    tabs: {panes, activeKey},
     rightKey,
     dispatch
   } = props;
@@ -186,7 +191,7 @@ const MiddleContainer = (props: any) => {
       <Dropdown
         arrow
         trigger={['contextMenu']}
-        overlayStyle={{ ...contextMenuPosition }}
+        overlayStyle={{...contextMenuPosition}}
         menu={{
           items: STUDIO_TAG_RIGHT_CONTEXT_MENU,
           onClick: handleMenuClick
@@ -195,7 +200,7 @@ const MiddleContainer = (props: any) => {
         onOpenChange={setContextMenuVisible}
       >
         {/*占位*/}
-        <div style={{ ...contextMenuPosition }} />
+        <div style={{...contextMenuPosition}}/>
       </Dropdown>
     );
   };
@@ -211,12 +216,12 @@ const MiddleContainer = (props: any) => {
         }
 
         const v = item.params;
-        return <Editor statement={v.taskData.statement} />;
+        return <Editor statement={v.taskData.statement}/>;
       }
 
       if (isMetadataTabsItemType(item)) {
         const params = item.params;
-        return <RightTagsRouter tableInfo={params.tableInfo} queryParams={params.queryParams} />;
+        return <RightTagsRouter tableInfo={params.tableInfo} queryParams={params.queryParams}/>;
       }
 
       return <></>;
@@ -232,7 +237,11 @@ const MiddleContainer = (props: any) => {
           key={item.key}
         >
           {getTabIcon(item.icon, 16)}
-          {item.label}
+          <Text
+            type={item.isModified ? 'success' : undefined}>
+            {item.label}{item.isModified ? '*' : ''}
+          </Text>
+
         </Space>
       ),
       children: (
@@ -247,7 +256,7 @@ const MiddleContainer = (props: any) => {
    * 关闭tab
    * @param {TargetKey} targetKey
    */
-  const closeTab = (targetKey: TargetKey) => {
+  const handleCloseTab = (targetKey:string) => {
     if (panes.length === 1) {
       dispatch({
         type: STUDIO_MODEL.updateSelectRightKey,
@@ -259,6 +268,23 @@ const MiddleContainer = (props: any) => {
       type: STUDIO_MODEL.closeTab,
       payload: targetKey
     });
+  }
+  const closeTab = (targetKey: TargetKey) => {
+    if (typeof targetKey == "string") {
+      const tab = getCurrentTab(panes, targetKey)
+      if (tab?.isModified){
+        confirm({
+          title: l('pages.datastudio.editor.notsave'),
+          icon: <ExclamationCircleFilled />,
+          content: l('pages.datastudio.editor.notsave.note'),
+          onOk() {
+            handleCloseTab(targetKey);
+          }
+        });
+      }else {
+        handleCloseTab(targetKey);
+      }
+    }
   };
 
   /**
@@ -268,13 +294,13 @@ const MiddleContainer = (props: any) => {
     if (tabItems?.length === 0) {
       return (
         // 这里必需设置高度，否则会导致下册内容无法正常拉动
-        <div style={{ height: 0 }}>
-          <KeyBoard />
-          <Divider />
-          <br />
-          <br />
-          <br />
-          <QuickGuide />
+        <div style={{height: 0}}>
+          <KeyBoard/>
+          <Divider/>
+          <br/>
+          <br/>
+          <br/>
+          <QuickGuide/>
         </div>
       );
     }
@@ -292,7 +318,7 @@ const MiddleContainer = (props: any) => {
       >
         <Tabs
           className={'data-studio-tabs'}
-          tabBarStyle={{ borderBlock: `1px solid ${themeValue.borderColor}` }}
+          tabBarStyle={{borderBlock: `1px solid ${themeValue.borderColor}`}}
           hideAdd
           // onTabClick={(active, e) => {updateActiveKey(active, tabItems[active].label)}}
           activeKey={activeKey}
@@ -308,7 +334,7 @@ const MiddleContainer = (props: any) => {
   return <>{renderMiddleContent()}</>;
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   tabs: Studio.tabs,
   centerContentHeight: Studio.centerContentHeight,
   rightKey: Studio.rightContainer.selectKey

diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx
@@ -102,7 +102,7 @@ const JobConfig = (props: any) => {
         pane.params.taskData[key] = all[key];
       }
     });
-
+    pane.isModified = true;
     dispatch({
       type: STUDIO_MODEL.saveTabs,
       payload: { ...props.tabs }

diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts
@@ -103,6 +103,7 @@ export type TaskDataBaseType = {
   id: number;
   name: string;
   statement: string;
+  step: number;
 };
 
 export type TaskDataType = TaskDataBaseType & Record<string, any>;