Browse Source

[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.
3.2.0-release
songjianet 2 years ago committed by GitHub
parent
commit
1d0f9a7d04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
  2. 1
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
  3. 47
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts
  4. 81
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts

4
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
{
this.draggedTask && <TaskForm
task={this.draggedTask}
showModal={this.showModal}
onCancelModal={() => this.showModal = false}
onConfirmModal={() => this.showModal = false}
/>
}
</>
)
}

1
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>

47
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
}
}

81
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 = [
{
const data = {
task: 'shell',
locales: {
zh_CN: {
node_name: '节点名称',
node_name_tips: '节点名称不能为空'
node_name_tips: '请输入节点名称',
task_priority: '任务优先级',
highest: '最高',
high: '高',
medium: '中',
low: '低',
lowest: '最低',
worker_group: 'Worker 分组',
script: '脚本'
},
en_US: {
node_name: 'Node Name',
node_name_tips: 'Node name cannot be empty'
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'
}
],
items: [
forms: [
{
label: 'task_components.node_name',
type: 'input',
field: '',
validate: {
trigger: ['input', 'blur'],
message: 'task_components.node_name_tips'
}
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

Loading…
Cancel
Save