Browse Source

[Feature][UI] Added form stadio parser. (#12801)

3.2.0-release
songjianet 2 years ago committed by GitHub
parent
commit
0793d1a14e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 37
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
  2. 23
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-validate.ts
  3. 4
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts

37
dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx

@ -20,6 +20,7 @@ import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
import { useTaskForm } from './use-task-form'
import { useI18n } from 'vue-i18n'
import Modal from '@/components/modal'
import MonacoEditor from '@/components/monaco-editor'
import type { SelectOption } from 'naive-ui'
const props = {
@ -49,11 +50,31 @@ const TaskForm = defineComponent({
ctx.emit('confirmModal')
}
const onUpdateValue = (v: any, f: any) => {
f.modelField.indexOf('.') >= 0 ?
(variables.model as any)[f.modelField.split('.')[0]][f.modelField.split('.')[1]] = v :
(variables.model as any)[f.modelField] = v
}
const setDefaultValue = (f: any) => {
return f.modelField.indexOf('.') >= 0 ?
(variables.model as any)[f.modelField.split('.')[0]][f.modelField.split('.')[1]] :
(variables.model as any)[f.modelField]
}
watch(variables.model, () => {
//console.log(variables.model)
})
return { ...toRefs(variables), cancelModal, confirmModal, t, trim }
return {
...toRefs(variables),
cancelModal,
confirmModal,
onUpdateValue,
setDefaultValue,
t,
trim
}
},
render() {
return (
@ -65,7 +86,7 @@ const TaskForm = defineComponent({
<NForm
model={this.model}
rules={this.rules}
ref={'TaskForm'}>
ref={'taskForm'}>
{
(this.formStructure as Array<any>).map(f => {
return <NFormItem
@ -76,14 +97,16 @@ const TaskForm = defineComponent({
f.type === 'input' && <NInput
allowInput={this.trim}
placeholder={f.placeholder ? this.t(f.placeholder) : ''}
v-model={[(this.model as any)[f.modelField], 'value']}
defaultValue={this.setDefaultValue(f)}
onUpdateValue={(v) => this.onUpdateValue(v, f)}
clearable={f.clearable}
/>
}
{
f.type === 'select' && <NSelect
placeholder={f.placeholder ? this.t(f.placeholder) : ''}
v-model={[(this.model as any)[f.modelField], 'value']}
defaultValue={this.setDefaultValue(f)}
onUpdateValue={(v) => this.onUpdateValue(v, f)}
options={
f.optionsLocale ?
f.options.map((o: SelectOption) => {
@ -96,6 +119,12 @@ const TaskForm = defineComponent({
}
/>
}
{
f.type === 'studio' && <MonacoEditor
defaultValue={this.setDefaultValue(f)}
onUpdateValue={(v) => this.onUpdateValue(v, f)}
/>
}
</NFormItem>
})
}

23
dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-validate.ts

@ -18,21 +18,28 @@
import { useI18n } from 'vue-i18n'
import type { FormItemRule } from 'naive-ui'
export function useFormValidate(forms: Array<any>) {
export function useFormValidate(forms: Array<any>, model: any) {
const { t } = useI18n()
const validate: any = {}
const setValidate = (v: any): object => {
const setValidate = (validate: any, field?: any): object => {
const data: any = {
required: v.required,
trigger: v.trigger
required: validate.required,
trigger: validate.trigger
}
if (v.type) {
if (v.type === 'non-empty') {
if (validate.type) {
if (validate.type === 'non-empty') {
data['validator'] = (rule: FormItemRule, value: string) => {
if (field) {
const hierarchy = field.split('.')
if (!model[hierarchy[0]][hierarchy[1]]) {
return Error(t(validate.message))
}
} else {
if (!value) {
return Error(t(v.message))
return Error(t(validate.message))
}
}
}
}
@ -46,7 +53,7 @@ export function useFormValidate(forms: Array<any>) {
if (f.field.indexOf('.') >= 0) {
const hierarchy = f.field.split('.')
validate[hierarchy[1]] = setValidate(f.validate)
validate[hierarchy[1]] = setValidate(f.validate, f.field)
} else {
validate[f.field] = setValidate(f.validate)
}

4
dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts

@ -29,6 +29,7 @@ const data = {
node_name: '节点名称',
node_name_tips: '请输入节点名称',
node_name_validate_message: '节点名称不能为空',
script_validate_message: '脚本内容不能为空',
task_priority: '任务优先级',
highest: '最高',
high: '高',
@ -42,6 +43,7 @@ const data = {
node_name: 'Node Name',
node_name_tips: 'Please entry node name',
node_name_validate_message: 'Node name cannot be empty',
script_validate_message: 'Script content cannot be empty',
task_priority: 'Task Priority',
highest: 'Highest',
high: 'High',
@ -128,7 +130,7 @@ export function useTaskForm() {
useDynamicLocales(data.locales)
variables.model = useFormField(data.forms)
variables.rules = useFormValidate(data.forms)
variables.rules = useFormValidate(data.forms, variables.model)
variables.formStructure = useFormStructure(useFormRequest(data.apis, data.forms))
return {

Loading…
Cancel
Save