[Feature][UI] Added form stadio parser. (#12801)

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

@@ -20,6 +20,7 @@ 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 MonacoEditor from '@/components/monaco-editor'
 import type { SelectOption } from 'naive-ui'
 
 const props = {
@@ -49,11 +50,31 @@ const TaskForm = defineComponent({
       ctx.emit('confirmModal')
     }
 
+    const onUpdateValue = (v: any, f: any) => {
+      f.modelField.indexOf('.') >= 0 ?
+        (variables.model as any)[f.modelField.split('.')[0]][f.modelField.split('.')[1]] = v :
+        (variables.model as any)[f.modelField] = v
+    }
+
+    const setDefaultValue = (f: any) => {
+      return f.modelField.indexOf('.') >= 0 ?
+        (variables.model as any)[f.modelField.split('.')[0]][f.modelField.split('.')[1]] :
+        (variables.model as any)[f.modelField]
+    }
+
     watch(variables.model, () => {
       //console.log(variables.model)
     })
 
-    return { ...toRefs(variables), cancelModal, confirmModal, t, trim }
+    return {
+      ...toRefs(variables),
+      cancelModal,
+      confirmModal,
+      onUpdateValue,
+      setDefaultValue,
+      t,
+      trim
+    }
   },
   render() {
     return (
@@ -65,7 +86,7 @@ const TaskForm = defineComponent({
         <NForm
           model={this.model}
           rules={this.rules}
-          ref={'TaskForm'}>
+          ref={'taskForm'}>
           {
             (this.formStructure as Array<any>).map(f => {
               return <NFormItem
@@ -76,14 +97,16 @@ const TaskForm = defineComponent({
                   f.type === 'input' && <NInput
                     allowInput={this.trim}
                     placeholder={f.placeholder ? this.t(f.placeholder) : ''}
-                    v-model={[(this.model as any)[f.modelField], 'value']}
+                    defaultValue={this.setDefaultValue(f)}
+                    onUpdateValue={(v) => this.onUpdateValue(v, f)}
                     clearable={f.clearable}
                   />
                 }
                 {
                   f.type === 'select' && <NSelect
                     placeholder={f.placeholder ? this.t(f.placeholder) : ''}
-                    v-model={[(this.model as any)[f.modelField], 'value']}
+                    defaultValue={this.setDefaultValue(f)}
+                    onUpdateValue={(v) => this.onUpdateValue(v, f)}
                     options={
                       f.optionsLocale ?
                         f.options.map((o: SelectOption) => {
@@ -96,6 +119,12 @@ const TaskForm = defineComponent({
                     }
                   />
                 }
+                {
+                  f.type === 'studio' && <MonacoEditor
+                    defaultValue={this.setDefaultValue(f)}
+                    onUpdateValue={(v) => this.onUpdateValue(v, f)}
+                  />
+                }
               </NFormItem>
             })
           }

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

@@ -18,21 +18,28 @@
 import { useI18n } from 'vue-i18n'
 import type { FormItemRule } from 'naive-ui'
 
-export function useFormValidate(forms: Array<any>) {
+export function useFormValidate(forms: Array<any>, model: any) {
   const { t } = useI18n()
   const validate: any = {}
 
-  const setValidate = (v: any): object => {
+  const setValidate = (validate: any, field?: any): object => {
     const data: any = {
-      required: v.required,
-      trigger: v.trigger
+      required: validate.required,
+      trigger: validate.trigger
     }
 
-    if (v.type) {
-      if (v.type === 'non-empty') {
+    if (validate.type) {
+      if (validate.type === 'non-empty') {
         data['validator'] = (rule: FormItemRule, value: string) => {
+          if (field) {
+            const hierarchy = field.split('.')
+            if (!model[hierarchy[0]][hierarchy[1]]) {
+              return Error(t(validate.message))
+            }
+          } else {
             if (!value) {
-            return Error(t(v.message))
+              return Error(t(validate.message))
+            }
           }
         }
       }
@@ -46,7 +53,7 @@ export function useFormValidate(forms: Array<any>) {
 
     if (f.field.indexOf('.') >= 0) {
       const hierarchy = f.field.split('.')
-      validate[hierarchy[1]] = setValidate(f.validate)
+      validate[hierarchy[1]] = setValidate(f.validate, f.field)
     } else {
       validate[f.field] = setValidate(f.validate)
     }

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

@@ -29,6 +29,7 @@ const data = {
       node_name: '节点名称',
       node_name_tips: '请输入节点名称',
       node_name_validate_message: '节点名称不能为空',
+      script_validate_message: '脚本内容不能为空',
       task_priority: '任务优先级',
       highest: '最高',
       high: '高',
@@ -42,6 +43,7 @@ const data = {
       node_name: 'Node Name',
       node_name_tips: 'Please entry node name',
       node_name_validate_message: 'Node name cannot be empty',
+      script_validate_message: 'Script content cannot be empty',
       task_priority: 'Task Priority',
       highest: 'Highest',
       high: 'High',
@@ -128,7 +130,7 @@ export function useTaskForm() {
 
   useDynamicLocales(data.locales)
   variables.model = useFormField(data.forms)
-  variables.rules = useFormValidate(data.forms)
+  variables.rules = useFormValidate(data.forms, variables.model)
   variables.formStructure = useFormStructure(useFormRequest(data.apis, data.forms))
 
   return {