From 71eeb9c8790c4bbf909c929957e5b92a97a3ed48 Mon Sep 17 00:00:00 2001 From: wangyizhi Date: Fri, 11 Feb 2022 09:16:05 +0800 Subject: [PATCH] [Feature][UI Next] Workflow save modal (#8341) * [Feature][UI Next] Fix tslint bugs * [Feature][UI Next] Workflow save modal * [Feature][UI Next] Format code --- .../src/locales/modules/en_US.ts | 11 +- .../src/locales/modules/zh_CN.ts | 11 +- .../views/projects/task/definition/index.tsx | 4 +- .../components/dag/dag-save-modal.tsx | 152 ++++++++++++++++++ .../workflow/components/dag/dag-toolbar.tsx | 20 +-- .../workflow/components/dag/index.tsx | 17 ++ .../components/dag/use-dag-drag-drop.ts | 7 +- .../src/views/resource/file/edit/index.tsx | 4 +- dolphinscheduler-ui-next/tsconfig.json | 1 + 9 files changed, 207 insertions(+), 20 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index ddf0067c8..06f750939 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts @@ -496,7 +496,16 @@ const project = { dagre_layout: 'Dagre', rows: 'Rows', cols: 'Cols', - copy_success: 'Copy Success' + copy_success: 'Copy Success', + workflow_name: 'Workflow Name', + description: 'Description', + tenant: 'Tenant', + timeout_alert: 'Timeout Alert', + global_variables: 'Global Variables', + basic_info: 'Basic Information', + minute: 'Minute', + key: 'Key', + value: 'Value' }, node: { current_node_settings: 'Current node settings', diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index e8e42a666..99d7b27ca 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts @@ -495,7 +495,16 @@ const project = { dagre_layout: '层次布局', rows: '行数', cols: '列数', - copy_success: '复制成功' + copy_success: '复制成功', + workflow_name: '工作流名称', + description: '描述', + tenant: '租户', + timeout_alert: '超时告警', + global_variables: '全局变量', + basic_info: '基本信息', + minute: '分', + key: '键', + value: '值' }, node: { current_node_settings: '当前节点设置', diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx index cf362e888..5fb96f85a 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx @@ -29,7 +29,7 @@ import { import { SearchOutlined } from '@vicons/antd' import { useI18n } from 'vue-i18n' import { useTable } from './use-table' -import { ALL_TASK_TYPES } from '@/views/projects/task/constants/task-type' +import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type' import Card from '@/components/card' import VersionModal from './components/version-modal' import MoveModal from './components/move-modal' @@ -113,7 +113,7 @@ const TaskDefinition = defineComponent({ { + options={Object.keys(TASK_TYPES_MAP).map((item) => { return { value: item, label: item } })} placeholder={t('project.task.task_type')} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx new file mode 100644 index 000000000..be4b9abf5 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx @@ -0,0 +1,152 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { defineComponent, PropType, ref, computed, onMounted } from 'vue' +import Modal from '@/components/modal' +import { useI18n } from 'vue-i18n' +import { + NForm, + NFormItem, + NInput, + NSelect, + NSwitch, + NInputNumber, + NDynamicInput +} from 'naive-ui' +import { queryTenantList } from '@/service/modules/tenants' +import './x6-style.scss' + +const props = { + visible: { + type: Boolean as PropType, + default: false + } +} + +interface Tenant { + tenantCode: string + id: number +} + +export default defineComponent({ + name: 'dag-save-modal', + props, + emits: ['update:show', 'save'], + setup(props, context) { + const { t } = useI18n() + + const tenants = ref([]) + const tenantsDropdown = computed(() => { + if (tenants.value) { + return tenants.value + .map((t) => ({ + label: t.tenantCode, + value: t.tenantCode + })) + .concat({ label: 'default', value: 'default' }) + } + return [] + }) + onMounted(() => { + queryTenantList().then((res: any) => { + tenants.value = res + }) + }) + + const formValue = ref({ + name: '', + description: '', + tenantCode: 'default', + timeoutFlag: false, + timeout: 0, + globalParams: [] + }) + const formRef = ref() + const rule = { + name: { + required: true + } + } + const onSubmit = () => { + context.emit('save', formValue.value) + } + const onCancel = () => { + context.emit('update:show', false) + } + + return () => ( + + + + + + + + + + + + + + + {formValue.value.timeoutFlag && ( + + '分' + }} + > + + )} + + + + + + ) + } +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx index 1edcf198f..93ed86afb 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx @@ -15,19 +15,10 @@ * limitations under the License. */ -import { - defineComponent, - ref, - inject, - PropType, - onMounted, - watch, - computed -} from 'vue' -import type { Ref } from 'vue' +import { defineComponent, ref, inject, PropType } from 'vue' import { useI18n } from 'vue-i18n' import Styles from './dag.module.scss' -import { NTooltip, NIcon, NButton, NSelect, useMessage } from 'naive-ui' +import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui' import { SearchOutlined, DownloadOutlined, @@ -37,7 +28,7 @@ import { FormatPainterOutlined, CopyOutlined } from '@vicons/antd' -import { useNodeSearch, useTextCopy, useCellQuery } from './dag-hooks' +import { useNodeSearch, useTextCopy } from './dag-hooks' import { DataUri } from '@antv/x6' import { useFullscreen } from '@vueuse/core' import { useRouter } from 'vue-router' @@ -59,7 +50,7 @@ const props = { export default defineComponent({ name: 'workflow-dag-toolbar', props, - emits: ['versionToggle'], + emits: ['versionToggle', 'saveModelToggle'], setup(props, context) { const { t } = useI18n() @@ -302,6 +293,9 @@ export default defineComponent({ type='info' secondary round + onClick={() => { + context.emit('saveModelToggle', true) + }} > {t('project.dag.save')} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx index 6c54a8c93..32ceea1a4 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx @@ -30,6 +30,7 @@ import { import { useThemeStore } from '@/store/theme/theme' import VersionModal from '../../definition/components/version-modal' import { WorkflowDefinition } from './types' +import DagSaveModal from './dag-save-modal' import './x6-style.scss' const props = { @@ -89,6 +90,20 @@ export default defineComponent({ versionModalShow.value = false } + // Save modal + const saveModalShow = ref(false) + const saveModelToggle = (bool: boolean) => { + if (typeof bool === 'boolean') { + saveModalShow.value = bool + } else { + saveModalShow.value = !versionModalShow.value + } + } + const onSave = (form: any) => { + // TODO + console.log(form) + } + return () => (
@@ -119,6 +135,7 @@ export default defineComponent({ onUpdateList={refreshDetail} /> )} +
) } diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts index 3aa881195..046c742a0 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts @@ -18,7 +18,6 @@ import { ref } from 'vue' import type { Ref } from 'vue' import type { Graph } from '@antv/x6' -import type { Dragged } from '.' import { genTaskCodeList } from '@/service/modules/task-definition' import { useCellUpdate } from './dag-hooks' import { useRoute } from 'vue-router' @@ -28,6 +27,12 @@ interface Options { graph: Ref } +interface Dragged { + x: number + y: number + type: string +} + /** * Sidebar item drag && drop in canvas */ diff --git a/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx index c6caf2336..b5e1f666e 100644 --- a/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx +++ b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx @@ -67,7 +67,7 @@ export default defineComponent({

- {this.resourceViewRef?.value.alias} + {this.resourceViewRef.value?.alias}

diff --git a/dolphinscheduler-ui-next/tsconfig.json b/dolphinscheduler-ui-next/tsconfig.json index bc376e777..8806a48df 100644 --- a/dolphinscheduler-ui-next/tsconfig.json +++ b/dolphinscheduler-ui-next/tsconfig.json @@ -13,6 +13,7 @@ "paths": { "@/*": ["src/*"] }, + "skipLibCheck": true, "types": ["vite/client"], "plugins": [{ "name": "typescript-plugin-css-modules" }] },