feat:添加审批记录流程图

src/components/flow-chart/style.css

@@ -2,21 +2,22 @@
   height:30px;
   width:100px;
   background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(175, 202, 255) 3px,rgb(175, 202, 255) 8px);
-  /* animation: shine 1s infinite linear; */
+  /* animation: shine 1s infinite; */
   overflow: hidden;
-  position: relative;
+  background-position: -12px -12px;
 }
 
 .content {
-    height:28px;
+    height:26px;
+    width: 96px;
     background-color: rgb(209, 233, 255);
-    margin:1px;
+    margin:2px;
 }
 
 
 @keyframes shine {
     0% { background-position: -1px -1px;}
-    100% { background-position: -12px -12px;}
+     100% { background-position: -12px 12px;}
 }
 
 .lf__tooltip {

src/components/flow-chart/tasks/_process.js

@@ -37,6 +37,7 @@ class ProcessTaskView extends HtmlNode {
   setHtml(rootEl) {
     const el = document.createElement('div');
     el.className = 'process-wrapper';
+
     el.innerHTML = `<div class="content"></div>`
     rootEl.innerHTML = '';
     rootEl.appendChild(el);

src/components/flow-chart/utils/createProcessData.js

@@ -45,6 +45,7 @@ function createEdge(sourceNodeId, targetNodeId) {
 function createNodes(source, startNode) {
   const nodesRaw = [];
   const edgesRaw = [];
+  // const map = new Map();
 
   function convert(raw, parent = "0", level = 0) {
     level++;
@@ -63,9 +64,16 @@ function createNodes(source, startNode) {
 
       const prevSameNodeIndex = nodesRaw.findIndex(({ text }) => text === node.text);
       if (prevSameNodeIndex >= 0) nodesRaw.splice(prevSameNodeIndex, 1);
-      
+
       nodesRaw.push(node);
       edgesRaw.push(edge);
+
+      // if(map.get(parent)){
+      //   continue;
+      // }
+      // map.set(current.order_process, parent)
+
+
       if (current.next_actions.length > 0) convert(current, current.order_process, level);
     }
   }
@@ -85,6 +93,7 @@ function createNodesWithRecord(nodesRaw, edgesRaw, record) {
     const next = record[i + 1];
     const isLast = i === record.length - 1;
     const sourceNodeIndex = nodesRaw.findIndex(({ id }) => id === current.order_process);
+
     if (sourceNodeIndex >= 0) {
       nodesRaw[sourceNodeIndex].type = isLast ? 'ProcessTask' : 'StartTask';
       nodesRaw[sourceNodeIndex].properties = {
@@ -118,6 +127,7 @@ export function createProcessData(source, record) {
   }
 
   const { start, startRaw } = createStartNode(source);
+  
   const { nodesRaw: _nodesRaw, edgesRaw } = createNodes(source, startRaw);
 
   const nodesRaw = [start, ..._nodesRaw];
@@ -127,7 +137,5 @@ export function createProcessData(source, record) {
   processChart.nodes.push(...nodes);
   processChart.edges.push(...edges);
 
-  console.log(processChart)
-
   return processChart
 }

src/views/goodStore/active/detail.vue

@@ -91,6 +91,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        <el-tab-pane label="流程图" name="3"  v-if="queryType !== 'add'">
+          <flow-chart process_id="17" type="HD" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/goodStore/goodsCost/detail.vue

@@ -53,6 +53,11 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        
+        <el-tab-pane label="流程图" name="3" v-if="queryType !== 'add'">
+          <flow-chart process_id="15" type="SPCB" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/goodStore/goodsOnline/detail.vue

@@ -310,6 +310,10 @@
             :newTime="newTime"
             :skuCode="queryId"
         /></el-tab-pane>
+
+        <el-tab-pane label="流程图" name="4">
+          <flow-chart process_id="16" type="SPSX" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/interest/handover/detail.vue

@@ -137,6 +137,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        <el-tab-pane label="流程图" name="3">
+          <flow-chart process_id="22" type="LZJJ" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/purchaseIn/purchaseDiffOrder/detail.vue

@@ -89,6 +89,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        <el-tab-pane label="流程图" name="3">
+          <flow-chart process_id="9" type="CGGCD" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/purchaseIn/purchaseOrder/detail.vue

@@ -220,6 +220,11 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        
+        <el-tab-pane label="流程图" name="3">
+          <flow-chart process_id="1" type="CGD" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/stock/allot/detail.vue

@@ -113,6 +113,10 @@
             :orderCode="code"
           />
         </el-tab-pane>
+
+        <el-tab-pane label="流程图" name="3">
+          <flow-chart process_id="11" type="DBD" :orderCode="code" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/stock/check/detail.vue

@@ -104,6 +104,11 @@
             :orderCode="code"
           />
         </el-tab-pane>
+
+
+        <el-tab-pane label="流程图" name="3">
+          <flow-chart process_id="12" type="PDD" :orderCode="code" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/youzan/othTransferOrderLog/detail.vue

@@ -141,6 +141,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        <el-tab-pane label="流程图" name="6">
+          <flow-chart process_id="20" type="YZQRD" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>

src/views/youzan/othgoodsOnline/detail.vue

@@ -221,6 +221,11 @@
             :type="'YZSX'"
             :orderCode="queryId"
         /></el-tab-pane>
+
+        
+        <el-tab-pane label="流程图" name="3">
+          <flow-chart process_id="19" type="YZSX" :orderCode="queryId" />
+       </el-tab-pane>
       </el-tabs>
     </div>
     <div v-else>