165 lines
4.1 KiB
Markdown
165 lines
4.1 KiB
Markdown
# 移动端适配 - 快速开始
|
||
|
||
## 🚀 快速安装
|
||
|
||
### 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`
|