上传文件至 md/需求

This commit is contained in:
2026-02-02 16:51:23 +08:00
parent 5781e39c20
commit d1b290881f

View File

@@ -0,0 +1,349 @@
## 医生个人报卡管理界面PRD文档
### 一、页面概述
**页面名称**:医生个人报卡管理界面
**页面目标**:为医生提供传染病报告卡的管理功能,包括查看、编辑、提交、撤回、导出等操作,并提供数据统计和筛选功能。
**适用场景**:医生需要查看/编辑或管理已填写的传染病报告卡,进行批量操作或筛选特定状态的报告卡
**页面类型**:列表页(含筛选功能) + 表单页(编辑/查看模态框)。
**核心功能**
1. 报卡数据统计展示(总报卡数/待处理失败/已成功上报)
2. 报卡列表筛选与查询(按日期/状态/关键词)
3. 报卡详情查看与编辑
4. 批量操作(全选/批量提交/批量删除)
5. 报卡导出为Word格式
**用户价值**
- 快速掌握个人报卡工作整体情况
- 高效管理不同状态的报卡记录
- 规范疾病报告卡流程,确保数据及时准确上报
**原型图地址**https://static.pm-ai.cn/prototype/20260129/865d147e5650ff42c054b38244ed8239/index.html
**流程图**
```mermaid
flowchart TD
Start([医生进入个人报卡管理界面]) --> Load[展示数据统计卡片]
Load --> Stats[展示统计卡片\n总报卡数待处理已上报]
Stats --> Filter[渲染筛选区日期状态名称]
Filter --> Table[展示报卡列表]
Table --> Op{用户操作选择}
Op -->|点击查看| View1[弹出只读模态框]
View1 --> View2[展示完整报卡信息]
View2 --> View3[关闭模态框]
View3 --> Table
Op -->|点击编辑| Edit1{状态是待提交?}
Edit1 -->|否| Table
Edit1 -->|是| Edit2[弹出编辑模态框]
Edit2 --> Edit3[修改表单字段]
Edit3 --> Edit4[点击保存]
Edit4 --> Edit5{验证必填项}
Edit5 -->|失败| Edit6[显示错误原因]
Edit6 --> Edit2
Edit5 -->|通过| Edit7[保存数据]
Edit7 --> Edit8[提示成功]
Edit8 --> Table
Op -->|点击提交| Sub1{状态是待提交?}
Sub1 -->|是| Sub2[确认对话框]
Sub2 --> Sub3[变更为已提交]
Sub3 --> Sub4[刷新表格统计]
Sub4 --> Table
Sub1 -->|否| Table
Op -->|点击撤回| Back1{状态是已提交?}
Back1 -->|是| Back2[变更为待提交]
Back2 --> Table
Back1 -->|否| Table
Op -->|点击导出| Exp1{状态是已上报?}
Exp1 -->|是| Exp2[报告卡导出预览]
Exp2 --> Exp3[导出Word文档]
Exp3 --> Table
Exp1 -->|否| Table
Op -->|应用筛选| Filt1[触发筛选条件]
Filt1 --> Filt2[重新加载列表]
Filt2 --> Table
Op -->|批量操作| Batch1{已选记录?}
Batch1 -->|否| Batch2[提示请选择记录]
Batch2 --> Table
Batch1 -->|是| Batch3{操作类型}
Batch3 -->|批量提交| Batch4{全是待提交?}
Batch4 -->|否| Batch5[提示只能提交待提交]
Batch5 --> Table
Batch4 -->|是| Batch6[确认数量]
Batch6 --> Batch7[更新为已提交]
Batch7 --> Batch8[刷新统计数据]
Batch8 --> Table
Batch3 -->|批量删除| Batch9{全是待提交?}
Batch9 -->|否| Batch10[提示只能删除待提交]
Batch10 --> Table
Batch9 -->|是| Batch11[确认删除]
Batch11 --> Batch12[状态变为作废]
Batch12 --> Batch13[刷新数据]
Batch13 --> Table
```
### 二、整体布局分析
**页面宽度**:自适应布局
**主要区域划分**
1. **顶部标题区**5%):页面标题。
2. **数据统计区**15%):展示总报卡数、待处理失败数、已成功上报数。
3. **高级筛选区**15%):提供日期范围、状态、报卡名称等筛选条件。
4. **数据表格区**55%):展示报卡列表,支持多选和操作按钮。
5. **底部批量操作区**10%):全选、批量删除、批量提交功能。
**布局特点**:上下布局,采用卡片式设计,主内容区为表格展示
### 三、页面区域详细描述
#### 1. 顶部标题区
**区域位置**:页面最上方
**区域尺寸**高度60px宽度100%。
**区域功能**:展示页面标题和主要操作入口
**包含元素**
- **页面标题**
- - 元素类型:文本
- 显示内容:“我的报卡”
- 样式特征20px/600深灰色(#1e293b)
#### 2. 数据统计卡片区
**区域位置**:标题区下方
**区域尺寸**高度150px宽度100%。
**区域功能**:展示关键统计数据,帮助医生快速了解报卡状态分布。
**包含元素**
- **总报卡数卡片**
- - 元素类型:统计卡片
- 显示内容:图标+数值+“总报卡数”
- 样式特征紫色渐变背景圆角12px
- **待处理失败卡片**
- - 同总报卡数卡片,红色系配色
- **已成功上报卡片**
- - 同总报卡数卡片,绿色系配色
#### 3. 高级筛选区
**区域位置**:统计卡片下方
**区域尺寸**高度150px宽度100%
**区域功能**:提供多维筛选条件,支持快速定位目标报卡。
**包含元素**
- **日期范围选择器**
- - 元素类型表单控件两个date输入框
- 交互行为:选择日期后触发筛选。
- 限制条件:结束日期不能早于开始日期。
- **状态筛选下拉框**
- - 元素类型:下拉选择
- 可选值:全部状态/待提交/已提交/已审核/已上报/失败/作废
- **报卡名称搜索框**
- - 元素类型:文本输入框
- 占位文本:“输入报卡名称…”
- **应用筛选按钮**
- - 元素类型:主要操作按钮
- 交互行为:点击后触发表格数据刷新
- **重置条件按钮**
- - 元素类型:次要操作按钮
- 交互行为:清空所有筛选条件
#### 4. 数据表格区
**区域位置**:页面中部
**区域尺寸**高度自适应宽度100%。
**区域功能**:展示报卡列表及提供行级操作
**包含元素**
- **表格头部**
**数据主要取值于传染病报卡表infectious_card**
- - 包含字段选择框、卡片ID、患者姓名、身份证号、联系电话、就诊卡号、报卡名称、提交时间、状态、操作
- 样式特征灰色背景13px字号大写字母
- **表格内容行**
- - 展示方式:每行显示一条报卡记录
- 数据字段:
- - 卡片ID文本 - HOSP202601150001 - 不可操作
- 患者姓名:文本 - 张三 - 不可操作
- 身份证号:不脱敏文本 - 110101199001011234 - 不可操作
- 联系电话:文本 - 13800138000 - 不可操作
- 就诊卡号:文本 - M12345678 - 不可操作
- 报卡名称:文本 - 中华人民共和国传染病报告卡 - 不可操作
- 提交时间:时间 - 2026-01-15 14:30 - 不可操作
- 状态标签:根据状态值显示不同颜色
- 操作功能:
- - 查看按钮:所有状态可见
- 编辑按钮:仅"待提交"状态可见
- 提交按钮:仅"待提交"状态可见
- 撤回按钮:仅"已提交"状态可见
- 导出按钮:仅"已上报"状态可见
#### 5. 底部批量操作区
**区域位置**:页面底部
**区域尺寸**高度60px宽度100%。
**区域功能**:支持批量操作选中报卡。
**包含元素**
- **全选复选框**
- - 交互行为:勾选后选中当前页所有记录
- **批量删除按钮**
- - 元素类型:文本按钮
- 限制条件:仅对"待提交"状态记录有效
- 交互行为:提交后状态变为"作废"。
- **批量提交按钮**
- - 元素类型:主要操作按钮
- 限制条件:仅对"待提交"状态记录有效
- 交互行为:提交后状态变为"已提交"。
#### 6. 报卡详情弹窗界面内容功能与需求编号102界面保持一致建议用同一个界面
**区域位置**:页面居中模态框
**区域功能**:查看/编辑完整报卡信息
**包含元素**
- 表单字段(按模块分组):
- 1. 患者基本信息(姓名/身份证号/联系方式*
2. 临床信息(发病日期/诊断日期*
3. 传染病分类(甲/乙/丙类多选*
4. 报告信息(报告单位/医生*
- 操作按钮:
o 取消:关闭弹窗不保存
o 保存:验证必填项后保持数据
### 四、交互功能详细说明
#### 1. 报卡查看功能
**功能描述**:查看报卡详细信息
**触发条件**:点击任意行的"查看"按钮
**操作流程**
1. 弹出模态框展示完整报卡信息
2. 所有字段为只读状态
3. 点击关闭按钮或蒙层关闭模态框
#### 2. 报卡编辑功能
**功能描述**:修改待提交的报卡信息
**触发条件**:点击"待提交"状态的"编辑"按钮
**操作流程**
1. 弹出可编辑的报卡表单模态框
2. 修改必要字段(带*号为必填项)
3. 点击"保存"按钮提交修改
4. 成功提示后关闭模态框
#### 3. 批量提交功能
**功能描述**:批量提交选中的待提交报卡
**触发条件**:勾选记录后点击"批量提交"按钮
**操作流程**
1. 校验是否选中有效记录(状态为待提交)
2. 弹出确认对话框显示待提交数量
3. 确认后更新记录状态为"已提交"
4. 刷新表格数据和统计卡片
**异常处理**
- 未选中记录:提示"请选择待提交的记录"
- 包含不可提交记录:提示"只能提交待提交状态的记录"
#### 4. 报卡状态流转
**触发方式**:点击操作列按钮
**执行流程**
1. 待提交 → 已提交:点击"提交"按钮 → 弹窗确认 → 状态变更
2. 已提交 → 待提交:点击"撤回"按钮 → 状态回滚
3. 已上报 → 导出生成标准疾病报告卡Word文档含医院红头格式
**异常处理**
- 提交失败:显示具体错误原因(如:必填项未完成)
### 五、数据结构说明
**关键数据字段**
**传染病报卡表infectious_card**
### 六、开发实现要点
**样式规范**
- **主色调**#6366f1(紫色)
- **状态色**
- - 待提交:#f59e0b(橙色)
- 已提交:#2563eb(蓝色)
- 已上报:#16a34a(绿色)
- 失败:#dc2626(红色)
- **字体规范**
- - 标题20px/600
- 正文14px/400
- **间距系统**
- - 卡片内边距24px
- 元素间距16px
**技术要求**
- **表格组件**:需支持虚拟滚动(大数据量场景)
- **导出功能**实现Word导出
**注意事项**
1. 身份证号等敏感信息不需做脱敏处理
2. 批量操作需考虑性能优化(分页处理)
3. 状态变更需同步更新统计卡片数据
4. 移动端需特别处理表格的横向滚动体验
5. ‘待提交’状态就是‘暂存’状态
6. 只能查询医生本人报卡的数据