fix -- 修复跟踪流程有时无法着色问题。添加更多色彩标记"流程跟踪"节点状态（试验阶段）

ruoyi-system/src/main/java/com/ruoyi/workflow/domain/vo/WfViewerVo.java

@@ -6,7 +6,7 @@ import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
-import java.util.List;
+import java.util.Set;
 
 /**
  * 任务追踪视图对象
@@ -24,10 +24,20 @@ public class WfViewerVo {
     /**
      * 获取流程实例的历史节点（去重）
      */
-    private List<String> finishedTaskList;
+    private Set<String> finishedTaskSet;
+
+    /**
+     * 已完成
+     */
+    private Set<String> finishedSequenceFlowSet;
 
     /**
      * 获取流程实例当前正在待办的节点（去重）
      */
-    private List<String> unfinishedTaskList;
+    private Set<String> unfinishedTaskSet;
+
+    /**
+     * 已拒绝
+     */
+    private Set<String> rejectedTaskSet;
 }

ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfTaskServiceImpl.java

@@ -1,6 +1,8 @@
 package com.ruoyi.workflow.service.impl;
 
 
+import cn.hutool.core.collection.CollUtil;
+import cn.hutool.core.collection.ListUtil;
 import cn.hutool.core.util.ObjectUtil;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.google.common.collect.Lists;
@@ -20,14 +22,14 @@ import com.ruoyi.flowable.flow.FindNextNodeUtil;
 import com.ruoyi.flowable.flow.FlowableUtils;
 import com.ruoyi.system.service.ISysRoleService;
 import com.ruoyi.system.service.ISysUserService;
+import com.ruoyi.workflow.domain.bo.WfTaskBo;
 import com.ruoyi.workflow.domain.dto.WfCommentDto;
 import com.ruoyi.workflow.domain.dto.WfNextDto;
-import com.ruoyi.workflow.domain.vo.WfTaskVo;
-import com.ruoyi.workflow.domain.bo.WfTaskBo;
-import com.ruoyi.workflow.domain.vo.WfViewerVo;
 import com.ruoyi.workflow.domain.vo.WfFormVo;
-import com.ruoyi.workflow.service.IWfTaskService;
+import com.ruoyi.workflow.domain.vo.WfTaskVo;
+import com.ruoyi.workflow.domain.vo.WfViewerVo;
 import com.ruoyi.workflow.service.IWfDeployFormService;
+import com.ruoyi.workflow.service.IWfTaskService;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.collections4.CollectionUtils;
@@ -816,16 +818,79 @@ public class WfTaskServiceImpl extends FlowServiceFactory implements IWfTaskServ
         // 构建查询条件
         HistoricActivityInstanceQuery query = historyService.createHistoricActivityInstanceQuery()
             .processInstanceId(procInsId);
-        // 获取流程实例已完成的节点
-        List<String> finishedTaskList = query.finished().list()
-            .stream().distinct().map(HistoricActivityInstance::getActivityId)
-            .collect(Collectors.toList());
-        // 获取流程实例正在待办的节点
-        List<String> unfinishedTaskList = query.unfinished().list()
-            .stream().distinct().map(HistoricActivityInstance::getActivityId)
-            .collect(Collectors.toList());
-        // 构建视图类
-        return new WfViewerVo(finishedTaskList, unfinishedTaskList);
+        List<HistoricActivityInstance> allActivityInstanceList = query.list();
+        if (CollUtil.isEmpty(allActivityInstanceList)) {
+            return new WfViewerVo();
+        }
+        // 获取流程发布Id信息
+        String processDefinitionId = allActivityInstanceList.get(0).getProcessDefinitionId();
+        BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId);
+        if (ObjectUtil.isNull(bpmnModel)) {
+            throw new ServiceException("流程模型不存在");
+        }
+        Map<String, List<String>> sequenceElementMap = new HashMap<>();
+        Map<String, String> sequenceFlowMap = new HashMap<>();
+        Collection<FlowElement> flowElements = bpmnModel.getMainProcess().getFlowElements();
+        for (FlowElement flowElement : flowElements) {
+            if (flowElement instanceof SequenceFlow) {
+                SequenceFlow sequenceFlow = (SequenceFlow) flowElement;
+                String sourceRef = sequenceFlow.getSourceRef();
+                String targetRef = sequenceFlow.getTargetRef();
+                List<String> targetRefList = sequenceElementMap.get(sourceRef);
+                if (CollUtil.isEmpty(targetRefList)) {
+                    sequenceElementMap.put(sourceRef, ListUtil.toList(targetRef));
+                } else {
+                    targetRefList.add(targetRef);
+                }
+                sequenceFlowMap.put(sourceRef + targetRef, sequenceFlow.getId());
+            }
+        }
+        // 查询所有已完成的元素
+        List<HistoricActivityInstance> finishedElementList = allActivityInstanceList.stream()
+            .filter(item -> ObjectUtil.isNotNull(item.getEndTime())).collect(Collectors.toList());
+        // 所有已完成的连线
+        Set<String> finishedSequenceFlowSet = new HashSet<>();
+        // 所有已完成的任务节点
+        Set<String> finishedTaskSet = new HashSet<>();
+        finishedElementList.forEach(item -> {
+            if ("sequenceFlow".equals(item.getActivityType())) {
+                finishedSequenceFlowSet.add(item.getActivityId());
+            } else {
+                finishedTaskSet.add(item.getActivityId());
+            }
+        });
+        // 查询所有未结束的节点
+        Set<String> unfinishedTaskSet = allActivityInstanceList.stream()
+            .filter(item -> ObjectUtil.isNull(item.getEndTime()))
+            .map(HistoricActivityInstance::getActivityId)
+            .collect(Collectors.toSet());
+
+        Set<String> rejectedTaskSet = new LinkedHashSet<>();
+        Set<String> sourceTaskSet = unfinishedTaskSet;
+        while (true) {
+            Set<String> nextIdSet = new HashSet<>();
+            for (String previousId : sourceTaskSet) {
+                List<String> nextIdList = sequenceElementMap.get(previousId);
+                if (CollUtil.isEmpty(nextIdList)) {
+                    continue;
+                }
+                for (String childId : nextIdList) {
+                    String rejectedSequenceFlow = sequenceFlowMap.get(previousId + childId);
+                    if (finishedTaskSet.contains(childId)) {
+                        nextIdSet.add(childId);
+                        if (finishedSequenceFlowSet.contains(rejectedSequenceFlow)) {
+                            nextIdSet.add(sequenceFlowMap.get(previousId + childId));
+                        }
+                    }
+                }
+            }
+            if (CollUtil.isEmpty(nextIdSet)) {
+                break;
+            }
+            rejectedTaskSet.addAll(nextIdSet);
+            sourceTaskSet = nextIdSet;
+        }
+        return new WfViewerVo(finishedTaskSet, finishedSequenceFlowSet, unfinishedTaskSet, rejectedTaskSet);
     }
 
     /**

ruoyi-ui/src/components/ProcessViewer/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="process-viewer">
     <div class="process-canvas" style="height: 100%;" ref="processCanvas" v-show="!isLoading" />
-    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
-    <defs ref="customDefs">
+    <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
+    <defs ref="customSuccessDefs">
       <marker id="sequenceflow-end-white-success" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
         <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
       </marker>
@@ -10,6 +10,15 @@
         <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
       </marker>
     </defs>
+    <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
+    <defs ref="customFailDefs">
+      <marker id="sequenceflow-end-white-fail" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
+        <path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      </marker>
+      <marker id="conditional-flow-marker-white-fail" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
+        <path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      </marker>
+    </defs>
     <!-- 已完成节点悬浮弹窗 -->
     <el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible">
       <el-row>
@@ -138,8 +147,10 @@ export default {
     addCustomDefs() {
       const canvas = this.bpmnViewer.get('canvas');
       const svg = canvas._svg;
-      const customDefs = this.$refs.customDefs;
-      svg.appendChild(customDefs);
+      const customSuccessDefs = this.$refs.customSuccessDefs;
+      const customFailDefs = this.$refs.customFailDefs;
+      svg.appendChild(customSuccessDefs);
+      svg.appendChild(customFailDefs);
     },
     // 任务悬浮弹窗
     onSelectElement(element) {
@@ -186,14 +197,14 @@ export default {
       }
     },
     // 设置流程图元素状态
-    setProcessStatus(processNodeInfo) {
+    setProcessStatus (processNodeInfo) {
       this.processNodeInfo = processNodeInfo;
       if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return;
-      let { finishedSequenceFlowList, finishedTaskList, unfinishedTaskList } = this.processNodeInfo;
+      let { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo;
       const canvas = this.bpmnViewer.get('canvas');
       const elementRegistry = this.bpmnViewer.get('elementRegistry');
-      if (Array.isArray(finishedSequenceFlowList)) {
-        finishedSequenceFlowList.forEach(item => {
+      if (Array.isArray(finishedSequenceFlowSet)) {
+        finishedSequenceFlowSet.forEach(item => {
           if (item != null) {
             canvas.addMarker(item, 'success');
             let element = elementRegistry.get(item);
@@ -204,15 +215,23 @@ export default {
           }
         });
       }
-      if (Array.isArray(finishedTaskList)) {
-        finishedTaskList.forEach(item => {
-          canvas.addMarker(item, 'success');
-        });
+      if (Array.isArray(finishedTaskSet)) {
+        finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'));
       }
-      if (Array.isArray(unfinishedTaskList)) {
-        unfinishedTaskList.forEach(item => {
-          canvas.addMarker(item, 'current');
-        });
+      if (Array.isArray(unfinishedTaskSet)) {
+        unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'));
+      }
+      if (Array.isArray(rejectedTaskSet)) {
+        rejectedTaskSet.forEach(item => {
+          if (item != null) {
+            let element = elementRegistry.get(item);
+            if (element.type.includes('Task')) {
+              canvas.addMarker(item, 'danger');
+            } else {
+              canvas.addMarker(item, 'warning');
+            }
+          }
+        })
       }
     }
   },
@@ -237,7 +256,4 @@ export default {
 </script>
 
 <style scoped>
-.comment-dialog >>> .el-dialog__body {
-  padding: 0px;
-}
 </style>

ruoyi-ui/src/plugins/package/theme/index.scss

@@ -9,13 +9,16 @@
 @import "./process-panel.scss";
 
 $success-color: #4eb819;
-$current-color: #409EFF;
+$primary-color: #409EFF;
+$warning-color: #E6A23C;
+$danger-color: #F56C6C;
+$cancel-color: #909399;
 
 .process-viewer {
   position: relative;
   border: 1px solid #EFEFEF;
   background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
-  
+
   .success-arrow {
     fill: $success-color;
     stroke: $success-color;
@@ -26,6 +29,16 @@ $current-color: #409EFF;
     stroke: $success-color;
   }
 
+  .fail-arrow {
+    fill: $warning-color;
+    stroke: $warning-color;
+  }
+
+  .fail-conditional {
+    fill: white;
+    stroke: $warning-color;
+  }
+
   .success.djs-connection {
     .djs-visual path {
       stroke: $success-color!important;
@@ -64,18 +77,90 @@ $current-color: #409EFF;
 
   .current.djs-shape {
     .djs-visual rect {
-      stroke: $current-color!important;
-      fill: $current-color!important;
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
       fill-opacity: 0.15!important;
     }
 
     .djs-visual polygon {
-      stroke: $current-color!important;
+      stroke: $primary-color!important;
     }
 
     .djs-visual circle {
-      stroke: $current-color!important;
-      fill: $current-color!important;
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .warning.djs-connection {
+    .djs-visual path {
+      stroke: $warning-color!important;
+      marker-end: url(#sequenceflow-end-white-fail)!important;
+    }
+  }
+
+  .warning.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-fail)!important;
+    }
+  }
+
+  .warning.djs-shape {
+    .djs-visual rect {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $warning-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
       fill-opacity: 0.15!important;
     }
   }
@@ -83,4 +168,4 @@ $current-color: #409EFF;
 
 .process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
   display: none;
-}
+}

ruoyi-ui/src/views/workflow/task/record/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <el-tabs tab-position="top">
-      <el-tab-pane label="基础信息">
+    <el-tabs tab-position="top" v-model="activeTagName">
+      <el-tab-pane label="基础信息" name="basicInfo">
         <el-card class="box-card">
           <!--流程处理表单模块-->
           <el-col :span="16" :offset="6" v-if="variableOpen">
@@ -25,8 +25,8 @@
             </div>
           </el-col>
         </el-card>
-      </el-tab-pane>
-      <el-tab-pane label="流转记录">
+      </el-tab-pane >
+      <el-tab-pane label="流转记录" name="flowRecord">
         <el-card class="box-card">
           <el-col :span="16" :offset="4">
             <div class="block">
@@ -71,7 +71,7 @@
           </el-col>
         </el-card>
       </el-tab-pane>
-      <el-tab-pane label="流程跟踪">
+      <el-tab-pane label="流程跟踪" name="processTrack">
         <el-card class="box-card">
           <process-viewer :key="`designer-${loadIndex}`" :style="'height:' + height" :xml="xmlData"
                           :finishedInfo="finishedInfo" :allCommentList="null"
@@ -198,13 +198,15 @@ export default {
   data() {
     return {
       height: document.documentElement.clientHeight - 205 + 'px;',
+      activeTagName: 'basicInfo',
       // 模型xml数据
       loadIndex: 0,
       xmlData: undefined,
       finishedInfo: {
-        finishedSequenceFlowList: [],
-        finishedTaskList: [],
-        unfinishedTaskList: []
+        finishedSequenceFlowSet: [],
+        finishedTaskSet: [],
+        unfinishedTaskSet: [],
+        rejectedTaskSet: []
       },
       taskList: [],
       // 部门名称
@@ -267,30 +269,17 @@ export default {
     this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
     this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
     this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
-    // 回显流程记录
-    this.getFlowViewer(this.taskForm.procInsId);
-    this.getModelDetail(this.taskForm.definitionId);
+    this.finished =  this.$route.query && this.$route.query.finished
     // 流程任务重获取变量表单
     if (this.taskForm.taskId){
       this.processVariables( this.taskForm.taskId)
-      this.getNextFlowNode(this.taskForm.taskId)
+      // this.getNextFlowNode(this.taskForm.taskId)
       this.taskForm.deployId = null
     }
     this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
-    this.finished =  this.$route.query && this.$route.query.finished
-  },
-  mounted() {
-    // // 表单数据回填，模拟异步请求场景
-    // setTimeout(() => {
-    //   // 请求回来的表单数据
-    //   const data = {
-    //     field102: '18836662555'
-    //   }
-    //   // 回填数据
-    //   this.fillFormData(this.formConf, data)
-    //   // 更新表单
-    //   this.key = +new Date().getTime()
-    // }, 1000)
+    Promise.all([this.getFlowViewer(this.taskForm.procInsId), this.getModelDetail(this.taskForm.definitionId)]).then(() => {
+      this.loadIndex = this.taskForm.procInsId;
+    });
   },
   methods: {
     /** 查询部门下拉树结构 */
@@ -319,19 +308,26 @@ export default {
     },
     /** xml 文件 */
     getModelDetail(definitionId) {
-      // 发送请求，获取xml
-      readXml(definitionId).then(res => {
-        this.xmlData = res.data
-        this.loadIndex = definitionId
+      return new Promise(resolve => {
+        // 发送请求，获取xml
+        readXml(definitionId).then(res => {
+          this.xmlData = res.data
+          resolve()
+        })
       })
     },
     getFlowViewer(procInsId) {
-      getFlowViewer(procInsId).then(res => {
-        let data = res.data;
-        if (data) {
-          this.finishedInfo.finishedTaskList = data.finishedTaskList;
-          this.finishedInfo.unfinishedTaskList = data.unfinishedTaskList;
-        }
+      return new Promise(resolve => {
+        getFlowViewer(procInsId).then(res => {
+          let data = res.data;
+          if (data) {
+            this.finishedInfo.finishedTaskSet = data.finishedTaskSet;
+            this.finishedInfo.unfinishedTaskSet = data.unfinishedTaskSet;
+            this.finishedInfo.rejectedTaskSet = data.rejectedTaskSet;
+            this.finishedInfo.finishedSequenceFlowSet = data.finishedSequenceFlowSet;
+          }
+          resolve()
+        })
       })
     },
     setIcon(val) {
@@ -405,7 +401,6 @@ export default {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          // this.variables = res.data.variables;
           this.variablesData = res.data.variables;
           this.variableOpen = true
         });