From b2ed5478000ff408e4aa4e629d5bd2d6c7bc2668 Mon Sep 17 00:00:00 2001 From: ikiler Date: Thu, 12 Oct 2023 20:21:38 +0800 Subject: [PATCH] optimize job edit --- dinky-web/src/locales/en-US/pages.ts | 3 + dinky-web/src/locales/zh-CN/pages.ts | 3 + .../DataStudio/MiddleContainer/index.tsx | 76 +++++++++++++------ .../RightContainer/JobConfig/index.tsx | 2 +- dinky-web/src/pages/DataStudio/model.ts | 1 + 5 files changed, 59 insertions(+), 26 deletions(-) diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts index f880ce1804..c3f12abc0f 100644 --- 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 index 4b454cc305..68cd95479d 100644 --- 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 index da6c617eee..10c7622531 100644 --- 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) => { { onOpenChange={setContextMenuVisible} > {/*占位*/} -
+
); }; @@ -211,12 +216,12 @@ const MiddleContainer = (props: any) => { } const v = item.params; - return ; + return ; } if (isMetadataTabsItemType(item)) { const params = item.params; - return ; + return ; } return <>; @@ -232,7 +237,11 @@ const MiddleContainer = (props: any) => { key={item.key} > {getTabIcon(item.icon, 16)} - {item.label} + + {item.label}{item.isModified ? '*' : ''} + + ), 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: , + 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 ( // 这里必需设置高度，否则会导致下册内容无法正常拉动 -
- - -
-
-
- +
+ + +
+
+
+
); } @@ -292,7 +318,7 @@ const MiddleContainer = (props: any) => { > {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 index 48257256ae..e2050a6ada 100644 --- 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 index 86c7e40821..0f4de0ba28 100644 --- 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;