# 医院搜索优化说明

## 需求背景

在急救转运任务创建页面中，医院选择功能需要优化用户体验：
1. 初始状态下显示前100条医院数据，方便用户快速选择常用医院
2. 只有在用户输入搜索关键词后才去服务端搜索，减少不必要的请求

## 实现方案

### 前端优化

#### 1. 数据结构调整
**文件**: `app/pages/task/create-emergency.vue`

新增数据字段：
```javascript
data() {
  return {
    // ... 其他字段
    defaultHospitals: [], // 默认的100条医院数据
  }
}
```

#### 2. 页面加载时获取默认数据
在 `onLoad` 生命周期中调用：
```javascript
onLoad(options) {
  // ... 其他初始化代码
  // 加载默认医院列表（前100条）
  this.loadDefaultHospitals()
}
```

#### 3. 加载默认医院列表方法
```javascript
// 加载默认医院列表（前100条）
loadDefaultHospitals() {
  // 传入空字符串获取前100条
  searchHospitals('').then(response => {
    this.defaultHospitals = response.data || []
    // 同时初始化两个搜索结果为默认数据
    this.hospitalOutResults = [...this.defaultHospitals]
    this.hospitalInResults = [...this.defaultHospitals]
  }).catch(error => {
    console.error('加载默认医院列表失败:', error)
    this.defaultHospitals = []
  })
}
```

#### 4. 输入框获得焦点时显示默认数据

**转出医院：**
```javascript
// 转出医院输入框获得焦点
onHospitalOutFocus() {
  // 如果没有搜索关键词，显示默认的100条数据
  if (!this.hospitalOutSearchKeyword || this.hospitalOutSearchKeyword.trim() === '') {
    this.hospitalOutResults = [...this.defaultHospitals]
  }
  this.showHospitalOutResults = true
}
```

**转入医院：**
```javascript
// 转入医院输入框获得焦点
onHospitalInFocus() {
  // 如果没有搜索关键词，显示默认的100条数据
  if (!this.hospitalInSearchKeyword || this.hospitalInSearchKeyword.trim() === '') {
    this.hospitalInResults = [...this.defaultHospitals]
  }
  this.showHospitalInResults = true
}
```

#### 5. 搜索逻辑优化

**转出医院搜索：**
```javascript
// 转出医院搜索
onHospitalOutSearch(e) {
  const keyword = e.detail.value
  this.hospitalOutSearchKeyword = keyword
  
  // 防抖处理
  if (this.searchTimer) {
    clearTimeout(this.searchTimer)
  }
  
  // 如果关键词为空，显示默认100条
  if (!keyword || keyword.trim() === '') {
    this.hospitalOutResults = [...this.defaultHospitals]
    this.showHospitalOutResults = true
    return
  }
  
  // 有关键词时，去服务端搜索
  this.searchTimer = setTimeout(() => {
    this.searchHospitalOut(keyword)
  }, 300)
}
```

**转入医院搜索：**
```javascript
// 转入医院搜索
onHospitalInSearch(e) {
  const keyword = e.detail.value
  this.hospitalInSearchKeyword = keyword
  
  // 防抖处理
  if (this.searchTimer) {
    clearTimeout(this.searchTimer)
  }
  
  // 如果关键词为空，显示默认100条
  if (!keyword || keyword.trim() === '') {
    this.hospitalInResults = [...this.defaultHospitals]
    this.showHospitalInResults = true
    return
  }
  
  // 有关键词时，去服务端搜索
  this.searchTimer = setTimeout(() => {
    this.searchHospitalIn(keyword)
  }, 300)
}
```

#### 6. 模板绑定焦点事件

**转出医院输入框：**
```html
<input 
  class="form-input" 
  placeholder="请输入医院名称或地址搜索" 
  v-model="hospitalOutSearchKeyword"
  @input="onHospitalOutSearch"
  @focus="onHospitalOutFocus"
/>
```

**转入医院输入框：**
```html
<input 
  class="form-input" 
  placeholder="请输入医院名称或地址搜索" 
  v-model="hospitalInSearchKeyword"
  @input="onHospitalInSearch"
  @focus="onHospitalInFocus"
/>
```

### 后端优化

#### 修改SQL查询返回条数
**文件**: `ruoyi-system/src/main/resources/mapper/system/HospDataMapper.xml`

将 `TOP 50` 修改为 `TOP 100`：
```xml
<select id="searchHospitals" parameterType="String" resultMap="HospDataResult">
    SELECT TOP 100
        HospID, HospName, HospCityID, HospShort, 
        HopsProvince, HopsCity, HopsArea, HospAddress, 
        HospTEL, HospUnitID, HospState, HospOAID, 
        HospIntroducerID, HospIntroducerDate, HospLevel
    FROM HospData
    WHERE 1=1
    <if test="keyword != null and keyword != ''">
        AND (HospName LIKE '%' + #{keyword} + '%' 
             OR HospAddress LIKE '%' + #{keyword} + '%'
             OR HospShort LIKE '%' + #{keyword} + '%')
    </if>
    AND (HospState IS NULL OR HospState = 1)
    ORDER BY HospName
</select>
```

## 功能流程

### 1. 页面初始化流程
```
页面加载 (onLoad)
    ↓
调用 loadDefaultHospitals()
    ↓
请求后端 searchHospitals('')
    ↓
获取前100条医院数据
    ↓
保存到 defaultHospitals
    ↓
同时初始化 hospitalOutResults 和 hospitalInResults
```

### 2. 用户点击输入框流程
```
用户点击输入框
    ↓
触发 @focus 事件
    ↓
调用 onHospitalOutFocus 或 onHospitalInFocus
    ↓
检查是否有搜索关键词
    ↓
【无关键词】显示默认100条数据
【有关键词】保持当前搜索结果
    ↓
显示下拉列表
```

### 3. 用户输入搜索流程
```
用户输入关键词
    ↓
触发 @input 事件
    ↓
调用 onHospitalOutSearch 或 onHospitalInSearch
    ↓
【关键词为空】显示默认100条数据
【关键词不为空】防抖300ms后请求服务端搜索
    ↓
更新搜索结果列表
    ↓
显示下拉列表
```

## 优化效果

### 1. 性能优化
- ✅ 减少服务端请求：初始状态不需要搜索，只需加载一次默认数据
- ✅ 防抖优化：用户输入时300ms防抖，避免频繁请求
- ✅ 本地缓存：默认数据缓存在前端，重复点击输入框无需请求

### 2. 用户体验优化
- ✅ 快速选择：点击输入框立即显示100条常用医院
- ✅ 精准搜索：输入关键词后实时搜索，支持医院名称、地址、简称
- ✅ 流畅交互：无需等待，点击即显示

### 3. 数据优化
- ✅ 数据量合理：100条数据既能满足常用选择，又不会过多影响性能
- ✅ 自动排序：按医院名称排序，便于查找
- ✅ 状态过滤：只显示有效状态的医院（HospState为NULL或1）

## 注意事项

1. **数据源切换**：HospDataMapper 使用 `@DataSource(DataSourceType.SQLSERVER)` 注解，查询SQL Server数据库
2. **SQL语法**：使用SQL Server语法 `TOP 100` 和 `LIKE '%' + #{keyword} + '%'`
3. **空关键词处理**：后端支持空关键词查询，返回前100条数据
4. **数组拷贝**：使用 `[...this.defaultHospitals]` 进行数组拷贝，避免引用问题

## 测试建议

### 功能测试
1. 页面加载后，点击医院输入框，应显示100条医院数据
2. 输入关键词，应根据关键词实时搜索并显示结果
3. 清空关键词，应恢复显示100条默认数据
4. 选择医院后，应自动填充医院名称和地址

### 性能测试
1. 观察页面加载时是否只请求一次默认数据
2. 观察输入时是否有防抖效果（快速输入不应频繁请求）
3. 观察点击输入框时是否复用缓存数据

### 兼容性测试
1. 测试H5端功能是否正常
2. 测试微信小程序端功能是否正常
3. 测试不同网络环境下的加载速度

## 相关文件

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

### 后端文件
- `ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/HospDataController.java` - 医院控制器
- `ruoyi-system/src/main/java/com/ruoyi/system/mapper/HospDataMapper.java` - 医院Mapper接口
- `ruoyi-system/src/main/resources/mapper/system/HospDataMapper.xml` - 医院Mapper XML
- `ruoyi-system/src/main/java/com/ruoyi/system/domain/HospData.java` - 医院实体类

## 版本历史

- **v1.0** (2025-10-19): 初始版本，实现医院搜索优化功能