refactor(文书预览): 抽出统一的文书纸与预览弹窗,消除五处重复渲染
预览原先在 5 个地方各写一遍(文书库预览、编辑器签署预览、发起签署弹窗预览、 工作台在线预览、工作台文书区),基础排版已经分叉:表格边框 #52646e 与 #c8d7dd 两套色、单元格内边距 5px 7px 与 5px 9px 两个值、只有两处带宋体。 原型本身是「一处渲染(.paper + fillDocHtml)、两种外框」,这次按那个形状收口。 新增 - utils/document-paper.ts:基础排版的**唯一一份** CSS(p / h1-h4 / 表格 / 宋体)。 运行期幂等注入 head —— 因为同一份纸有两条渲染通道:v-html(吃全局样式)与 iframe srcdoc(隔离模板自带 style,只能吃字符串),各写一份必然漂移。 - components/document/DocumentPaper.vue:唯一的纸渲染器。 signing / raw 两模式、interactive、取值还原、☑☐ 就地切换、签名位请求采集、 填写项与勾选上报、getDocumentElement()(供导出 PDF)。 - components/document/DocumentPreviewDialog.vue:唯一的预览外框。 标题/副标题/徽标、可选页签、加载与错误态、纸舞台(浅色卡片 / 深灰 A4)、 #footer 与 #empty 插槽。 - styles/document-preview.css:页脚按钮等**插槽内容**要用的类。 插槽节点带的是父组件 scope id,弹窗的 scoped 样式命中不了 —— 与 signing-document.css 同一类问题,同一套解法。 迁移 - 文书库预览、编辑器签署预览、发起签署弹窗预览、工作台在线预览全部改走统一组件; SigningDocumentInteractive 的纸换成 DocumentPaper,只留任务外壳 (横幅 / 作废章 / 填写项进度)。 - 删除四处基础排版副本;SimSun 与 :deep(table) 现在各只剩一处。 行为保持 - 文书库预览仍是两个页签(文书内容走 iframe 隔离、签署预览走 v-html), 没有正文时仍给占位版式(占位符写成 {患者姓名} 原始形态,不预填示例值)。 - 工作台预览的深灰 A4 舞台、页脚说明与两个出口按钮不变。 - 作废章原先是纸的兄弟节点、DOM 顺序在前,纸改成自带白底后会被盖住 —— 给章补 z-index,并在探针里加命中测试锁死。 验证 - 新增 probe-doc-paper.cjs:31/31 PASS。核心是**计算样式**断言 (边框色 / 内边距 / 宋体 / border-collapse),并断言文书库预览与编辑器预览 两份纸的样式**逐项一致** —— 只看 DOM 存在证明不了"只有一份排版"。 - 回归:probe-new-task 104/104、probe-workbench-lib 46/46(新增作废章命中测试)、 probe-dept-confirm 36/36、probe-method-domain 14/14、probe-report-analytics 92/92。 - vue-tsc 与 eslint 0 错。 净减 888 行(309 增 / 1197 删)。
This commit is contained in:
@@ -10,7 +10,8 @@ import {
|
||||
SIGNING_FIELD_PRESETS,
|
||||
upgradeFieldTokensToStructured,
|
||||
} from '@/utils/signing-fields'
|
||||
import { buildSigningDocumentHtml } from '@/utils/signing-document'
|
||||
|
||||
import DocumentPaper from '@/components/document/DocumentPaper.vue'
|
||||
|
||||
import EditorWangPane from './editors/EditorWangPane.vue'
|
||||
import { DOC_TEMPLATE_PERMISSIONS } from '../permissions'
|
||||
@@ -338,9 +339,6 @@ const saveHints = computed(() => {
|
||||
|
||||
/** 签署预览:把正文按签署时效果渲染一遍(原型 docTogglePreview) */
|
||||
const previewing = ref(false)
|
||||
const previewHtml = computed(() =>
|
||||
previewing.value ? buildSigningDocumentHtml(valueHtml.value, PREVIEW_PATIENT, false) : '',
|
||||
)
|
||||
|
||||
function togglePreview() {
|
||||
if (!previewing.value) {
|
||||
@@ -543,12 +541,15 @@ function requestClose() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 签署预览:纸的渲染走统一组件,这里只给盒子(.preview-paper)。
|
||||
改版前这里自己抄了一份基础排版,表格边框与工作台那份已经分叉 -->
|
||||
<div v-if="previewing" class="preview-shell">
|
||||
<div class="preview-paper">
|
||||
<!-- eslint-disable vue/no-v-html -- 内容为本系统定稿的文书 HTML(编辑器产出、仅医务人员可改),非任意用户输入 -->
|
||||
<div v-html="previewHtml" />
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
<DocumentPaper
|
||||
class="preview-paper"
|
||||
:content-html="valueHtml"
|
||||
:data="PREVIEW_PATIENT"
|
||||
:interactive="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="editor-shell">
|
||||
@@ -1008,32 +1009,8 @@ function requestClose() {
|
||||
box-shadow: var(--sh);
|
||||
}
|
||||
|
||||
.preview-paper :deep(p) {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.preview-paper :deep(table) {
|
||||
width: 100%;
|
||||
margin: 8px 0 12px;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.preview-paper :deep(th),
|
||||
.preview-paper :deep(td) {
|
||||
padding: 5px 9px;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #c8d7dd;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.preview-paper :deep(th p),
|
||||
.preview-paper :deep(td p) {
|
||||
margin: 0;
|
||||
}
|
||||
/* 基础排版(p / table / th / td / 宋体 …)在 components/document/DocumentPaper.vue
|
||||
的 DOCUMENT_PAPER_CSS 里,全项目唯一一份。这里只留盒子。 */
|
||||
|
||||
/* ---- 底部 ---- */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user