[Fix][UI Next][V1.0.0-Alpha] Fix the branch flow options not showing and back to show. (#9049)

dolphinscheduler-ui-next/src/store/project/task-node.ts

@@ -79,6 +79,16 @@ export const useTaskNodeStore = defineStore({
           }
           if (relation.postTaskCode === code && relation.preTaskCode !== 0) {
             preTasks.push(relation.preTaskCode)
+            if (
+              !this.preTaskOptions.find(
+                (item) => item.value === relation.preTaskCode
+              )
+            ) {
+              this.preTaskOptions.push({
+                value: relation.preTaskCode,
+                label: tasks[relation.preTaskCode]
+              })
+            }
           }
         }
       )

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

@@ -51,6 +51,14 @@ export function useConditions(model: { [field: string]: any }): IJsonItem[] {
       props: {
         clearable: true
       },
+      validate: {
+        trigger: ['input', 'blur'],
+        validator: (unuse, value) => {
+          if (value && value === model.failedBranch) {
+            return new Error(t('project.node.branch_tips'))
+          }
+        }
+      },
       options: taskStore.getPostTaskOptions
     },
     {
@@ -71,6 +79,14 @@ export function useConditions(model: { [field: string]: any }): IJsonItem[] {
       props: {
         clearable: true
       },
+      validate: {
+        trigger: ['input', 'blur'],
+        validator: (unuse, value) => {
+          if (value && value === model.successBranch) {
+            return new Error(t('project.node.branch_tips'))
+          }
+        }
+      },
       options: taskStore.getPostTaskOptions
     },
     ...useTimeoutAlarm(model),

dolphinscheduler-ui-next/src/views/projects/task/components/node/format-data.ts

@@ -207,6 +207,13 @@ export function formatParams(data: INodeData): {
       relation: data.relation,
       dependTaskList: data.dependTaskList
     }
+    taskParams.conditionResult = {}
+    if (data.successBranch) {
+      taskParams.conditionResult.successNode = [data.successBranch]
+    }
+    if (data.failedBranch) {
+      taskParams.conditionResult.failedNode = [data.failedBranch]
+    }
   }
 
   if (data.taskType === 'DATAX') {
@@ -464,6 +471,13 @@ export function formatModel(data: ITaskData) {
     params.processDefinitionCode = data.taskParams.processDefinitionCode
   }
 
+  if (data.taskParams?.conditionResult?.successNode?.length) {
+    params.successBranch = data.taskParams?.conditionResult.successNode[0]
+  }
+  if (data.taskParams?.conditionResult?.failedNode?.length) {
+    params.failedBranch = data.taskParams?.conditionResult.failedNode[0]
+  }
+
   return params
 }
 

dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts

@@ -276,6 +276,10 @@ interface ITaskParams {
   ruleInputParameter?: IRuleParameters
   jobFlowDefineJson?: string
   processDefinitionCode?: number
+  conditionResult?: {
+    successNode?: number[]
+    failedNode?: number[]
+  }
 }
 
 interface INodeData
@@ -287,6 +291,7 @@ interface INodeData
       | 'sourceParams'
       | 'dependence'
       | 'sparkParameters'
+      | 'conditionResult'
     >,
     ISqoopTargetData,
     ISqoopSourceData,
@@ -321,6 +326,8 @@ interface INodeData
   resourceFiles?: { id: number; fullName: string }[] | null
   relation?: RelationType
   definition?: object
+  successBranch?: number
+  failedBranch?: number
 }
 
 interface ITaskData

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts

@@ -101,6 +101,23 @@ export function useCanvasInit(options: Options) {
         highlight: true,
         createEdge() {
           return graph.value?.createEdge({ shape: X6_EDGE_NAME })
+        },
+        validateConnection(data) {
+          const { sourceCell, targetCell } = data
+
+          if (
+            sourceCell &&
+            targetCell &&
+            sourceCell.isNode() &&
+            targetCell.isNode()
+          ) {
+            const sourceData = sourceCell.getData()
+            if (!sourceData) return true
+            if (sourceData.taskType !== 'CONDITIONS') return true
+            return (graph.value?.getConnectedEdges(sourceCell).length || 0) <= 2
+          }
+
+          return true
         }
       },
       highlighting: {

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-update.ts

@@ -99,11 +99,24 @@ export function useCellUpdate(options: Options) {
   const getSources = (id: string): number[] => {
     const edges = getNodeEdge(id)
     if (!edges.length) return []
-    const targets = [] as number[]
+    const sources = [] as number[]
     edges.forEach((edge) => {
       const sourceNode = edge.getSourceNode()
       if (sourceNode && sourceNode.id !== id) {
-        targets.push(Number(sourceNode.id))
+        sources.push(Number(sourceNode.id))
+      }
+    })
+    return sources
+  }
+
+  const getTargets = (id: string): number[] => {
+    const edges = getNodeEdge(id)
+    if (!edges.length) return []
+    const targets = [] as number[]
+    edges.forEach((edge) => {
+      const targetNode = edge.getTargetNode()
+      if (targetNode && targetNode.id !== id) {
+        targets.push(Number(targetNode.id))
       }
     })
     return targets
@@ -114,6 +127,7 @@ export function useCellUpdate(options: Options) {
     setNodeEdge,
     addNode,
     removeNode,
-    getSources
+    getSources,
+    getTargets
   }
 }

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts

@@ -41,10 +41,16 @@ interface Options {
  */
 export function useTaskEdit(options: Options) {
   const { graph, definition } = options
-  const { addNode, removeNode, getSources, setNodeName, setNodeEdge } =
+  const {
-    useCellUpdate({
+    addNode,
-      graph
+    removeNode,
-    })
+    getSources,
+    getTargets,
+    setNodeName,
+    setNodeEdge
+  } = useCellUpdate({
+    graph
+  })
   const processDefinition = ref(
     definition?.value || {
       processDefinition: {},
@@ -107,6 +113,13 @@ export function useTaskEdit(options: Options) {
       processDefinition.value.taskDefinitionList.filter(
         (task) => !codes.includes(task.code)
       )
+    codes.forEach((code: number) => {
+      remove(
+        processDefinition.value.processTaskRelationList,
+        (process) =>
+          process.postTaskCode === code || process.preTaskCode === code
+      )
+    })
   }
 
   function openTaskModal(task: NodeData) {
@@ -126,6 +139,7 @@ export function useTaskEdit(options: Options) {
       currTask.value = definition
     }
     updatePreTasks(getSources(String(code)), code)
+    updatePostTasks(code)
     taskModalVisible.value = true
   }
 
@@ -191,6 +205,28 @@ export function useTaskEdit(options: Options) {
     })
   }
 
+  function updatePostTasks(code: number) {
+    const targets = getTargets(String(code))
+    targets.forEach((target: number) => {
+      if (
+        !processDefinition.value?.processTaskRelationList.find(
+          (relation) =>
+            relation.postTaskCode === target && relation.preTaskCode === code
+        )
+      ) {
+        processDefinition.value?.processTaskRelationList.push({
+          postTaskCode: target,
+          preTaskCode: code,
+          name: '',
+          preTaskVersion: 1,
+          postTaskVersion: 1,
+          conditionType: 'NONE',
+          conditionParams: {}
+        })
+      }
+    })
+  }
+
   onMounted(() => {
     if (graph.value) {
       graph.value.on('cell:dblclick', ({ cell }) => {