chenqi
a47306825a
- 创建手术室维护界面PRD文档 - 定义页面概述、核心功能和用户价值 - 设计整体布局和页面区域详细描述 - 规范交互功能和数据结构说明 - 说明开发实现要点和注意事项 - 移除中医诊断主诊断功能实现说明文档 - 移除公告通知弹窗功能说明文档 - 移除手术人员字段不显示问题解决方案文档 - 移除手术和麻醉信息Redis缓存实现说明文档 - 移除手术室管理添加类型和所属科室字段说明文档
288 lines
8.5 KiB
Markdown
288 lines
8.5 KiB
Markdown
## 手术室维护界面PRD文档
|
||
|
||
### 一、页面概述
|
||
|
||
**页面名称**：手术室维护界面
|
||
**页面目标**：提供手术室基础数据的维护功能，包括新增、编辑、启用/停用手术室信息，为手术安排提供基础数据支持
|
||
**适用场景**：医院管理员需要新增、修改、启用/停用手术室信息时使用
|
||
**页面类型**：列表页+表单页（含模态框）
|
||
|
||
**原型图地址：**https://static.pm-ai.cn/prototype/20260104/ee5d222231effefcb39624d1646a2e20/index.html
|
||
|
||
**核心功能**：
|
||
|
||
1. 手术室列表展示与查询
|
||
2. 新增手术室信息
|
||
3. 编辑现有手术室信息
|
||
4. 启用/停用手术室状态
|
||
5. 数据有效性校验
|
||
|
||
**用户价值**：
|
||
|
||
- 管理员可集中管理所有手术室基础信息
|
||
- 确保手术安排时能获取准确的手术室数据
|
||
- 通过状态管理控制手术室可用性
|
||
|
||
**流程图：**
|
||
|
||
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A[手术室维护界面] --> B[手术室列表展示]
|
||
|
||
B --> C[新增手术室]
|
||
|
||
B --> D[编辑手术室]
|
||
|
||
B --> E[启用/停用手术室]
|
||
|
||
B --> F[查询手术室]
|
||
|
||
C --> G[点击新增按钮]
|
||
|
||
G --> H[打开新增模态框]
|
||
|
||
H --> I[填写表单字段]
|
||
|
||
I --> J{必填字段校验}
|
||
|
||
J -->|通过| K[提交数据]
|
||
|
||
J -->|不通过| L[提示请填写所有必填项]
|
||
|
||
K --> M[表格新增数据行]
|
||
|
||
D --> N[点击修改按钮]
|
||
|
||
N --> O[打开编辑模态框]
|
||
|
||
O --> P[修改表单字段]
|
||
|
||
P --> Q{必填字段校验}
|
||
|
||
Q -->|通过| R[保存数据]
|
||
|
||
Q -->|不通过| S[提示请填写所有必填项]
|
||
|
||
R --> T[更新表格对应行]
|
||
|
||
E --> U[点击启用/停用按钮]
|
||
|
||
U --> V{二次确认}
|
||
|
||
V -->|确认| W[切换状态标签]
|
||
|
||
V -->|取消| X[取消操作]
|
||
|
||
W --> Y[更新按钮状态]
|
||
|
||
F --> Z[输入查询条件]
|
||
|
||
Z --> AA[筛选表格数据]
|
||
|
||
K --> AB{房间号重复校验}
|
||
|
||
AB -->|不重复| AC[提示房间号已存在]
|
||
|
||
AB -->|重复| AD[更新按钮状态]
|
||
```
|
||
|
||
### 二、整体布局分析
|
||
|
||
**页面宽度**：自适应布局
|
||
**主要区域划分**：
|
||
|
||
1. 页头区域（15%高度）
|
||
2. 表格展示区（85%高度）
|
||
**布局特点**：上下布局，表格采用固定表头+滚动内容区设计
|
||
**响应式要求**：移动端适配时改为纵向堆叠布局，操作按钮组变为纵向排列
|
||
|
||
### 三、页面区域详细描述
|
||
|
||
#### 1. 页头区域
|
||
|
||
**区域位置**：页面顶部
|
||
**区域尺寸**：高度60px，宽度100%
|
||
**区域功能**：展示标题和主要操作入口
|
||
**包含元素**：
|
||
|
||
- **标题文本**
|
||
- 元素类型：H1标题
|
||
- 显示内容："手术室列表"
|
||
- 样式特征：1.75rem/600字重，深灰色(#333)
|
||
- **新增按钮**
|
||
- 元素类型：主要操作按钮
|
||
- 显示内容："新增"（带+图标）
|
||
- 交互行为：点击触发新增模态框
|
||
- 样式特征：蓝色背景(#5a7cff)，白色文字，8px圆角，悬停上浮1px
|
||
|
||
#### 2. 表格展示区（手术室列表表格）
|
||
|
||
**区域位置**：页头下方
|
||
**区域尺寸**：高度自适应，宽度100%
|
||
**区域功能**：展示手术室数据并支持行级操作
|
||
**包含元素**：
|
||
|
||
- **数据表格**
|
||
- 展示方式：固定表头表格
|
||
- 数据字段：
|
||
- 房间号：文本 - OR01 - 不可操作
|
||
- 手术室名称：文本 - 第一手术室 - 不可操作
|
||
- 类型：文本 - 普通/日间/复合 - 不可操作
|
||
- 所属科室：文本 - 外科 - 不可操作
|
||
- 状态：标签 - 有效/无效 - 通过操作按钮切换
|
||
- 操作功能：每行包含"修改"和"状态切换（停用-黄色/启用-绿色）"按钮
|
||
- **表格样式**：
|
||
- 表头：浅灰色背景(#f8f9fa)，大写字母，14px字号
|
||
- 行悬停：浅灰色背景(#f8f9fa)
|
||
- 状态标签：
|
||
- 有效：绿色背景+文字(#28a745)
|
||
- 无效：灰色背景+文字(#6c757d)
|
||
|
||
#### 3. 新增手术室弹窗
|
||
|
||
**区域位置**：页面居中模态弹窗
|
||
**区域功能**：收集新增手术室所需信息
|
||
**包含元素**：
|
||
|
||
- 表单字段：
|
||
1. 房间号输入框
|
||
2. 类型：文本输入
|
||
3. 必填：是
|
||
4. 示例值：OR04
|
||
5. 校验规则：非空校验
|
||
6. 手术室名称输入框
|
||
- 类型：文本输入
|
||
- 必填：是
|
||
- 示例值：第四手术室
|
||
1. 手术室类型下拉框
|
||
- 类型：单选下拉
|
||
- 选项：普通/日间/复合/特殊
|
||
- 默认值：普通
|
||
1. 所属科室下拉框
|
||
- 类型：单选下拉
|
||
- 必填：是
|
||
- 选项：外科/妇产科等8个科室
|
||
- 默认提示："请选择科室"
|
||
- 操作按钮：
|
||
- 取消按钮（灰色边框）
|
||
- 确认按钮（蓝色填充）
|
||
- 校验逻辑：必填字段非空校验
|
||
- 成功反馈：提示"手术室添加成功"
|
||
- 失败反馈：提示"请填写所有必填项"
|
||
|
||
#### 4. 编辑手术室弹窗
|
||
|
||
**区域位置**：页面居中模态弹窗
|
||
**区域功能**：修改现有手术室信息
|
||
**包含元素**：
|
||
|
||
- 表单字段（同新增弹窗，带初始值）
|
||
- 操作按钮：
|
||
- 取消按钮
|
||
- 保存按钮
|
||
- 校验逻辑：同新增弹窗
|
||
- 成功反馈：提示"手术室信息已更新"
|
||
|
||
### 四、交互功能详细说明
|
||
|
||
#### 1. 新增手术室
|
||
|
||
**功能描述**：添加新的手术室记录
|
||
**触发条件**：点击页头"新增"按钮
|
||
**操作流程**：
|
||
|
||
1. 打开新增模态框
|
||
2. 填写必填字段（房间号、名称、科室）
|
||
3. 点击确认提交（插入his_or_room表）
|
||
4. 表格末尾新增数据行
|
||
**异常处理**：
|
||
- 必填项为空时弹出"请填写所有必填项"提示
|
||
- 房间号重复需在后端校验并提示
|
||
|
||
#### 2. 编辑手术室
|
||
|
||
**功能描述**：修改现有手术室信息
|
||
**触发条件**：点击行内"修改"按钮
|
||
**操作流程**：
|
||
|
||
1. 打开编辑模态框（自动填充当前行数据）
|
||
2. 用户修改数据
|
||
3. 点击"保存"时校验并更新对应行数据
|
||
**状态保持**：记录当前编辑行索引确保数据更新准确
|
||
|
||
#### 3. 状态切换
|
||
|
||
**功能描述**：启用/停用手术室
|
||
**触发条件**：点击"停用"或"启用"按钮
|
||
**操作流程**：
|
||
|
||
1. 弹出二次确认对话框
|
||
2. 用户确认后切换状态标签
|
||
3. 按钮变为相反操作（停用↔启用）
|
||
4. 、停用手术室
|
||
- **步骤**：
|
||
1. 查询需要停用的手术室记录。
|
||
2. 将 valid_flag 设置为 0（无效）。
|
||
- **示例**：
|
||
|
||
UPDATE his_or_room
|
||
|
||
SET valid_flag = '0'
|
||
|
||
WHERE room_code = 'OR06';
|
||
|
||
5\. 启用手术室
|
||
|
||
**步骤**：
|
||
|
||
1. 查询需要启用的手术室记录。
|
||
1. 将 valid_flag 设置为 1（有效）。
|
||
- **示例**：
|
||
|
||
UPDATE his_or_room
|
||
|
||
SET valid_flag = '1'
|
||
|
||
WHERE room_code = 'OR06';
|
||
|
||
**防误操作**：所有状态变更需二次确认
|
||
|
||
### 五、数据结构说明（HIS_OR_ROOM手术室字典表）
|
||
|
||
| **字段名称** | **数据类型** | **是否为空** | **说明/典型值** | **外键/来源** |
|
||
|--------------|--------------|--------------|-----------------|-------------------------------|
|
||
| room_id | VARCHAR(10) | N | 主键 | 自增主键 |
|
||
| room_code | VARCHAR(10) | N | 手术室房间号 | 自定义编码，如 OR01、OR02 |
|
||
| room_name | VARCHAR(100) | N | 手术室名称 | 如 "第一手术室"、"第二手术室" |
|
||
| room_type | VARCHAR(10) | N | 手术室类型 | 普通、日间、复合 |
|
||
| dept_code | VARCHAR(10) | N | 所属科室 | FK → 科室管理的科室代码 |
|
||
| valid_flag | CHAR(1) | N | 是否有效 | 1有效，0无效 |
|
||
| created_time | DATETIME | N | 创建时间 | 默认当前时间 |
|
||
| updated_time | DATETIME | N | 更新时间 | 默认当前时间，自动更新 |
|
||
|
||
### 六、开发实现要点
|
||
|
||
**样式规范**：
|
||
|
||
- 主色调：#5a7cff（按钮/交互元素）
|
||
- 辅助色：#7b8a8b（次要文本）
|
||
- 字体：
|
||
- 标题：1.75rem/600字重
|
||
- 正文：0.875rem/400字重
|
||
- 间距系统：
|
||
- 卡片内边距：24px
|
||
- 表单字段间距：16px
|
||
|
||
**技术要求**：
|
||
|
||
**注意事项**：
|
||
|
||
1. 数据安全：
|
||
- 所有变更操作需记录操作日志
|
||
- 停用状态的手术室需在前端标记不可预约
|
||
2. 性能优化：
|
||
- 表格数据分页加载
|
||
- 模态框使用懒加载
|