From 0793d1a14e7c9afe95b9e79dabde4fac4181748e Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Tue, 8 Nov 2022 08:52:03 +0800 Subject: [PATCH] [Feature][UI] Added form stadio parser. (#12801) --- .../components/dynamic-dag/task/index.tsx | 37 +++++++++++++++++-- .../dynamic-dag/task/use-form-validate.ts | 25 ++++++++----- .../dynamic-dag/task/use-task-form.ts | 4 +- 3 files changed, 52 insertions(+), 14 deletions(-) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx index a642da40da..fad2c65bf5 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx +++ b/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({ + ref={'taskForm'}> { (this.formStructure as Array).map(f => { return this.onUpdateValue(v, f)} clearable={f.clearable} /> } { f.type === 'select' && this.onUpdateValue(v, f)} options={ f.optionsLocale ? f.options.map((o: SelectOption) => { @@ -96,6 +119,12 @@ const TaskForm = defineComponent({ } /> } + { + f.type === 'studio' && this.onUpdateValue(v, f)} + /> + } }) } diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-validate.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-validate.ts index b14c555e2e..78bbc0de19 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-validate.ts +++ b/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) { +export function useFormValidate(forms: Array, 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 (!value) { - return Error(t(v.message)) + if (field) { + const hierarchy = field.split('.') + if (!model[hierarchy[0]][hierarchy[1]]) { + return Error(t(validate.message)) + } + } else { + if (!value) { + return Error(t(validate.message)) + } } } } @@ -46,7 +53,7 @@ export function useFormValidate(forms: Array) { 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) } diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts index dfeb38b04a..e7e8120c71 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts +++ b/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 {