[Fix] [UI Next][V1.0.0-Alpha]: Fix the dag map display uncorrect after changing the pre tasks. (#8895)

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

@@ -34,7 +34,7 @@ interface Options {
 export function useCellUpdate(options: Options) {
   const { graph } = options
 
-  const { buildNode } = useCustomCellBuilder()
+  const { buildNode, buildEdge } = useCustomCellBuilder()
 
   /**
    * Set node name by id
@@ -70,8 +70,23 @@ export function useCellUpdate(options: Options) {
     graph.value?.addNode(node)
   }
 
+  const setNodeEdge = (id: string, preTaskCode: number[]) => {
+    const node = graph.value?.getCellById(id)
+    if (!node) return
+    const edges = graph.value?.getConnectedEdges(node)
+    if (edges?.length) {
+      edges.forEach((edge) => {
+        graph.value?.removeEdge(edge)
+      })
+    }
+    preTaskCode.forEach((task) => {
+      graph.value?.addEdge(buildEdge(String(task), id))
+    })
+  }
+
   return {
     setNodeName,
+    setNodeEdge,
     addNode
   }
 }

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

@@ -16,13 +16,13 @@
  */
 
 import { ref, onMounted, watch } from 'vue'
-import type { Ref } from 'vue'
-import type { Graph } from '@antv/x6'
-import type { Coordinate, NodeData } from './types'
+import { remove } from 'lodash'
 import { TaskType } from '@/views/projects/task/constants/task-type'
 import { formatParams } from '@/views/projects/task/components/node/format-data'
 import { useCellUpdate } from './dag-hooks'
-import { WorkflowDefinition } from './types'
+import type { Ref } from 'vue'
+import type { Graph } from '@antv/x6'
+import type { Coordinate, NodeData, WorkflowDefinition } from './types'
 
 interface Options {
   graph: Ref<Graph | undefined>
@@ -36,8 +36,7 @@ interface Options {
  */
 export function useTaskEdit(options: Options) {
   const { graph, definition } = options
-  const { addNode, setNodeName } = useCellUpdate({ graph })
-
+  const { addNode, setNodeName, setNodeEdge } = useCellUpdate({ graph })
   const taskDefinitions = ref<NodeData[]>(
     definition.value?.taskDefinitionList || []
   )
@@ -122,6 +121,7 @@ export function useTaskEdit(options: Options) {
     taskDefinitions.value = taskDefinitions.value.map((task) => {
       if (task.code === currTask.value?.code) {
         setNodeName(task.code + '', taskDef.name)
+        updatePreTasks(data.preTasks, task.code)
         return {
           ...taskDef,
           version: task.version,
@@ -141,6 +141,28 @@ export function useTaskEdit(options: Options) {
     taskModalVisible.value = false
   }
 
+  function updatePreTasks(preTasks: number[], code: number) {
+    if (!preTasks?.length) return
+    setNodeEdge(String(code), preTasks)
+    if (definition.value?.processTaskRelationList?.length) {
+      remove(
+        definition.value.processTaskRelationList,
+        (process) => process.postTaskCode === code
+      )
+    }
+    preTasks.forEach((task) => {
+      definition.value?.processTaskRelationList.push({
+        postTaskCode: code,
+        preTaskCode: task,
+        name: '',
+        preTaskVersion: 1,
+        postTaskVersion: 1,
+        conditionType: 'NONE',
+        conditionParams: {}
+      })
+    })
+  }
+
   onMounted(() => {
     if (graph.value) {
       graph.value.on('cell:dblclick', ({ cell }) => {