9.8 KiB
9.8 KiB
门诊会诊申请管理界面PRD文档
一、页面概述
页面名称：门诊会诊申请管理界面
页面目标：提供会诊申请的全流程管理功能，包括申请记录查询、编辑申请、查看详情、状态变更等核心操作
适用场景：门诊医生需要查看会诊申请或管理已有申请记录时使用
页面类型：列表页+表单弹窗复合型页面
核心功能：
- 多条件组合筛选会诊申请记录
- 会诊申请表格展示与操作（编辑/查看/删除）
- 会诊申请单的填写与提交
- 会诊状态标记（提交/结束）
用户价值：规范会诊申请流程，减少纸质单据流转，提高多科室协作效率 原型图地址：https://static.pm-ai.cn/prototype/20260116/aed1f102d614677f100c0d1fe3104999/index.html 流程图：
flowchart TD
Start([Start]) --> A[进入门诊会诊申请管理界面]
A --> B{用户操作类型}
B -->|筛选查询| C[设置筛选条件]
B -->|编辑申请| D[点击编辑按钮]
B -->|查看详情| E[点击查看按钮]
B -->|删除申请| G[点击删除按钮]
C --> H{验证筛选条件}
H -->|有效| I[展示筛选结果]
H -->|无效| J[显示错误提示]
J --> C
I --> K[用户浏览列表]
D --> L{检查会诊状态}
L -->|未结束| M[打开编辑弹窗]
L -->|已结束| N[提示不可编辑]
N --> O[关闭弹窗]
M --> P[修改表单内容]
P --> Q{表单验证}
Q -->|通过| R[保存修改]
Q -->|不通过| S[标红错误字段]
S --> P
E --> T{检查会诊状态}
T -->|未结束| U[打开只读弹窗]
T -->|已结束| U
G --> Z{删除验证}
Z -->|可删除| AA[确认删除]
Z -->|不可删除| AB[提示删除失败]
AB --> K
AA --> AC[更新状态为已取消]
AC --> AD[更新列表显示]
R --> AD
AD --> K
K --> AE([End])
二、整体布局分析
页面宽度：自适应布局
主要区域划分：
- 顶部筛选区（高度自适应，约80px）
- 表格展示区（高度自适应，占主要空间）
- 底部页码区（固定高度56px）
布局特点：上下布局+弹性布局，采用左右对齐方式
三、页面区域详细描述
1. 顶部筛选区
区域位置：页面顶部
区域尺寸：100%宽度，高度自适应
区域功能：提供多维度筛选和快速搜索功能
包含元素：
- 时间类型选择器
- 元素类型：下拉选择框
- 显示内容：默认"会诊时间"，可选"申请时间"
- 交互行为：点击展开下拉选项
- 样式特征：宽度120px，高度32px，圆角4px
- 时间范围选择器（开始/结束时间）
- 元素类型：日期时间输入框
- 显示内容：placeholder提示"开始时间"/“结束时间”
- 交互行为：点击弹出日期选择面板
- 样式特征：宽度180px，高度32px
- 申请科室/申请医生选择器
- 元素类型：带datalist的输入框
- 显示内容：placeholder提示"选择或输入科室/医生"
- 交互行为：输入时显示匹配选项
- 数据来源：动态生成申请科室/医生候选列表，取值于门诊会诊申请单表（ConsultationRequest.Department/ RequestingPhysician）
- 会诊状态筛选器
- 元素类型：下拉选择框
- 可选值：全部/未提交/提交/结束
- 默认值：全部
- 病人姓名搜索框
- 元素类型：文本输入框
- 显示内容：placeholder提示"病人姓名"
- 交互行为：支持模糊搜索
- 操作按钮组
- 查询按钮
- 样式：蓝色背景，带搜索图标
- 交互：触发筛选条件应用
- 重置按钮
- 样式：灰色背景，带刷新图标
- 交互：清空所有筛选条件
- 打印按钮
- 样式：深灰色背景，带打印图标
- 交互：调起浏览器打印功能
- 查询按钮
2. 表格展示区
区域位置：页面中部
区域尺寸：100%宽度，高度自适应
区域功能：展示会诊申请列表数据，支持行内操作
包含元素：
取值于门诊会诊申请单表（ConsultationRequest）和门诊会诊申请单表（ConsultationRequest)
- 数据表格
- 展示方式：11列固定表头表格
- 数据字段：
- ID：文本 - 15 -申请单号
- 急：复选框 - 布尔值 - 示例false – 不可编辑
- 病人姓名：文本 - 朱某某 - 红色高亮
- 会诊时间：日期 - 2026-01-05 15:08
- 申请科室：文本 - 内科
- 邀请对象：文本 - 吴院长
- 申请时间：日期 - 2026-01-05 15:08
- 申请医师：文本 - 演示测试
- 提交：复选框 - 布尔值 - 示例false
- 结束：复选框 - 布尔值 - 示例false
- 操作功能：
- 编辑按钮（✏️）：点击打开编辑弹窗
- 查看按钮（👁️）：点击打开只读弹窗
- 删除按钮（🗑️）：点击确认删除
- 【删除】将状态改为“已取消”
- UPDATE ConsultationRequest
- SET ConsultationStatus = 50,cancelnatureDate = <作废会诊时间>
- WHERE ConsultationID = <会诊申请单ID> and ConsultationStatus <> 40 ;
- 交互行为：
- 行悬停效果：浅蓝色背景
- 复选框点击：即时更新状态（需防抖处理）
3. 底部页码区
区域位置：页面底部
区域尺寸：100%宽度，固定高度56px
区域功能：分页控制和数据统计
包含元素：
- 总数统计：总数统计文本（如：“总数：15”）
- 分页控制器：
- 上一页按钮（<）
- 当前页按钮（1）active状态
- 下一页按钮（>）
- 交互反馈：hover时边框变蓝
4. 会诊申请弹窗（模态框）
触发方式：点击表格行操作列的编辑/查看按钮
区域功能：展示/编辑会诊申请详细信息
包含元素：
- 头部区域
- 标题：“会诊申请单”
- 关闭按钮（×图标）
- 表单区域（分两栏布局）
- 基础信息区：
- 申请单号（只读）
- 申请时间（不可编辑）
- 病人姓名（不可编辑）
- 性别/年龄（不可编辑）
- 就诊卡号（不可编辑）
- 会诊信息区：
- 会诊时间（日期时间选择器）
- 申请医师（不可编辑）
- 紧急程度（复选框）
- 申请科室（不可编辑）
- 门诊诊断（不可编辑）
- 会诊邀请对象
- 会诊确认参加医师
- 所属医生
- 代表科室
- 签名医生
- 签名时间
- 文本域：
- 病史及会诊目的（多行文本）
- 会诊意见（多行文本）
- 基础信息区：
- 底部按钮区：
- 取消按钮（左对齐）
- 保存按钮（右对齐，蓝色）
四、交互功能详细说明
1. 会诊申请编辑功能
功能描述：修改已有会诊申请信息
触发条件：点击表格行中的"✏️"按钮
操作流程：
- 检查会诊状态是否为"结束"，若已结束则提示不可编辑
- 弹出会诊申请编辑弹窗，填充当前行数据的会诊申请和确认相关的数据
- 用户修改表单内容（必填字段校验）
- 点击"保存"按钮提交修改
异常处理：
- 必填字段为空时，标红提示
- 保存失败时显示toast提示"保存失败，请重试"
2. 会诊申请查看功能
功能描述：查看会诊申请详细信息
触发条件：点击表格行中的"👁️"按钮
操作流程：
- 弹出只读弹窗，显示完整申请信息
- 所有字段禁用编辑
- 仅显示"取消"按钮用于关闭弹窗
3. 数据筛选功能
功能描述：多条件组合查询会诊记录
触发条件：点击"查询"按钮
数据过滤逻辑：
- 时间范围：根据选择的时间类型（会诊/申请）进行筛选
- 申请科室/申请医生：支持模糊匹配
- 会诊状态筛选：支持多选逻辑（未提交/提交/结束）
- 收集所有筛选条件值
- 发起异步请求（示例中为前端过滤）
- 更新表格数据展示
异常处理：
- 时间范围不合法：提示"结束时间不能早于开始时间"
- 无查询结果：显示空白表格+提示文字
性能优化：前端本地缓存数据，减少服务器请求
五、数据结构说明
门诊会诊申请单表（ConsultationRequest）和门诊会诊申请单表（ConsultationRequest)
六、开发实现要点
样式规范：
- 主色调：#5D9CEC（按钮/交互元素）
- 辅助色：#8E8E8E（次要按钮）
- 字体规范：14px/1.5（主要内容），16px/1.5（标题）
- 间距系统：16px（元素间距），24px（区块间距）
- 组件样式：
- 按钮：圆角6px，内边距0 16px
- 输入框：1px实线边框#D9D9D9，圆角4px
技术要求：
- 浏览器兼容：支持Chrome/Firefox/Edge最新版
- 性能要求：列表数据筛选响应时间<200ms
注意事项：
- 状态变更逻辑：已结束的记录不可编辑
- 时间字段需要做时区转换处理
- 申请科室/申请医生选择器需要支持拼音首字母检索