wangyizhe/his
2
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
d1b290881fd0cdd5cfdcde20daea884643039ed3
his/md/需求/103-医生个人报卡管理界面-2026-1-29.md

11 KiB
Raw Blame History

医生个人报卡管理界面PRD文档

一、页面概述

页面名称：医生个人报卡管理界面 页面目标：为医生提供传染病报告卡的管理功能，包括查看、编辑、提交、撤回、导出等操作，并提供数据统计和筛选功能。 适用场景：医生需要查看/编辑或管理已填写的传染病报告卡，进行批量操作或筛选特定状态的报告卡 页面类型：列表页（含筛选功能） + 表单页（编辑/查看模态框）。

核心功能：

  1. 报卡数据统计展示（总报卡数/待处理失败/已成功上报）
  2. 报卡列表筛选与查询（按日期/状态/关键词）
  3. 报卡详情查看与编辑
  4. 批量操作（全选/批量提交/批量删除）
  5. 报卡导出为Word格式

用户价值：

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. 只能查询医生本人报卡的数据