[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

@@ -14,49 +14,51 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ref, watchEffect} from 'vue'
-import {useI18n} from 'vue-i18n'
-import type {IJsonItem, IOption} from '../types'
+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 {
-    const {t} = useI18n()
+export function useDeployMode(
+  span = 24,
+  showClient = ref(true),
+  showCluster = ref(true)
+): IJsonItem {
+  const { t } = useI18n()
 
-    const deployModeOptions = ref(DEPLOY_MODES as IOption[])
+  const deployModeOptions = ref(DEPLOY_MODES as IOption[])
 
-    watchEffect(
-        () => {
-            deployModeOptions.value = DEPLOY_MODES.filter((option) => {
-                switch (option.value) {
-                    case 'cluster':
-                        return showCluster.value
-                    case 'client':
-                        return showClient.value
-                    default:
-                        return true
-                }
-            })
-        }
-    )
-    return {
-        type: 'radio',
-        field: 'deployMode',
-        name: t('project.node.deploy_mode'),
-        options: deployModeOptions,
-        span
-    }
+  watchEffect(() => {
+    deployModeOptions.value = DEPLOY_MODES.filter((option) => {
+      switch (option.value) {
+        case 'cluster':
+          return showCluster.value
+        case 'client':
+          return showClient.value
+        default:
+          return true
+      }
+    })
+  })
+  return {
+    type: 'radio',
+    field: 'deployMode',
+    name: t('project.node.deploy_mode'),
+    options: deployModeOptions,
+    span
+  }
 }
 
 export const DEPLOY_MODES = [
-    {
-        label: 'cluster',
-        value: 'cluster'
-    },
-    {
-        label: 'client',
-        value: 'client'
-    },
-    {
-        label: 'local',
-        value: 'local'
-    }
+  {
+    label: 'cluster',
+    value: 'cluster'
+  },
+  {
+    label: 'client',
+    value: 'client'
+  },
+  {
+    label: 'local',
+    value: 'local'
+  }
 ]

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(() =>
-      model.programType === 'SQL' ? 0 : 24
-  )
+  const mainJarSpan = computed(() => (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(() =>
-      model.programType === 'SQL' ? 0 : 24
-  )
+  const mainArgsSpan = computed(() => (model.programType === 'SQL' ? 0 : 24))
 
-  const rawScriptSpan = computed(() =>
-      model.programType === 'SQL' ? 24 : 0
-  )
+  const rawScriptSpan = computed(() => (model.programType === 'SQL' ? 24 : 0))
 
-  const showCluster = computed(() =>
-      model.programType !== 'SQL'
-  )
+  const showCluster = computed(() => 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/task/components/node/tasks/use-zeppelin.ts

@@ -17,7 +17,7 @@
 
 import { reactive } from 'vue'
 import * as Fields from '../fields/index'
-import type { IJsonItem, INodeData, ITaskData  } from '../types'
+import type { IJsonItem, INodeData, ITaskData } from '../types'
 
 export function useZeppelin({
   projectCode,

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 = '')
   }