feat(detail): 列表详情改为抽屉弹出+业务信息只认 summaryFields
build / build (push) Successful in 3m11s

- 新增 InstanceDrawer.vue(Drawer 740px + InstanceBody full 口径,非 iframe)
- Workbench/MyInstances/admin.Instances 详情按钮改为打开抽屉
- InstanceBody 移除 snapshotRows 回落,业务信息只显示子应用传递的
  summaryFields(中文 label),无值整块隐藏不再平铺英文 key
This commit is contained in:
chenxing
2026-10-11 12:01:43 +08:00
parent ecd4b9f4ea
commit 8506ad80d7
5 changed files with 137 additions and 31 deletions
+7 -23
View File
@@ -3,7 +3,7 @@
// 数据源同出 InstanceDetail(OpenEmbedController 复用管理面出参),展示层共用本组件,样式单点维护。
// - embed(缺省,关键信息):基本信息 / 办理进度三视图 / 流程示意图折叠 / 业务信息(只认 summaryFields)
// - full(管理面,全量):另有 流程信息五项(流程编码/流程版本/业务类型/业务编号/实例号)、
// 业务表单数据折叠、业务详情链接;业务信息无 summaryFields 时回落 bizSnapshot 全键平铺(旧数据兜底)
// 业务表单数据折叠、业务详情链接;业务信息只认子应用传递的 summaryFields,无则隐藏
// 口径:人员/科室切换 emit('mode-change') 由管理面写 query 持久化(嵌入页 URL 归子应用管,忽略即可)。
// 宽度:版式按嵌入场景调优(740 抽屉内容约 708px),full 下根类 max-width 封顶防宽屏拉散(见 .is-full)。
import { ref, computed, onMounted, nextTick } from "vue";
@@ -14,7 +14,7 @@ import { fitDiagram } from "@/utils/diagramImg";
const props = defineProps<{
/** InstanceDetail 形状对象(两页同源) */
detail: any;
/** true=管理面全量(流程信息/业务表单数据/业务详情/摘要回落);缺省 embed 关键信息 */
/** true=管理面全量(流程信息/业务表单数据/业务详情);缺省 embed 关键信息 */
full?: boolean;
/** 流程示意图地址(两页端点不同:token 图 / instanceId 图,由页面生成传入) */
diagramSrc: string;
@@ -45,7 +45,8 @@ function onDiagramToggle(e: Event) {
if ((e.target as HTMLDetailsElement).open) fitDiagram(diagramEl.value);
}
/** 业务信息唯一内容 = 约定键 bizSnapshot.summaryFields;形状错 / 无值 ⇒ [](full 再走回落) */
/** 业务信息唯一内容 = 约定键 bizSnapshot.summaryFields;由发起流程的子应用决定展示字段与中文 label。
* 形状错 / 无值 ⇒ [],不再 fallback 平铺 bizSnapshot 原始英文 key(避免详情页出现 itemTitle / deptName 等)。 */
const summaryFields = computed(() => {
const raw = props.detail?.bizSnapshot;
if (!raw) return [];
@@ -68,25 +69,8 @@ const summaryFields = computed(() => {
}));
});
/** full 专用回落:无 summaryFields 时按 bizSnapshot 原始键平铺(旧数据/未适配子应用兜底) */
const snapshotRows = computed(() => {
if (!props.full || summaryFields.value.length) return [];
const raw = props.detail?.bizSnapshot;
if (!raw) return [];
let obj: any = null;
try {
obj = typeof raw === "string" ? JSON.parse(raw) : raw;
} catch {
return [{ label: "摘要", value: String(raw) }];
}
if (obj && typeof obj === "object" && !Array.isArray(obj)) {
return Object.entries(obj).map(([k, v]) => ({ label: k, value: v == null ? "-" : String(v) }));
}
return [];
});
/** 业务信息最终渲染行:summaryFields 优先,full 无值回落 snapshotRows */
const bizRows = computed(() => (summaryFields.value.length ? summaryFields.value : snapshotRows.value));
/** 业务信息最终渲染行:只认子应用传递的 summaryFields */
const bizRows = computed(() => summaryFields.value);
/** full 专用:流程信息五项(专业字段只进管理面,嵌入页不外露) */
const flowInfoRows = computed(() => {
@@ -429,7 +413,7 @@ onMounted(async () => {
</div>
</details>
<!-- 业务信息:summaryFields 优先;full 无值回落 bizSnapshot 平铺(嵌入页无值整块不显示) -->
<!-- 业务信息:只认子应用传递的 summaryFields,无值整块隐藏 -->
<details v-if="bizRows.length" class="embed-fold">
<summary>业务信息</summary>
<div class="embed-fold-b">