shenlu/MES

Fork 0

Files

hhh aed67ce1fd 初始代码

2026-04-02 10:39:03 +08:00

4.1 KiB

Raw Blame History

移动端适配 - 快速开始

🚀 快速安装

1. 安装依赖

cd mes-ui
npm install

这会自动安装新添加的 Vant UI 组件库和相关依赖。

2. 启动开发服务器

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. 测试设备检测

使用PC浏览器登录系统
应该自动跳转到PC端首页 /index
切换到移动设备模式（F12 → 设备切换）
刷新页面并重新登录
应该自动跳转到移动端首页 /mobile/home

2. 测试移动端首页

查看用户信息卡片
点击快捷入口（工单列表、生产报工等）
查看待办事项
查看今日数据统计

3. 测试工单列表

下拉刷新列表
上拉加载更多
搜索工单（输入工单编号或产品名称）
筛选工单（按状态、客户名称）
点击工单卡片进入详情

4. 测试工单详情

查看基本信息
切换标签页（报工排产、领料记录）
点击底部操作按钮（生产报工、工单领料）

5. 测试底部导航

点击底部标签栏切换页面
首页、工单、报工、我的

🔧 开发说明

文件结构

mes-ui/src/
├── views/mobile/          # 移动端页面
├── router/mobile.js       # 移动端路由
├── utils/device.js        # 设备检测工具
└── api/                   # API接口（PC和移动端共用）

添加新页面

在 src/views/mobile/ 创建页面组件
在 src/router/mobile.js 添加路由
使用 Vant 组件开发UI

API调用

移动端直接复用PC端API：

import { listWorkOrder } from '@/api/mes/production/workOrder'

// 调用API
const response = await listWorkOrder({ pageNum: 1, pageSize: 10 })

⚠️ 注意事项

依赖安装: 首次运行前必须执行 npm install
端口冲突: 如果80端口被占用，修改 vue.config.js 中的端口
后端API: 确保后端服务已启动（默认 http://localhost:8080）
浏览器兼容: 建议使用 Chrome 浏览器测试

📝 下一步开发

完善报工表单页面
完善领料管理页面
添加工单状态操作功能
添加其他业务模块

🐛 常见问题

Q: npm install 失败？

A: 尝试清除缓存后重新安装：

npm cache clean --force
npm install

Q: 移动端页面显示不正常？

A: 检查是否正确安装了 Vant 依赖，查看浏览器控制台是否有错误。

Q: 登录后没有自动跳转？

A: 检查 src/utils/device.js 和 src/permission.js 是否正确创建。

📞 技术支持

如有问题，请查看详细文档：MOBILE_ADAPTATION.md

4.1 KiB Raw Blame History Unescape Escape