From 1d0f9a7d04f55f5952969cffa7cc74b879ebc6c7 Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Thu, 3 Nov 2022 08:41:10 +0800 Subject: [PATCH] [Feature][UI] Added form value parser. (#12669) * [Feature][UI] Added form value parser. * [Feature][UI] Added form value parser. * [Feature][UI] Added form value parser. * [Feature][UI] Added form value parser. --- .../workflow/components/dynamic-dag/index.tsx | 14 ++- .../components/dynamic-dag/task/index.tsx | 1 + .../dynamic-dag/task/use-form-field.ts | 47 ++++++++ .../dynamic-dag/task/use-task-form.ts | 111 ++++++++++++------ 4 files changed, 133 insertions(+), 40 deletions(-) create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx index 667f244830..becf9a38af 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx @@ -69,12 +69,14 @@ const DynamicDag = defineComponent({ - this.showModal = false} - onConfirmModal={() => this.showModal = false} - /> + { + this.draggedTask && this.showModal = false} + onConfirmModal={() => this.showModal = false} + /> + } ) } 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 f1da1689b7..bc90d040b8 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 @@ -57,6 +57,7 @@ const TaskForm = defineComponent({ onCancel={this.cancelModal} onConfirm={this.confirmModal}> 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 new file mode 100644 index 0000000000..0b195253e1 --- /dev/null +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts @@ -0,0 +1,47 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ref } from 'vue' +import type { Ref } from 'vue' + +export function useFormField(forms: any) { + const model: any = {} + + const setField = (value: string, type: string): Ref => { + return ref(value ? + value : + type === 'select' ? + null : + '' + ) + } + + forms.forEach((f: any) => { + if (f.field.indexOf('.') >= 0) { + const hierarchy = f.field.split('.') + model[hierarchy[0]] = { + [hierarchy[1]]: setField(f.defaultValue, f.type) + } + } else { + model[f.field] = setField(f.defaultValue, f.type) + } + }) + + return { + model + } +} \ 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 3f17507dd9..a83bd42bd7 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 @@ -17,47 +17,90 @@ import { reactive } from 'vue' import { useDynamicLocales } from './use-dynamic-locales' -import type { TaskDynamic } from './types' +import { useFormField } from './use-form-field' -const data = [ - { - task: 'shell', - locales: { - zh_CN: { - node_name: '节点名称', - node_name_tips: '节点名称不能为空' - }, - en_US: { - node_name: 'Node Name', - node_name_tips: 'Node name cannot be empty' - } +const data = { + task: 'shell', + locales: { + zh_CN: { + node_name: '节点名称', + node_name_tips: '请输入节点名称', + task_priority: '任务优先级', + highest: '最高', + high: '高', + medium: '中', + low: '低', + lowest: '最低', + worker_group: 'Worker 分组', + script: '脚本' }, - apis: [ - - ], - items: [ - { - label: 'task_components.node_name', - type: 'input', - field: '', - validate: { - trigger: ['input', 'blur'], - message: 'task_components.node_name_tips' - } - } - ] - } -] + en_US: { + node_name: 'Node Name', + node_name_tips: 'Please entry node name', + task_priority: 'Task Priority', + highest: 'Highest', + high: 'High', + medium: 'Medium', + low: 'Low', + lowest: 'Lowest', + worker_group: 'Worker Group', + script: 'Script' + } + }, + apis: [ + { + name: 'getWorkerGroupList', + uri: '/worker-groups/all', + method: 'get' + } + ], + forms: [ + { + label: 'task_components.node_name', + type: 'input', + field: 'name', + defaultValue: '', + placeholder: 'task_components.node_name_tips' + }, + { + label: 'task_components.task_priority', + type: 'select', + field: 'taskPriority', + options: [ + { label: 'task_components.highest', value: 'HIGHEST' }, + { label: 'task_components.high', value: 'HIGH' }, + { label: 'task_components.medium', value: 'MEDIUM' }, + { label: 'task_components.low', value: 'LOW' }, + { label: 'task_components.lowest', value: 'LOWEST' } + ], + defaultValue: 'MEDIUM' + }, + { + label: 'task_components.worker_group', + type: 'select', + field: 'workerGroup', + options: [], + defaultValue: 'default', + api: 'getWorkerGroupList' + }, + { + label: 'task_components.script', + type: 'studio', + field: 'taskParams.rawScript', + defaultValue: '' + } + ] +} export function useTaskForm() { const variables = reactive({ - formStructure: {} + formStructure: {}, + model: {} }) - variables.formStructure = data.map((t: TaskDynamic) => { - useDynamicLocales(t.locales) - return t - }) + variables.formStructure = data + variables.model = useFormField(data.forms) + useDynamicLocales(data.locales) return { variables