- 文案:按人员/按科室 → 人员视图/科室视图 - 排列(方案 A):口径切换器移入 .embed-sec-h 标题行、紧跟视图切换器 (.embed-mode-seg margin-left:14px,与父级 10px gap 叠加为 24px),不再独立成行右对齐 - 常驻修复:原在 <template v-if="viewMode==='node'"> 内 ⇒ 切到时间线/列表即消失, 但口径对三视图都生效(时间线走 :mode、列表办理人列走 recordActor)⇒ 移出模板、三视图常驻 - CSS:删除已无引用的 .embed-mode-row;新增 .embed-mode-seg 并显式 font-weight:normal (同 .embed-view-seg:落在 .embed-sec-h(600) 内会继承粗体) - 版式宽 740 下实测:标题 68 + 视图组 187 + 口径组 156 + 间隔 24 = 435 < 可用 700,不溢出
This commit is contained in:
@@ -6,6 +6,8 @@
|
||||
// v2.4 版式(2026-10-10):原「流程轨迹」+「审批记录」合并为「办理进度」三视图(按节点/时间线/列表),
|
||||
// 流程示意图与业务信息改为默认收缩的折叠块;业务信息只渲染约定键 bizSnapshot.summaryFields,
|
||||
// 无值整块不显示;bizSnapshot 其余键与 formDataJson 一律不再平铺(原始数据不外露)。
|
||||
// v2.5(2026-10-10):口径切换器(人员视图/科室视图)与视图切换器同排在标题行、三视图常驻——口径实际对
|
||||
// 三个视图都生效(时间线走 :mode、列表走办理人列),原先只在「按节点」模板内会切视图即消失。
|
||||
import { ref, computed, onMounted, nextTick } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { Tag } from "view-ui-plus";
|
||||
@@ -26,7 +28,7 @@ function switchView(val: string) {
|
||||
viewMode.value = val;
|
||||
}
|
||||
|
||||
/** 显示口径:dept=按科室 / user=按人员(缺省)。纯前端本地状态——嵌入页 URL 归子应用管,
|
||||
/** 显示口径:dept=科室视图 / user=人员视图(缺省)。纯前端本地状态——嵌入页 URL 归子应用管,
|
||||
* 改 query 会破坏 token 语义,不落 URL(与管理面 InstanceDetail 写 query 的动机不同) */
|
||||
const traceMode = ref<string>("user");
|
||||
function switchMode(val: string) {
|
||||
@@ -341,16 +343,16 @@ onMounted(async () => {
|
||||
<Radio label="timeline">时间线</Radio>
|
||||
<Radio label="list">列表</Radio>
|
||||
</RadioGroup>
|
||||
<!-- 口径对三视图均生效(时间线走 :mode、列表走办理人列)⇒ 与视图切换器同排常驻;
|
||||
原先放在「按节点」模板内,切到时间线/列表就消失,与实际生效范围不符 -->
|
||||
<RadioGroup class="embed-mode-seg" :model-value="traceMode" size="small" type="button" @on-change="switchMode">
|
||||
<Radio label="user">人员视图</Radio>
|
||||
<Radio label="dept">科室视图</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<!-- ① 按节点:同节点多任务每人一行,步内保持后端任务序 -->
|
||||
<template v-if="viewMode === 'node'">
|
||||
<div class="embed-mode-row">
|
||||
<RadioGroup :model-value="traceMode" size="small" type="button" @on-change="switchMode">
|
||||
<Radio label="user">按人员</Radio>
|
||||
<Radio label="dept">按科室</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div class="embed-steps" v-if="nodeSteps.length">
|
||||
<div v-for="(s, i) in nodeSteps" :key="`${s.type}-${s.nodeId || 'x'}-${i}`"
|
||||
class="embed-step" :class="stepClass(s)">
|
||||
@@ -433,11 +435,12 @@ onMounted(async () => {
|
||||
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
|
||||
width: 3px; height: 13px; border-radius: 2px; background: #2d8cf0;
|
||||
}
|
||||
/* 视图切换器与下方「按人员/按科室」同为 iView small button group,实测几何/配色全同
|
||||
(活动态 #0d9488、非活动 #515a6e/#dcdee2),唯一差异是字重:它落在 .embed-sec-h(600) 内
|
||||
会继承粗体,而 .embed-mode-row 内是常规 ⇒ 视觉上「不一致」。显式回常规(管理面同款控件
|
||||
InstanceDetail/TaskHandle 的 .trace-mode 也是这个写法)。 */
|
||||
/* 两处切换器(视图 / 口径)现同排在标题行,同为 iView small button group、几何与配色一致
|
||||
(活动态 #0d9488、非活动 #515a6e/#dcdee2)。⚠️ 两者都落在 .embed-sec-h(600) 内 ⇒ 会继承粗体,
|
||||
必须显式回常规(管理面同款控件 InstanceDetail/TaskHandle 的 .trace-mode 也是这个写法)。 */
|
||||
.embed-view-seg { margin-left: auto; font-weight: normal; }
|
||||
/* 口径紧随视图切换器:与 .embed-sec-h 的 10px gap 叠加为 24px,避免两组按钮被看成一排五选一 */
|
||||
.embed-mode-seg { margin-left: 14px; font-weight: normal; }
|
||||
|
||||
/* 基本信息:四列等宽(740 抽屉实测放得下时间戳,超出省略号 + title 兜底) */
|
||||
.embed-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #f2f4f7; border-radius: 8px; overflow: hidden; }
|
||||
@@ -447,7 +450,6 @@ onMounted(async () => {
|
||||
.embed-meta-v { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* 按节点视图 */
|
||||
.embed-mode-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
|
||||
.embed-steps { position: relative; }
|
||||
.embed-step { display: flex; gap: 11px; padding-bottom: 16px; position: relative; }
|
||||
.embed-step:last-child { padding-bottom: 2px; }
|
||||
|
||||
Reference in New Issue
Block a user