202504-Wms-MengYang/202504-Wms-MengYang-tp/wms_web_mengyang/CLAUDE.md

# 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处理时的内存管理

### 用户体验
- 托盘库操作相对复杂，提供清晰的操作指引
- 错误提示和状态反馈要及时准确
- 支持键盘快捷操作，提高操作效率