This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 1d0f9a7d04 [Feature][UI] Added form value parser. (#12669)
1d0f9a7d04 is described below
commit 1d0f9a7d04f55f5952969cffa7cc74b879ebc6c7
Author: songjianet <[email protected]>
AuthorDate: Thu Nov 3 08:41:10 2022 +0800
[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 +--
.../workflow/components/dynamic-dag/task/index.tsx | 1 +
.../components/dynamic-dag/task/use-form-field.ts | 47 +++++++++
.../components/dynamic-dag/task/use-task-form.ts | 111 ++++++++++++++-------
4 files changed, 133 insertions(+), 40 deletions(-)
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({
<DagSidebar onDragstart={this.handelDragstart}/>
<DagCanvas onDrop={this.handelDrop}/>
</div>
- <TaskForm
- task={this.draggedTask}
- showModal={this.showModal}
- onCancelModal={() => this.showModal = false}
- onConfirmModal={() => this.showModal = false}
- />
+ {
+ this.draggedTask && <TaskForm
+ task={this.draggedTask}
+ showModal={this.showModal}
+ onCancelModal={() => 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}>
<NForm
+ model={this.model}
ref={'TaskForm'}>
</NForm>
</Modal>
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<null | string> => {
+ 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
