263 lines
8.3 KiB
Markdown
263 lines
8.3 KiB
Markdown
# CLAUDE.md
|
||
|
||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
||
## 项目概述
|
||
|
||
这是宝应梦阳WMS前端项目（TP托盘库版本），基于Vue 3和Element Plus开发的现代化Web管理界面，专门用于托盘库存储场景的仓库管理系统操作和监控。
|
||
|
||
## 项目特点
|
||
|
||
**TP托盘库版本特性**
|
||
- 专为托盘存储场景设计的UI界面
|
||
- 支持大型货物的托盘化存储管理操作
|
||
- 与BOX料箱库版本在业务功能上有所差异
|
||
- 针对托盘库的专用业务流程和界面优化
|
||
|
||
## 开发环境设置
|
||
|
||
### 基本命令
|
||
```bash
|
||
# 进入项目目录
|
||
cd 202504-Wms-MengYang-tp/wms_web_mengyang
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run serve
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 代码检查和修复
|
||
npm run lint
|
||
```
|
||
|
||
### 开发配置
|
||
- **开发端口**：12306
|
||
- **路由模式**：Hash路由 (`createWebHashHistory`)
|
||
- **默认路由**：登录页面 (`/`) -> 主页 (`/home`) -> 库存页面 (`/stock`)
|
||
- **代理配置**：Microsoft OAuth认证代理
|
||
|
||
### 与BOX版本的区别
|
||
- 项目结构和技术栈基本相同
|
||
- **主要差异在业务逻辑**：托盘存储相关的界面和交互
|
||
- **后端API对接**：调用TP版本后端的专用接口
|
||
- **数据展示**：针对托盘库的数据字段和格式
|
||
|
||
## 技术栈
|
||
|
||
### 核心框架
|
||
- **Vue 3.2.13** - 前端框架（Composition API）
|
||
- **Vue Router 4.0.3** - 路由管理
|
||
- **Vuex 4.0.0** - 状态管理
|
||
- **Element Plus 2.4.0** - UI组件库
|
||
|
||
### 主要依赖
|
||
- **Axios 1.3.3** - HTTP请求库
|
||
- **Moment 2.29.4** - 日期处理
|
||
- **XLSX 0.18.5** - Excel文件处理
|
||
- **QRCode.vue 3.4.1** - 二维码生成
|
||
- **Vue3-print-nb 0.1.4** - 打印功能
|
||
- **File-saver 2.0.5** - 文件下载
|
||
|
||
### 开发工具
|
||
- **Sass 1.83.4** - CSS预处理器
|
||
- **Vue CLI 5.0** - 构建工具
|
||
- **ESLint** - 代码质量检查（已关闭未使用变量警告）
|
||
|
||
## 项目架构
|
||
|
||
### 目录结构
|
||
```
|
||
src/
|
||
├── api/ # API接口封装（托盘库专用接口）
|
||
├── assets/ # 静态资源
|
||
├── components/ # 可复用组件
|
||
├── constant/ # 常量配置（托盘库相关常量）
|
||
├── excel/ # Excel上传组件（托盘库数据）
|
||
├── http/ # HTTP请求配置
|
||
├── layout/ # 业务页面组件（托盘库业务界面）
|
||
├── print/ # 打印相关组件
|
||
├── router/ # 路由配置
|
||
├── store/ # Vuex状态管理
|
||
├── styles/ # 全局样式
|
||
├── utils/ # 工具函数
|
||
└── views/ # 主要视图组件
|
||
```
|
||
|
||
### 核心业务模块（托盘库专用）
|
||
|
||
#### 1. 托盘仓库作业 (`layout/`)
|
||
**库存管理**
|
||
- `stock.vue` - 托盘库存查询和管理
|
||
- `inventory.vue` - 托盘库存盘点
|
||
- `inventoryRecord.vue` - 盘点记录
|
||
|
||
**入出库作业**
|
||
- `goodsIn.vue` - 托盘入库作业界面
|
||
- `goodsOut.vue` - 托盘出库作业界面
|
||
- `orderIn.vue` - 托盘入库单管理
|
||
- `orderOut.vue` - 托盘出库单管理
|
||
|
||
**任务监控**
|
||
- `taskMonitor.vue` - 托盘任务执行监控
|
||
- `pickTaskMonitor.vue` - 托盘拣选任务监控
|
||
- `inTaskRecord.vue` - 入库任务记录
|
||
- `outTaskRecord.vue` - 出库任务记录
|
||
|
||
#### 2. 托盘基础数据管理
|
||
- `goods.vue` - 托盘物料信息管理
|
||
- `locationsTable.vue` - 托盘库位信息管理
|
||
- `standSettings.vue` - 托盘站台（库口）设置
|
||
- `vehicle.vue` - 托盘载具监控
|
||
|
||
#### 3. 托盘配料系统
|
||
- `kitting.vue` - 托盘配料作业
|
||
- `kittingList.vue` - 托盘配料单管理
|
||
- `kittingRelation.vue` - 托盘配料关系配置
|
||
- `clcKanban.vue` - 托盘需求看板
|
||
|
||
#### 4. 系统管理
|
||
- `wmsConfigNew.vue` - 托盘库系统配置
|
||
- `role_user.vue` - 用户角色管理
|
||
- `role_permission.vue` - 权限管理
|
||
- `wmsLog.vue` - 系统日志
|
||
|
||
### API接口模块 (`api/`)
|
||
|
||
**托盘库核心业务接口**
|
||
- `goods.js` - 托盘物料信息API
|
||
- `stock.js` - 托盘库存相关API
|
||
- `task.js` - 托盘任务管理API
|
||
- `location.js` - 托盘库位管理API
|
||
|
||
**托盘作业流程接口**
|
||
- `orderIn.js` - 托盘入库订单API
|
||
- `orderOut.js` - 托盘出库订单API
|
||
- `kateWork.js` - 托盘配料作业API
|
||
|
||
**系统功能接口**
|
||
- `login.js` - 登录认证API
|
||
- `user.js` - 用户管理API
|
||
- `config.js` - 托盘库系统配置API
|
||
- `excel.js` - 托盘库Excel处理API
|
||
|
||
### 公共组件 (`components/`)
|
||
- `sideMenu.vue` - 侧边菜单导航（托盘库功能菜单）
|
||
- `appTag.vue` - 标签页管理
|
||
|
||
### 工具模块 (`utils/`)
|
||
- `dateUtils.js` - 日期处理工具
|
||
- `formatter.js` - 数据格式化（托盘库数据格式）
|
||
- `hashUtils.js` - 哈希计算
|
||
- `stringUtils.js` - 字符串处理
|
||
- `loading.js` - 加载状态管理
|
||
- `myMessageBox.js` - 消息提示封装
|
||
|
||
## 托盘库特色功能
|
||
|
||
### 托盘存储特点
|
||
- **大型货物管理**：支持重型和大尺寸货物的界面展示
|
||
- **托盘堆叠显示**：可视化托盘堆叠状态和高度限制
|
||
- **存取路径优化**：界面显示最优存取路径建议
|
||
- **托盘载具追踪**：实时显示托盘在系统中的位置
|
||
|
||
### 与BOX版本的界面差异
|
||
1. **数据字段不同**：托盘尺寸、重量、堆叠层数等专用字段
|
||
2. **操作流程优化**：针对托盘存储的特殊操作步骤
|
||
3. **监控界面**：托盘堆垛机状态、托盘载具位置等专用监控
|
||
4. **报表格式**：托盘库专用的统计和报表格式
|
||
|
||
## 开发注意事项
|
||
|
||
### 路由配置
|
||
- 使用Hash路由模式，兼容性更好
|
||
- 实现了路由守卫，未登录用户自动跳转登录页
|
||
- 登录状态通过`sessionStorage`中的`user`字段判断
|
||
|
||
### 状态管理
|
||
- 使用Vuex进行全局状态管理
|
||
- 主要管理用户信息、菜单权限、标签页状态
|
||
- **托盘库专用状态**：托盘载具状态、堆垛机状态等
|
||
|
||
### HTTP请求
|
||
- 统一使用Axios进行API调用
|
||
- 请求封装在`/http/request.js`中
|
||
- API接口按托盘库业务模块分类组织
|
||
- **注意**：对接TP版本后端API（端口12315）
|
||
|
||
### Excel处理（托盘库数据）
|
||
- 支持托盘库专用Excel模板的上传和解析
|
||
- 专门的Excel上传组件位于`excel/`目录
|
||
- 支持托盘物料、库存、任务等数据的Excel导入导出
|
||
|
||
### 打印功能
|
||
- 使用`vue3-print-nb`实现打印功能
|
||
- 打印组件位于`print/`目录
|
||
- **托盘库专用**：托盘标签、任务单等打印格式
|
||
|
||
### 样式规范
|
||
- 使用Sass预处理器
|
||
- 全局样式文件：`styles/index.scss`
|
||
- 响应式设计，支持不同屏幕尺寸
|
||
- **托盘库界面优化**：适配托盘库的数据展示需求
|
||
|
||
## 常见开发任务
|
||
|
||
### 添加托盘库新页面
|
||
1. 在`layout/`目录创建Vue组件
|
||
2. 在`router/index.js`中配置路由
|
||
3. 如需API调用，在`api/`目录创建对应的托盘库接口文件
|
||
4. 更新侧边菜单配置
|
||
5. **注意**：考虑托盘库的业务特点和数据格式
|
||
|
||
### 托盘库Excel上传功能
|
||
1. 参考`excel/`目录下的现有组件
|
||
2. 使用Element Plus的上传组件
|
||
3. 后端TP版本API处理托盘Excel数据解析
|
||
4. **关键**：使用托盘库专用的Excel模板格式
|
||
|
||
### 新增托盘库API接口
|
||
1. 在`api/`目录按模块创建文件
|
||
2. 使用`@/http/request`进行请求封装
|
||
3. 导出接口函数供组件使用
|
||
4. **重要**：确保对接TP版本后端API
|
||
|
||
### 调试和测试
|
||
- 使用Vue DevTools检查组件状态
|
||
- 浏览器开发者工具调试网络请求
|
||
- ESLint检查代码质量
|
||
- 在不同浏览器中测试兼容性
|
||
- **托盘库专用测试**：验证托盘数据格式和业务逻辑
|
||
|
||
## 后端API集成
|
||
|
||
### 默认后端地址
|
||
根据当前配置，后端TP版本API地址需要在`http/request.js`中配置：
|
||
- 开发环境：`http://localhost:12315`（TP版本后端）
|
||
- 生产环境：`http://10.18.58.21:12315`
|
||
|
||
### 认证机制
|
||
- 支持Microsoft OAuth认证代理
|
||
- 登录状态存储在`sessionStorage`中
|
||
- 路由守卫自动验证用户登录状态
|
||
|
||
## 开发建议
|
||
|
||
### TP与BOX版本协同开发
|
||
1. **代码复用**：公共组件和工具函数可以复用
|
||
2. **业务差异**：注意托盘库和料箱库的业务逻辑差异
|
||
3. **数据格式**：确保使用正确的数据字段和格式
|
||
4. **API对接**：确认对接的是TP版本后端而非BOX版本
|
||
|
||
### 性能优化
|
||
- 托盘库数据量通常较大，注意列表分页和懒加载
|
||
- 图表和监控界面的实时更新优化
|
||
- Excel处理时的内存管理
|
||
|
||
### 用户体验
|
||
- 托盘库操作相对复杂，提供清晰的操作指引
|
||
- 错误提示和状态反馈要及时准确
|
||
- 支持键盘快捷操作，提高操作效率 |