2026-04-18-18-36-43 - 报告管理列名修正、字段下划线控制、下载导出功能、右对齐排版修复、签名默认右对齐
This commit is contained in:
Administrator
91
工程分析/实现方案-2026-04-18-18-36-43.md
Normal file
91
工程分析/实现方案-2026-04-18-18-36-43.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# 实现方案 —— 2026-04-18-18-36-43
|
||||
|
||||
## 方案目标
|
||||
实现五项系统改进：列名修正、字段下划线控制、下载导出、右对齐排版修复、默认模板签名右对齐。
|
||||
|
||||
## 需求 1：ReportManage 列名修正
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportManage.tsx`
|
||||
|
||||
### 修改内容
|
||||
找到 `<thead>` 中「患者号」`<th>`，将文本改为「住院号」。同步检查表格数据渲染中是否有对应的 patientId/hospitalId 显示逻辑需调整。
|
||||
|
||||
## 需求 2：字段管理增加下划线控制
|
||||
|
||||
### 修改文件
|
||||
- `src/types.ts`
|
||||
- `src/pages/TemplateManage.tsx`
|
||||
- `src/utils/print.ts`
|
||||
|
||||
### 实现步骤
|
||||
1. **扩展 FormField 接口**：增加 `hasUnderline?: boolean`（默认 `true`）。
|
||||
2. **修改 DEFAULT_FORM_FIELDS**：为所有默认字段设置 `hasUnderline: true`。
|
||||
3. **TemplateManage 字段管理 UI**：
|
||||
- 新增字段表单中增加「打印时显示下划线」checkbox，默认勾选。
|
||||
- 编辑字段面板中同样增加该 checkbox。
|
||||
- 保存字段配置时将 `hasUnderline` 写入 `formFieldsConfig`。
|
||||
4. **insertSmartField 注入类名**：
|
||||
- 在生成 `smart-field-wrapper` HTML 时，若 `field.hasUnderline === false`，给 `.field-value` 增加 `no-underline` 类。
|
||||
5. **print.ts 打印样式**：
|
||||
- 在 `@media print` 中增加 `.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }`
|
||||
|
||||
## 需求 3：ReportEditor / TemplateManage 新增下载按钮
|
||||
|
||||
### 修改文件
|
||||
- `src/pages/ReportEditor.tsx`
|
||||
- `src/pages/TemplateManage.tsx`
|
||||
- `src/utils/print.ts`
|
||||
|
||||
### 实现步骤
|
||||
1. **print.ts 支持自定义标题**：
|
||||
- `printDocument(htmlContent: string, docTitle?: string)` 增加可选 `docTitle` 参数。
|
||||
- 在 iframe HTML 的 `<head>` 中注入 `<title>${docTitle || '图文报告'}</title>`，使浏览器保存 PDF 时使用该文件名。
|
||||
2. **ReportEditor 下载功能**：
|
||||
- 引入 `Download` 图标。
|
||||
- 在顶部操作栏打印按钮旁增加下载按钮。
|
||||
- 新增 `exportModalOpen` 状态控制导出弹窗。
|
||||
- 实现 `getExportFilename()`：基于 `reportData.title`、`patientName`、`hospitalId` 和当前时间生成文件名。
|
||||
- 实现 `downloadJSON()`：将 `reportData` 序列化为 JSON Blob 并触发下载。
|
||||
- 导出 PDF 时调用 `printDocument(editorRef.current.innerHTML, getExportFilename())`。
|
||||
3. **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` |
|
||||
|
||||
## 风险与注意事项
|
||||
1. `FormField` 接口扩展后，需确保 `DEFAULT_FORM_FIELDS` 和所有已有字段配置（localStorage 中的 `formFieldsConfig`）兼容。对于旧数据缺少 `hasUnderline` 的情况，按 `true` 处理。
|
||||
2. `printDocument` 增加 `docTitle` 参数后，需检查所有调用方是否已更新。现有调用方（如 ReportView）可保持默认行为。
|
||||
3. `inline-block` 替换 `inline-flex` 后，需验证占位符在非右对齐场景（如正常左对齐）下的垂直居中效果是否正常。
|
||||
4. 下载 JSON 时，TemplateManage 的 JSON 内容与 ReportEditor 不同（模板 vs 报告），需分别处理。
|
||||
117
工程分析/测试方案-2026-04-18-18-36-43.md
Normal file
117
工程分析/测试方案-2026-04-18-18-36-43.md
Normal file
@@ -0,0 +1,117 @@
|
||||
# 测试方案 —— 2026-04-18-18-36-43
|
||||
|
||||
## 测试目标
|
||||
验证五项系统改进：列名修正、字段下划线控制、下载导出、右对齐排版修复、默认模板签名右对齐。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-01：ReportManage 列名显示
|
||||
**前置条件**：进入 /report-manage
|
||||
**操作步骤**：
|
||||
1. 查看表格表头
|
||||
|
||||
**预期结果**：
|
||||
- 表头显示为「住院号」而非「患者号」
|
||||
- 数据列正确显示 hospitalId 值
|
||||
|
||||
---
|
||||
|
||||
### TC-02：字段管理下划线开关
|
||||
**前置条件**：进入 /template-manage，点击字段管理
|
||||
**操作步骤**：
|
||||
1. 新建一个字段
|
||||
2. 观察「打印时显示下划线」checkbox，默认应为勾选
|
||||
3. 取消勾选并保存
|
||||
4. 将该字段插入模板
|
||||
|
||||
**预期结果**：
|
||||
- 新建字段表单中有「打印时显示下划线」选项
|
||||
- 编辑字段时也可修改该选项
|
||||
- 取消下划线的字段插入后，`.field-value` 带有 `no-underline` 类
|
||||
|
||||
---
|
||||
|
||||
### TC-03：打印时下划线控制
|
||||
**前置条件**：模板中有带/不带下划线的字段
|
||||
**操作步骤**：
|
||||
1. 进入 report-editor，新建报告
|
||||
2. 填写字段内容
|
||||
3. 点击打印
|
||||
|
||||
**预期结果**：
|
||||
- 默认勾选下划线的字段，打印时 `.field-value` 底部有黑色下划线
|
||||
- 取消下划线的字段，打印时 `.field-value` 底部无下划线
|
||||
|
||||
---
|
||||
|
||||
### TC-04：ReportEditor 下载按钮
|
||||
**前置条件**：进入 /report-editor，有内容的报告
|
||||
**操作步骤**：
|
||||
1. 点击顶部下载按钮
|
||||
2. 在弹窗中选择「导出 PDF」
|
||||
3. 在弹窗中选择「导出 JSON」
|
||||
|
||||
**预期结果**：
|
||||
- 弹窗正常显示两个导出选项
|
||||
- PDF 导出时浏览器保存对话框的文件名包含「图文报告-{手术名称}-{患者}-{住院号}-{时间}」
|
||||
- JSON 导出时下载的文件名格式同上，内容包含 reportData
|
||||
|
||||
---
|
||||
|
||||
### TC-05：TemplateManage 下载按钮
|
||||
**前置条件**：进入 /template-manage
|
||||
**操作步骤**：
|
||||
1. 点击顶部下载按钮
|
||||
2. 选择导出 PDF/JSON
|
||||
|
||||
**预期结果**：
|
||||
- 导出功能正常
|
||||
- 文件名格式合理（模板名称 + 时间）
|
||||
|
||||
---
|
||||
|
||||
### TC-06：右对齐时签名不换行
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 找到「手术者签名」行
|
||||
2. 选中该行，点击工具栏「右对齐」
|
||||
|
||||
**预期结果**：
|
||||
- 「手术者签名：」文字与图片占位符在同一行
|
||||
- 两者一起靠右对齐
|
||||
- 图片框不会单独换到下一行
|
||||
|
||||
---
|
||||
|
||||
### TC-07：默认模板签名右对齐
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 查看报告底部「手术者签名」行
|
||||
|
||||
**预期结果**：
|
||||
- 默认即为右对齐
|
||||
- 文字与图片框在同一行
|
||||
|
||||
---
|
||||
|
||||
### TC-08：占位符 inline-block 样式
|
||||
**前置条件**：在 template-manage 中插入静态图片占位符
|
||||
**操作步骤**：
|
||||
1. 点击工具栏「插入图片占位符」
|
||||
2. 选择「静态图片占位」
|
||||
3. 确认插入
|
||||
|
||||
**预期结果**：
|
||||
- 占位符的 style 中 `display` 为 `inline-block` 而非 `inline-flex`
|
||||
- 占位符在编辑器中正常显示，垂直居中
|
||||
|
||||
---
|
||||
|
||||
## 回归测试范围
|
||||
- 验证所有现有字段（默认模板中的）打印时仍显示下划线
|
||||
- 验证 smart-field-wrapper 双向绑定正常工作
|
||||
- 验证 image-placeholder 点击上传、拖拽填充、删除功能正常
|
||||
- 验证 report-manage 的搜索、筛选、批量操作不受影响
|
||||
|
||||
## 测试结论
|
||||
TC-01~TC-08 全部通过，即可确认所有需求均正确实现。
|
||||
39
工程分析/需求分析-2026-04-18-18-36-43.md
Normal file
39
工程分析/需求分析-2026-04-18-18-36-43.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# 需求分析 —— 2026-04-18-18-36-43
|
||||
|
||||
## 需求来源
|
||||
用户提出报告管理列名修正、字段下划线控制、下载功能、右对齐排版修复及默认模板调整等五项改进需求。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：ReportManage 列名"患者号"改为"住院号"
|
||||
报告管理列表中表头显示为"患者号"，但实际数据对应的是住院号字段，需修正列名。
|
||||
|
||||
### 需求 2：TemplateManage 字段管理增加"下划线"控制
|
||||
在模板管理的字段管理面板中，每个字段增加"打印时显示下划线"单选框，默认勾选。若取消勾选，则该字段在打印输出时不显示底部下划线。需在 `FormField` 数据结构中增加 `hasUnderline` 属性，并在打印样式中支持 `.no-underline` 类。
|
||||
|
||||
### 需求 3：ReportEditor / TemplateManage 新增下载按钮
|
||||
在报告编辑器和模板管理页面的打印按钮旁新增"下载"按钮，点击弹出模态框，支持导出 PDF 和 JSON：
|
||||
- PDF：复用现有 `printDocument()`，传入自定义文件名
|
||||
- JSON：通过 `Blob` + `URL.createObjectURL` 实现下载
|
||||
- 默认文件名格式：`图文报告-{手术名称}-{患者}-{住院号}-{下载时间}.pdf/.json`
|
||||
|
||||
### 需求 4：修复右对齐时签名与图片框分离
|
||||
当编辑器中设置右对齐时，"手术者签名："文字与 `class="image-placeholder"` 图片框被拆分为两行。根本原因是 `display: inline-flex` 在右对齐布局下容易触发换行。需将运行时插入的占位符以及默认模板中的占位符 `display` 属性从 `inline-flex` 改为 `inline-block`，并配合 `line-height` 垂直居中。
|
||||
|
||||
### 需求 5：默认模板手术者签名右对齐
|
||||
将 `defaultContent.ts` 中「手术者签名」行默认设为 `text-align: right`，并应用需求 4 中的 `inline-block` 修复。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/ReportManage.tsx`（需求 1）
|
||||
- `src/types.ts`（需求 2：FormField 扩展）
|
||||
- `src/utils/print.ts`（需求 2、3：打印样式 + 文件名支持）
|
||||
- `src/pages/TemplateManage.tsx`（需求 2、3、4）
|
||||
- `src/pages/ReportEditor.tsx`（需求 3、4）
|
||||
- `src/utils/defaultContent.ts`（需求 4、5）
|
||||
|
||||
## 需求影响范围
|
||||
- 报告管理列表展示
|
||||
- 模板字段配置体系
|
||||
- 编辑器/模板管理器工具栏交互
|
||||
- 打印输出样式
|
||||
- 文件导出功能
|
||||
Reference in New Issue
Block a user