## 手术室维护界面PRD文档

### 一、页面概述

**页面名称**：手术室维护界面  
**页面目标**：提供手术室基础数据的维护功能，包括新增、编辑、启用/停用手术室信息，为手术安排提供基础数据支持  
**适用场景**：医院管理员需要新增、修改、启用/停用手术室信息时使用  
**页面类型**：列表页+表单页（含模态框）

**原型图地址：**https://static.pm-ai.cn/prototype/20260104/ee5d222231effefcb39624d1646a2e20/index.html

**核心功能**：

1.  手术室列表展示与查询
2.  新增手术室信息
3.  编辑现有手术室信息
4.  启用/停用手术室状态
5.  数据有效性校验

**用户价值**：

-   管理员可集中管理所有手术室基础信息
-   确保手术安排时能获取准确的手术室数据
-   通过状态管理控制手术室可用性

**流程图：**

![](media/6a369a41c55f8727aa574bf43fa7500b.png)

```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.  性能优化：
    -   表格数据分页加载
    -   模态框使用懒加载