编辑 | blame | 历史 | 原始文档

医院搜索优化说明

需求背景

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

实现方案

前端优化

1. 数据结构调整

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

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

2. 页面加载时获取默认数据

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

3. 加载默认医院列表方法

// 加载默认医院列表（前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）

注意事项

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

测试建议

功能测试

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

性能测试

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

兼容性测试

测试H5端功能是否正常
测试微信小程序端功能是否正常
测试不同网络环境下的加载速度

版本历史

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