From f747b606e985836c734da23509c74c3b95f542b7 Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Fri, 29 Apr 2022 16:00:10 +0800 Subject: [PATCH] [Fix][UI Next][V1.0.0-Beta] Add validation rules to dependency of the dependent task. (#9844) --- .../form/fields/custom-parameters.ts | 5 +- .../src/components/form/types.ts | 2 + .../src/locales/modules/en_US.ts | 8 +- .../src/locales/modules/zh_CN.ts | 5 ++ .../components/node/fields/use-dependent.ts | 59 ++++++++++++-- .../components/node/fields/use-deploy-mode.ts | 80 ++++++++++--------- .../components/node/fields/use-main-jar.ts | 4 +- .../task/components/node/fields/use-mr.ts | 2 +- .../task/components/node/fields/use-spark.ts | 20 +++-- .../components/node/tasks/use-zeppelin.ts | 2 +- .../components/dag/use-node-search.ts | 4 +- 11 files changed, 127 insertions(+), 64 deletions(-) diff --git a/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts b/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts index a04302e420..83890f708c 100644 --- a/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts +++ b/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) ) diff --git a/dolphinscheduler-ui-next/src/components/form/types.ts b/dolphinscheduler-ui-next/src/components/form/types.ts index 6be131bea9..86ff07da31 100644 --- a/dolphinscheduler-ui-next/src/components/form/types.ts +++ b/dolphinscheduler-ui-next/src/components/form/types.ts @@ -69,6 +69,8 @@ interface IJsonItemParams { span?: number | Ref widget?: any class?: string + path?: string + rule?: FormItemRule } type IJsonItemFn = (i?: number) => IJsonItemParams diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index 6a30e88245..8be53ab7b3 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/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', diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index a5990c07e9..3f898a7943 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts +++ b/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', diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-dependent.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-dependent.ts index 6f03339eb4..1a149484f9 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-dependent.ts +++ b/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', diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-deploy-mode.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-deploy-mode.ts index 8f87d1cfb2..a767d084c0 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-deploy-mode.ts +++ b/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' + } ] diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-main-jar.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-main-jar.ts index e8008a6a3f..263e4ce153 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-main-jar.ts +++ b/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) { diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-mr.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-mr.ts index 76b89b342d..83c9996529 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-mr.ts +++ b/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 [ diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-spark.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-spark.ts index b28aa359ac..fdce98a16e 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-spark.ts +++ b/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')) } } diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-zeppelin.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-zeppelin.ts index 226543f23a..7e96d46d12 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-zeppelin.ts +++ b/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, diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-search.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-search.ts index 62e0f129c2..d3e61bf9dd 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-search.ts +++ b/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 = '') }