diff --git a/clinical-web/src/utils/signing-document.ts b/clinical-web/src/utils/signing-document.ts index 026ad3a..1e522e7 100644 --- a/clinical-web/src/utils/signing-document.ts +++ b/clinical-web/src/utils/signing-document.ts @@ -464,7 +464,7 @@ function buildDocumentHeader(doc: Document, answers: SigningAnswers): HTMLElemen const header = doc.createElement('header') header.className = 'sign-doc-header' - SIGNING_DOCUMENT_HEADER.forEach(({ id, label }) => { + SIGNING_DOCUMENT_HEADER.forEach(({ id, label, valueWidthEm }) => { const item = doc.createElement('span') item.className = 'sign-doc-header__item' @@ -476,6 +476,9 @@ function buildDocumentHeader(doc: Document, answers: SigningAnswers): HTMLElemen const valueElement = doc.createElement('span') valueElement.className = 'sign-doc-header__value' valueElement.textContent = typeof value === 'string' ? value : '' + // 宽度随字段走(而不是写死在样式里):页眉四项要挤在一行, + // 各字段需要的下划线长度差别很大,样式里只能给一个统一值,容易撑到换行 + valueElement.style.minWidth = `${valueWidthEm}em` item.appendChild(labelElement) item.appendChild(valueElement) diff --git a/clinical-web/src/utils/signing-fields.ts b/clinical-web/src/utils/signing-fields.ts index 1bcc222..1b7c5bd 100644 --- a/clinical-web/src/utils/signing-fields.ts +++ b/clinical-web/src/utils/signing-fields.ts @@ -44,6 +44,19 @@ export const SIGNING_FIELD_PRESETS: SigningFieldDef[] = [ { id: 'doctor', label: '医师签名', kind: 'signature', required: false, options: [] }, ] +/** + * 固定页眉的一项。 + * valueWidthEm 是取值下划线的宽度(em):页眉要在一行内放下四项, + * 按内容长度分配比统一宽度更省地方——性别、年龄只有一个字/两位数字, + * 用和「住院号/门诊号」一样的长度就会把整行挤到换行。 + */ +export interface SigningHeaderField { + /** 字段键,与 SIGNING_FIELD_PRESETS 对应 */ + id: string + label: string + valueWidthEm: number +} + /** * 文书固定页眉。 * @@ -54,12 +67,15 @@ export const SIGNING_FIELD_PRESETS: SigningFieldDef[] = [ * 因为页眉是系统渲染的只读展示(不挂 data-sign-field), * 它既不会出现在"填写项"统计里,也不会被写进签署证据—— * 患者信息以任务快照为准,页眉只是把快照展示出来。 + * + * 宽度预算:A4 版心约 680px,四项标签合计约 250px、项间距约 54px, + * 取值下划线合计控制在约 290px 以内,留出余量保证一行放得下。 */ -export const SIGNING_DOCUMENT_HEADER: Array<{ id: string; label: string }> = [ - { id: 'patient', label: '患者姓名' }, - { id: 'sex', label: '性别' }, - { id: 'age', label: '年龄' }, - { id: 'visit', label: '住院号/门诊号' }, +export const SIGNING_DOCUMENT_HEADER: SigningHeaderField[] = [ + { id: 'patient', label: '患者姓名', valueWidthEm: 5.5 }, + { id: 'sex', label: '性别', valueWidthEm: 2.8 }, + { id: 'age', label: '年龄', valueWidthEm: 3.2 }, + { id: 'visit', label: '住院号/门诊号', valueWidthEm: 9 }, ] /** diff --git a/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue b/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue index ccbc6bf..0b6116c 100644 --- a/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue +++ b/clinical-web/src/views/management/documents/components/DocumentPreviewDialog.vue @@ -455,11 +455,12 @@ function syncPreviewFields() { max-width: 100%; } -/* 固定页眉:患者基本信息由 HIS 自动带出,与正文之间用一条横线分隔 */ +/* 固定页眉:患者基本信息由 HIS 自动带出,与正文之间用一条横线分隔。 + 四项要在一行内放下,取值下划线的宽度由字段定义给出(内联 min-width),样式里不再写死 */ .signing-preview :deep(.sign-doc-header) { display: flex; flex-wrap: wrap; - gap: 12px 26px; + gap: 10px 18px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1.5px solid #52646e; @@ -467,7 +468,7 @@ function syncPreviewFields() { .signing-preview :deep(.sign-doc-header__item) { display: inline-flex; - gap: 4px; + gap: 3px; align-items: baseline; } @@ -478,8 +479,7 @@ function syncPreviewFields() { } .signing-preview :deep(.sign-doc-header__value) { - min-width: 6.5em; - padding: 0 6px 1px; + padding: 0 5px 1px; color: #1c2b33; font-size: 12.5px; text-align: center; diff --git a/clinical-web/src/views/workbench/signing/components/SigningDocumentInteractive.vue b/clinical-web/src/views/workbench/signing/components/SigningDocumentInteractive.vue index 567f0a0..0730908 100644 --- a/clinical-web/src/views/workbench/signing/components/SigningDocumentInteractive.vue +++ b/clinical-web/src/views/workbench/signing/components/SigningDocumentInteractive.vue @@ -333,11 +333,12 @@ defineExpose({ getDocumentElement }) max-width: 100%; } -/* 固定页眉:患者基本信息由 HIS 自动带出,与正文之间用一条横线分隔 */ +/* 固定页眉:患者基本信息由 HIS 自动带出,与正文之间用一条横线分隔。 + 四项要在一行内放下,取值下划线的宽度由字段定义给出(内联 min-width),样式里不再写死 */ .sign-doc-body :deep(.sign-doc-header) { display: flex; flex-wrap: wrap; - gap: 12px 26px; + gap: 10px 18px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1.5px solid #52646e; @@ -345,7 +346,7 @@ defineExpose({ getDocumentElement }) .sign-doc-body :deep(.sign-doc-header__item) { display: inline-flex; - gap: 4px; + gap: 3px; align-items: baseline; } @@ -356,8 +357,7 @@ defineExpose({ getDocumentElement }) } .sign-doc-body :deep(.sign-doc-header__value) { - min-width: 6.5em; - padding: 0 6px 1px; + padding: 0 5px 1px; color: #1c2b33; font-size: 12.5px; text-align: center;