209 lines
5.6 KiB
Markdown
209 lines
5.6 KiB
Markdown
# CLAUDE.md
|
||
|
||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
||
## 项目概述
|
||
|
||
这是宝应梦阳WMS前端项目（BOX料箱库版本），基于Vue 3和Element Plus开发的现代化Web管理界面，用于仓库管理系统的操作和监控。
|
||
|
||
## 开发环境设置
|
||
|
||
### 基本命令
|
||
```bash
|
||
# 进入项目目录
|
||
cd 202504-Wms-MengYang-box/wms_web_mengyang
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run serve
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 代码检查和修复
|
||
npm run lint
|
||
```
|
||
|
||
### 开发配置
|
||
- **开发端口**：12306
|
||
- **路由模式**：Hash路由 (`createWebHashHistory`)
|
||
- **默认路由**：登录页面 (`/`) -> 主页 (`/home`) -> 库存页面 (`/stock`)
|
||
- **代理配置**：Microsoft OAuth认证代理
|
||
|
||
## 技术栈
|
||
|
||
### 核心框架
|
||
- **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` - 消息提示封装
|
||
|
||
## 开发注意事项
|
||
|
||
### 路由配置
|
||
- 使用Hash路由模式，兼容性更好
|
||
- 实现了路由守卫，未登录用户自动跳转登录页
|
||
- 登录状态通过`sessionStorage`中的`user`字段判断
|
||
|
||
### 状态管理
|
||
- 使用Vuex进行全局状态管理
|
||
- 主要管理用户信息、菜单权限、标签页状态
|
||
|
||
### HTTP请求
|
||
- 统一使用Axios进行API调用
|
||
- 请求封装在`/http/request.js`中
|
||
- API接口按业务模块分类组织
|
||
|
||
### Excel处理
|
||
- 支持Excel文件上传和解析
|
||
- 专门的Excel上传组件位于`excel/`目录
|
||
- 支持多种业务数据的Excel导入导出
|
||
|
||
### 打印功能
|
||
- 使用`vue3-print-nb`实现打印功能
|
||
- 打印组件位于`print/`目录
|
||
|
||
### 样式规范
|
||
- 使用Sass预处理器
|
||
- 全局样式文件：`styles/index.scss`
|
||
- 响应式设计，支持不同屏幕尺寸
|
||
|
||
## 常见开发任务
|
||
|
||
### 添加新页面
|
||
1. 在`layout/`目录创建Vue组件
|
||
2. 在`router/index.js`中配置路由
|
||
3. 如需API调用，在`api/`目录创建对应接口文件
|
||
4. 更新侧边菜单配置
|
||
|
||
### Excel上传功能
|
||
1. 参考`excel/`目录下的现有组件
|
||
2. 使用Element Plus的上传组件
|
||
3. 后端API处理Excel数据解析
|
||
|
||
### 新增API接口
|
||
1. 在`api/`目录按模块创建文件
|
||
2. 使用`@/http/request`进行请求封装
|
||
3. 导出接口函数供组件使用
|
||
|
||
### 调试和测试
|
||
- 使用Vue DevTools检查组件状态
|
||
- 浏览器开发者工具调试网络请求
|
||
- ESLint检查代码质量
|
||
- 在不同浏览器中测试兼容性
|
||
|
||
## 后端API集成
|
||
|
||
### 默认后端地址
|
||
根据当前配置，后端API地址需要在`http/request.js`中配置，通常为：
|
||
- 开发环境：`http://localhost:12315`
|
||
- 生产环境：`http://10.18.58.21:12315`
|
||
|
||
### 认证机制
|
||
- 支持Microsoft OAuth认证代理
|
||
- 登录状态存储在`sessionStorage`中
|
||
- 路由守卫自动验证用户登录状态 |