[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.
This commit is contained in:
songjianet
GitHub
parent
f889d855fb
commit
1d0f9a7d04
|
|
@ -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}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ const TaskForm = defineComponent({
|
|||
onCancel={this.cancelModal}
|
||||
onConfirm={this.confirmModal}>
|
||||
<NForm
|
||||
model={this.model}
|
||||
ref={'TaskForm'}>
|
||||
</NForm>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue