feat(detail): 列表详情改为抽屉弹出+业务信息只认 summaryFields

- 新增 InstanceDrawer.vue（Drawer 740px + InstanceBody full 口径，非 iframe） - Workbench/MyInstances/admin.Instances 详情按钮改为打开抽屉 - InstanceBody 移除 snapshotRows 回落，业务信息只显示子应用传递的 summaryFields（中文 label），无值整块隐藏不再平铺英文 key
2026-10-11 12:01:43 +08:00
parent ecd4b9f4ea
commit 8506ad80d7
5 changed files with 137 additions and 31 deletions
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// 办件详情抽屉（管理面列表页复用）：非 iframe，内部直接复用 InstanceBody（full 口径）。
+// 宽度与 Notice 审批记录抽屉对齐 740px；关闭后清空状态，下次打开重新加载。
+import { ref, computed, watch } from "vue";
+import { Drawer, Tag } from "view-ui-plus";
+import { flowApi, INSTANCE_STATUS, INSTANCE_STATUS_COLOR } from "@/api/module/flow";
+import InstanceBody from "@/views/flow/components/InstanceBody.vue";
+import config from "@/assets/config/host.config";
+
+const props = defineProps<{
+    modelValue: boolean;
+    instanceId?: string | number;
+}>();
+const emit = defineEmits<{ (e: "update:modelValue", val: boolean): void }>();
+
+const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit("update:modelValue", val),
+});
+
+const loading = ref(false);
+const detail = ref<any>(null);
+const mode = ref("user");
+
+async function load() {
+    const id = props.instanceId;
+    if (!id || !visible.value) return;
+    loading.value = true;
+    try {
+        detail.value = await flowApi.detail(String(id)).send();
+    } finally {
+        loading.value = false;
+    }
+}
+
+watch(() => [props.instanceId, visible.value], load, { immediate: true });
+watch(visible, (val) => {
+    if (!val) detail.value = null;
+});
+
+function switchMode(val: string) {
+    mode.value = val;
+}
+
+const diagramSrc = computed(() => {
+    if (!detail.value?.instanceId) return "";
+    return `${config.serviceHost}/api/flow/diagram.png?instanceId=${detail.value.instanceId}&mode=${mode.value}`;
+});
+
+function openDiagram() {
+    if (!detail.value?.instanceId) return;
+    const url = `${window.location.origin}${import.meta.env.BASE_URL}#/diagram?instanceId=${detail.value.instanceId}&mode=${mode.value}`;
+    window.open(url, "_blank");
+}
+
+function statusName(s: number) {
+    return INSTANCE_STATUS[s] || s;
+}
+function statusColor(s: number) {
+    return INSTANCE_STATUS_COLOR[s] || "gray";
+}
+</script>
+
+<template>
+    <Drawer
+        v-model="visible"
+        :title="detail?.bizTitle || '办件详情'"
+        :width="740"
+        :transfer="false"
+        :styles="{ body: { padding: '0' } }"
+    >
+        <div v-if="loading" class="drawer-loading muted">加载中…</div>
+        <template v-else-if="detail">
+            <div class="drawer-head">
+                <Tag :color="statusColor(detail.status)">{{ statusName(detail.status) }}</Tag>
+            </div>
+            <div class="drawer-body">
+                <InstanceBody
+                    full
+                    :detail="detail"
+                    :diagram-src="diagramSrc"
+                    :initial-mode="mode"
+                    @mode-change="switchMode"
+                >
+                    <template #diagram-link>
+                        <a class="fold-link" @click.stop.prevent="openDiagram">查看大图</a>
+                    </template>
+                </InstanceBody>
+            </div>
+        </template>
+    </Drawer>
+</template>
+
+<style scoped>
+.drawer-head { padding: 12px 16px 8px; }
+.drawer-body { padding: 0 16px 16px; }
+.drawer-loading { padding: 48px 16px; text-align: center; }
+.fold-link { font-size: 12px; font-weight: normal; }
+</style>