[Feature][UI] Added form validate parser. (#12682)

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

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

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

@@ -0,0 +1,56 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+import type { FormItemRule } from 'naive-ui'
+
+export function useFormValidate(forms: any) {
+  const { t } = useI18n()
+  const validate: any = {}
+
+  const setValidate = (v: any): object => {
+    const data: any = {
+      required: v.required,
+      trigger: v.trigger
+    }
+
+    if (v.type) {
+      if (v.type === 'non-empty') {
+        data['validator'] = (rule: FormItemRule, value: string) => {
+          if (!value) {
+            return Error(t(v.message))
+          }
+        }
+      }
+    }
+
+    return data
+  }
+
+  forms.forEach((f: any) => {
+    if (!f.validate && Object.keys(f.validate).length <= 0) return
+
+    if (f.field.indexOf('.') >= 0) {
+      const hierarchy = f.field.split('.')
+      validate[hierarchy[1]] = setValidate(f.validate)
+    } else {
+      validate[f.field] = setValidate(f.validate)
+    }
+  })
+
+  return { validate }
+}

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

@@ -18,6 +18,7 @@
 import { reactive } from 'vue'
 import { useDynamicLocales } from './use-dynamic-locales'
 import { useFormField } from './use-form-field'
+import { useFormValidate } from './use-form-validate'
 
 const data = {
   task: 'shell',
@@ -60,7 +61,13 @@ const data = {
       type: 'input',
       field: 'name',
       defaultValue: '',
-      placeholder: 'task_components.node_name_tips'
+      placeholder: 'task_components.node_name_tips',
+      validate: {
+        required: true,
+        trigger: ['input', 'blur'],
+        type: 'non-empty',
+        message: 'task_components.node_name_validate_message'
+      }
     },
     {
       label: 'task_components.task_priority',
@@ -73,7 +80,11 @@ const data = {
         { label: 'task_components.low', value: 'LOW' },
         { label: 'task_components.lowest', value: 'LOWEST' }
       ],
-      defaultValue: 'MEDIUM'
+      defaultValue: 'MEDIUM',
+      validate: {
+        required: true,
+        trigger: ['input', 'blur']
+      }
     },
     {
       label: 'task_components.worker_group',
@@ -81,13 +92,23 @@ const data = {
       field: 'workerGroup',
       options: [],
       defaultValue: 'default',
-      api: 'getWorkerGroupList'
+      api: 'getWorkerGroupList',
+      validate: {
+        required: true,
+        trigger: ['input', 'blur']
+      }
     },
     {
       label: 'task_components.script',
       type: 'studio',
       field: 'taskParams.rawScript',
-      defaultValue: ''
+      defaultValue: '',
+      validate: {
+        required: true,
+        trigger: ['input', 'blur'],
+        type: 'non-empty',
+        message: 'task_components.script_validate_message'
+      }
     }
   ]
 }
@@ -95,11 +116,13 @@ const data = {
 export function useTaskForm() {
   const variables = reactive({
     formStructure: {},
-    model: {}
+    model: {},
+    rules: {}
   })
 
   variables.formStructure = data
   variables.model = useFormField(data.forms)
+  variables.rules = useFormValidate(data.forms)
   useDynamicLocales(data.locales)
 
   return {