[dolphinscheduler] branch dev updated: [Feature][UI] Added form select parser. (#12753)

[songjian]

This is an automated email from the ASF dual-hosted git repository.

songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git


The following commit(s) were added to refs/heads/dev by this push:
     new 0e099037bf [Feature][UI] Added form select parser. (#12753)
0e099037bf is described below

commit 0e099037bf88b1f3a1011f340914b80eb7cde496
Author: songjianet <1778651...@qq.com>
AuthorDate: Mon Nov 7 14:41:41 2022 +0800

    [Feature][UI] Added form select parser. (#12753)
    
    * [Feature][UI] Added form select parser.
    
    * [Feature][UI] Added form select parser.
---
 .../workflow/components/dynamic-dag/task/index.tsx | 30 +++++++++++++++++-----
 .../components/dynamic-dag/task/use-task-form.ts   |  3 +++
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git 
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
 
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
index d5827f9a1b..a642da40da 100644
--- 
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
+++ 
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
@@ -15,11 +15,12 @@
  * limitations under the License.
  */
 
-import { defineComponent, getCurrentInstance, PropType, toRefs } from 'vue'
-import { NForm, NFormItem, NInput } from 'naive-ui'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 
'vue'
+import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useTaskForm } from './use-task-form'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
+import type { SelectOption } from 'naive-ui'
 
 const props = {
   showModal: {
@@ -48,9 +49,9 @@ const TaskForm = defineComponent({
       ctx.emit('confirmModal')
     }
 
-    //watch(variables.model, () => {
-    //  console.log(variables.model)
-    //})
+    watch(variables.model, () => {
+      //console.log(variables.model)
+    })
 
     return { ...toRefs(variables), cancelModal, confirmModal, t, trim }
   },
@@ -74,8 +75,25 @@ const TaskForm = defineComponent({
                 {
                   f.type === 'input' && <NInput
                     allowInput={this.trim}
-                    placeholder={this.t(f.placeholder)}
+                    placeholder={f.placeholder ? this.t(f.placeholder) : ''}
                     v-model={[(this.model as any)[f.modelField], 'value']}
+                    clearable={f.clearable}
+                  />
+                }
+                {
+                  f.type === 'select' && <NSelect
+                    placeholder={f.placeholder ? this.t(f.placeholder) : ''}
+                    v-model={[(this.model as any)[f.modelField], 'value']}
+                    options={
+                      f.optionsLocale ?
+                        f.options.map((o: SelectOption) => {
+                          return {
+                            label: this.t(o.label as string),
+                            value: o.value
+                          }
+                        }) :
+                        f.options
+                    }
                   />
                 }
               </NFormItem>
diff --git 
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
 
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
index fc47660ecb..dfeb38b04a 100644
--- 
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
+++ 
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
@@ -64,6 +64,7 @@ const data = {
       type: 'input',
       field: 'name',
       defaultValue: '',
+      clearable: true,
       placeholder: 'task_components.node_name_tips',
       validate: {
         required: true,
@@ -83,6 +84,7 @@ const data = {
         { label: 'task_components.low', value: 'LOW' },
         { label: 'task_components.lowest', value: 'LOWEST' }
       ],
+      optionsLocale: true,
       defaultValue: 'MEDIUM',
       validate: {
         required: true,
@@ -94,6 +96,7 @@ const data = {
       type: 'select',
       field: 'workerGroup',
       options: [],
+      optionsLocale: false,
       defaultValue: 'default',
       api: 'getWorkerGroupList',
       validate: {