[Fix][UI Next][V1.0.0-Beta] Add validation rules to dependency of the dependent task. (#9844)

dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts

@@ -111,10 +111,11 @@ export function renderCustomParameters(
         NFormItemGi,
         {
           showLabel: !!mergedChild.name,
-          path: `${field}[${i}].${mergedChild.field}`,
+          path: mergedChild.path || `${field}[${i}].${mergedChild.field}`,
           label: mergedChild.name,
           span: unref(mergedChild.span),
-          class: mergedChild.class
+          class: mergedChild.class,
+          rule: mergedChild.rule
         },
         () => getField(mergedChild, item)
       )

dolphinscheduler-ui-next/src/components/form/types.ts

@@ -69,6 +69,8 @@ interface IJsonItemParams {
   span?: number | Ref<number>
   widget?: any
   class?: string
+  path?: string
+  rule?: FormItemRule
 }
 
 type IJsonItemFn = (i?: number) => IJsonItemParams

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -625,6 +625,7 @@ const project = {
     enter_this_child_node: 'Enter this child node',
     name: 'Node Name',
     task_name: 'Task Name',
+    task_name_tips: 'Please select a task (required)',
     name_tips: 'Please enter name (required)',
     task_type: 'Task Type',
     task_type_tips: 'Please select a task type (required)',
@@ -874,8 +875,12 @@ const project = {
     check_interval: 'Check interval',
     waiting_dependent_complete: 'Waiting Dependent complete',
     project_name: 'Project Name',
+    project_name_tips: 'Please select a project(required)',
     process_name: 'Workflow Name',
+    process_name_tips: 'Please select a workflow(required)',
     cycle_time: 'Cycle Time',
+    cycle_time_tips: 'Please select a cycle time(required)',
+    date_tips: 'Please select a date(required)',
     rule_name: 'Rule Name',
     null_check: 'NullCheck',
     custom_sql: 'CustomSql',
@@ -923,7 +928,8 @@ const project = {
     zeppelin_note_id: 'zeppelinNoteId',
     zeppelin_note_id_tips: 'Please enter the note id of your zeppelin note',
     zeppelin_paragraph_id: 'zeppelinParagraphId',
-    zeppelin_paragraph_id_tips: 'Please enter the paragraph id of your zeppelin paragraph',
+    zeppelin_paragraph_id_tips:
+      'Please enter the paragraph id of your zeppelin paragraph',
     send_email: 'Send Email',
     log_display: 'Log display',
     rows_of_result: 'rows of result',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -621,6 +621,7 @@ const project = {
     enter_this_child_node: '进入该子节点',
     name: '节点名称',
     task_name: '任务名称',
+    task_name_tips: '任务名称（必填）',
     name_tips: '请输入名称(必填)',
     task_type: '任务类型',
     task_type_tips: '请选择任务类型(必选)',
@@ -863,8 +864,12 @@ const project = {
     check_interval: '检查间隔',
     waiting_dependent_complete: '等待依赖完成',
     project_name: '项目名称',
+    project_name_tips: '项目名称（必填）',
     process_name: '工作流名称',
+    process_name_tips: '工作流名称（必填）',
     cycle_time: '时间周期',
+    cycle_time_tips: '时间周期（必填）',
+    date_tips: '日期（必填）',
     rule_name: '规则名称',
     null_check: '空值检测',
     custom_sql: '自定义SQL',

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-dependent.ts

@@ -281,7 +281,17 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
                 item.definitionCode = null
               }
             },
-            options: projectList
+            options: projectList,
+            path: `dependTaskList.${i}.dependItemList.${j}.projectCode`,
+            rule: {
+              required: true,
+              trigger: ['input', 'blur'],
+              validator(validate: any, value: string) {
+                if (!value) {
+                  return Error(t('project.node.project_name_tips'))
+                }
+              }
+            }
           }),
           (j = 0) => ({
             type: 'select',
@@ -301,7 +311,17 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
             },
             options:
               model.dependTaskList[i]?.dependItemList[j]
-                ?.definitionCodeOptions || []
+                ?.definitionCodeOptions || [],
+            path: `dependTaskList.${i}.dependItemList.${j}.definitionCode`,
+            rule: {
+              required: true,
+              trigger: ['input', 'blur'],
+              validator(validate: any, value: string) {
+                if (!value) {
+                  return Error(t('project.node.process_name_tips'))
+                }
+              }
+            }
           }),
           (j = 0) => ({
             type: 'select',
@@ -313,7 +333,17 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
             },
             options:
               model.dependTaskList[i]?.dependItemList[j]?.depTaskCodeOptions ||
-              []
+              [],
+            path: `dependTaskList.${i}.dependItemList.${j}.depTaskCode`,
+            rule: {
+              required: true,
+              trigger: ['input', 'blur'],
+              validator(validate: any, value: string) {
+                if (!value) {
+                  return Error(t('project.node.task_name_tips'))
+                }
+              }
+            }
           }),
           (j = 0) => ({
             type: 'select',
@@ -326,7 +356,17 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
                   DATE_LSIT[value]
               }
             },
-            options: CYCLE_LIST
+            options: CYCLE_LIST,
+            path: `dependTaskList.${i}.dependItemList.${j}.cycle`,
+            rule: {
+              required: true,
+              trigger: ['input', 'blur'],
+              validator(validate: any, value: string) {
+                if (!value) {
+                  return Error(t('project.node.cycle_time_tips'))
+                }
+              }
+            }
           }),
           (j = 0) => ({
             type: 'select',
@@ -334,7 +374,16 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
             span: 10,
             name: ' ',
             options:
-              model.dependTaskList[i]?.dependItemList[j]?.dateOptions || []
+              model.dependTaskList[i]?.dependItemList[j]?.dateOptions || [],
+            path: `dependTaskList.${i}.dependItemList.${j}.dateValue`,
+            rule: {
+              trigger: ['input', 'blur'],
+              validator(validate: any, value: string) {
+                if (!value) {
+                  return Error(t('project.node.date_tips'))
+                }
+              }
+            }
           }),
           (j = 0) => ({
             type: 'custom',

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-deploy-mode.ts

@@ -18,13 +18,16 @@ import {ref, watchEffect} from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { IJsonItem, IOption } from '../types'
 
-export function useDeployMode(span = 24, showClient = ref(true), showCluster = ref(true)): IJsonItem {
+export function useDeployMode(
+  span = 24,
+  showClient = ref(true),
+  showCluster = ref(true)
+): IJsonItem {
   const { t } = useI18n()
 
   const deployModeOptions = ref(DEPLOY_MODES as IOption[])
 
-    watchEffect(
+  watchEffect(() => {
-        () => {
     deployModeOptions.value = DEPLOY_MODES.filter((option) => {
       switch (option.value) {
         case 'cluster':
@@ -35,8 +38,7 @@ export function useDeployMode(span = 24, showClient = ref(true), showCluster = r
           return true
       }
     })
-        }
+  })
-    )
   return {
     type: 'radio',
     field: 'deployMode',

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-main-jar.ts

@@ -26,9 +26,7 @@ export function useMainJar(model: { [field: string]: any }): IJsonItem {
   const mainJarOptions = ref([] as IMainJar[])
   const taskStore = useTaskNodeStore()
 
-  const mainJarSpan = computed(() =>
+  const mainJarSpan = computed(() => (model.programType === 'SQL' ? 0 : 24))
-      model.programType === 'SQL' ? 0 : 24
-  )
   const getMainJars = async (programType: ProgramType) => {
     const storeMainJar = taskStore.getMainJar(programType)
     if (storeMainJar) {

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-mr.ts

@@ -23,7 +23,7 @@ export function useMr(model: { [field: string]: any }): IJsonItem[] {
   const { t } = useI18n()
 
   const mainClassSpan = computed(() =>
-      (model.programType === 'PYTHON' || model.programType === 'SQL') ? 0 : 24
+    model.programType === 'PYTHON' || model.programType === 'SQL' ? 0 : 24
   )
 
   return [

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-spark.ts

@@ -32,20 +32,14 @@ import type { IJsonItem } from '../types'
 export function useSpark(model: { [field: string]: any }): IJsonItem[] {
   const { t } = useI18n()
   const mainClassSpan = computed(() =>
-      (model.programType === 'PYTHON' || model.programType === 'SQL') ? 0 : 24
+    model.programType === 'PYTHON' || model.programType === 'SQL' ? 0 : 24
   )
 
-  const mainArgsSpan = computed(() =>
+  const mainArgsSpan = computed(() => (model.programType === 'SQL' ? 0 : 24))
-      model.programType === 'SQL' ? 0 : 24
-  )
 
-  const rawScriptSpan = computed(() =>
+  const rawScriptSpan = computed(() => (model.programType === 'SQL' ? 24 : 0))
-      model.programType === 'SQL' ? 24 : 0
-  )
 
-  const showCluster = computed(() =>
+  const showCluster = computed(() => model.programType !== 'SQL')
-      model.programType !== 'SQL'
-  )
 
   return [
     {
@@ -80,7 +74,11 @@ export function useSpark(model: { [field: string]: any }): IJsonItem[] {
         trigger: ['input', 'blur'],
         required: model.programType !== 'PYTHON' && model.programType !== 'SQL',
         validator(validate: any, value: string) {
-          if (model.programType !== 'PYTHON' && !value && model.programType !== 'SQL') {
+          if (
+            model.programType !== 'PYTHON' &&
+            !value &&
+            model.programType !== 'SQL'
+          ) {
             return new Error(t('project.node.main_class_tips'))
           }
         }

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-search.ts

@@ -48,7 +48,9 @@ export function useNodeSearch(options: Options) {
       label: node.getData().taskName,
       value: node.id
     }))
-    const filterSelect = nodesDropdown.value.findIndex(item => item.value === searchSelectValue.value)
+    const filterSelect = nodesDropdown.value.findIndex(
+      (item) => item.value === searchSelectValue.value
+    )
     filterSelect === -1 && (searchSelectValue.value = '')
   }