Commit d34a0627 by liangjianmin

refactor(arrivalRegister): 优化数据处理逻辑,提升用户体验

- 改进了数据加载和分页逻辑,确保第一页数据直接赋值,后续使用concat
- 增强了数据重置功能,提升数据管理的清晰性
- 统一了输入逻辑和样式,确保用户交互更加直观
parent c45b3551
Showing with 128 additions and 0 deletions
---
description: 库存复核页面开发规范和数据处理准则
globs: pages/stockRecheck/*.vue
---
# 库存复核页面开发规范
## 页面结构说明
库存复核页面 [pages/stockRecheck/index.vue](mdc:pages/stockRecheck/index.vue) 负责显示待复核的出库单列表,支持筛选、搜索和批量复核操作。
## 数据加载原则
### 核心数据管理
- `list`: 出库单列表数据
- `page`: 当前页码,初始值为1
- `hasMoreData`: 是否还有更多数据,控制分页加载
### 数据刷新策略
**关键原则:利用page状态自然判断是否为首页数据**
```javascript
// ✅ 正确的数据加载逻辑
getData(callback) {
// 第一页直接赋值,分页时使用concat
if (this.page === 1) {
this.list = res.data.list; // 直接赋值,避免重复
} else {
this.list = this.list.concat(res.data.list); // 分页追加
}
}
```
### 数据重置机制
所有需要刷新数据的操作都必须调用 `resetChange()`:
```javascript
resetChange() {
this.filter_id = []; // 清空选中状态
this.list = []; // 清空列表
this.page = 1; // 重置页码
}
```
**必须调用resetChange的场景:**
- 页面显示时 (`onShow`)
- 筛选条件改变 (`checkboxChange`)
- 清空搜索 (`clearInput`)
- 搜索操作 (`handleInput`)
- 复核完成后刷新
## 搜索功能规范
### 双模式搜索
- 模式0:按出库单号精确搜索
- 模式1:全量关键词搜索
### 搜索优化
- 使用debounce防抖,延迟500ms
- 单条结果自动跳转到详情页
- 搜索前必须重置数据状态
## 分页加载规范
### 触底加载
```javascript
onReachBottom() {
if (!this.hasMoreData) return; // 无更多数据时停止
this.page++; // 页码递增
this.getData(); // 追加数据
}
```
### 数据状态管理
- `hasMoreData = false` 时显示"已经到底了"
- 每次API返回空数组时设置 `hasMoreData = false`
## 筛选功能规范
### 状态筛选
支持按出库单状态筛选:
- 5: 全部拣货
- 6: 部分复核
- 7: 全部复核
- 8: 已完成
### 选择筛选
- 使用 `filter_list` 数组记录选中状态
- 使用 `filter_id` 数组存储选中的出库单ID
- 最多支持5条批量操作
## 常见问题防范
### ❌ 避免数据重复
```javascript
// 错误:直接concat会导致数据重复
this.list = this.list.concat(res.data.list);
// 正确:根据page判断操作类型
if (this.page === 1) {
this.list = res.data.list;
} else {
this.list = this.list.concat(res.data.list);
}
```
### ❌ 避免状态混乱
- 任何条件改变都必须先调用 `resetChange()`
- 避免直接操作 `list` 数组,统一通过 `getData()` 处理
## API调用规范
### 请求参数
- `page`: 页码
- `limit`: 每页数量 (固定30)
- `stock_out_status`: 状态筛选,逗号分隔
- `stock_out_sn`: 出库单号搜索
- `search_mod`: 搜索模式 (0/1)
- `search_keyword`: 关键词搜索
### 错误处理
所有API调用都必须包含错误处理,显示错误提示。
## 代码规范要求
- 使用驼峰命名法
- 函数简洁,避免过度嵌套
- 关键逻辑必须添加注释
- 使用 `var` 声明变量,禁止 `const`
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment