[Feature][UI] Added form value parser. (#12669)

* [Feature][UI] Added form value parser.

* [Feature][UI] Added form value parser.

* [Feature][UI] Added form value parser.

* [Feature][UI] Added form value parser.

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx

@@ -69,12 +69,14 @@ const DynamicDag = defineComponent({
           <DagSidebar onDragstart={this.handelDragstart}/>
           <DagCanvas onDrop={this.handelDrop}/>
         </div>
-        <TaskForm
+        {
-          task={this.draggedTask}
+          this.draggedTask && <TaskForm
-          showModal={this.showModal}
+            task={this.draggedTask}
-          onCancelModal={() => this.showModal = false}
+            showModal={this.showModal}
-          onConfirmModal={() => this.showModal = false}
+            onCancelModal={() => this.showModal = false}
-        />
+            onConfirmModal={() => this.showModal = false}
+          />
+        }
       </>
     )
   }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx

@@ -57,6 +57,7 @@ const TaskForm = defineComponent({
         onCancel={this.cancelModal}
         onConfirm={this.confirmModal}>
         <NForm
+          model={this.model}
           ref={'TaskForm'}>
         </NForm>
       </Modal>

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { ref } from 'vue'
+import type { Ref } from 'vue'
+
+export function useFormField(forms: any) {
+  const model: any = {}
+
+  const setField = (value: string, type: string): Ref<null | string> => {
+    return ref(value ?
+      value :
+      type === 'select' ?
+        null :
+        ''
+    )
+  }
+
+  forms.forEach((f: any) => {
+    if (f.field.indexOf('.') >= 0) {
+      const hierarchy = f.field.split('.')
+      model[hierarchy[0]] = {
+        [hierarchy[1]]: setField(f.defaultValue, f.type)
+      }
+    } else {
+      model[f.field] = setField(f.defaultValue, f.type)
+    }
+  })
+
+  return {
+    model
+  }
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts

@@ -17,47 +17,90 @@
 
 import { reactive } from 'vue'
 import { useDynamicLocales } from './use-dynamic-locales'
-import type { TaskDynamic } from './types'
+import { useFormField } from './use-form-field'
 
-const data = [
+const data = {
-  {
+  task: 'shell',
-    task: 'shell',
+  locales: {
-    locales: {
+    zh_CN: {
-      zh_CN: {
+      node_name: '节点名称',
-        node_name: '节点名称',
+      node_name_tips: '请输入节点名称',
-        node_name_tips: '节点名称不能为空'
+      task_priority: '任务优先级',
-      },
+      highest: '最高',
-      en_US: {
+      high: '高',
-        node_name: 'Node Name',
+      medium: '中',
-        node_name_tips: 'Node name cannot be empty'
+      low: '低',
-      }
+      lowest: '最低',
+      worker_group: 'Worker 分组',
+      script: '脚本'
     },
-    apis: [
+    en_US: {
-
+      node_name: 'Node Name',
-    ],
+      node_name_tips: 'Please entry node name',
-    items: [
+      task_priority: 'Task Priority',
-      {
+      highest: 'Highest',
-        label: 'task_components.node_name',
+      high: 'High',
-        type: 'input',
+      medium: 'Medium',
-        field: '',
+      low: 'Low',
-        validate: {
+      lowest: 'Lowest',
-          trigger: ['input', 'blur'],
+      worker_group: 'Worker Group',
-          message: 'task_components.node_name_tips'
+      script: 'Script'
-        }
+    }
-      }
+  },
-    ]
+  apis: [
-  }
+    {
-]
+      name: 'getWorkerGroupList',
+      uri: '/worker-groups/all',
+      method: 'get'
+    }
+  ],
+  forms: [
+    {
+      label: 'task_components.node_name',
+      type: 'input',
+      field: 'name',
+      defaultValue: '',
+      placeholder: 'task_components.node_name_tips'
+    },
+    {
+      label: 'task_components.task_priority',
+      type: 'select',
+      field: 'taskPriority',
+      options: [
+        { label: 'task_components.highest', value: 'HIGHEST' },
+        { label: 'task_components.high', value: 'HIGH' },
+        { label: 'task_components.medium', value: 'MEDIUM' },
+        { label: 'task_components.low', value: 'LOW' },
+        { label: 'task_components.lowest', value: 'LOWEST' }
+      ],
+      defaultValue: 'MEDIUM'
+    },
+    {
+      label: 'task_components.worker_group',
+      type: 'select',
+      field: 'workerGroup',
+      options: [],
+      defaultValue: 'default',
+      api: 'getWorkerGroupList'
+    },
+    {
+      label: 'task_components.script',
+      type: 'studio',
+      field: 'taskParams.rawScript',
+      defaultValue: ''
+    }
+  ]
+}
 
 export function useTaskForm() {
   const variables = reactive({
-    formStructure: {}
+    formStructure: {},
+    model: {}
   })
 
-  variables.formStructure = data.map((t: TaskDynamic) => {
+  variables.formStructure = data
-    useDynamicLocales(t.locales)
+  variables.model = useFormField(data.forms)
-    return t
+  useDynamicLocales(data.locales)
-  })
 
   return {
     variables