初始代码

2026-04-02 10:38:23 +08:00
parent d8b4140f50
commit aed67ce1fd
1937 changed files with 447678 additions and 1 deletions
--- a/yawei-mes/mes-ui/MOBILE_SETUP_GUIDE.md
+++ b/yawei-mes/mes-ui/MOBILE_SETUP_GUIDE.md
@@ -0,0 +1,164 @@
+# 移动端适配 - 快速开始
+
+## 🚀 快速安装
+
+### 1. 安装依赖
+
+```bash
+cd mes-ui
+npm install
+```
+
+这会自动安装新添加的 Vant UI 组件库和相关依赖。
+
+### 2. 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 3. 访问测试
+
+**PC端测试**:
+- 直接在浏览器访问: http://localhost:80
+
+**移动端测试**:
+- 方法一：Chrome开发者工具
+  1. 按 F12 打开开发者工具
+  2. 点击设备切换按钮（或按 Ctrl+Shift+M）
+  3. 选择移动设备（如 iPhone 12）
+  4. 刷新页面
+
+- 方法二：真机测试
+  1. 确保手机和电脑在同一局域网
+  2. 在手机浏览器访问: http://你的电脑IP:80
+
+## ✅ 已完成功能
+
+### 基础架构
+- ✅ 设备自动检测（PC/移动端）
+- ✅ 登录后自动跳转到对应界面
+- ✅ 路由自动保护（防止设备类型不匹配）
+- ✅ 移动端布局（顶部导航栏 + 底部标签栏）
+
+### 工单模块
+- ✅ 移动端首页（快捷入口、待办事项、数据统计）
+- ✅ 工单列表（搜索、筛选、下拉刷新、上拉加载）
+- ✅ 工单详情（基本信息、报工排产、领料记录）
+- ✅ 工单卡片组件
+
+### 占位页面
+- ✅ 报工列表
+- ✅ 报工表单
+- ✅ 领料管理
+- ✅ 个人中心
+
+## 📱 移动端路由
+
+| 路径 | 页面 | 状态 |
+|------|------|------|
+| `/mobile/home` | 首页 | ✅ 已完成 |
+| `/mobile/workOrder` | 工单列表 | ✅ 已完成 |
+| `/mobile/workOrder/detail/:id` | 工单详情 | ✅ 已完成 |
+| `/mobile/workOrder/pickManage/:workOrderId` | 领料管理 | 🔲 待开发 |
+| `/mobile/report` | 报工列表 | 🔲 待开发 |
+| `/mobile/report/add/:workOrderEntryId` | 报工表单 | 🔲 待开发 |
+| `/mobile/profile` | 个人中心 | ✅ 已完成 |
+
+## 🎯 测试步骤
+
+### 1. 测试设备检测
+
+1. 使用PC浏览器登录系统
+2. 应该自动跳转到PC端首页 `/index`
+3. 切换到移动设备模式（F12 → 设备切换）
+4. 刷新页面并重新登录
+5. 应该自动跳转到移动端首页 `/mobile/home`
+
+### 2. 测试移动端首页
+
+- 查看用户信息卡片
+- 点击快捷入口（工单列表、生产报工等）
+- 查看待办事项
+- 查看今日数据统计
+
+### 3. 测试工单列表
+
+- 下拉刷新列表
+- 上拉加载更多
+- 搜索工单（输入工单编号或产品名称）
+- 筛选工单（按状态、客户名称）
+- 点击工单卡片进入详情
+
+### 4. 测试工单详情
+
+- 查看基本信息
+- 切换标签页（报工排产、领料记录）
+- 点击底部操作按钮（生产报工、工单领料）
+
+### 5. 测试底部导航
+
+- 点击底部标签栏切换页面
+- 首页、工单、报工、我的
+
+## 🔧 开发说明
+
+### 文件结构
+
+```
+mes-ui/src/
+├── views/mobile/          # 移动端页面
+├── router/mobile.js       # 移动端路由
+├── utils/device.js        # 设备检测工具
+└── api/                   # API接口（PC和移动端共用）
+```
+
+### 添加新页面
+
+1. 在 `src/views/mobile/` 创建页面组件
+2. 在 `src/router/mobile.js` 添加路由
+3. 使用 Vant 组件开发UI
+
+### API调用
+
+移动端直接复用PC端API：
+
+```javascript
+import { listWorkOrder } from '@/api/mes/production/workOrder'
+
+// 调用API
+const response = await listWorkOrder({ pageNum: 1, pageSize: 10 })
+```
+
+## ⚠️ 注意事项
+
+1. **依赖安装**: 首次运行前必须执行 `npm install`
+2. **端口冲突**: 如果80端口被占用，修改 `vue.config.js` 中的端口
+3. **后端API**: 确保后端服务已启动（默认 http://localhost:8080）
+4. **浏览器兼容**: 建议使用 Chrome 浏览器测试
+
+## 📝 下一步开发
+
+1. 完善报工表单页面
+2. 完善领料管理页面
+3. 添加工单状态操作功能
+4. 添加其他业务模块
+
+## 🐛 常见问题
+
+### Q: npm install 失败？
+A: 尝试清除缓存后重新安装：
+```bash
+npm cache clean --force
+npm install
+```
+
+### Q: 移动端页面显示不正常？
+A: 检查是否正确安装了 Vant 依赖，查看浏览器控制台是否有错误。
+
+### Q: 登录后没有自动跳转？
+A: 检查 `src/utils/device.js` 和 `src/permission.js` 是否正确创建。
+
+## 📞 技术支持
+
+如有问题，请查看详细文档：`MOBILE_ADAPTATION.md`