- Add postOpCondition, specimenDescription, pathologySent, frozenPathology to Report type and DEFAULT_FORM_FIELDS - Replace static placeholders in defaultContent.ts with smartField() calls - Auto-merge missing fields from DEFAULT_FORM_FIELDS into existing formFieldsConfig in ReportEditor and TemplateManage
74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
# 实现方案 — 模板新增术后字段(2026-04-17-09-57-08)
|
||
|
||
## 一、修改文件清单
|
||
|
||
1. `src/types.ts` — 扩展 `Report` 类型 + 追加 `DEFAULT_FORM_FIELDS`
|
||
2. `src/utils/defaultContent.ts` — 替换默认模板中的 4 处占位文本为 `smartField()`
|
||
3. `src/pages/ReportEditor.tsx` — 增加 `formFieldsConfig` 自动补全/升级逻辑
|
||
4. `src/pages/TemplateManage.tsx` — 增加同样的自动补全/升级逻辑
|
||
|
||
## 二、详细改动
|
||
|
||
### 2.1 `src/types.ts`
|
||
|
||
#### A. `Report` 接口追加字段
|
||
```ts
|
||
postOpCondition?: string;
|
||
specimenDescription?: string;
|
||
pathologySent?: string;
|
||
frozenPathology?: string;
|
||
```
|
||
|
||
#### B. `DEFAULT_FORM_FIELDS` 追加 4 条
|
||
```ts
|
||
{ key: 'postOpCondition', label: '手术后情况', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['患者麻醉恢复后安返病房'] },
|
||
{ key: 'specimenDescription', label: '切除标本描述', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: [] },
|
||
{ key: 'pathologySent', label: '是否送检病理', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['是', '否'] },
|
||
{ key: 'frozenPathology', label: '冰冻病理结果', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||
```
|
||
|
||
### 2.2 `src/utils/defaultContent.ts`
|
||
|
||
将模板底部 `template-info-section` 中的 4 处文本替换:
|
||
|
||
- `患者麻醉恢复后安返病房` → `${smartField('postOpCondition')}`
|
||
- `<span style="color: #bdbdbd;">切除标本描述</span>` → `${smartField('specimenDescription')}`
|
||
- `是` → `${smartField('pathologySent')}`
|
||
- `<span style="color: #bdbdbd;">冰冻病理结果</span>` → `${smartField('frozenPathology')}`
|
||
|
||
### 2.3 `src/pages/ReportEditor.tsx`
|
||
|
||
在初始化 `useEffect` 中,读取 `formFieldsConfig` 后增加**字段合并逻辑**:
|
||
|
||
```ts
|
||
const savedFields = storage.get<FormField[]>('formFieldsConfig', []);
|
||
let mergedFields = savedFields;
|
||
if (savedFields.length > 0) {
|
||
const missing = DEFAULT_FORM_FIELDS.filter(def => !savedFields.some(f => f.key === def.key));
|
||
if (missing.length > 0) {
|
||
mergedFields = [...savedFields, ...missing];
|
||
storage.set('formFieldsConfig', mergedFields);
|
||
}
|
||
setFormFields(mergedFields);
|
||
} else {
|
||
setFormFields(DEFAULT_FORM_FIELDS);
|
||
storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
|
||
}
|
||
```
|
||
|
||
### 2.4 `src/pages/TemplateManage.tsx`
|
||
|
||
在同样的初始化位置执行完全相同的合并逻辑,保证两个页面中的字段配置一致性。
|
||
|
||
## 三、风险与回滚
|
||
|
||
- **风险**:修改 `DEFAULT_FORM_FIELDS` 和默认模板后,新用户直接生效;老用户通过合并逻辑无痛升级。
|
||
- **回滚**:如出现问题,可将 `DEFAULT_FORM_FIELDS` 恢复为 14 条,并回滚 `defaultContent.ts` 中的 4 处替换。
|
||
|
||
## 四、验证计划
|
||
|
||
1. 清空浏览器 localStorage 后刷新,确认新建报告时模板底部 4 处为可编辑方框。
|
||
2. 在右侧表单中操作 4 个新控件,观察模板方框实时同步。
|
||
3. 在模板方框中直接输入,观察右侧表单实时同步。
|
||
4. 预先写入旧版 `formFieldsConfig`(14 条),刷新页面,确认自动补全为 18 条。
|