Commit 0509e9e4 by liangjianmin

add

parent ab3efca0
---
description: 到货登记页面开发规范和组件结构说明
globs: pages/arrivalRegister/index.vue
---
# 到货登记页面 (pages/arrivalRegister/index.vue) 开发规范
## 页面功能概述
到货登记页面主要处理入库单的登记和管理,包含三个主要弹窗:
1. **入库单详情弹窗** (ref="showRight")
2. **无单号登记弹窗** (ref="showRightAdd")
3. **自营商品到货登记弹窗** (ref="showRightZyGoodsDat")
## 关键组件结构
### 自营商品到货登记弹窗 (showRightZyGoodsDat)
- **用途**: 处理深圳自营商品的第一次入库登记
- **数据源**: `zyGoodsData` 和 `saveZyGoodsParams`
- **轮播组件**: 使用 swiper 组件逐个处理商品信息
### 重要字段说明
#### 尺寸相关字段 (已修改为独立显示)
```javascript
// 标准包装尺寸 - 必填
standard_length // 标准包装长
standard_width // 标准包装宽
standard_high // 标准包装高
// 单位尺寸 - 必填
unit_length // 单位长
unit_width // 单位宽
unit_high // 单位高
```
#### 重量相关字段 (仍使用picker切换)
```javascript
// 净重 - 通过 netWeightIndex 切换
standard_net_weight // 标准包装净重
unit_net_weight // 单位净重
// 毛重 - 通过 grossWeightIndex 切换
standard_gross_weight // 标准包装毛重
unit_gross_weight // 单位毛重
```
## 验证规则
### 必填字段验证 (saveZyGoodsDataSubmit 方法)
1. **标准包装量** (`mpq`) - 必填
2. **包装方式为编带时的尺寸字段** - 6个字段全部必填:
- `standard_length`, `standard_width`, `standard_high`
- `unit_length`, `unit_width`, `unit_high`
### 验证逻辑示例
```javascript
// 检查包装方式为编带(packing === 5)时的必填字段
var hasError = this.saveZyGoodsParams.filter(item => item.packing === 5).some(({
standard_length, standard_width, standard_high,
unit_length, unit_width, unit_high
}, index) => {
// 分别验证6个尺寸字段
});
```
## Picker 处理器 (bindPickerZYChange)
### Case 映射关系
- **Case 1**: 包装方式选择
- **Case 2**: 拣货方式选择
- **Case 5**: 净重类型切换 (标准/单位)
- **Case 6**: 净重单位选择 (kg/g)
- **Case 7**: 毛重类型切换 (标准/单位)
- **Case 8**: 毛重单位选择 (kg/g)
- **Case 9**: 其他属性选择
**注意**: Case 3 (标准包装长宽高切换) 已移除,因为现在6个尺寸字段独立显示
## 修改注意事项
### 1. 尺寸字段修改
- 标准包装长宽高和单位长宽高现在**同时显示**
- 不再通过picker切换,直接独立输入
- 所有6个字段都标记为必填 (`required` 样式)
### 2. 验证逻辑修改
- 修改 `saveZyGoodsDataSubmit` 验证时需要检查全部6个尺寸字段
- 每个字段提供具体的错误提示信息
### 3. 数据结构保持
- `saveZyGoodsParams` 数组结构保持不变
- 字段名称保持原有命名规范
### 4. 样式类名规范
```css
.uni-swiper-input-multipl // 多输入字段容器
.label.required // 必填字段标签
.multipl-input // 多输入框容器
.timesSymbol // 乘号分隔符 ✖
.unit // 单位显示 (cm)
```
## API 调用
- `saveZyGoodsData`: 保存自营商品数据
- `addStockInRegister`: 添加入库登记
- `getZyGoodsData`: 获取自营商品数据
## 代码规范
- 使用 `var` 声明变量
- 使用箭头函数和ES6+特性
- 每个逻辑块添加简洁注释
- 遵循驼峰命名法
\ No newline at end of file
---
alwaysApply: true
---
# 代码风格规则
## 命名规范
- 使用驼峰命名法,命名清晰有意义
---
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
# Vue文件规则
## 文件结构
- Vue文件应当按照template、script、style的顺序组织
- 组件名应当使用多个单词组成,避免与HTML元素冲突
- 组件的props应该尽可能详细地定义
## 模板规范
- v-for必须配合key使用
- 避免v-if和v-for一起使用
- 组件模板应该是简单的表达式,复杂的逻辑应当使用计算属性或方法
## 脚本规范
- 组件的data必须是一个函数
- 使用ES6+特性编写代码
- 所有变量声明一律使用`var`,禁止使用`const`
- 每个方法必须附带简洁的注释,解释其目的或关键行为
## 样式规范
- 为组件样式设置作用域,避免样式污染
- 使用SCSS预处理器时,合理组织嵌套结构,避免过深嵌套
description:
globs:
alwaysApply: false
---
......@@ -6,3 +6,4 @@
/node_modules
-/node_modules
-/.cursor
/.cursor
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