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

0284893b · jason · c9b12c8b · 0284893b · 0284893b · 0284893b
Commit 0284893b authored Oct 29, 2024 by jason
8 changed files
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/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'

--- a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
+++ b/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>
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/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">
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
-        <span class="iconfont icon-exclusive icon-size"></span>
+        <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) => {

--- a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
+++ b/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">
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" >
-        <span class="iconfont icon-inclusive icon-size"></span>
+        <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'

--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/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">
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
-        <span class="iconfont icon-parallel icon-size"></span>
+        <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'

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

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

--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1096,8 +1096,16 @@
        .icon-size {
          font-size: 22px;
+          &.condition {
            color: #67c23a;
          }
+          &.parallel {
+            color: #626aef;
+          }
+          &.inclusive {
+            color: #345da2;
+          }
+        }
      }
      .branch-node-item {