[fix] 通知详情「审批进度」卡片收口:全量流水交给「全部审批记录」抽屉
build / build (push) Successful in 4m8s

- 卡片只留 状态/流程摘要/当前节点/办理意见 + 入口,删掉 steps 时间线与 trace 兜底两段(与下方动作卡
  的『最近轨迹』和抽屉三视图三处重复)
- 当前节点由 node id 串经 steps.nodeId→nodeName 翻译(此前直接显示 u1 这类 id)
- 卡头『审批进度』按钮与抽屉标题统一为『全部审批记录』
- types.ts TraceStep 补 nodeId?(可选字段,向后兼容)
This commit is contained in:
chenxing
2026-10-19 22:30:05 +08:00
parent f085d6d74d
commit 7c969955ae
2 changed files with 26 additions and 73 deletions
+2
View File
@@ -77,6 +77,8 @@ export interface ByBizResult {
/** 审批轨迹(各子应用自有进度接口形态;组件只用其中"最近一步"做摘要,缺位则不展示) */
export interface TraceStep {
/** 节点 id(与 currentNodes 同一口径,用于把 id 串翻成节点名) */
nodeId?: string | null;
nodeName?: string | null;
label?: string | null;
assignees?: Array<{ userName?: string | null; statusLabel?: string | null; opinion?: string | null }> | null;
+24 -73
View File
@@ -40,6 +40,23 @@ async function loadTrace() {
}
}
/**
* 当前节点:flow-center 的 currentNodes 是**节点 id 逗号串**(办件原文口径),
* 用人看的名字得拿 steps 的 nodeId→nodeName 翻;翻不到(老实例/步骤缺失)才回落原 id。
*/
const currentNodeText = computed(() => {
const ids = String(flowTrace.value?.currentNodes || "")
.split(",")
.map((s) => s.trim())
.filter(Boolean);
if (!ids.length) return "";
const names = new Map<string, string>();
for (const s of flowTrace.value?.steps || []) {
if (s.nodeId && s.nodeName) names.set(String(s.nodeId), s.nodeName);
}
return ids.map((id) => names.get(id) || id).join("、");
});
/**
* 撤回:走本应用后端(2026-09-17 接入:后端经 SDK 托管件中转并复核创建人,
* 不再前端直调 flow-center——跨应用 CAS 票据 + CORS 双重外溢且"谁能撤"落在前端)。
@@ -330,13 +347,15 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
<!-- 查看视角:普通标题 -->
<h2 v-else class="notice-title2">{{ detail.title }}</h2>
<!-- 审批进度卡片(绑流程通知;提交人/管理员/办理人可见) -->
<!-- 审批进度卡片(绑流程通知;提交人/管理员/办理人可见)
只回答"到哪一步了":状态 / 流程摘要 / 当前节点 / 办理意见 + 入口;
完整流水(按节点/时间线/列表三视图)在「全部审批记录」抽屉里,同一份 trace 不两处铺开。 -->
<div v-if="flowTrace && flowTrace.bound" class="flow-card">
<div class="flow-card-head">
<span class="flow-title">审批进度</span>
<Tag :color="auditColor(flowTrace.auditStatus)">{{ flowTrace.auditStatusDesc || "—" }}</Tag>
<span v-if="flowTrace.nodeSummary" class="flow-nodes">流程:{{ flowTrace.nodeSummary }}</span>
<span v-if="flowTrace.currentNodes" class="flow-nodes">当前节点:{{ flowTrace.currentNodes }}</span>
<span v-if="currentNodeText" class="flow-nodes">当前节点:{{ currentNodeText }}</span>
<div class="flow-ops">
<Button v-if="detail.flowGuid" size="small" @click="openFlowDiagram">查看流程图</Button>
<Button
@@ -344,7 +363,7 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
size="small"
style="margin-left: 8px"
@click="openFlowEmbed"
>审批进度</Button
>全部审批记录</Button
>
<Button
v-if="detail.flowInstanceId && flowTrace.auditStatus === 10"
@@ -369,33 +388,6 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
办理意见:{{ flowTrace.flowResult.opinion }}
<template v-if="flowTrace.flowResult.rejectNode">({{ flowTrace.flowResult.rejectNode }})</template>
</div>
<!-- 结构化步骤时间线(2026-09-17 接入 SDK progress;steps[0] 固定"发起申请",同节点多任务每人一行) -->
<div v-if="flowTrace.steps && flowTrace.steps.length" class="flow-timeline">
<div
v-for="(s, i) in flowTrace.steps"
:key="'fs' + i"
class="flow-step"
:class="{ 'flow-step-active': s.active }"
>
<span class="flow-step-node">{{ s.label || s.nodeName || `节点${i + 1}` }}</span>
<template v-if="s.assignees && s.assignees.length">
<span v-for="(a, j) in s.assignees" :key="j" class="flow-step-user">
{{ a.userName || "" }}
<em v-if="a.statusLabel" class="flow-step-status">{{ a.statusLabel }}</em>
<em v-if="a.opinion" class="flow-step-op">({{ a.opinion }})</em>
</span>
</template>
</div>
</div>
<!-- 节点时间线(traceJson 解析,steps 不可用时的兜底) -->
<div v-else-if="flowTrace.trace && flowTrace.trace.length" class="flow-timeline">
<div v-for="(t, i) in flowTrace.trace" :key="i" class="flow-step">
<span class="flow-step-node">{{ t.nodeName || t.node || t.taskName || `节点${i + 1}` }}</span>
<span class="flow-step-user">{{ t.userName || t.assigneeName || t.handlerName || "" }}</span>
<span class="flow-step-time">{{ t.handleTime || t.time || t.createTime || "" }}</span>
<span class="flow-step-op" v-if="t.opinion">{{ t.opinion }}</span>
</div>
</div>
</div>
<!-- v2.1 审批动作卡片:当前人有待办→通过/驳回/完整办理;非待办人与终态→只读 + 查看记录。
@@ -414,7 +406,8 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
</Modal>
<!-- 办件进度嵌入页(Drawer 内 iframe 撑满,嵌入页内部滚动;token 每次打开现取) -->
<Drawer v-model="embedVisible" title="审批进度" :width="740" :transfer="false" :styles="{ body: { padding: '0' } }">
<!-- 全部审批记录:flow-center 只读嵌入页(按节点/时间线/列表三视图 + 流程图 + 业务信息) -->
<Drawer v-model="embedVisible" title="全部审批记录" :width="740" :transfer="false" :styles="{ body: { padding: '0' } }">
<div class="embed-frame-wrap">
<iframe v-if="embedPageUrl" :src="embedPageUrl" title="办件进度"></iframe>
</div>
@@ -544,48 +537,6 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
color: var(--red);
font-size: 13px;
}
.flow-timeline {
margin-top: 8px;
background: var(--panel);
border-radius: var(--r-s);
padding: 6px 10px;
}
.flow-step {
display: flex;
gap: 12px;
font-size: 13px;
color: var(--text-2);
padding: 3px 0;
border-bottom: 1px dashed var(--line);
}
.flow-step:last-child {
border-bottom: none;
}
.flow-step-node {
min-width: 120px;
}
.flow-step-user {
min-width: 90px;
color: var(--brand);
}
.flow-step-time {
color: var(--text-3);
}
.flow-step-op {
color: var(--red);
}
.flow-step-active .flow-step-node {
color: var(--brand);
font-weight: 600;
}
.flow-step-status {
font-style: normal;
color: var(--text-3);
margin-left: 4px;
}
.flow-step .flow-step-op {
font-style: normal;
}
.diagram-wrap {
text-align: center;
min-height: 200px;