医院科室选择功能实现说明

需求背景

在急救转运任务创建页面中，转出医院和转入医院的科室需要改为选择器，从系统字典中加载科室数据，方便用户快速选择常用科室，确保数据规范统一。

实现方案

一、后端配置

1. 数据库字典配置

文件: sql/hospital_department_dict.sql

字典类型配置

INSERT INTO sys_dict_type(dict_name, dict_type, status, create_by, create_time, remark)
VALUES('医院科室', 'hospital_department', '0', 'admin', SYSDATE(), '医院科室列表');

科室字典数据

共配置30个常用科室，包括：

急诊相关（2个）
- 急诊科（默认选项）
- 急救中心

内科系统（8个）
- 心内科
- 呼吸内科
- 消化内科
- 神经内科
- 肾内科
- 内分泌科
- 血液科
- 风湿免疫科

外科系统（6个）
- 普外科
- 骨科
- 神经外科
- 心胸外科
- 泌尿外科
- 烧伤科

专科（14个）
- ICU（重症监护室）
- CCU（冠心病监护病房）
- 肿瘤科
- 感染科
- 儿科
- 妇产科
- 眼科
- 耳鼻喉科
- 口腔科
- 皮肤科
- 康复科
- 中医科
- 精神科
- 其他科室

字典数据示例

-- 急诊科（默认选项）
INSERT INTO sys_dict_data(dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time, remark)
VALUES(1, '急诊科', '急诊科', 'hospital_department', '', 'danger', 'Y', '0', 'admin', SYSDATE(), '急诊科室');

-- 心内科
INSERT INTO sys_dict_data(dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time, remark)
VALUES(3, '心内科', '心内科', 'hospital_department', '', 'primary', 'N', '0', 'admin', SYSDATE(), '心血管内科');

颜色标识说明

danger（红色）：急诊相关科室
primary（蓝色）：内科系统
success（绿色）：外科系统
warning（橙色）：重症监护
info（灰色）：其他专科
default（默认）：其他科室

2. 执行SQL脚本

-- 在MySQL中执行
source sql/hospital_department_dict.sql;

-- 或直接执行
mysql -u root -p database_name < sql/hospital_department_dict.sql

二、前端实现

1. API接口调用

文件: app/pages/task/create-emergency.vue

导入字典API

import { getDicts } from "@/api/dict"

数据字段定义

data() {
  return {
    // ... 其他字段
    departmentOptions: [], // 科室字典数据
  }
}

2. 加载科室字典数据

页面加载时调用

onLoad(options) {
  // ... 其他初始化代码
  // 加载科室字典数据
  this.loadDepartments()
}

加载方法实现

// 加载科室字典数据
loadDepartments() {
  getDicts('hospital_department').then(response => {
    this.departmentOptions = response.data || []
  }).catch(error => {
    console.error('加载科室字典失败:', error)
    this.departmentOptions = []
  })
}

3. 模板选择器实现

转出医院科室选择器

<view class="form-item">
  <view class="form-label">科室</view>
  <picker mode="selector" :range="departmentOptions" range-key="dictLabel" @change="onHospitalOutDepartmentChange">
    <view class="form-input picker-input">
      {{ taskForm.hospitalOut.department || '请选择科室' }}
      <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
    </view>
  </picker>
</view>

转入医院科室选择器

<view class="form-item">
  <view class="form-label">科室</view>
  <picker mode="selector" :range="departmentOptions" range-key="dictLabel" @change="onHospitalInDepartmentChange">
    <view class="form-input picker-input">
      {{ taskForm.hospitalIn.department || '请选择科室' }}
      <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
    </view>
  </picker>
</view>

4. 选择事件处理

转出医院科室选择

// 转出医院科室选择
onHospitalOutDepartmentChange(e) {
  const index = e.detail.value
  this.taskForm.hospitalOut.department = this.departmentOptions[index].dictValue
}

转入医院科室选择

// 转入医院科室选择
onHospitalInDepartmentChange(e) {
  const index = e.detail.value
  this.taskForm.hospitalIn.department = this.departmentOptions[index].dictValue
}

三、数据流程

1. 页面初始化流程

页面加载 (onLoad)
    ↓
调用 loadDepartments()
    ↓
请求后端 getDicts('hospital_department')
    ↓
获取科室字典数据
    ↓
保存到 departmentOptions
    ↓
选择器显示科室列表

2. 用户选择流程

用户点击科室选择器
    ↓
显示科室列表（30个选项）
    ↓
用户选择某个科室
    ↓
触发 @change 事件
    ↓
调用 onHospitalOutDepartmentChange 或 onHospitalInDepartmentChange
    ↓
根据索引获取科室的 dictValue
    ↓
更新 taskForm.hospitalOut.department 或 taskForm.hospitalIn.department
    ↓
选择器显示已选科室名称

3. 数据提交流程

用户点击保存按钮
    ↓
收集表单数据（包括科室）
    ↓
调用 submitTask()
    ↓
构建提交数据 buildSubmitData()
    ↓
提交到后端 addTask()
    ↓
保存到 sys_task_emergency 表

技术特点

1. 选择器配置

mode="selector"：单选模式
:range="departmentOptions"：数据源绑定
range-key="dictLabel"：显示字段为 dictLabel
@change：选择事件绑定

2. 数据格式

字典数据返回格式：
javascript [ { dictCode: 1, dictSort: 1, dictLabel: "急诊科", dictValue: "急诊科", dictType: "hospital_department", cssClass: "", listClass: "danger", isDefault: "Y", status: "0" }, // ... 更多科室 ]

3. 显示与存储

显示：dictLabel（例如：急诊科）
存储：dictValue（例如：急诊科）
排序：按 dictSort 字段排序

优化效果

1. 数据规范化

✅ 统一科室名称，避免手工输入错误
✅ 标准化科室数据，便于统计分析
✅ 可在后台管理系统中维护科室列表

2. 用户体验优化

✅ 点击即选，无需手动输入
✅ 常用科室一目了然
✅ 减少输入错误和时间

3. 系统维护

✅ 集中管理科室数据
✅ 新增科室只需在后台字典中配置
✅ 支持启用/禁用某些科室

后台管理

字典管理路径

系统管理 > 字典管理 > 数据字典

操作步骤

查看字典类型

字典名称：医院科室
字典类型：hospital_department

查看/编辑字典数据

点击字典类型后的"字典配置"按钮
可以查看所有科室列表
可以新增、修改、删除科室

新增科室

点击"新增"按钮
填写字典标签（显示名称）
填写字典键值（存储值）
设置排序号
选择列表样式（颜色）
保存

修改科室

点击科室后的"修改"按钮
修改相关信息
保存

禁用科室

点击科室后的"状态"开关
禁用后前端不会显示该科室

扩展建议

1. 科室分类

可以考虑增加科室分类字典，实现二级联动：
一级：内科/外科/专科二级：具体科室

2. 医院-科室关联

可以关联医院和科室，不同医院显示不同的科室列表。

3. 常用科室

可以记录用户常用科室，优先显示在列表顶部。

4. 搜索功能

科室较多时，可以添加搜索功能快速定位。

注意事项

字典类型名称：必须使用 hospital_department，与代码中保持一致
数据同步：修改字典后，前端可能需要刷新页面或重新加载
兼容性：确保所有科室名称在数据库中正常显示（注意编码问题）
默认值：is_default='Y' 的科室会作为默认选项（目前是急诊科）

测试建议

功能测试

页面加载后，点击科室选择器，应显示所有科室列表
选择科室后，选择器应显示所选科室名称
提交任务后，科室信息应正确保存到数据库
在后台字典管理中修改科室，前端应能正确加载

数据测试

测试所有30个科室是否都能正常选择
测试科室数据是否按排序号正确排列
测试禁用某个科室后，前端是否不显示

兼容性测试

测试H5端选择器功能是否正常
测试微信小程序端选择器功能是否正常
测试不同手机系统的显示效果

版本历史

v1.0 (2025-10-19): 初始版本，实现科室选择功能
创建科室字典数据（30个常用科室）
前端改为选择器模式
支持转出/转入医院科室选择