From f262441d38cfd40bfc6ecad2fe36149d3f90b678 Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Sat, 26 Feb 2022 09:30:05 +0800 Subject: [PATCH] [Feature][UI Next] Add relation custom params component into task. (#8551) --- .../form/fields/custom-parameters.ts | 53 +++++++--- .../src/components/form/fields/switch.ts | 16 +-- .../src/components/form/types.ts | 2 + .../src/locales/modules/en_US.ts | 4 +- .../src/locales/modules/zh_CN.ts | 4 +- .../task/components/node/fields/index.ts | 1 + .../node/fields/use-custom-params.ts | 4 +- .../task/components/node/fields/use-http.ts | 2 +- .../node/fields/use-relation-custom-params.ts | 99 +++++++++++++++++++ .../components/node/fields/use-task-type.ts | 4 +- .../task/components/node/index.module.scss | 21 ++++ 11 files changed, 186 insertions(+), 24 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-relation-custom-params.ts diff --git a/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts b/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts index 2460ee799b..0003ed6fb6 100644 --- a/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts +++ b/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( 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, { diff --git a/dolphinscheduler-ui-next/src/components/form/fields/switch.ts b/dolphinscheduler-ui-next/src/components/form/fields/switch.ts index a1c363a83f..c1f77724d1 100644 --- a/dolphinscheduler-ui-next/src/components/form/fields/switch.ts +++ b/dolphinscheduler-ui-next/src/components/form/fields/switch.ts @@ -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 } + ) } diff --git a/dolphinscheduler-ui-next/src/components/form/types.ts b/dolphinscheduler-ui-next/src/components/form/types.ts index 7c164c95ca..402f8a65bf 100644 --- a/dolphinscheduler-ui-next/src/components/form/types.ts +++ b/dolphinscheduler-ui-next/src/components/form/types.ts @@ -49,6 +49,7 @@ interface IFormItem { widget: any span?: number | Ref type?: 'custom' + class?: string } interface IMeta extends Omit { @@ -69,6 +70,7 @@ interface IJsonItem { slots?: object span?: number | Ref widget?: any + class?: string } export { diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index 147c400c67..53dd41008e 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts @@ -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' } } diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index ca952c21c7..678bfadad9 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts @@ -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: '或' } } diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts index bc84d5fcdb..95f4886715 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts +++ b/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 { 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' diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-custom-params.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-custom-params.ts index fb898a307a..6026028e33 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-custom-params.ts +++ b/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')) } - 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 ) diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-http.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-http.ts index 4a8396b646..963cb19b78 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-http.ts +++ b/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')) } - const sameItems = model.localParams.filter( + const sameItems = model.httpParams.filter( (item: { prop: string }) => item.prop === value ) diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-relation-custom-params.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-relation-custom-params.ts new file mode 100644 index 0000000000..ad4c740b0e --- /dev/null +++ b/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 + ] + } + ] +} diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts index 026cd97924..cbd50f489a 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-task-type.ts @@ -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', diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss index 5d4d0c30e9..8fc6ada599 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/index.module.scss @@ -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; + } +}