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

## 需求背景

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

## 实现方案

### 一、后端配置

#### 1. 数据库字典配置
**文件**: `sql/hospital_department_dict.sql`

##### 字典类型配置
```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（冠心病监护病房）
- 肿瘤科
- 感染科
- 儿科
- 妇产科
- 眼科
- 耳鼻喉科
- 口腔科
- 皮肤科
- 康复科
- 中医科
- 精神科
- 其他科室

##### 字典数据示例
```sql
-- 急诊科（默认选项）
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脚本
```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
```javascript
import { getDicts } from "@/api/dict"
```

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

#### 2. 加载科室字典数据

##### 页面加载时调用
```javascript
onLoad(options) {
  // ... 其他初始化代码
  // 加载科室字典数据
  this.loadDepartments()
}
```

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

#### 3. 模板选择器实现

##### 转出医院科室选择器
```html
<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>
```

##### 转入医院科室选择器
```html
<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. 选择事件处理

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

##### 转入医院科室选择
```javascript
// 转入医院科室选择
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. 系统维护
- ✅ 集中管理科室数据
- ✅ 新增科室只需在后台字典中配置
- ✅ 支持启用/禁用某些科室

## 后台管理

### 字典管理路径
```
系统管理 > 字典管理 > 数据字典
```

### 操作步骤

1. **查看字典类型**
   - 字典名称：医院科室
   - 字典类型：hospital_department

2. **查看/编辑字典数据**
   - 点击字典类型后的"字典配置"按钮
   - 可以查看所有科室列表
   - 可以新增、修改、删除科室

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

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

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

## 扩展建议

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

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

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

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

## 注意事项

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

## 测试建议

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

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

### 兼容性测试
1. 测试H5端选择器功能是否正常
2. 测试微信小程序端选择器功能是否正常
3. 测试不同手机系统的显示效果

## 相关文件

### 后端文件
- `sql/hospital_department_dict.sql` - 科室字典SQL脚本

### 前端文件
- `app/pages/task/create-emergency.vue` - 急救转运任务创建页面
- `app/api/dict.js` - 字典API接口

### 数据库表
- `sys_dict_type` - 字典类型表
- `sys_dict_data` - 字典数据表

## 版本历史

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