[Feature][UI] Added form input parser. (#12701)

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

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

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

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs } from 'vue'
-import { NForm } from 'naive-ui'
+import { defineComponent, getCurrentInstance, PropType, toRefs } from 'vue'
+import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useTaskForm } from './use-task-form'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -36,6 +36,7 @@ const TaskForm = defineComponent({
   props,
   emits: ['cancelModal', 'confirmModal'],
   setup(props, ctx) {
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
     const { variables } = useTaskForm()
     const { t } = useI18n()
 
@@ -47,7 +48,11 @@ const TaskForm = defineComponent({
       ctx.emit('confirmModal')
     }
 
-    return { ...toRefs(variables), cancelModal, confirmModal, t }
+    //watch(variables.model, () => {
+    //  console.log(variables.model)
+    //})
+
+    return { ...toRefs(variables), cancelModal, confirmModal, t, trim }
   },
   render() {
     return (
@@ -60,6 +65,22 @@ const TaskForm = defineComponent({
           model={this.model}
           rules={this.rules}
           ref={'TaskForm'}>
+          {
+            (this.formStructure as Array<any>).map(f => {
+              return <NFormItem
+                label={this.t(f.label)}
+                path={f.field}
+              >
+                {
+                  f.type === 'input' && <NInput
+                    allowInput={this.trim}
+                    placeholder={this.t(f.placeholder)}
+                    v-model={[(this.model as any)[f.modelField], 'value']}
+                  />
+                }
+              </NFormItem>
+            })
+          }
         </NForm>
       </Modal>
     )

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

@@ -41,7 +41,5 @@ export function useFormField(forms: Array<any>) {
     }
   })
 
-  return {
-    model
-  }
+  return model
 }

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

@@ -24,7 +24,7 @@ const reqFunction = (url: string, method: string) => {
   })
 }
 
-export function useFormRequest(apis: any, forms: Array<any>) {
+export function useFormRequest(apis: any, forms: Array<any>): Array<any> {
   forms.map(f => {
     if (f.api) {
       reqFunction(apis[f.api].url, apis[f.api].method).then((res: any) => {

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

@@ -15,11 +15,18 @@
  * limitations under the License.
  */
 
-export function useFormStructure(forms: Array<any>) {
+export function useFormStructure(forms: Array<any>): Array<any> {
   return forms.map((f: any) => {
     delete f.validate
     delete f.api
 
+    f.modelField = f.field
+
+    if (f.field.indexOf('.') >= 0) {
+      const hierarchy = f.field.split('.')
+      f.field = hierarchy[1]
+    }
+
     return f
   })
 }

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

@@ -52,5 +52,5 @@ export function useFormValidate(forms: Array<any>) {
     }
   })
 
-  return { validate }
+  return validate
 }

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

@@ -28,6 +28,7 @@ const data = {
     zh_CN: {
       node_name: '节点名称',
       node_name_tips: '请输入节点名称',
+      node_name_validate_message: '节点名称不能为空',
       task_priority: '任务优先级',
       highest: '最高',
       high: '高',
@@ -40,6 +41,7 @@ const data = {
     en_US: {
       node_name: 'Node Name',
       node_name_tips: 'Please entry node name',
+      node_name_validate_message: 'Node name cannot be empty',
       task_priority: 'Task Priority',
       highest: 'Highest',
       high: 'High',