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