This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new f262441 [Feature][UI Next] Add relation custom params component into
task. (#8551)
f262441 is described below
commit f262441d38cfd40bfc6ecad2fe36149d3f90b678
Author: Amy0104 <[email protected]>
AuthorDate: Sat Feb 26 09:30:05 2022 +0800
[Feature][UI Next] Add relation custom params component into task. (#8551)
---
.../components/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 +-
.../projects/task/components/node/fields/index.ts | 1 +
.../components/node/fields/use-custom-params.ts | 4 +-
.../task/components/node/fields/use-http.ts | 2 +-
.../node/fields/use-relation-custom-params.ts | 99 ++++++++++++++++++++++
.../task/components/node/fields/use-task-type.ts | 4 +-
.../task/components/node/index.module.scss | 21 +++++
11 files changed, 186 insertions(+), 24 deletions(-)
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 2460ee7..0003ed6 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 a1c363a..c1f7772 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 7c164c9..402f8a6 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<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 {
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 147c400..53dd410 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 ca952c2..678bfad 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 bc84d5f..95f4886 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 fb898a3..6026028 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 4a8396b..963cb19 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 0000000..ad4c740
--- /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 026cd97..cbd50f4 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 5d4d0c3..8fc6ada 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;
+ }
+}
