From 656c0d1bf57ec508be3830dfd0a8b0455483b8a2 Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Sat, 3 Oct 2026 14:09:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(flow-editor):=20=E5=A4=9A=E5=87=BA?=
 =?UTF-8?q?=E5=8F=A3=E6=B3=B3=E9=81=93=20UI=EF=BC=88=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3+=E5=87=BA=E5=8F=A3=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8+=E5=88=86=E6=94=AF=E5=A2=9E=E5=88=A0/?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=8D=95=E5=87=BA=E5=8F=A3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../def-editor/components/ApprovalDrawer.vue  |  30 ++-
 .../admin/def-editor/components/NodeList.vue  |   2 +
 .../def-editor/components/OutletLanes.vue     | 198 ++++++++++++++++++
 src/views/flow/admin/def-editor/index.vue     |  36 +++-
 4 files changed, 260 insertions(+), 6 deletions(-)
 create mode 100644 src/views/flow/admin/def-editor/components/OutletLanes.vue

diff --git a/src/views/flow/admin/def-editor/components/ApprovalDrawer.vue b/src/views/flow/admin/def-editor/components/ApprovalDrawer.vue
index 3738da4..1a33372 100644
--- a/src/views/flow/admin/def-editor/components/ApprovalDrawer.vue
+++ b/src/views/flow/admin/def-editor/components/ApprovalDrawer.vue
@@ -6,7 +6,7 @@ import { computed, inject, reactive, ref, watch } from "vue";
 import { Message } from "view-ui-plus";
 import UserCheckModal from "@/components/UserCheckModal.vue";
 import { flowApi } from "@/api/module/flow";
-import { ApprovalNode, EDITOR_CTX } from "../model";
+import { ApprovalNode, EDITOR_CTX, createApproval } from "../model";
 
 const props = defineProps<{
     modelValue: boolean;
@@ -28,6 +28,7 @@ const form = reactive({
     userIds: [] as number[],
     countersign: "ANY" as "ALL" | "ANY",
     deadlineHours: null as number | null,
+    multiOutlet: false,
 });
 
 const userCheckModal = ref<any>();
@@ -47,6 +48,7 @@ function syncFromNode(): void {
     form.userIds = n.assignee?.type === "USERS" ? [...n.assignee.userIds] : [];
     form.countersign = n.countersign;
     form.deadlineHours = n.deadlineHours;
+    form.multiOutlet = !!(n.outlets && n.outlets.length >= 2);
 }
 
 watch(
@@ -119,6 +121,12 @@ function onOk(): void {
             : { type: "DEPT_KEY", deptKey: form.deptKey };
     n.countersign = form.countersign;
     n.deadlineHours = form.deadlineHours && form.deadlineHours > 0 ? form.deadlineHours : null;
+    // 开启多出口（2026-10-03 P2）：默认 同意/退回 两泳道各放一个待配置审批节点；
+    // 关闭不在抽屉做——泳道头部"恢复单出口"负责（要处理泳道内容的去向）
+    if (form.multiOutlet && !(n.outlets && n.outlets.length >= 2)) {
+        n.outlets = ["同意", "退回"];
+        n.branches = [[createApproval()], [createApproval()]];
+    }
     emit("update:modelValue", false);
 }
 
@@ -197,6 +205,18 @@ function onRemove(): void {
                 <InputNumber v-model="form.deadlineHours" :min="1" placeholder="可空" style="width: 100%" />
                 <div class="hint">超过时限后进入催办提醒（取到达时间 + N 小时）</div>
             </div>
+
+            <div class="fld">
+                <label>出口路由</label>
+                <div class="mo-row">
+                    <i-switch v-model="form.multiOutlet" />
+                    <span class="mo-label">多出口审批（办理人按下按钮选路）</span>
+                </div>
+                <div class="hint">
+                    开启后卡片下出现出口泳道（默认 同意/退回），出口名即办理按钮文案；泳道尾自动汇合到后继节点。
+                    关闭请用泳道头部的"恢复单出口"（需处理泳道内容去向）
+                </div>
+            </div>
         </Form>
 
         <div class="dw-foot">
@@ -249,6 +269,14 @@ function onRemove(): void {
     flex-wrap: wrap;
     gap: 4px 0;
 }
+.mo-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.mo-label {
+    font-size: 13px;
+}
 .dw-foot {
     position: sticky;
     bottom: -16px;
diff --git a/src/views/flow/admin/def-editor/components/NodeList.vue b/src/views/flow/admin/def-editor/components/NodeList.vue
index 8346b45..c5c4550 100644
--- a/src/views/flow/admin/def-editor/components/NodeList.vue
+++ b/src/views/flow/admin/def-editor/components/NodeList.vue
@@ -5,6 +5,7 @@ import NodeCard from "./NodeCard.vue";
 import NotifyCard from "./NotifyCard.vue";
 import ParallelBox from "./ParallelBox.vue";
 import ConditionBox from "./ConditionBox.vue";
+import OutletLanes from "./OutletLanes.vue";
 import PlusButton from "./PlusButton.vue";
 
 defineProps<{
@@ -19,6 +20,7 @@ defineProps<{
         <PlusButton :container="container" :index="0" />
         <template v-for="(item, i) in items" :key="item.uid">
             <NodeCard v-if="item.kind === 'approval'" :node="item" />
+            <OutletLanes v-if="item.kind === 'approval' && item.outlets && item.outlets.length >= 2" :node="item" />
             <NotifyCard v-else-if="item.kind === 'notify'" :node="item" />
             <ParallelBox v-else-if="item.kind === 'parallel'" :node="item" />
             <ConditionBox v-else :node="item" />
diff --git a/src/views/flow/admin/def-editor/components/OutletLanes.vue b/src/views/flow/admin/def-editor/components/OutletLanes.vue
new file mode 100644
index 0000000..a379b55
--- /dev/null
+++ b/src/views/flow/admin/def-editor/components/OutletLanes.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// 多出口审批的出口泳道容器（2026-10-03 P2）：蓝系区分条件紫。与条件分支容器完全同构——
+// 无 JOIN 语义，办理人按下哪个出口按钮走哪条泳道，分支尾隐式汇合到容器后继。
+// 出口名 Input 即 contentJson 里 APPROVAL 命名出边的 name（按钮文案，必填唯一）。
+import { computed, inject } from "vue";
+import { BRANCH_LABELS, EDITOR_CTX, MAX_BRANCHES, MIN_BRANCHES, ApprovalNode } from "../model";
+import NodeList from "./NodeList.vue";
+
+const props = defineProps<{ node: ApprovalNode }>();
+
+const ctx = inject(EDITOR_CTX)!;
+
+const issues = computed(() => ctx.issueOf(props.node.uid));
+const hasError = computed(() => issues.value.some((i) => i.level === "error"));
+const canRemoveBranch = computed(() => (props.node.branches?.length || 0) > MIN_BRANCHES);
+const canAddBranch = computed(() => (props.node.branches?.length || 0) < MAX_BRANCHES);
+
+/** 出口名就地编辑（重复/空由校验提示；与 branches 下标一一对应） */
+function renameOutlet(i: number, v: string): void {
+    props.node.outlets![i] = v;
+}
+</script>
+
+<template>
+    <div class="outlet-lanes" :class="{ error: hasError }">
+        <div class="ol-head">
+            <div class="ol-title" @click="ctx.openNode(node.uid)">
+                出口路由（按下按钮选路）
+                <span class="ol-hint">（出口名即办理按钮文案；点击审批卡片配置审批人）</span>
+            </div>
+            <Poptip
+                confirm
+                title="退出多出口将删除出口②起的全部泳道节点，仅保留出口①泳道？"
+                ok-text="退出多出口"
+                cancel-text="取消"
+                transfer
+                @on-ok="ctx.exitOutlets(node.uid)"
+            >
+                <span class="ol-exit">恢复单出口</span>
+            </Poptip>
+        </div>
+        <div class="ol-cols">
+            <div v-for="(branch, i) in node.branches" :key="i" class="ol-col">
+                <div class="ol-col-head">
+                    <span class="ol-col-no">{{ BRANCH_LABELS[i] || i + 1 }}</span>
+                    <input
+                        class="ol-outlet"
+                        :value="node.outlets![i]"
+                        placeholder="出口名（按钮文案，必填唯一）"
+                        maxlength="32"
+                        @input="renameOutlet(i, ($event.target as HTMLInputElement).value)"
+                    />
+                    <Poptip
+                        v-if="canRemoveBranch"
+                        confirm
+                        title="删除该出口及其泳道节点？"
+                        ok-text="删除"
+                        cancel-text="取消"
+                        transfer
+                        @on-ok="ctx.removeBranch(node.uid, i)"
+                    >
+                        <span class="ol-col-del" title="删除出口">×</span>
+                    </Poptip>
+                </div>
+                <NodeList :items="branch" :container="`${node.uid}:${i}`" />
+            </div>
+        </div>
+        <Button v-if="canAddBranch" class="ol-add" size="small" long @click="ctx.addBranch(node.uid)">
+            ＋ 添加出口
+        </Button>
+        <div v-for="(issue, k) in issues" :key="k" class="ol-issue" :class="issue.level">⚠ {{ issue.text }}</div>
+    </div>
+</template>
+
+<style scoped>
+.outlet-lanes {
+    border: 1.5px dashed #5cadff;
+    border-radius: 10px;
+    padding: 14px 14px 12px;
+    background: rgba(240, 249, 255, 0.45);
+}
+.outlet-lanes.error {
+    border-color: #ed4014;
+}
+.ol-head {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+.ol-title {
+    text-align: center;
+    color: #2d8cf0;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+}
+.ol-title:hover {
+    text-decoration: underline;
+}
+.ol-hint {
+    font-weight: 400;
+    font-size: 11px;
+    color: #82a8d8;
+}
+.ol-exit {
+    flex: none;
+    cursor: pointer;
+    font-size: 12px;
+    color: #ed4014;
+}
+.ol-exit:hover {
+    text-decoration: underline;
+}
+.ol-cols {
+    display: flex;
+    gap: 14px;
+    align-items: flex-start;
+    justify-content: center;
+    margin-top: 10px;
+}
+.ol-col {
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px 10px 14px;
+    min-width: 230px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.ol-col-head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    margin-bottom: 8px;
+    padding: 0 2px;
+}
+.ol-col-no {
+    flex: none;
+    color: #2d8cf0;
+    font-weight: 600;
+    font-size: 13px;
+}
+.ol-outlet {
+    flex: 1;
+    min-width: 0;
+    border: 1px solid #dfe6ee;
+    border-radius: 6px;
+    padding: 2px 8px;
+    font-size: 12px;
+    color: #2d8cf0;
+    font-weight: 600;
+}
+.ol-outlet:focus {
+    outline: none;
+    border-color: #2d8cf0;
+}
+.ol-col-del {
+    flex: none;
+    cursor: pointer;
+    color: #c5c9d1;
+    font-size: 16px;
+    line-height: 1;
+}
+.ol-col-del:hover {
+    color: #ed4014;
+}
+.ol-add {
+    margin-top: 12px;
+    border-style: dashed;
+    color: #2d8cf0;
+    border-color: #2d8cf0;
+    background: transparent;
+    width: auto;
+    padding: 0 16px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.ol-add:hover {
+    background: #f0faff;
+    color: #2b85e4;
+    border-color: #2d8cf0;
+}
+.ol-issue {
+    text-align: center;
+    font-size: 12px;
+    padding-top: 8px;
+}
+.ol-issue.error {
+    color: #ed4014;
+}
+.ol-issue.warn {
+    color: #ff9900;
+}
+</style>
diff --git a/src/views/flow/admin/def-editor/index.vue b/src/views/flow/admin/def-editor/index.vue
index 217ef1b..0f8fae8 100644
--- a/src/views/flow/admin/def-editor/index.vue
+++ b/src/views/flow/admin/def-editor/index.vue
@@ -25,6 +25,7 @@ import {
     createEmptyModel,
     createNotify,
     createParallel,
+    branchesOf,
     findItem,
     removeItem,
     resolveContainer,
@@ -521,7 +522,7 @@ function insertItem(container: string, index: number, kind: "approval" | "parall
     }
 }
 
-/** 添加分支（并行/条件分支容器通用；条件分支同步补一个占位出口名） */
+/** 添加分支（并行/条件分支/多出口审批容器通用；条件分支与出口同步补一个占位出口名） */
 function addBranch(containerUid: string): void {
     const item = findItem(model, containerUid);
     if (!item) return;
@@ -531,18 +532,42 @@ function addBranch(containerUid: string): void {
         const no = item.branches.length + 1;
         item.branches.push([createApproval()]);
         item.outlets.push(`出口${["一", "二", "三", "四", "五", "六"][no - 1] || no}`);
+    } else if (item.kind === "approval" && item.outlets && item.outlets.length >= 2) {
+        const no = (item.branches?.length || 0) + 1;
+        (item.branches = item.branches || []).push([createApproval()]);
+        item.outlets.push(`出口${["一", "二", "三", "四", "五", "六"][no - 1] || no}`);
     }
 }
 
 function removeBranch(containerUid: string, index: number): void {
     const item = findItem(model, containerUid);
-    if (!item || (item.kind !== "parallel" && item.kind !== "condition")) return;
-    if (item.branches.length <= 2) {
+    const isOutlet = item.kind === "approval" && !!(item.outlets && item.outlets.length >= 2);
+    if (!item || (item.kind !== "parallel" && item.kind !== "condition" && !isOutlet)) return;
+    const branches = item.branches!;
+    if (branches.length <= 2) {
         Message.warning("分支至少保留 2 个");
         return;
     }
-    item.branches.splice(index, 1);
-    if (item.kind === "condition") item.outlets.splice(index, 1);
+    branches.splice(index, 1);
+    if (item.kind === "condition" || isOutlet) item.outlets!.splice(index, 1);
+}
+
+/** 退出多出口：仅保留出口①泳道内容，替换为「本节点(去 outlets) + ①泳道节点序列」 */
+function exitOutlets(uid: string): void {
+    const rec = (items: EditorItem[]): boolean => {
+        const i = items.findIndex((it) => it.uid === uid);
+        if (i >= 0) {
+            const node = items[i] as ApprovalNode;
+            const lane0 = node.branches?.[0] || [];
+            const clean: ApprovalNode = { ...node };
+            delete clean.outlets;
+            delete clean.branches;
+            items.splice(i, 1, clean, ...lane0);
+            return true;
+        }
+        return items.some((it) => branchesOf(it)?.some((b) => rec(b)) || false);
+    };
+    rec(model.list);
 }
 
 provide<EditorCtx>(EDITOR_CTX, {
@@ -556,6 +581,7 @@ provide<EditorCtx>(EDITOR_CTX, {
     insertItem,
     addBranch,
     removeBranch,
+    exitOutlets,
 });
 
 // ==================== 保存 / 离开 ====================