diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx index d605738820..667f244830 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx @@ -20,7 +20,7 @@ import { DagSidebar } from './dag-sidebar' import { DagCanvas } from './dag-canvas' import { useDagStore } from '@/store/project/dynamic/dag' import { NodeShape, NodeHeight, NodeWidth } from './dag-setting' -import { TaskForm } from './task-form' +import { TaskForm } from './task' import styles from './index.module.scss' const DynamicDag = defineComponent({ @@ -56,6 +56,7 @@ const DynamicDag = defineComponent({ } return { + draggedTask, handelDragstart, handelDrop, showModal @@ -69,6 +70,7 @@ const DynamicDag = defineComponent({ this.showModal = false} onConfirmModal={() => this.showModal = false} diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task-form.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx similarity index 81% rename from dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task-form.tsx rename to dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx index c440c0ed9e..f1da1689b7 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task-form.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx @@ -15,15 +15,19 @@ * limitations under the License. */ -import { defineComponent, PropType } from 'vue' +import { defineComponent, PropType, toRefs } from 'vue' import { NForm } from 'naive-ui' import { useTaskForm } from './use-task-form' +import { useI18n } from 'vue-i18n' import Modal from '@/components/modal' const props = { showModal: { type: Boolean as PropType, default: false + }, + task: { + type: String as PropType } } @@ -33,6 +37,7 @@ const TaskForm = defineComponent({ emits: ['cancelModal', 'confirmModal'], setup(props, ctx) { const { variables } = useTaskForm() + const { t } = useI18n() const cancelModal = () => { ctx.emit('cancelModal') @@ -42,18 +47,17 @@ const TaskForm = defineComponent({ ctx.emit('confirmModal') } - return { ...variables, cancelModal, confirmModal } + return { ...toRefs(variables), cancelModal, confirmModal, t } }, render() { return ( - ) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/types.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/types.ts new file mode 100644 index 0000000000..52c49cd359 --- /dev/null +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/types.ts @@ -0,0 +1,29 @@ +/* + * 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. + */ + +interface DynamicLocales { + zh_CN: object + en_US: object +} + +interface TaskDynamic { + task: string + locales: DynamicLocales + items: Array +} + +export { DynamicLocales, TaskDynamic } \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-dynamic-locales.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-dynamic-locales.ts new file mode 100644 index 0000000000..dac61582cc --- /dev/null +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-dynamic-locales.ts @@ -0,0 +1,24 @@ +/* + * 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 { useI18n } from 'vue-i18n' +import type { DynamicLocales } from './types' + +export function useDynamicLocales(locales: DynamicLocales): void { + useI18n().mergeLocaleMessage('zh_CN', { task_components: locales.zh_CN }) + useI18n().mergeLocaleMessage('en_US', { task_components: locales.en_US }) +} \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts similarity index 57% rename from dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts rename to dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts index 956356fef5..3f17507dd9 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts @@ -16,37 +16,48 @@ */ import { reactive } from 'vue' +import { useDynamicLocales } from './use-dynamic-locales' +import type { TaskDynamic } from './types' -const shell = { - locales: { - zh_CN: { - node_name: '节点名称', - node_name_tips: '节点名称不能为空' +const data = [ + { + task: 'shell', + locales: { + zh_CN: { + node_name: '节点名称', + node_name_tips: '节点名称不能为空' + }, + en_US: { + node_name: 'Node Name', + node_name_tips: 'Node name cannot be empty' + } }, - en_US: { - node_name: 'Node Name', - node_name_tips: 'Node name cannot be empty' - } - }, - items: [ - { - label: 'node_name', - type: 'input', - field: '', - validate: { - trigger: ['input', 'blur'], - message: 'node_name_tips' + apis: [ + + ], + items: [ + { + label: 'task_components.node_name', + type: 'input', + field: '', + validate: { + trigger: ['input', 'blur'], + message: 'task_components.node_name_tips' + } } - } - ] -} + ] + } +] export function useTaskForm() { const variables = reactive({ formStructure: {} }) - variables.formStructure = shell + variables.formStructure = data.map((t: TaskDynamic) => { + useDynamicLocales(t.locales) + return t + }) return { variables