349 lines
11 KiB
Markdown
349 lines
11 KiB
Markdown
## 医生个人报卡管理界面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. 只能查询医生本人报卡的数据 |