[Feature][UI] Added form select parser. (#12753)

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

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

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>

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: {