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`
|