268 lines
9.8 KiB
Markdown
268 lines
9.8 KiB
Markdown
## 门诊会诊申请管理界面PRD文档
|
||
|
||
### 一、页面概述
|
||
|
||
**页面名称**：门诊会诊申请管理界面
|
||
**页面目标**：提供会诊申请的全流程管理功能，包括申请记录查询、编辑申请、查看详情、状态变更等核心操作
|
||
**适用场景**：门诊医生需要查看会诊申请或管理已有申请记录时使用
|
||
**页面类型**：列表页+表单弹窗复合型页面
|
||
|
||
**核心功能**：
|
||
|
||
1. 多条件组合筛选会诊申请记录
|
||
2. 会诊申请表格展示与操作（编辑/查看/删除）
|
||
3. 会诊申请单的填写与提交
|
||
4. 会诊状态标记（提交/结束）
|
||
**用户价值**：规范会诊申请流程，减少纸质单据流转，提高多科室协作效率
|
||
原型图地址：https://static.pm-ai.cn/prototype/20260116/aed1f102d614677f100c0d1fe3104999/index.html
|
||
**流程图：**
|
||
```mermaid
|
||
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])
|
||
```
|
||
|
||
### 二、整体布局分析
|
||
|
||
**页面宽度**：自适应布局
|
||
**主要区域划分**：
|
||
|
||
1. 顶部筛选区（高度自适应，约80px）
|
||
2. 表格展示区（高度自适应，占主要空间）
|
||
3. 底部页码区（固定高度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. 会诊申请编辑功能
|
||
|
||
**功能描述**：修改已有会诊申请信息
|
||
**触发条件**：点击表格行中的"✏️"按钮
|
||
**操作流程**：
|
||
|
||
1. 检查会诊状态是否为"结束"，若已结束则提示不可编辑
|
||
2. 弹出会诊申请编辑弹窗，填充当前行数据的会诊申请和确认相关的数据
|
||
3. 用户修改表单内容（必填字段校验）
|
||
4. 点击"保存"按钮提交修改
|
||
**异常处理**：
|
||
- 必填字段为空时，标红提示
|
||
- 保存失败时显示toast提示"保存失败，请重试"
|
||
|
||
#### 2. 会诊申请查看功能
|
||
|
||
**功能描述**：查看会诊申请详细信息
|
||
**触发条件**：点击表格行中的"👁️"按钮
|
||
**操作流程**：
|
||
|
||
1. 弹出只读弹窗，显示完整申请信息
|
||
2. 所有字段禁用编辑
|
||
3. 仅显示"取消"按钮用于关闭弹窗
|
||
|
||
#### 3. 数据筛选功能
|
||
|
||
**功能描述**：多条件组合查询会诊记录
|
||
**触发条件**：点击"查询"按钮
|
||
**数据过滤逻辑**：
|
||
|
||
- 时间范围：根据选择的时间类型（会诊/申请）进行筛选
|
||
- 申请科室/申请医生：支持模糊匹配
|
||
- 会诊状态筛选：支持多选逻辑（未提交/提交/结束）
|
||
1. 收集所有筛选条件值
|
||
2. 发起异步请求（示例中为前端过滤）
|
||
3. 更新表格数据展示
|
||
**异常处理**：
|
||
- 时间范围不合法：提示"结束时间不能早于开始时间"
|
||
- 无查询结果：显示空白表格+提示文字
|
||
**性能优化**：前端本地缓存数据，减少服务器请求
|
||
|
||
### 五、数据结构说明
|
||
|
||
门诊会诊申请单表（ConsultationRequest）和门诊会诊申请单表（ConsultationRequest)
|
||
|
||
### 六、开发实现要点
|
||
|
||
**样式规范**：
|
||
|
||
- **主色调**：\#5D9CEC（按钮/交互元素）
|
||
- **辅助色**：\#8E8E8E（次要按钮）
|
||
- **字体规范**：14px/1.5（主要内容），16px/1.5（标题）
|
||
- **间距系统**：16px（元素间距），24px（区块间距）
|
||
- **组件样式**：
|
||
- 按钮：圆角6px，内边距0 16px
|
||
- 输入框：1px实线边框\#D9D9D9，圆角4px
|
||
|
||
**技术要求**：
|
||
|
||
- **浏览器兼容**：支持Chrome/Firefox/Edge最新版
|
||
- **性能要求**：列表数据筛选响应时间\<200ms
|
||
|
||
**注意事项**：
|
||
|
||
1. 状态变更逻辑：已结束的记录不可编辑
|
||
2. 时间字段需要做时区转换处理
|
||
3. 申请科室/申请医生选择器需要支持拼音首字母检索
|