From 169cbe32678ecbb9e8aabfb78dd6b103a48c709a Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Sun, 6 Nov 2022 18:16:03 +0800 Subject: [PATCH] [Feature][UI] Added form input parser. (#12701) * [Feature][UI] Added form input parser. * [Feature][UI] Added form input parser. --- .../components/dynamic-dag/task/index.tsx | 27 ++++++++++++++++--- .../dynamic-dag/task/use-form-field.ts | 4 +-- .../dynamic-dag/task/use-form-request.ts | 2 +- .../dynamic-dag/task/use-form-structure.ts | 9 ++++++- .../dynamic-dag/task/use-form-validate.ts | 2 +- .../dynamic-dag/task/use-task-form.ts | 2 ++ 6 files changed, 37 insertions(+), 9 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 68af645f62..d5827f9a1b 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 @@ -15,8 +15,8 @@ * limitations under the License. */ -import { defineComponent, PropType, toRefs } from 'vue' -import { NForm } from 'naive-ui' +import { defineComponent, getCurrentInstance, PropType, toRefs } from 'vue' +import { NForm, NFormItem, NInput } from 'naive-ui' import { useTaskForm } from './use-task-form' import { useI18n } from 'vue-i18n' import Modal from '@/components/modal' @@ -36,6 +36,7 @@ const TaskForm = defineComponent({ props, emits: ['cancelModal', 'confirmModal'], setup(props, ctx) { + const trim = getCurrentInstance()?.appContext.config.globalProperties.trim const { variables } = useTaskForm() const { t } = useI18n() @@ -47,7 +48,11 @@ const TaskForm = defineComponent({ ctx.emit('confirmModal') } - return { ...toRefs(variables), cancelModal, confirmModal, t } + //watch(variables.model, () => { + // console.log(variables.model) + //}) + + return { ...toRefs(variables), cancelModal, confirmModal, t, trim } }, render() { return ( @@ -60,6 +65,22 @@ const TaskForm = defineComponent({ model={this.model} rules={this.rules} ref={'TaskForm'}> + { + (this.formStructure as Array).map(f => { + return + { + f.type === 'input' && + } + + }) + } ) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts index f4289158b6..b179b745f4 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts @@ -41,7 +41,5 @@ export function useFormField(forms: Array) { } }) - return { - model - } + return model } \ No newline at end of file diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-request.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-request.ts index 26cd524a94..35ffd2dd12 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-request.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-request.ts @@ -24,7 +24,7 @@ const reqFunction = (url: string, method: string) => { }) } -export function useFormRequest(apis: any, forms: Array) { +export function useFormRequest(apis: any, forms: Array): Array { forms.map(f => { if (f.api) { reqFunction(apis[f.api].url, apis[f.api].method).then((res: any) => { diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-structure.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-structure.ts index 34166ac653..056af50f1d 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-structure.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-structure.ts @@ -15,11 +15,18 @@ * limitations under the License. */ -export function useFormStructure(forms: Array) { +export function useFormStructure(forms: Array): Array { return forms.map((f: any) => { delete f.validate delete f.api + f.modelField = f.field + + if (f.field.indexOf('.') >= 0) { + const hierarchy = f.field.split('.') + f.field = hierarchy[1] + } + return f }) } \ No newline at end of file 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 c0a0c8210d..b14c555e2e 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 @@ -52,5 +52,5 @@ export function useFormValidate(forms: Array) { } }) - return { validate } + return validate } \ No newline at end of file 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 68d9ae752b..fc47660ecb 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 @@ -28,6 +28,7 @@ const data = { zh_CN: { node_name: '节点名称', node_name_tips: '请输入节点名称', + node_name_validate_message: '节点名称不能为空', task_priority: '任务优先级', highest: '最高', high: '高', @@ -40,6 +41,7 @@ const data = { en_US: { node_name: 'Node Name', node_name_tips: 'Please entry node name', + node_name_validate_message: 'Node name cannot be empty', task_priority: 'Task Priority', highest: 'Highest', high: 'High',