Browse Source

[Feature][UI] Added form validate parser. (#12682)

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

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

@ -58,6 +58,7 @@ const TaskForm = defineComponent({
onConfirm={this.confirmModal}> onConfirm={this.confirmModal}>
<NForm <NForm
model={this.model} model={this.model}
rules={this.rules}
ref={'TaskForm'}> ref={'TaskForm'}>
</NForm> </NForm>
</Modal> </Modal>

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

@ -0,0 +1,56 @@
/*
* 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 { useI18n } from 'vue-i18n'
import type { FormItemRule } from 'naive-ui'
export function useFormValidate(forms: any) {
const { t } = useI18n()
const validate: any = {}
const setValidate = (v: any): object => {
const data: any = {
required: v.required,
trigger: v.trigger
}
if (v.type) {
if (v.type === 'non-empty') {
data['validator'] = (rule: FormItemRule, value: string) => {
if (!value) {
return Error(t(v.message))
}
}
}
}
return data
}
forms.forEach((f: any) => {
if (!f.validate && Object.keys(f.validate).length <= 0) return
if (f.field.indexOf('.') >= 0) {
const hierarchy = f.field.split('.')
validate[hierarchy[1]] = setValidate(f.validate)
} else {
validate[f.field] = setValidate(f.validate)
}
})
return { validate }
}

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

@ -18,6 +18,7 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import { useDynamicLocales } from './use-dynamic-locales' import { useDynamicLocales } from './use-dynamic-locales'
import { useFormField } from './use-form-field' import { useFormField } from './use-form-field'
import { useFormValidate } from './use-form-validate'
const data = { const data = {
task: 'shell', task: 'shell',
@ -60,7 +61,13 @@ const data = {
type: 'input', type: 'input',
field: 'name', field: 'name',
defaultValue: '', defaultValue: '',
placeholder: 'task_components.node_name_tips' placeholder: 'task_components.node_name_tips',
validate: {
required: true,
trigger: ['input', 'blur'],
type: 'non-empty',
message: 'task_components.node_name_validate_message'
}
}, },
{ {
label: 'task_components.task_priority', label: 'task_components.task_priority',
@ -73,7 +80,11 @@ const data = {
{ label: 'task_components.low', value: 'LOW' }, { label: 'task_components.low', value: 'LOW' },
{ label: 'task_components.lowest', value: 'LOWEST' } { label: 'task_components.lowest', value: 'LOWEST' }
], ],
defaultValue: 'MEDIUM' defaultValue: 'MEDIUM',
validate: {
required: true,
trigger: ['input', 'blur']
}
}, },
{ {
label: 'task_components.worker_group', label: 'task_components.worker_group',
@ -81,13 +92,23 @@ const data = {
field: 'workerGroup', field: 'workerGroup',
options: [], options: [],
defaultValue: 'default', defaultValue: 'default',
api: 'getWorkerGroupList' api: 'getWorkerGroupList',
validate: {
required: true,
trigger: ['input', 'blur']
}
}, },
{ {
label: 'task_components.script', label: 'task_components.script',
type: 'studio', type: 'studio',
field: 'taskParams.rawScript', field: 'taskParams.rawScript',
defaultValue: '' defaultValue: '',
validate: {
required: true,
trigger: ['input', 'blur'],
type: 'non-empty',
message: 'task_components.script_validate_message'
}
} }
] ]
} }
@ -95,11 +116,13 @@ const data = {
export function useTaskForm() { export function useTaskForm() {
const variables = reactive({ const variables = reactive({
formStructure: {}, formStructure: {},
model: {} model: {},
rules: {}
}) })
variables.formStructure = data variables.formStructure = data
variables.model = useFormField(data.forms) variables.model = useFormField(data.forms)
variables.rules = useFormValidate(data.forms)
useDynamicLocales(data.locales) useDynamicLocales(data.locales)
return { return {

Loading…
Cancel
Save