4.8 KiB
4.8 KiB
实现方案 —— 2026-04-18-18-36-43
方案目标
实现五项系统改进：列名修正、字段下划线控制、下载导出、右对齐排版修复、默认模板签名右对齐。
需求 1：ReportManage 列名修正
修改文件
src/pages/ReportManage.tsx
修改内容
找到 <thead> 中「患者号」<th>，将文本改为「住院号」。同步检查表格数据渲染中是否有对应的 patientId/hospitalId 显示逻辑需调整。
需求 2：字段管理增加下划线控制
修改文件
src/types.tssrc/pages/TemplateManage.tsxsrc/utils/print.ts
实现步骤
- 扩展 FormField 接口：增加
hasUnderline?: boolean（默认true）。 - 修改 DEFAULT_FORM_FIELDS：为所有默认字段设置
hasUnderline: true。 - TemplateManage 字段管理 UI：
- 新增字段表单中增加「打印时显示下划线」checkbox，默认勾选。
- 编辑字段面板中同样增加该 checkbox。
- 保存字段配置时将
hasUnderline写入formFieldsConfig。
- insertSmartField 注入类名：
- 在生成
smart-field-wrapperHTML 时，若field.hasUnderline === false，给.field-value增加no-underline类。
- 在生成
- print.ts 打印样式：
- 在
@media print中增加.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
- 在
需求 3：ReportEditor / TemplateManage 新增下载按钮
修改文件
src/pages/ReportEditor.tsxsrc/pages/TemplateManage.tsxsrc/utils/print.ts
实现步骤
- print.ts 支持自定义标题：
printDocument(htmlContent: string, docTitle?: string)增加可选docTitle参数。- 在 iframe HTML 的
<head>中注入<title>${docTitle || '图文报告'}</title>，使浏览器保存 PDF 时使用该文件名。
- ReportEditor 下载功能：
- 引入
Download图标。 - 在顶部操作栏打印按钮旁增加下载按钮。
- 新增
exportModalOpen状态控制导出弹窗。 - 实现
getExportFilename()：基于reportData.title、patientName、hospitalId和当前时间生成文件名。 - 实现
downloadJSON()：将reportData序列化为 JSON Blob 并触发下载。 - 导出 PDF 时调用
printDocument(editorRef.current.innerHTML, getExportFilename())。
- 引入
- TemplateManage 下载功能：
- 类似实现。模板管理页面没有 reportData，文件名中患者信息使用"模板"或空值替代。
- PDF 导出调用
printDocument(editorRef.current.innerHTML, filename)。 - JSON 导出下载模板内容。
需求 4：修复右对齐时签名与图片框分离
修改文件
src/pages/TemplateManage.tsx（占位符插入逻辑）src/pages/ReportEditor.tsx（占位符插入逻辑，如有）src/utils/defaultContent.ts（默认模板签名占位符）
实现步骤
将 display: inline-flex 改为 display: inline-block，并通过 line-height 实现垂直居中：
- 运行时插入：
styleStr从display:inline-flex;align-items:center;justify-content:center;改为display:inline-block;text-align:center;position:relative;line-height:${h}px; - 占位文本：
.placeholder-text增加display:inline-block;vertical-align:middle;line-height:normal; - 默认模板：手术者签名占位符同步应用上述样式。
需求 5：默认模板手术者签名右对齐
修改文件
src/utils/defaultContent.ts
修改内容
将「手术者签名」<p> 增加 text-align: right;，并应用需求 4 的 inline-block 样式修复。
涉及文件及修改点
| 文件 | 修改点 |
|---|---|
src/pages/ReportManage.tsx |
「患者号」→「住院号」 |
src/types.ts |
FormField 增加 hasUnderline?: boolean |
src/pages/TemplateManage.tsx |
字段管理 UI 增加下划线 checkbox；insertSmartField 注入 no-underline 类；工具栏增加下载按钮和弹窗 |
src/pages/ReportEditor.tsx |
工具栏增加下载按钮和弹窗；占位符插入样式改为 inline-block |
src/utils/print.ts |
增加 docTitle 参数；打印样式支持 .no-underline |
src/utils/defaultContent.ts |
签名占位符改为 inline-block；签名行设为 text-align: right |
风险与注意事项
FormField接口扩展后，需确保DEFAULT_FORM_FIELDS和所有已有字段配置（localStorage 中的formFieldsConfig）兼容。对于旧数据缺少hasUnderline的情况，按true处理。printDocument增加docTitle参数后，需检查所有调用方是否已更新。现有调用方（如 ReportView）可保持默认行为。inline-block替换inline-flex后，需验证占位符在非右对齐场景（如正常左对齐）下的垂直居中效果是否正常。- 下载 JSON 时，TemplateManage 的 JSON 内容与 ReportEditor 不同（模板 vs 报告），需分别处理。