处理流程进度展示功能

zkqy-ui/src/views/bussiness/detail/index.vue

@@ -60,6 +60,7 @@ import FormDetail from "@/components/FormGroup/FormDetail"; //审批表单
 import formGroup from "@/components/FormGroup/index.vue"; //表单组
 import FlowChart from "@/views/bussiness/detail/FlowChart";
 import RecordList from "@/views/bussiness/detail/RecordList";
+import getNodeSequence from "@/utils/bpmn/getNodeSequence";
 
 // 模拟表单列表数据
 import formList from "./formList.js";
@@ -80,6 +81,7 @@ export default {
       activeName: "1",
       formList: [], //表单数据
       nodeLogList: [], //审批数据
+      flowData: {}, //流程数据
     };
   },
   created() {},
@@ -90,6 +92,18 @@ export default {
     }
   },
   methods: {
+    // xml字符串转xml对象
+    xmlStr2XmlObj(xmlStr) {
+      var xmlObj = {};
+      if (document.all) {
+        var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
+        xmlDom.loadXML(xmlStr);
+        xmlObj = xmlDom;
+      } else {
+        xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
+      }
+      return xmlObj;
+    },
     // 初始化表单数据
     async initFormData(payLoad) {
       try {
@@ -99,12 +113,37 @@ export default {
           let row = window.sessionStorage.getItem("oaRow");
           if (row) {
             this.nodeLogList = JSON.parse(row).nodeLog.slice(1);
+            this.initFlowData(row);
           }
         }
       } catch (error) {
         console.log(error);
       }
     },
+    // 初始化流程图数据
+    initFlowData(row) {
+      row = JSON.parse(row);
+      let xmlData = row.bepTaskProcessXmlContent;
+      let xmlObj = this.xmlStr2XmlObj(xmlData);
+      let nodeSequence = getNodeSequence(xmlObj);
+      console.log(nodeSequence);
+      console.log(row);
+      let currentNodeKey = row.benTaskNodeKey;
+      let isCompleted = true;
+      let nodeData = nodeSequence.map((item) => {
+        if (currentNodeKey === item.nodeId) {
+          isCompleted = false;
+        }
+        return {
+          key: item.nodeId,
+          completed: isCompleted,
+        };
+      });
+      this.flowData = {
+        nodeData,
+        xmlData,
+      };
+    },
     tabChangeHandler(val) {
       if (this.activeName == "3") {
         this.$nextTick(() => {
@@ -118,9 +157,9 @@ export default {
     },
   },
   computed: {
-    flowData() {
-      return flowData;
-    },
+    // flowData() {
+    //   return flowData;
+    // },
   },
 };
 </script>