fix: 优化已完成流程节点显示问题

ruoyi-flowable/src/main/java/com/ruoyi/flowable/controller/FlowTaskController.java

@@ -192,7 +192,7 @@ public class FlowTaskController {
     }
 
     /**
-     * 生成流程图
+     * 获取流程执行节点
      *
      * @param procInsId 流程实例编号
      * @param procInsId 任务执行编号
@@ -202,4 +202,16 @@ public class FlowTaskController {
                                     @PathVariable("executionId") String executionId) {
         return flowTaskService.getFlowViewer(procInsId, executionId);
     }
+
+    /**
+     * 流程节点信息
+     * @param procInsId     流程实例id
+     * @return
+     */
+    @GetMapping("/flowXmlAndNode")
+    public AjaxResult flowXmlAndNode(@RequestParam(value = "procInsId",required = false) String procInsId,
+                                   @RequestParam(value = "deployId",required = false) String deployId){
+        return flowTaskService.flowXmlAndNode(procInsId,deployId);
+    }
+
 }

ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/IFlowTaskService.java

@@ -145,7 +145,7 @@ public interface IFlowTaskService {
     InputStream diagram(String processId);
 
     /**
-     * 获取流程执行过程
+     * 获取流程执行节点
      * @param procInsId
      * @return
      */
@@ -173,4 +173,11 @@ public interface IFlowTaskService {
      * @return
      */
     AjaxResult flowFormData(String deployId);
+
+    /**
+     * 流程节点信息
+     * @param procInsId
+     * @return
+     */
+    AjaxResult flowXmlAndNode(String procInsId,String deployId);
 }

ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowTaskServiceImpl.java

@@ -3,6 +3,7 @@ package com.ruoyi.flowable.service.impl;
 
 import com.alibaba.fastjson2.JSONObject;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.ruoyi.common.core.domain.model.LoginUser;
 import com.ruoyi.flowable.common.constant.ProcessConstants;
 import com.ruoyi.common.core.domain.AjaxResult;
 import com.ruoyi.common.core.domain.entity.SysRole;
@@ -26,6 +27,7 @@ import com.ruoyi.system.service.ISysRoleService;
 import com.ruoyi.system.service.ISysUserService;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.collections4.CollectionUtils;
+import org.apache.commons.io.IOUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.flowable.bpmn.model.Process;
 import org.flowable.bpmn.model.*;
@@ -52,6 +54,7 @@ import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
 import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
 import java.util.*;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.function.Function;
@@ -866,7 +869,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
     }
 
     /**
-     * 获取流程执行过程
+     * 获取流程执行节点
      *
      * @param procInsId 流程实例id
      * @return
@@ -1030,6 +1033,56 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
         }
     }
 
+    /**
+     * 流程节点信息
+     *
+     * @param procInsId
+     * @return
+     */
+    @Override
+    public AjaxResult flowXmlAndNode(String procInsId, String deployId) {
+        try {
+            List<FlowViewerDto> flowViewerList = new ArrayList<>();
+            // 获取已经完成的节点
+            List<HistoricActivityInstance> listFinished = historyService.createHistoricActivityInstanceQuery()
+                    .processInstanceId(procInsId)
+                    .finished()
+                    .list();
+
+            // 保存已经完成的流程节点编号
+            listFinished.forEach(s -> {
+                FlowViewerDto flowViewerDto = new FlowViewerDto();
+                flowViewerDto.setKey(s.getActivityId());
+                flowViewerDto.setCompleted(true);
+                flowViewerList.add(flowViewerDto);
+            });
+
+            // 获取代办节点
+            List<HistoricActivityInstance> listUnFinished = historyService.createHistoricActivityInstanceQuery()
+                    .processInstanceId(procInsId)
+                    .unfinished()
+                    .list();
+
+            // 保存需要代办的节点编号
+            listUnFinished.forEach(s -> {
+                FlowViewerDto flowViewerDto = new FlowViewerDto();
+                flowViewerDto.setKey(s.getActivityId());
+                flowViewerDto.setCompleted(false);
+                flowViewerList.add(flowViewerDto);
+            });
+            Map<String, Object> result = new HashMap();
+            // xmlData 数据
+            ProcessDefinition definition = repositoryService.createProcessDefinitionQuery().deploymentId(deployId).singleResult();
+            InputStream inputStream = repositoryService.getResourceAsStream(definition.getDeploymentId(), definition.getResourceName());
+            String xmlData = IOUtils.toString(inputStream, StandardCharsets.UTF_8);
+            result.put("nodeData",flowViewerList);
+            result.put("xmlData",xmlData);
+            return AjaxResult.success(result);
+        } catch (Exception e) {
+            return AjaxResult.error("高亮历史任务失败");
+        }
+    }
+
     /**
      * 流程完成时间处理
      *

ruoyi-ui/src/api/flowable/definition.js

@@ -78,7 +78,7 @@ export function readImage(deployId) {
   })
 }
 
-// 读取image文件
+// 获取流程执行节点
 export function getFlowViewer(procInsId, executionId) {
   return request({
     url: '/flowable/task/flowViewer/' + procInsId + '/' + executionId,
@@ -86,6 +86,15 @@ export function getFlowViewer(procInsId, executionId) {
   })
 }
 
+// 流程节点数据
+export function flowXmlAndNode(query) {
+  return request({
+    url: '/flowable/task/flowXmlAndNode',
+    method: 'get',
+    params: query
+  })
+}
+
 // 读取xml文件
 export function saveXml(data) {
   return request({

ruoyi-ui/src/views/flowable/task/finished/detail/flow.vue

@@ -1,32 +1,20 @@
 <template>
   <div>
-    <!--<bpmn-modeler
+    <flow-view :flowData="flowData"/>
-      ref="refNode"
-      :xml="xmlData"
-      :is-view="true"
-      :taskList="taskData"
-    />-->
-    <flow-view :xmlData="xmlData" :taskList="taskData"/>
   </div>
 </template>
 <script>
-import bpmnModeler from '@/components/Process/index'
 import FlowView from './flowview'
 
 export default {
   name: "Flow",
   components: {
-    bpmnModeler,
     FlowView
   },
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
-    },
-    taskData: {
-      type: Array,
-      default: () => []
     }
   },
   data() {

ruoyi-ui/src/views/flowable/task/finished/detail/flowview.vue

@@ -21,14 +21,10 @@ import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
 export default {
   name: "FlowView",
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
     },
-    taskList: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -36,30 +32,33 @@ export default {
     };
   },
   watch: {
-    xmlData: function(val) {
+    flowData: {
-      if (val) {
+      handler(newVal) {
-        this.getImg(val)
+        if (Object.keys(newVal).length > 0) {
-      }
-    }
-  },
-  mounted() {
           // 生成实例
           this.bpmnViewer && this.bpmnViewer.destroy();
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
             height: 'calc(100vh - 200px)',
           });
-    this.getImg(this.xmlData)
+          this.loadFlowCanvas(newVal)
+        }
+      },
+      immediate: true, // 立即生效
+      deep: true  //监听对象或数组的时候，要用到深度监听
+    }
+  },
+  mounted() {
   },
   methods: {
-    // 获取流程图片
+    // 加载流程
-    async getImg(xmlUrl) {
+    async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(xmlUrl);
+        await self.bpmnViewer.importXML(flowData.xmlData);
         self.fitViewport()
-        if (self.taskList !==undefined && self.taskList.length > 0 ) {
+        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
-          self.fillColor()
+          self.fillColor(flowData.nodeData)
         }
       } catch (err) {
         console.error(err.message, err.warnings)
@@ -83,17 +82,17 @@ export default {
     },
 
     // 设置高亮颜色的
-    fillColor() {
+    fillColor(nodeData) {
       const canvas = this.bpmnViewer.get('canvas')
       this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = this.taskList.find(m => m.key === n.id)
+        const completeTask = nodeData.find(m => m.key === n.id)
-        const todoTask = this.taskList.find(m => !m.completed)
+        const todoTask = nodeData.find(m => !m.completed)
-        const endTask = this.taskList[this.taskList.length - 1]
+        const endTask = nodeData[nodeData.length - 1]
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
                   canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
@@ -111,7 +110,7 @@ export default {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
 
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -127,7 +126,7 @@ export default {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -137,7 +136,7 @@ export default {
         }
         else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
-            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
+            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
               canvas.addMarker(nn.id, 'highlight')
               canvas.addMarker(n.id, 'highlight')

ruoyi-ui/src/views/flowable/task/finished/detail/index.vue

@@ -5,9 +5,9 @@
         <span class="el-icon-document">办结任务</span>
         <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
       </div>
-      <el-tabs  tab-position="top" @tab-click="handleClick">
+      <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
         <!--表单信息-->
-        <el-tab-pane label="表单信息">
+        <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4" v-if="variableOpen">
             <div class="test-form">
               <parser :key="new Date().getTime()" :form-conf="variablesData" />
@@ -15,7 +15,7 @@
           </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
-        <el-tab-pane label="流转记录">
+        <el-tab-pane label="流转记录" name="2">
           <el-col :span="16" :offset="4" >
             <div class="block">
               <el-timeline>
@@ -60,8 +60,8 @@
             </div>
           </el-col>
         </el-tab-pane>
-        <el-tab-pane label="流程图">
+        <el-tab-pane label="流程图" name="3">
-          <flow :xmlData="xmlData" :taskData="taskList"></flow>
+          <flow :flowData="flowData"/>
         </el-tab-pane>
       </el-tabs>
       <el-button style="position: absolute;right:35px;top:35px;"  type="primary" @click="goBack">关闭</el-button>
@@ -72,10 +72,9 @@
 <script>
 import {flowRecord} from "@/api/flowable/finished";
 import Parser from '@/components/parser/Parser'
-import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
+import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
 import flow from '@/views/flowable/task/finished/detail/flow'
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import Treeselect from "@riophae/vue-treeselect";
 
 export default {
   name: "Record",
@@ -87,8 +86,8 @@ export default {
   data() {
     return {
       // 模型xml数据
-      xmlData: "",
+      flowData: {},
-      taskList: [],
+      activeName: '1',
       // 用户表格数据
       userList: null,
       defaultProps: {
@@ -125,8 +124,6 @@ export default {
     this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
     this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
     // 回显流程记录
-    this.getFlowViewer(this.taskForm.procInsId,this.taskForm.executionId);
-    this.getModelDetail(this.taskForm.deployId);
     // 流程任务重获取变量表单
     if (this.taskForm.taskId){
       this.processVariables( this.taskForm.taskId)
@@ -135,19 +132,11 @@ export default {
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      if (tab.name === '3') {
-    },
+        flowXmlAndNode({procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId}).then(res => {
-    /** xml 文件 */
+          this.flowData = res.data;
-    getModelDetail(deployId) {
-      // 发送请求，获取xml
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
-      })
-    },
-    getFlowViewer(procInsId,executionId) {
-      getFlowViewer(procInsId,executionId).then(res => {
-        this.taskList = res.data
         })
+      }
     },
     setIcon(val) {
       if (val) {

ruoyi-ui/src/views/flowable/task/myProcess/detail/flow.vue

@@ -1,32 +1,20 @@
 <template>
   <div>
-    <!--<bpmn-modeler
+    <flow-view :flowData="flowData"/>
-      ref="refNode"
-      :xml="xmlData"
-      :is-view="true"
-      :taskList="taskData"
-    />-->
-    <flow-view :xmlData="xmlData" :taskList="taskData"/>
   </div>
 </template>
 <script>
-import bpmnModeler from '@/components/Process/index'
 import FlowView from './flowview'
 
 export default {
   name: "Flow",
   components: {
-    bpmnModeler,
     FlowView
   },
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
-    },
-    taskData: {
-      type: Array,
-      default: () => []
     }
   },
   data() {

ruoyi-ui/src/views/flowable/task/myProcess/detail/flowview.vue

@@ -21,14 +21,10 @@ import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
 export default {
   name: "FlowView",
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
     },
-    taskList: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -36,30 +32,34 @@ export default {
     };
   },
   watch: {
-    xmlData: function(val) {
+    flowData: {
-      if (val) {
+      handler(newVal) {
-        this.getImg(val)
+        if (Object.keys(newVal).length > 0) {
-      }
-    }
-  },
-  mounted() {
           // 生成实例
           this.bpmnViewer && this.bpmnViewer.destroy();
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
             height: 'calc(100vh - 200px)',
           });
-    this.getImg(this.xmlData)
+          this.loadFlowCanvas(newVal)
+        }
+      },
+      immediate: true, // 立即生效
+      deep: true  //监听对象或数组的时候，要用到深度监听
+    }
+  },
+  mounted() {
   },
   methods: {
-    // 获取流程图片
+    // 加载流程
-    async getImg(xmlUrl) {
+    async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(xmlUrl);
+        console.log(flowData,"self.flowData")
+        await self.bpmnViewer.importXML(flowData.xmlData);
         self.fitViewport()
-        if (self.taskList !==undefined && self.taskList.length > 0 ) {
+        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
-          self.fillColor()
+          self.fillColor(flowData.nodeData)
         }
       } catch (err) {
         console.error(err.message, err.warnings)
@@ -83,17 +83,17 @@ export default {
     },
 
     // 设置高亮颜色的
-    fillColor() {
+    fillColor(nodeData) {
       const canvas = this.bpmnViewer.get('canvas')
       this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = this.taskList.find(m => m.key === n.id)
+        const completeTask = nodeData.find(m => m.key === n.id)
-        const todoTask = this.taskList.find(m => !m.completed)
+        const todoTask = nodeData.find(m => !m.completed)
-        const endTask = this.taskList[this.taskList.length - 1]
+        const endTask = nodeData[nodeData.length - 1]
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
                   canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
@@ -111,7 +111,7 @@ export default {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
 
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -127,7 +127,7 @@ export default {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -137,7 +137,7 @@ export default {
         }
         else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
-            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
+            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
               canvas.addMarker(nn.id, 'highlight')
               canvas.addMarker(n.id, 'highlight')

ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue

@@ -5,9 +5,9 @@
         <span class="el-icon-document">已发任务</span>
         <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
       </div>
-      <el-tabs  tab-position="top" @tab-click="handleClick">
+      <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
         <!--表单信息-->
-        <el-tab-pane label="表单信息">
+        <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
             <div class="test-form">
                 <parser :key="new Date().getTime()" :form-conf="variablesData" />
@@ -15,7 +15,7 @@
          </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
-        <el-tab-pane label="流转记录">
+        <el-tab-pane label="流转记录" name="2">
           <el-col :span="16" :offset="4" >
             <div class="block">
               <el-timeline>
@@ -61,8 +61,8 @@
           </el-col>
         </el-tab-pane>
         <!--流程图-->
-        <el-tab-pane label="流程图">
+        <el-tab-pane label="流程图" name="3">
-          <flow :xmlData="xmlData" :taskData="taskList"></flow>
+          <flow :flowData="flowData"/>
         </el-tab-pane>
     </el-tabs>
     <el-button style="position: absolute;right:35px;top:35px;"  type="primary" @click="goBack">关闭</el-button>
@@ -73,7 +73,7 @@
 <script>
 import {flowRecord} from "@/api/flowable/finished";
 import Parser from '@/components/parser/Parser'
-import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
+import {getProcessVariables, readXml, getFlowViewer, getHighlight, flowXmlAndNode} from "@/api/flowable/definition";
 import flow from '@/views/flowable/task/myProcess/detail/flow'
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
@@ -87,8 +87,8 @@ export default {
   data() {
     return {
       // 模型xml数据
-      xmlData: "",
+      flowData: {},
-      taskList: [],
+      activeName: '1',
       // 查询参数
       queryParams: {
         deptId: undefined
@@ -113,22 +113,17 @@ export default {
     this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
     this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
     // 回显流程记录
-    this.getFlowViewer(this.taskForm.procInsId,this.taskForm.executionId);
-    this.getModelDetail(this.taskForm.deployId);
     // 流程任务重获取变量表单
     this.processVariables( this.taskForm.taskId)
     this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      if (tab.name === '3'){
-    },
+        flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
-    /** xml 文件 */
+          this.flowData = res.data;
-    getModelDetail(deployId) {
-      // 发送请求，获取xml
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
         })
+      }
     },
     getFlowViewer(procInsId,executionId) {
       getFlowViewer(procInsId,executionId).then(res => {

ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <flow-view :xmlData="xmlData"/>
+    <flow-view :flowData="flowData"/>
   </div>
 </template>
 <script>
@@ -12,9 +12,9 @@ export default {
     FlowView
   },
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
     },
   },
   data() {

ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue

@@ -21,10 +21,9 @@ import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
 export default {
   name: "FlowView",
   props: {
-    // xml 数据
+    flowData: {
-    xmlData: {
+      type: Object,
-      type: String,
+      default: () => {}
-      default: ''
     },
   },
   data() {
@@ -33,30 +32,29 @@ export default {
     };
   },
   watch: {
-    xmlData: {
+    flowData: {
       handler(newVal) {
-        if (newVal) {
+        if (Object.keys(newVal).length > 0) {
-          this.loadFlowImg(newVal)
+          // 生成实例
+          this.bpmnViewer && this.bpmnViewer.destroy();
+          this.bpmnViewer = new BpmnViewer({
+            container: this.$refs.flowCanvas,
+            height: 'calc(100vh - 200px)',
+          });
+          this.loadFlowCanvas(newVal)
         }
       },
       immediate: true, // 立即生效
       deep: true  //监听对象或数组的时候，要用到深度监听
     }
   },
-  mounted() {
+  mounted() {},
-    // 生成实例
-    this.bpmnViewer && this.bpmnViewer.destroy();
-    this.bpmnViewer = new BpmnViewer({
-      container: this.$refs.flowCanvas,
-      height: 'calc(85vh - 200px)',
-    });
-  },
   methods: {
     // 加载流程图片
-    async loadFlowImg(xmlData) {
+    async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(xmlData);
+        await self.bpmnViewer.importXML(flowData.xmlData);
         self.fitViewport()
       } catch (err) {
         console.error(err.message, err.warnings)

ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue

@@ -17,7 +17,7 @@
         </el-tab-pane>
         <!--流程图-->
         <el-tab-pane label="流程图">
-           <flow :xmlData="xmlData"/>
+           <flow :flowData="flowData"/>
         </el-tab-pane>
       </el-tabs>
       <el-button style="position: absolute;right:35px;top:35px;"  type="primary" @click="goBack">关闭</el-button>
@@ -36,7 +36,7 @@
 
 <script>
 import Parser from '@/components/parser/Parser'
-import {definitionStart, readXml} from "@/api/flowable/definition";
+import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
 import flow from './flow'
 import {flowFormData} from "@/api/flowable/process";
 import {getNextFlowNodeByStart} from "@/api/flowable/todo";
@@ -55,7 +55,7 @@ export default {
   data() {
     return {
       // 模型xml数据
-      xmlData: "",
+      flowData: {},
       defaultProps: {
         children: "children",
         label: "label"
@@ -86,19 +86,14 @@ export default {
     this.procDefId  = this.$route.query && this.$route.query.procDefId;
     // this.getNextFlowNodeByStart(this.deployId);
     this.getFlowFormData(this.deployId);
-    // 回显流程记录
-    this.loadModelXml(this.deployId);
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      if (tab.name === '3'){
-    },
+        flowXmlAndNode({deployId:this.deployId}).then(res => {
-    /** xml 文件 */
+          this.flowData = res.data;
-    loadModelXml(deployId) {
-      // 发送请求，获取xml
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
         })
+      }
     },
     /** 流程表单数据 */
     getFlowFormData(deployId) {

ruoyi-ui/src/views/flowable/task/record/flowview.vue

@@ -49,7 +49,7 @@ export default {
       container: this.$refs.flowCanvas,
       height: 'calc(100vh - 200px)',
     });
-    this.getImg(this.xmlData)
+    // this.getImg(this.xmlData)
   },
   methods: {
     // 获取流程图片

ruoyi-ui/src/views/flowable/task/todo/detail/flow.vue

@@ -1,33 +1,21 @@
 <template>
   <div>
-    <!--<bpmn-modeler
+    <flow-view :flowData="flowData"/>
-      ref="refNode"
-      :xml="xmlData"
-      :is-view="true"
-      :taskList="taskData"
-    />-->
-    <flow-view :xmlData="xmlData" :taskList="taskData"/>
   </div>
 </template>
 <script>
-import bpmnModeler from '@/components/Process/index'
 import FlowView from './flowview'
 
 export default {
   name: "Flow",
   components: {
-    bpmnModeler,
     FlowView
   },
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
     },
-    taskData: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {};

ruoyi-ui/src/views/flowable/task/todo/detail/flowview.vue

@@ -21,14 +21,10 @@ import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
 export default {
   name: "FlowView",
   props: {
-    xmlData: {
+    flowData: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => {}
     },
-    taskList: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -36,30 +32,33 @@ export default {
     };
   },
   watch: {
-    xmlData: function(val) {
+    flowData: {
-      if (val) {
+      handler(newVal) {
-        this.getImg(val)
+        if (Object.keys(newVal).length > 0) {
-      }
-    }
-  },
-  mounted() {
           // 生成实例
           this.bpmnViewer && this.bpmnViewer.destroy();
           this.bpmnViewer = new BpmnViewer({
             container: this.$refs.flowCanvas,
             height: 'calc(100vh - 200px)',
           });
-    this.getImg(this.xmlData)
+          this.loadFlowCanvas(newVal)
+        }
+      },
+      immediate: true, // 立即生效
+      deep: true  //监听对象或数组的时候，要用到深度监听
+    }
+  },
+  mounted() {
   },
   methods: {
-    // 获取流程图片
+    // 加载流程
-    async getImg(xmlUrl) {
+    async loadFlowCanvas(flowData) {
       const self = this
       try {
-        await self.bpmnViewer.importXML(xmlUrl);
+        await self.bpmnViewer.importXML(flowData.xmlData);
         self.fitViewport()
-        if (self.taskList !==undefined && self.taskList.length > 0 ) {
+        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
-          self.fillColor()
+          self.fillColor(flowData.nodeData)
         }
       } catch (err) {
         console.error(err.message, err.warnings)
@@ -83,17 +82,17 @@ export default {
     },
 
     // 设置高亮颜色的
-    fillColor() {
+    fillColor(nodeData) {
       const canvas = this.bpmnViewer.get('canvas')
       this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = this.taskList.find(m => m.key === n.id)
+        const completeTask = nodeData.find(m => m.key === n.id)
-        const todoTask = this.taskList.find(m => !m.completed)
+        const todoTask = nodeData.find(m => !m.completed)
-        const endTask = this.taskList[this.taskList.length - 1]
+        const endTask = nodeData[nodeData.length - 1]
         if (n.$type === 'bpmn:UserTask') {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
                   canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
@@ -111,7 +110,7 @@ export default {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
 
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -127,7 +126,7 @@ export default {
           if (completeTask) {
             canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
@@ -137,7 +136,7 @@ export default {
         }
         else if (n.$type === 'bpmn:StartEvent') {
           n.outgoing.forEach(nn => {
-            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
+            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
             if (completeTask) {
               canvas.addMarker(nn.id, 'highlight')
               canvas.addMarker(n.id, 'highlight')

ruoyi-ui/src/views/flowable/task/todo/detail/index.vue

@@ -7,9 +7,9 @@
         <el-tag>任务节点:{{taskName}}</el-tag>
         <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
       </div>
-      <el-tabs  tab-position="top" @tab-click="handleClick">
+      <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
         <!--表单信息-->
-        <el-tab-pane label="表单信息">
+        <el-tab-pane label="表单信息" name="1">
             <el-col :span="16" :offset="4">
               <div class="test-form">
                   <parser :key="new Date().getTime()" :form-conf="variablesData" />
@@ -25,7 +25,7 @@
            </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
-        <el-tab-pane label="流转记录">
+        <el-tab-pane label="流转记录" name="2">
           <!--flowRecordList-->
           <el-col :span="16" :offset="4" >
             <div class="block">
@@ -72,8 +72,8 @@
           </el-col>
         </el-tab-pane>
         <!--流程图-->
-      <el-tab-pane label="流程图">
+        <el-tab-pane label="流程图" name="3">
-        <flow :xmlData="xmlData" :taskData="taskList"></flow>
+          <flow :flowData="flowData"/>
         </el-tab-pane>
         </el-tabs>
         <!--审批任务-->
@@ -134,7 +134,7 @@ import {flowRecord} from "@/api/flowable/finished";
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
 import Parser from '@/components/parser/Parser'
-import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
+import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
 import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
 import flow from '@/views/flowable/task/todo/detail/flow'
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -153,7 +153,8 @@ export default {
     return {
       // 模型xml数据
       xmlData: "",
-      taskList: [],
+      flowData: {},
+      activeName: '1',
       // 部门名称
       deptName: undefined,
       // 部门树选项
@@ -216,9 +217,6 @@ export default {
       this.taskForm.procInsId = this.$route.query.procInsId;
       this.taskForm.executionId = this.$route.query.executionId;
       this.taskForm.instanceId = this.$route.query.procInsId;
-      // 回显流程记录
-      this.getFlowViewer(this.taskForm.procInsId, this.taskForm.executionId);
-      this.getModelDetail(this.taskForm.deployId);
       // 流程任务重获取变量表单
       if (this.taskForm.taskId) {
         this.processVariables(this.taskForm.taskId)
@@ -229,19 +227,11 @@ export default {
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      if (tab.name === '3'){
-    },
+        flowXmlAndNode({procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId}).then(res => {
-    /** xml 文件 */
+          this.flowData = res.data;
-    getModelDetail(deployId) {
-      // 发送请求，获取xml
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
-      })
-    },
-    getFlowViewer(procInsId,executionId) {
-      getFlowViewer(procInsId,executionId).then(res => {
-        this.taskList = res.data
         })
+      }
     },
     setIcon(val) {
       if (val) {