[Fix] [UI Next][V1.0.0-Alpha] Fix pre task error when creating task in dag page. (#8928)

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx

@@ -29,11 +29,11 @@ import {
   NCheckbox
 } from 'naive-ui'
 import { queryTenantList } from '@/service/modules/tenants'
-import { SaveForm, WorkflowDefinition, WorkflowInstance } from './types'
 import { useRoute } from 'vue-router'
 import { verifyName } from '@/service/modules/process-definition'
 import './x6-style.scss'
 import { positiveIntegerRegex } from '@/utils/regex'
+import type { SaveForm, WorkflowDefinition, WorkflowInstance } from './types'
 
 const props = {
   visible: {

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -106,7 +106,7 @@ export default defineComponent({
       appendTask,
       editTask,
       copyTask,
-      taskDefinitions,
+      processDefinition,
       removeTasks
     } = useTaskEdit({ graph, definition: toRef(props, 'definition') })
 
@@ -212,10 +212,14 @@ export default defineComponent({
         saveModelToggle(false)
         return
       }
-      const connects = getConnects(nodes, edges, taskDefinitions.value as any)
+      const connects = getConnects(
+        nodes,
+        edges,
+        processDefinition.value.taskDefinitionList as any
+      )
       const locations = getLocations(nodes)
       context.emit('save', {
-        taskDefinitions: taskDefinitions.value,
+        taskDefinitions: processDefinition.value.taskDefinitionList,
         saveForm,
         connects,
         locations
@@ -288,7 +292,7 @@ export default defineComponent({
           taskInstance={currentTaskInstance.value}
           onViewLog={handleViewLog}
           data={currTask.value as any}
-          definition={props.definition}
+          definition={processDefinition}
           onSubmit={taskConfirm}
           onCancel={taskCancel}
         />

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts

@@ -115,6 +115,12 @@ export interface WorkflowInstance {
   warningGroupId: number
 }
 
+export interface EditWorkflowDefinition {
+  processDefinition: ProcessDefinition
+  processTaskRelationList: Connect[]
+  taskDefinitionList: NodeData[]
+}
+
 export interface Dragged {
   x: number
   y: number

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

@@ -22,6 +22,7 @@ import type { Coordinate } from './types'
 import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type'
 import { useCustomCellBuilder } from './dag-hooks'
 import utils from '@/utils'
+import type { Edge } from '@antv/x6'
 
 interface Options {
   graph: Ref<Graph | undefined>
@@ -70,10 +71,19 @@ export function useCellUpdate(options: Options) {
     graph.value?.addNode(node)
   }
 
-  const setNodeEdge = (id: string, preTaskCode: number[]) => {
+  function removeNode(id: string) {
+    graph.value?.removeNode(id)
+  }
+
+  const getNodeEdge = (id: string): Edge[] => {
     const node = graph.value?.getCellById(id)
-    if (!node) return
+    if (!node) return []
     const edges = graph.value?.getConnectedEdges(node)
+    return edges || []
+  }
+
+  const setNodeEdge = (id: string, preTaskCode: number[]) => {
+    const edges = getNodeEdge(id)
     if (edges?.length) {
       edges.forEach((edge) => {
         graph.value?.removeEdge(edge)
@@ -84,9 +94,24 @@ export function useCellUpdate(options: Options) {
     })
   }
 
+  const getSources = (id: string): number[] => {
+    const edges = getNodeEdge(id)
+    if (!edges.length) return []
+    const targets = [] as number[]
+    edges.forEach((edge) => {
+      const targetNode = edge.getSourceNode()
+      if (targetNode) {
+        targets.push(Number(targetNode.id))
+      }
+    })
+    return targets
+  }
+
   return {
     setNodeName,
     setNodeEdge,
-    addNode
+    addNode,
+    removeNode,
+    getSources
   }
 }

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

@@ -22,7 +22,12 @@ import { formatParams } from '@/views/projects/task/components/node/format-data'
 import { useCellUpdate } from './dag-hooks'
 import type { Ref } from 'vue'
 import type { Graph } from '@antv/x6'
-import type { Coordinate, NodeData, WorkflowDefinition } from './types'
+import type {
+  Coordinate,
+  NodeData,
+  WorkflowDefinition,
+  EditWorkflowDefinition
+} from './types'
 
 interface Options {
   graph: Ref<Graph | undefined>
@@ -36,10 +41,18 @@ interface Options {
  */
 export function useTaskEdit(options: Options) {
   const { graph, definition } = options
-  const { addNode, setNodeName, setNodeEdge } = useCellUpdate({ graph })
-  const taskDefinitions = ref<NodeData[]>(
-    definition.value?.taskDefinitionList || []
-  )
+  const { addNode, removeNode, getSources, setNodeName, setNodeEdge } =
+    useCellUpdate({
+      graph
+    })
+  const processDefinition = ref(
+    definition?.value || {
+      processDefinition: {},
+      processTaskRelationList: [],
+      taskDefinitionList: []
+    }
+  ) as Ref<EditWorkflowDefinition>
+
   const currTask = ref<NodeData>({
     taskType: 'SHELL',
     code: 0,
@@ -52,7 +65,7 @@ export function useTaskEdit(options: Options) {
    */
   function appendTask(code: number, type: TaskType, coordinate: Coordinate) {
     addNode(code + '', type, '', 'YES', coordinate)
-    taskDefinitions.value.push({
+    processDefinition.value.taskDefinitionList.push({
       code,
       taskType: type,
       name: ''
@@ -72,7 +85,9 @@ export function useTaskEdit(options: Options) {
     coordinate: Coordinate
   ) {
     addNode(code + '', type, name, flag, coordinate)
-    const definition = taskDefinitions.value.find((t) => t.code === targetCode)
+    const definition = processDefinition.value.taskDefinitionList.find(
+      (t) => t.code === targetCode
+    )
 
     const newDefinition = {
       ...definition,
@@ -80,7 +95,7 @@ export function useTaskEdit(options: Options) {
       name
     } as NodeData
 
-    taskDefinitions.value.push(newDefinition)
+    processDefinition.value.taskDefinitionList.push(newDefinition)
   }
 
   /**
@@ -88,9 +103,10 @@ export function useTaskEdit(options: Options) {
    * @param {number} code
    */
   function removeTasks(codes: number[]) {
-    taskDefinitions.value = taskDefinitions.value.filter(
-      (task) => !codes.includes(task.code)
-    )
+    processDefinition.value.taskDefinitionList =
+      processDefinition.value.taskDefinitionList.filter(
+        (task) => !codes.includes(task.code)
+      )
   }
 
   function openTaskModal(task: NodeData) {
@@ -103,10 +119,13 @@ export function useTaskEdit(options: Options) {
    * @param {number} code
    */
   function editTask(code: number) {
-    const definition = taskDefinitions.value.find((t) => t.code === code)
+    const definition = processDefinition.value.taskDefinitionList.find(
+      (t) => t.code === code
+    )
     if (definition) {
       currTask.value = definition
     }
+    updatePreTasks(getSources(String(code)), code)
     taskModalVisible.value = true
   }
 
@@ -118,19 +137,22 @@ export function useTaskEdit(options: Options) {
   function taskConfirm({ data }: any) {
     const taskDef = formatParams(data).taskDefinitionJsonObj as NodeData
     // override target config
-    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,
-          code: task.code,
-          taskType: currTask.value.taskType
+    processDefinition.value.taskDefinitionList =
+      processDefinition.value.taskDefinitionList.map((task) => {
+        if (task.code === currTask.value?.code) {
+          setNodeName(task.code + '', taskDef.name)
+
+          setNodeEdge(String(task.code), data.preTasks)
+          updatePreTasks(data.preTasks, task.code)
+          return {
+            ...taskDef,
+            version: task.version,
+            code: task.code,
+            taskType: currTask.value.taskType
+          }
         }
-      }
-      return task
-    })
+        return task
+      })
     taskModalVisible.value = false
   }
 
@@ -139,19 +161,25 @@ export function useTaskEdit(options: Options) {
    */
   function taskCancel() {
     taskModalVisible.value = false
+    if (!currTask.value.name) {
+      removeNode(String(currTask.value.code))
+      remove(
+        processDefinition.value.taskDefinitionList,
+        (task) => task.code === currTask.value.code
+      )
+    }
   }
 
   function updatePreTasks(preTasks: number[], code: number) {
-    if (!preTasks?.length) return
-    setNodeEdge(String(code), preTasks)
-    if (definition.value?.processTaskRelationList?.length) {
+    if (processDefinition.value?.processTaskRelationList?.length) {
       remove(
-        definition.value.processTaskRelationList,
+        processDefinition.value.processTaskRelationList,
         (process) => process.postTaskCode === code
       )
     }
+    if (!preTasks?.length) return
     preTasks.forEach((task) => {
-      definition.value?.processTaskRelationList.push({
+      processDefinition.value?.processTaskRelationList.push({
         postTaskCode: code,
         preTaskCode: task,
         name: '',
@@ -173,18 +201,18 @@ export function useTaskEdit(options: Options) {
   })
 
   watch(definition, () => {
-    taskDefinitions.value = definition.value?.taskDefinitionList || []
+    if (definition.value) processDefinition.value = definition.value
   })
 
   return {
     currTask,
     taskModalVisible,
+    processDefinition,
     taskConfirm,
     taskCancel,
     appendTask,
     editTask,
     copyTask,
-    taskDefinitions,
     removeTasks
   }
 }