---
date: 2026-05-07
type: frontend-bug
module: hl-ui-list-component
priority: medium
notify: ["@mmg"]
status: pending
source: 测试用例汇总.xlsx (2026-05-07)
related_cases: [JQ-016, CT-005, ZH-005, YW-003, JD-003, EW-003, DD-006, TK-004]
---

# 列表组件重置按钮需点两次（多模块共性 BUG）

## 现象

测试报告里多个列表页（资源全模块 / 订单 / 退款）反复出现一致描述：

> "条件清空，但未显示全部数据，还需要再次点击重置按钮"

复现的列表页（已确认 8 处）：

| 模块 | 用例编号 |
|------|---------|
| 景区 | JQ-016 |
| 餐厅 | CT-005 |
| 组合备品 | ZH-005 |
| 物业 | YW-003 |
| 酒店 | JD-003 |
| 额外成本 | EW-003 |
| 订单 | DD-006 |
| 退款 | TK-004 |

8 个列表页都中招 → 共性问题，**应该在 hl-ui 通用列表组件 / 公共 reset 方法里**。

## 推断根因

**第一次点重置**：
- 清空筛选表单的 v-model（`queryParams = {}`）
- ❌ 但**没有触发 `fetchList()` 重新请求**
- 结果：表单看起来重置了，但列表展示的还是上一次筛选后的数据

**第二次点重置**：
- 重置（已经是空表单了）
- 触发 `fetchList()` → 拿到全量数据 → 列表更新

## 修复方向（前端）

### 错误写法 ❌

```js
// 假设当前实现类似：
function resetQuery() {
  queryParams.value = {}
  // 漏了！没调 fetchList
}
```

或者：

```js
// 重置和搜索分开两个按钮，重置只清空不搜索
<el-button @click="resetForm">重置</el-button>
<el-button @click="handleQuery">搜索</el-button>

function resetForm() {
  // 只 reset 表单，不调列表
  proxy.$refs.queryRef.resetFields()
}
```

### 正确写法 ✅

```js
function handleResetQuery() {
  // 1. 清空表单（含 dataRange 数组）
  proxy.$refs.queryRef.resetFields()
  queryParams.value.pageNum = 1
  // 2. 立即触发列表刷新（不要让用户再点一次）
  fetchList()
}
```

或者用一个公共组合式函数 `useListQuery()` 统一封装重置 + 自动刷新。

## 影响

- 不阻断业务，但是用户体验问题，所有 list 页面都有
- 测试反复反馈 → 应作为通用列表组件 P2 修

## 后端配合

无需后端配合，纯前端逻辑问题。

## 验收

- [ ] 在任意一个列表页点重置按钮 → 一次就能看到全量数据
- [ ] 抽测 8 个用例编号对应的列表页全部修复
- [ ] 抽测其他列表页（产品/资源剩余模块/小程序配置）确认无遗漏

## 不要建工单

按 wx 项目规则：前端 BUG/feature 都走 changelog 通知 mmg，**不在 wx/HL 或 wx/hl-ui 建工单**。
