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

2022-12-18 15:45:15 +08:00
parent 1486beb897
commit be62877c37
17 changed files with 306 additions and 296 deletions
--- a/ruoyi-ui/src/views/flowable/task/myProcess/detail/flow.vue
+++ b/ruoyi-ui/src/views/flowable/task/myProcess/detail/flow.vue
@@ -1,32 +1,20 @@
 <template>
  <div>
-    <!--<bpmn-modeler
-      ref="refNode"
-      :xml="xmlData"
-      :is-view="true"
-      :taskList="taskData"
-    />-->
-    <flow-view :xmlData="xmlData" :taskList="taskData"/>
+    <flow-view :flowData="flowData"/>
  </div>
 </template>
 <script>
-import bpmnModeler from '@/components/Process/index'
 import FlowView from './flowview'

 export default {
  name: "Flow",
  components: {
-    bpmnModeler,
    FlowView
  },
  props: {
-    xmlData: {
-      type: String,
-      default: ''
-    },
-    taskData: {
-      type: Array,
-      default: () => []
+    flowData: {
+      type: Object,
+      default: () => {}
    }
  },
  data() {
--- a/ruoyi-ui/src/views/flowable/task/myProcess/detail/flowview.vue
+++ b/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: {
-      type: String,
-      default: ''
+    flowData: {
+      type: Object,
+      default: () => {}
    },
-    taskList: {
-      type: Array,
-      default: () => []
-    }
  },
  data() {
    return {
@@ -36,30 +32,34 @@ export default {
    };
  },
  watch: {
-    xmlData: function(val) {
-      if (val) {
-        this.getImg(val)
-      }
+    flowData: {
+      handler(newVal) {
+        if (Object.keys(newVal).length > 0) {
+          // 生成实例
+          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() {
-    // 生成实例
-    this.bpmnViewer && this.bpmnViewer.destroy();
-    this.bpmnViewer = new BpmnViewer({
-      container: this.$refs.flowCanvas,
-      height: 'calc(100vh - 200px)',
-    });
-    this.getImg(this.xmlData)
  },
  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 ) {
-          self.fillColor()
+        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
+          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 todoTask = this.taskList.find(m => !m.completed)
-        const endTask = this.taskList[this.taskList.length - 1]
+        const completeTask = nodeData.find(m => m.key === n.id)
+        const todoTask = nodeData.find(m => !m.completed)
+        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')
--- a/ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue
+++ b/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="流程图">
-          <flow :xmlData="xmlData" :taskData="taskList"></flow>
+        <el-tab-pane label="流程图" name="3">
+          <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: "",
-      taskList: [],
+      flowData: {},
+      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);
-    },
-    /** xml 文件 */
-    getModelDetail(deployId) {
-      // 发送请求，获取xml
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
-      })
+      if (tab.name === '3'){
+        flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
+          this.flowData = res.data;
+        })
+      }
    },
    getFlowViewer(procInsId,executionId) {
      getFlowViewer(procInsId,executionId).then(res => {
--- a/ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue
+++ b/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: {
-      type: String,
-      default: ''
+    flowData: {
+      type: Object,
+      default: () => {}
    },
  },
  data() {
--- a/ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue
+++ b/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 数据
-    xmlData: {
-      type: String,
-      default: ''
+    flowData: {
+      type: Object,
+      default: () => {}
    },
  },
  data() {
@@ -33,30 +32,29 @@ export default {
    };
  },
  watch: {
-    xmlData: {
+    flowData: {
      handler(newVal) {
-        if (newVal) {
-          this.loadFlowImg(newVal)
+        if (Object.keys(newVal).length > 0) {
+          // 生成实例
+          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() {
-    // 生成实例
-    this.bpmnViewer && this.bpmnViewer.destroy();
-    this.bpmnViewer = new BpmnViewer({
-      container: this.$refs.flowCanvas,
-      height: 'calc(85vh - 200px)',
-    });
-  },
+  mounted() {},
  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)
--- a/ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue
+++ b/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);
-    },
-    /** xml 文件 */
-    loadModelXml(deployId) {
-      // 发送请求，获取xml
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
-      })
+      if (tab.name === '3'){
+        flowXmlAndNode({deployId:this.deployId}).then(res => {
+          this.flowData = res.data;
+        })
+      }
    },
    /** 流程表单数据 */
    getFlowFormData(deployId) {