[Feat][UI] Add language parser. (#12666)

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({
           <DagCanvas onDrop={this.handelDrop}/>
         </div>
         <TaskForm
+          task={this.draggedTask}
           showModal={this.showModal}
           onCancelModal={() => this.showModal = false}
           onConfirmModal={() => this.showModal = false}

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<boolean>,
     default: false
+  },
+  task: {
+    type: String as PropType<string>
   }
 }
 
@@ -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 (
       <Modal
-        title={''}
+        title={this.task}
-        show={this.showModal}
+        show={(this.showModal && this.task) as boolean}
         onCancel={this.cancelModal}
         onConfirm={this.confirmModal}>
         <NForm
           ref={'TaskForm'}>
-
         </NForm>
       </Modal>
     )

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<any>
+}
+
+export { DynamicLocales, TaskDynamic }

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 })
+}

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 = {
+const data = [
-  locales: {
+  {
-    zh_CN: {
+    task: 'shell',
-      node_name: '节点名称',
+    locales: {
-      node_name_tips: '节点名称不能为空'
+      zh_CN: {
+        node_name: '节点名称',
+        node_name_tips: '节点名称不能为空'
+      },
+      en_US: {
+        node_name: 'Node Name',
+        node_name_tips: 'Node name cannot be empty'
+      }
     },
-    en_US: {
+    apis: [
-      node_name: 'Node Name',
+
-      node_name_tips: 'Node name cannot be empty'
+    ],
-    }
+    items: [
-  },
+      {
-  items: [
+        label: 'task_components.node_name',
-    {
+        type: 'input',
-      label: 'node_name',
+        field: '',
-      type: 'input',
+        validate: {
-      field: '',
+          trigger: ['input', 'blur'],
-      validate: {
+          message: 'task_components.node_name_tips'
-        trigger: ['input', 'blur'],
+        }
-        message: '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