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

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,
     {

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 }
+  )
 }

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 {

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'
   }
 }
 

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: '或'
   }
 }
 

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'

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
                 )
 

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
               )
 

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

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',

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;
+  }
+}