mirror of
https://gitee.com/dolphinscheduler/DolphinScheduler.git
synced 2024-12-02 20:28:03 +08:00
[Feature][UI Next] Add relation custom params component into task. (#8551)
This commit is contained in:
Amy0104
GitHub
parent
ec9fe1733b
commit
f262441d38
@ -58,27 +58,57 @@ const CustomParameters = defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
const getDefaultValue = (children: IJsonItem[]) => {
|
||||
const defaultValue: { [field: string]: any } = {}
|
||||
const ruleItem: { [key: string]: FormItemRule[] | FormItemRule } = {}
|
||||
const loop = (
|
||||
children: IJsonItem[],
|
||||
parent: { [field: string]: any },
|
||||
ruleParent: { [key: string]: FormItemRule[] | FormItemRule }
|
||||
) => {
|
||||
children.forEach((child) => {
|
||||
if (Array.isArray(child.children)) {
|
||||
const childDefaultValue = {}
|
||||
const childRuleItem = {}
|
||||
loop(child.children, childDefaultValue, childRuleItem)
|
||||
parent[child.field] = [childDefaultValue]
|
||||
ruleParent[child.field] = {
|
||||
type: 'array',
|
||||
fields: childRuleItem
|
||||
}
|
||||
return
|
||||
} else {
|
||||
parent[child.field] = child.value || null
|
||||
if (child.validate)
|
||||
ruleParent[child.field] = formatValidate(child.validate)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
loop(children, defaultValue, ruleItem)
|
||||
return {
|
||||
defaultValue,
|
||||
ruleItem
|
||||
}
|
||||
}
|
||||
|
||||
export function renderCustomParameters(
|
||||
item: IJsonItem,
|
||||
fields: { [field: string]: any },
|
||||
rules: { [key: string]: FormItemRule }[]
|
||||
rules: { [key: string]: FormItemRule | FormItemRule[] }[]
|
||||
) {
|
||||
const { field, children = [] } = item
|
||||
let defaultValue: { [field: string]: any } = {}
|
||||
let ruleItem: { [key: string]: FormItemRule } = {}
|
||||
|
||||
children.forEach((child) => {
|
||||
defaultValue[child.field] = child.value || null
|
||||
if (child.validate) ruleItem[child.field] = formatValidate(child.validate)
|
||||
})
|
||||
const getChild = (item: object, i: number) =>
|
||||
const { defaultValue, ruleItem } = getDefaultValue(children)
|
||||
rules.push(ruleItem)
|
||||
const getChild = (item: object, i: number, disabled: boolean) =>
|
||||
children.map((child: IJsonItem) => {
|
||||
return h(
|
||||
NFormItemGi,
|
||||
{
|
||||
showLabel: false,
|
||||
path: `${field}[${i}].${child.field}`,
|
||||
span: unref(child.span)
|
||||
span: unref(child.span),
|
||||
class: child.class
|
||||
},
|
||||
() => getField(child, item)
|
||||
)
|
||||
@ -86,7 +116,7 @@ export function renderCustomParameters(
|
||||
const getChildren = ({ disabled }: { disabled: boolean }) =>
|
||||
fields[field].map((item: object, i: number) => {
|
||||
return h(NGrid, { xGap: 10 }, () => [
|
||||
...getChild(item, i),
|
||||
...getChild(item, i, disabled),
|
||||
h(
|
||||
NGridItem,
|
||||
{
|
||||
@ -112,7 +142,6 @@ export function renderCustomParameters(
|
||||
)
|
||||
])
|
||||
})
|
||||
|
||||
return h(
|
||||
CustomParameters,
|
||||
{
|
||||
|
||||
@ -23,10 +23,14 @@ export function renderSwitch(
|
||||
item: IJsonItem,
|
||||
fields: { [field: string]: any }
|
||||
) {
|
||||
const { props, field } = item
|
||||
return h(NSwitch, {
|
||||
...props,
|
||||
value: fields[field],
|
||||
onUpdateValue: (value: string) => void (fields[field] = value)
|
||||
})
|
||||
const { props, field, slots = {} } = item
|
||||
return h(
|
||||
NSwitch,
|
||||
{
|
||||
...props,
|
||||
value: fields[field],
|
||||
onUpdateValue: (value: string) => void (fields[field] = value)
|
||||
},
|
||||
{ ...slots }
|
||||
)
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@ interface IFormItem {
|
||||
widget: any
|
||||
span?: number | Ref<number>
|
||||
type?: 'custom'
|
||||
class?: string
|
||||
}
|
||||
|
||||
interface IMeta extends Omit<FormProps, 'model'> {
|
||||
@ -69,6 +70,7 @@ interface IJsonItem {
|
||||
slots?: object
|
||||
span?: number | Ref<number>
|
||||
widget?: any
|
||||
class?: string
|
||||
}
|
||||
|
||||
export {
|
||||
|
||||
@ -771,7 +771,9 @@ const project = {
|
||||
sea_tunnel_master_url_tips:
|
||||
'Please enter the master url, e.g., 127.0.0.1:7077',
|
||||
switch_condition: 'Condition',
|
||||
switch_branch_flow: 'Branch Flow'
|
||||
switch_branch_flow: 'Branch Flow',
|
||||
and: 'and',
|
||||
or: 'or'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -762,7 +762,9 @@ const project = {
|
||||
sea_tunnel_queue: '队列',
|
||||
sea_tunnel_master_url_tips: '请直接填写地址,例如:127.0.0.1:7077',
|
||||
switch_condition: '条件',
|
||||
switch_branch_flow: '分支流转'
|
||||
switch_branch_flow: '分支流转',
|
||||
and: '且',
|
||||
or: '或'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@ export { useProcedure } from './use-procedure'
|
||||
export { useCustomParams } from './use-custom-params'
|
||||
export { useSourceType } from './use-sqoop-source-type'
|
||||
export { useTargetType } from './use-sqoop-target-type'
|
||||
export { useRelationCustomParams } from './use-relation-custom-params'
|
||||
|
||||
export { useShell } from './use-shell'
|
||||
export { useSpark } from './use-spark'
|
||||
|
||||
@ -57,7 +57,7 @@ export function useCustomParams({
|
||||
return new Error(t('project.node.prop_tips'))
|
||||
}
|
||||
|
||||
const sameItems = model.localParams.filter(
|
||||
const sameItems = model[field].filter(
|
||||
(item: { prop: string }) => item.prop === value
|
||||
)
|
||||
|
||||
@ -103,7 +103,7 @@ export function useCustomParams({
|
||||
return new Error(t('project.node.prop_tips'))
|
||||
}
|
||||
|
||||
const sameItems = model.localParams.filter(
|
||||
const sameItems = model[field].filter(
|
||||
(item: { prop: string }) => item.prop === value
|
||||
)
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@ export function useHttp(model: { [field: string]: any }): IJsonItem[] {
|
||||
return new Error(t('project.node.prop_tips'))
|
||||
}
|
||||
|
||||
const sameItems = model.localParams.filter(
|
||||
const sameItems = model.httpParams.filter(
|
||||
(item: { prop: string }) => item.prop === value
|
||||
)
|
||||
|
||||
|
||||
@ -0,0 +1,99 @@
|
||||
/*
|
||||
* 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 { computed, h, watchEffect } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NButton } from 'naive-ui'
|
||||
import styles from '../index.module.scss'
|
||||
import type { IJsonItem } from '../types'
|
||||
|
||||
export function useRelationCustomParams({
|
||||
model,
|
||||
children,
|
||||
childrenField
|
||||
}: {
|
||||
model: {
|
||||
[field: string]: any
|
||||
}
|
||||
children: IJsonItem
|
||||
childrenField: string
|
||||
}): IJsonItem[] {
|
||||
const { t } = useI18n()
|
||||
const firstLevelRelationSpan = computed(() =>
|
||||
model.dependTaskList.length ? 3 : 0
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
model.dependTaskList.forEach(
|
||||
(item: { [childrenField: string]: [] }, i: number) => {
|
||||
if (item[childrenField].length === 0) {
|
||||
model.dependTaskList.splice(i, 1)
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
console.log(model.relation)
|
||||
return [
|
||||
{
|
||||
type: 'custom',
|
||||
name: t('project.node.custom_parameters'),
|
||||
field: 'relationLabel',
|
||||
span: 24,
|
||||
class: styles['relaction-label']
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'relation',
|
||||
props: {
|
||||
round: false,
|
||||
'checked-value': 'AND',
|
||||
'unchecked-value': 'OR',
|
||||
size: 'small'
|
||||
},
|
||||
slots: {
|
||||
checked: () => t('project.node.and'),
|
||||
unchecked: () => t('project.node.or')
|
||||
},
|
||||
span: firstLevelRelationSpan,
|
||||
class: styles['relaction-switch']
|
||||
},
|
||||
{
|
||||
type: 'custom-parameters',
|
||||
field: 'dependTaskList',
|
||||
span: 20,
|
||||
children: [
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'relation',
|
||||
props: {
|
||||
round: false,
|
||||
'checked-value': 'AND',
|
||||
'unchecked-value': 'OR',
|
||||
size: 'small'
|
||||
},
|
||||
slots: {
|
||||
checked: () => t('project.node.and'),
|
||||
unchecked: () => t('project.node.or')
|
||||
},
|
||||
span: 4,
|
||||
value: 'AND',
|
||||
class: styles['relaction-switch']
|
||||
},
|
||||
children
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -24,10 +24,12 @@ export function useTaskType(
|
||||
readonly?: boolean
|
||||
): IJsonItem {
|
||||
const { t } = useI18n()
|
||||
const disabledTaskType = ['CONDITIONS', 'SWITCH']
|
||||
|
||||
const options = Object.keys(TASK_TYPES_MAP).map((option: string) => ({
|
||||
label: option,
|
||||
value: option
|
||||
value: option,
|
||||
disabled: disabledTaskType.includes(option)
|
||||
}))
|
||||
return {
|
||||
type: 'select',
|
||||
|
||||
@ -30,3 +30,24 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.relaction-label {
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.relaction-switch {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--n-color);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user