【功能完善】仿钉钉流程浏览功能完善

src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue

 <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)
 // 节点名称编辑

src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue

 <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>

src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue

 <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) => {

src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue

 <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'

src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue

 <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'

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)
 

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()

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;
+          }
         }
       }