From 0284893b4ac532447e56d9f44546acd659a7718e Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Oct 2024 21:24:03 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=91=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes/CopyTaskNode.vue                    | 15 +++++++++++----
 .../src/nodes/EndEventNode.vue                    |  4 +---
 .../src/nodes/ExclusiveNode.vue                   |  7 ++-----
 .../src/nodes/InclusiveNode.vue                   |  7 ++++---
 .../src/nodes/ParallelNode.vue                    |  8 ++++----
 .../src/nodes/StartUserNode.vue                   |  4 +---
 .../src/nodes/UserTaskNode.vue                    |  5 ++---
 .../theme/simple-process-designer.scss            | 10 +++++++++-
 8 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index e6e4045f..70dc17ae 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="node-wrapper">
     <div class="node-container">
-      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
+      <div
+        class="node-box"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
+      >
         <div class="node-title-container">
           <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
           <input
@@ -36,13 +39,17 @@
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
-    <CopyTaskNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
-import { useNodeName2, useWatchNode } from '../node'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
 defineOptions({
   name: 'CopyTaskNode'
@@ -58,7 +65,7 @@ const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
 // 是否只读
-const readonly = inject<Boolean>('readonly') 
+const readonly = inject<Boolean>('readonly')
 // 监控节点的变化
 const currentNode = useWatchNode(props)
 // 节点名称编辑
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
index c2818cc6..3652b0e7 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="end-node-wrapper">
-    <div class="end-node-box" :class="taskStatusClass">
+    <div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
       <span class="node-fixed-name" title="结束">结束</span>
     </div>
   </div>
@@ -20,8 +20,6 @@ const props = defineProps({
 })
 // 监控节点变化
 const currentNode = useWatchNode(props)
-// 节点任务状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 9d307acc..32e9bbd4 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly" :class="taskStatusClass">
-        <span class="iconfont icon-exclusive icon-size"></span>
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+        <span class="iconfont icon-exclusive icon-size condition"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
         >添加条件</el-button
@@ -122,9 +122,6 @@ const emits = defineEmits<{
 // 是否只读
 const readonly = inject<Boolean>('readonly') 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// 节点状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
-
 watch(
   () => props.flowNode,
   (newValue) => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
index 830a4d43..bc388751 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly">
-        <span class="iconfont icon-inclusive icon-size"></span>
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#345da2" @click="addCondition"  plain>添加条件</el-button>
       <div
@@ -20,7 +20,7 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="{ 'node-config-error': !item.showText }">
+            <div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
               <div class="branch-node-title-container">
                 <div v-if="showInputs[index]">
                   <input
@@ -88,6 +88,7 @@
 import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useTaskStatusClass } from '../node'
 import { getDefaultInclusiveConditionNodeName } from '../utils'
 import { generateUUID } from '@/utils'
 import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index 7f63344e..789ad655 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly">
-        <span class="iconfont icon-parallel icon-size"></span>
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+        <span class="iconfont icon-parallel icon-size parallel"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#626aef" @click="addCondition"  plain>添加分支</el-button>
       <div
@@ -20,7 +20,7 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box">
+            <div class="node-box" :class="`${useTaskStatusClass(item.activityStatus)}`">
               <div class="branch-node-title-container">
                 <div v-if="showInputs[index]">
                   <input
@@ -73,8 +73,8 @@
 import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useTaskStatusClass } from '../node'
 import { generateUUID } from '@/utils'
-
 const { proxy } = getCurrentInstance() as any
 defineOptions({
   name: 'ParallelNode'
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 13be6b72..3fab63d9 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -3,7 +3,7 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
       >
         <div class="node-title-container">
           <div class="node-title-icon start-user"
@@ -59,8 +59,6 @@ const emits = defineEmits<{
 }>()
 // 监控节点变化
 const currentNode = useWatchNode(props)
-// 节点任务状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index ea4a4b8d..75440067 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -3,7 +3,7 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
       >
         <div class="node-title-container">
           <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
@@ -69,8 +69,7 @@ const emits = defineEmits<{
 const readonly = inject<Boolean>('readonly')
 // 监控节点变化
 const currentNode = useWatchNode(props)
-// 节点状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
+
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 39c475d5..1219380f 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1096,7 +1096,15 @@
 
         .icon-size {
           font-size: 22px;
-          color: #67c23a;
+          &.condition {
+            color: #67c23a;
+          }
+          &.parallel {
+            color: #626aef;
+          }
+          &.inclusive {
+            color: #345da2;
+          }
         }
       }