流程处理完成

src/components/common/ProcessFlowChart.vue

@@ -21,18 +21,24 @@
           <div v-if="index < activeNodes.length - 1" class="flow-arrow">
             <div class="arrow-line"></div>
             <div class="arrow-head"></div>
+            <div v-if="hasBidirectional(index)" class="bi-arrow">
+              <div class="arrow-head" style="transform: rotate(180deg)"></div>
+              <div class="arrow-line"></div>
+              <div class="arrow-head"></div>
+              <span class="bi-text">提交/退回</span>
+            </div>
           </div>
         </div>
       </div>
       <svg
-        v-if="returnPaths.length"
+        v-if="svgPaths.length"
         class="return-svg"
         :width="svgWidth"
         :height="svgHeight"
       >
         <defs>
           <marker
-            id="arrowMarker"
+            id="arrowEnd"
             markerWidth="8"
             markerHeight="6"
             refX="8"
@@ -42,14 +48,13 @@
             <path d="M0,0 L8,3 L0,6 Z" fill="#909399" />
           </marker>
         </defs>
-        <g v-for="(path, i) in returnPaths" :key="i">
+        <g v-for="(path, i) in svgPaths" :key="i">
           <polyline
             :points="path.points"
             fill="none"
             stroke="#909399"
             stroke-width="1.5"
-            stroke-dasharray="4,3"
-            marker-end="url(#arrowMarker)"
+            marker-end="url(#arrowEnd)"
           />
           <text
             :x="path.textX"
@@ -58,9 +63,9 @@
             fill="#909399"
             text-anchor="middle"
             dominant-baseline="middle"
-            :transform="`rotate(-90, ${path.textX}, ${path.textY})`"
+            :transform="path.textRotate"
           >
-            退回修改
+            {{ path.label }}
           </text>
         </g>
       </svg>
@@ -85,13 +90,14 @@ const props = defineProps({
 const complexNodes = [
   { label: "开始", type: "terminal" },
   { label: "所属单位员工发起" },
-  { label: "所属单位部门长核准", annotation: "提交/退回" },
-  { label: "投管部正/副职指定经办人" },
-  { label: "投管部经办人初审" },
-  { label: "投管部正副职审核", returnTo: 2 },
+  { label: "所属单位部门长核准" },
+  { label: "投管部经办人初审", returnTo: 1 },
+  { label: "投管部正副职审核" },
   { label: "结束", type: "terminal" },
 ];
 
+const complexBiIndices = new Set([1, 3]);
+
 const simpleNodes = [
   { label: "开始", type: "terminal" },
   { label: "投管部员工发起" },
@@ -99,18 +105,20 @@ const simpleNodes = [
   { label: "结束", type: "terminal" },
 ];
 
+const simpleBiIndices = new Set();
+
 const complexLevelMap = {
   1: 2,
-  2: 2,
   7: 2,
+  2: 3,
   3: 4,
-  4: 6,
-  8: 6,
-  5: 7,
-  9: 7,
-  13: 7,
-  14: 7,
-  15: 7,
+  4: 5,
+  8: 5,
+  5: 6,
+  9: 6,
+  13: 6,
+  14: 6,
+  15: 6,
 };
 
 const simpleLevelMap = {
@@ -125,6 +133,12 @@ const activeNodes = computed(() => {
   return props.flowType === "simple" ? simpleNodes : complexNodes;
 });
 
+const hasBidirectional = (index) => {
+  const biSet =
+    props.flowType === "simple" ? simpleBiIndices : complexBiIndices;
+  return biSet.has(index);
+};
+
 const highlightLevel = computed(() => {
   const map = props.flowType === "simple" ? simpleLevelMap : complexLevelMap;
   return map[props.currentState] || 0;
@@ -148,9 +162,9 @@ const bodyRef = ref(null);
 const nodeEls = ref([]);
 const svgWidth = ref(0);
 const svgHeight = ref(0);
-const returnPaths = ref([]);
+const svgPaths = ref([]);
 
-const calcReturnPaths = () => {
+const calcSvgPaths = () => {
   const body = bodyRef.value;
   if (!body) return;
   const bodyRect = body.getBoundingClientRect();
@@ -159,8 +173,8 @@ const calcReturnPaths = () => {
 
   const paths = [];
   const nodes = activeNodes.value;
-  let offsetX = 0;
 
+  let leftOffset = 0;
   nodes.forEach((node, index) => {
     if (node.returnTo === undefined) return;
     const sourceEl = nodeEls.value[index];
@@ -178,27 +192,29 @@ const calcReturnPaths = () => {
     const targetY = targetRect.top + targetRect.height / 2 - bodyRect.top;
     const nodeLeft = sourceRect.left - bodyRect.left;
 
-    offsetX += 20;
-    const lineX = nodeLeft - offsetX;
+    leftOffset += 20;
+    const lineX = nodeLeft - leftOffset;
 
     paths.push({
       points: `${nodeLeft},${sourceY} ${lineX},${sourceY} ${lineX},${targetY} ${nodeLeft},${targetY}`,
       textX: lineX - 8,
       textY: (sourceY + targetY) / 2,
+      textRotate: `rotate(-90, ${lineX - 8}, ${(sourceY + targetY) / 2})`,
+      label: "返回修改",
     });
   });
 
-  returnPaths.value = paths;
+  svgPaths.value = paths;
 };
 
 onMounted(() => {
-  nextTick(calcReturnPaths);
+  nextTick(calcSvgPaths);
 });
 
 watch(
   () => [props.flowType, props.currentState],
   () => {
-    nextTick(() => nextTick(calcReturnPaths));
+    nextTick(() => nextTick(calcSvgPaths));
   },
 );
 </script>
@@ -312,6 +328,7 @@ watch(
   flex-direction: column;
   align-items: center;
   height: 28px;
+  position: relative;
 
   .arrow-line {
     width: 2px;
@@ -327,4 +344,24 @@ watch(
     border-top: 6px solid #c0c4cc;
   }
 }
+
+.bi-arrow {
+  position: absolute;
+  left: calc(50% + -4px);
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .bi-text {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 9px;
+    color: #909399;
+    white-space: nowrap;
+  }
+}
 </style>