[Improvement-14835][UI] Support to immediately adjust the fill color of the task node after changing the run flag of the task. (#14837)

* worked out this issue

(cherry picked from commit 168a3930fa)

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

@@ -51,6 +51,19 @@ export function useCellUpdate(options: Options) {
     }
   }
 
+  /**
+   * Set the node's fill color by id
+   * @param {string} id
+   * @param {string} color
+   */
+  function setNodeFillColor(id: string, color: string) {
+    const node = graph.value?.getCellById(id)
+    if (!node) {
+      return false
+    }
+    node.attr('rect/fill', color)
+  }
+
   /**
    * Add a node to the graph
    * @param {string} id
@@ -124,6 +137,7 @@ export function useCellUpdate(options: Options) {
 
   return {
     setNodeName,
+    setNodeFillColor,
     setNodeEdge,
     addNode,
     removeNode,

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

@@ -47,6 +47,7 @@ export function useTaskEdit(options: Options) {
     getSources,
     getTargets,
     setNodeName,
+    setNodeFillColor,
     setNodeEdge
   } = useCellUpdate({
     graph
@@ -167,6 +168,11 @@ export function useTaskEdit(options: Options) {
       processDefinition.value.taskDefinitionList.map((task) => {
         if (task.code === currTask.value?.code) {
           setNodeName(task.code + '', taskDef.name)
+          let fillColor = '#f3f3f5'
+          if (task.flag === 'NO') {
+            fillColor = '#ffffff'
+          }
+          setNodeFillColor(task.code + '', fillColor)
 
           setNodeEdge(String(task.code), data.preTasks)
           updatePreTasks(data.preTasks, task.code)