[Feature][UI Next] Add style for dag runflag

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

@@ -85,10 +85,11 @@ export default defineComponent({
       const type = props.cell?.data.taskType
       const taskName = uuid(props.cell?.data.taskName + '_')
       const targetCode = Number(props.cell?.id)
+      const flag = props.cell?.data.flag
 
       genTaskCodeList(genNums, projectCode).then((res) => {
         const [code] = res
-        ctx.emit('copyTask', taskName, code, targetCode, type, {
+        ctx.emit('copyTask', taskName, code, targetCode, type, flag, {
           x: props.left + 100,
           y: props.top + 100
         })

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

@@ -60,13 +60,14 @@ export function useCellUpdate(options: Options) {
     id: string,
     type: string,
     name: string,
+    flag: string,
     coordinate: Coordinate = { x: 100, y: 100 }
   ) {
     if (!TASK_TYPES_MAP[type as TaskType]) {
       console.warn(`taskType:${type} is invalid!`)
       return
     }
-    const node = buildNode(id, type, name, coordinate)
+    const node = buildNode(id, type, name, flag, coordinate)
     graph.value?.addNode(node)
   }
 

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

@@ -68,6 +68,7 @@ export function useCustomCellBuilder() {
     id: string,
     type: string,
     taskName: string,
+    flag: string,
     coordinate: Coordinate = { x: 100, y: 100 }
   ): Node.Metadata {
     const truncation = taskName ? utils.truncateText(taskName, 18) : id
@@ -78,7 +79,8 @@ export function useCustomCellBuilder() {
       y: coordinate.y,
       data: {
         taskType: type,
-        taskName: taskName || id
+        taskName: taskName || id,
+        flag: flag
       },
       attrs: {
         image: {
@@ -87,6 +89,9 @@ export function useCustomCellBuilder() {
         },
         title: {
           text: truncation
+        },
+        rect: {
+          fill: flag === 'NO' ? '#f3f3f5' : '#ffffff'
         }
       }
     }
@@ -108,10 +113,16 @@ export function useCustomCellBuilder() {
 
     tasks.forEach((task) => {
       const location = locations.find((l) => l.taskCode === task.code) || {}
-      const node = buildNode(task.code + '', task.taskType, task.name, {
+      const node = buildNode(
+        task.code + '',
+        task.taskType,
+        task.name,
+        task.flag,
+        {
           x: location.x,
           y: location.y
-      })
+        }
+      )
       nodes.push(node)
     })
 

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

@@ -70,9 +70,10 @@ export function useTaskEdit(options: Options) {
     code: number,
     targetCode: number,
     type: TaskType,
+    flag: string,
     coordinate: Coordinate
   ) {
-    addNode(code + '', type, name, coordinate)
+    addNode(code + '', type, name, flag, coordinate)
     const definition = taskDefinitions.value.find((t) => t.code === targetCode)
 
     const newDefinition = {