his/md/需求/94-手术室维护界面_2026-1-9.md

手术室维护界面PRD文档

一、页面概述

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

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

核心功能：

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

用户价值：

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

流程图：

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