Browse Source

[Feature][UI Next] Add relation custom params component into task. (#8551)

3.0.0/version-upgrade
Amy0104 3 years ago committed by GitHub
parent
commit
f262441d38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 53
      dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts
  2. 10
      dolphinscheduler-ui-next/src/components/form/fields/switch.ts
  3. 2
      dolphinscheduler-ui-next/src/components/form/types.ts
  4. 4
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  5. 4
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  6. 1
      dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts
  7. 4
      dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-custom-params.ts
  8. 2
      dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-http.ts
  9. 99
      dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-relation-custom-params.ts
  10. 4
      dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts
  11. 21
      dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss

53
dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts

@ -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( export function renderCustomParameters(
item: IJsonItem, item: IJsonItem,
fields: { [field: string]: any }, fields: { [field: string]: any },
rules: { [key: string]: FormItemRule }[] rules: { [key: string]: FormItemRule | FormItemRule[] }[]
) { ) {
const { field, children = [] } = item const { field, children = [] } = item
let defaultValue: { [field: string]: any } = {} const { defaultValue, ruleItem } = getDefaultValue(children)
let ruleItem: { [key: string]: FormItemRule } = {} rules.push(ruleItem)
const getChild = (item: object, i: number, disabled: boolean) =>
children.forEach((child) => {
defaultValue[child.field] = child.value || null
if (child.validate) ruleItem[child.field] = formatValidate(child.validate)
})
const getChild = (item: object, i: number) =>
children.map((child: IJsonItem) => { children.map((child: IJsonItem) => {
return h( return h(
NFormItemGi, NFormItemGi,
{ {
showLabel: false, showLabel: false,
path: `${field}[${i}].${child.field}`, path: `${field}[${i}].${child.field}`,
span: unref(child.span) span: unref(child.span),
class: child.class
}, },
() => getField(child, item) () => getField(child, item)
) )
@ -86,7 +116,7 @@ export function renderCustomParameters(
const getChildren = ({ disabled }: { disabled: boolean }) => const getChildren = ({ disabled }: { disabled: boolean }) =>
fields[field].map((item: object, i: number) => { fields[field].map((item: object, i: number) => {
return h(NGrid, { xGap: 10 }, () => [ return h(NGrid, { xGap: 10 }, () => [
...getChild(item, i), ...getChild(item, i, disabled),
h( h(
NGridItem, NGridItem,
{ {
@ -112,7 +142,6 @@ export function renderCustomParameters(
) )
]) ])
}) })
return h( return h(
CustomParameters, CustomParameters,
{ {

10
dolphinscheduler-ui-next/src/components/form/fields/switch.ts

@ -23,10 +23,14 @@ export function renderSwitch(
item: IJsonItem, item: IJsonItem,
fields: { [field: string]: any } fields: { [field: string]: any }
) { ) {
const { props, field } = item const { props, field, slots = {} } = item
return h(NSwitch, { return h(
NSwitch,
{
...props, ...props,
value: fields[field], value: fields[field],
onUpdateValue: (value: string) => void (fields[field] = value) onUpdateValue: (value: string) => void (fields[field] = value)
}) },
{ ...slots }
)
} }

2
dolphinscheduler-ui-next/src/components/form/types.ts

@ -49,6 +49,7 @@ interface IFormItem {
widget: any widget: any
span?: number | Ref<number> span?: number | Ref<number>
type?: 'custom' type?: 'custom'
class?: string
} }
interface IMeta extends Omit<FormProps, 'model'> { interface IMeta extends Omit<FormProps, 'model'> {
@ -69,6 +70,7 @@ interface IJsonItem {
slots?: object slots?: object
span?: number | Ref<number> span?: number | Ref<number>
widget?: any widget?: any
class?: string
} }
export { export {

4
dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@ -771,7 +771,9 @@ const project = {
sea_tunnel_master_url_tips: sea_tunnel_master_url_tips:
'Please enter the master url, e.g., 127.0.0.1:7077', 'Please enter the master url, e.g., 127.0.0.1:7077',
switch_condition: 'Condition', switch_condition: 'Condition',
switch_branch_flow: 'Branch Flow' switch_branch_flow: 'Branch Flow',
and: 'and',
or: 'or'
} }
} }

4
dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@ -762,7 +762,9 @@ const project = {
sea_tunnel_queue: '队列', sea_tunnel_queue: '队列',
sea_tunnel_master_url_tips: '请直接填写地址,例如:127.0.0.1:7077', sea_tunnel_master_url_tips: '请直接填写地址,例如:127.0.0.1:7077',
switch_condition: '条件', switch_condition: '条件',
switch_branch_flow: '分支流转' switch_branch_flow: '分支流转',
and: '且',
or: '或'
} }
} }

1
dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts

@ -37,6 +37,7 @@ export { useProcedure } from './use-procedure'
export { useCustomParams } from './use-custom-params' export { useCustomParams } from './use-custom-params'
export { useSourceType } from './use-sqoop-source-type' export { useSourceType } from './use-sqoop-source-type'
export { useTargetType } from './use-sqoop-target-type' export { useTargetType } from './use-sqoop-target-type'
export { useRelationCustomParams } from './use-relation-custom-params'
export { useShell } from './use-shell' export { useShell } from './use-shell'
export { useSpark } from './use-spark' export { useSpark } from './use-spark'

4
dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-custom-params.ts

@ -57,7 +57,7 @@ export function useCustomParams({
return new Error(t('project.node.prop_tips')) return new Error(t('project.node.prop_tips'))
} }
const sameItems = model.localParams.filter( const sameItems = model[field].filter(
(item: { prop: string }) => item.prop === value (item: { prop: string }) => item.prop === value
) )
@ -103,7 +103,7 @@ export function useCustomParams({
return new Error(t('project.node.prop_tips')) return new Error(t('project.node.prop_tips'))
} }
const sameItems = model.localParams.filter( const sameItems = model[field].filter(
(item: { prop: string }) => item.prop === value (item: { prop: string }) => item.prop === value
) )

2
dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-http.ts

@ -88,7 +88,7 @@ export function useHttp(model: { [field: string]: any }): IJsonItem[] {
return new Error(t('project.node.prop_tips')) return new Error(t('project.node.prop_tips'))
} }
const sameItems = model.localParams.filter( const sameItems = model.httpParams.filter(
(item: { prop: string }) => item.prop === value (item: { prop: string }) => item.prop === value
) )

99
dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-relation-custom-params.ts

@ -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
]
}
]
}

4
dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts

@ -24,10 +24,12 @@ export function useTaskType(
readonly?: boolean readonly?: boolean
): IJsonItem { ): IJsonItem {
const { t } = useI18n() const { t } = useI18n()
const disabledTaskType = ['CONDITIONS', 'SWITCH']
const options = Object.keys(TASK_TYPES_MAP).map((option: string) => ({ const options = Object.keys(TASK_TYPES_MAP).map((option: string) => ({
label: option, label: option,
value: option value: option,
disabled: disabledTaskType.includes(option)
})) }))
return { return {
type: 'select', type: 'select',

21
dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss

@ -30,3 +30,24 @@
margin-right: 8px; 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…
Cancel
Save