From de105adbdc7eaec107a440a6fc4727717dcc51c0 Mon Sep 17 00:00:00 2001 From: chenxianjing Date: Mon, 19 Jan 2026 11:28:29 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?= =?UTF-8?q?=20md/=E9=9C=80=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- md/需求/97-门诊会诊申请管理界面_2026-1-19.md | 267 +++++++++++++++++++ 1 file changed, 267 insertions(+) create mode 100644 md/需求/97-门诊会诊申请管理界面_2026-1-19.md diff --git a/md/需求/97-门诊会诊申请管理界面_2026-1-19.md b/md/需求/97-门诊会诊申请管理界面_2026-1-19.md new file mode 100644 index 00000000..02afb1cf --- /dev/null +++ b/md/需求/97-门诊会诊申请管理界面_2026-1-19.md @@ -0,0 +1,267 @@ +## 门诊会诊申请管理界面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. 申请科室/申请医生选择器需要支持拼音首字母检索