522 lines
11 KiB
Markdown
522 lines
11 KiB
Markdown
# 车间派工移动端自适应设计方案
|
||
|
||
## 1. 需求目标
|
||
|
||
需求:车间需求一个车间派工组件的移动端功能,车间内及时操作
|
||
|
||
本次方案包含两部分：
|
||
|
||
1. 将现有车间派工组件复制并改造为移动端自适应页面。
|
||
2. 移动端用户登录系统后，首页只显示该自适应派工页面，不显示桌面端首页、侧边栏、顶部导航和标签栏。
|
||
|
||
总体原则：
|
||
|
||
- 不影响现有 PC 端车间派工页面。
|
||
- 不修改后端接口和参数格式。
|
||
- 移动端只改交互和布局，业务逻辑尽量复用现有页面。
|
||
- 保持 Vue 2 + Element UI + Options API 写法。
|
||
|
||
## 2. 当前代码基础
|
||
|
||
现有车间派工页面：
|
||
|
||
```text
|
||
src/views/SeikoWorkshop/WorkshopAssignment/index.vue
|
||
```
|
||
|
||
现有登录后首页：
|
||
|
||
```text
|
||
src/views/dashboard/index.vue
|
||
```
|
||
|
||
现有主布局：
|
||
|
||
```text
|
||
src/views/layout/Layout.vue
|
||
src/views/layout/components/AppMain.vue
|
||
```
|
||
|
||
现有动态路由生成：
|
||
|
||
```text
|
||
src/router/getRouter.js
|
||
src/permission.js
|
||
```
|
||
|
||
现有设备判断逻辑：
|
||
|
||
```text
|
||
src/views/layout/mixin/ResizeHandler.js
|
||
src/store/modules/app.js
|
||
```
|
||
|
||
项目中已有类似移动端/滑动版页面命名示例：
|
||
|
||
```text
|
||
src/views/AssemblyManagement/AssemblyExecutionSliding/index.vue
|
||
src/views/AssemblyManagement/ReceiveAssemblyTaskSliding/index.vue
|
||
src/views/AssemblyManagement/ReplenishmentOrdersSliding/index.vue
|
||
```
|
||
|
||
因此本次建议采用“新增独立移动端页面”的方式，而不是直接改造现有 PC 页面。
|
||
|
||
## 3. 总体设计
|
||
|
||
新增移动端页面：
|
||
|
||
```text
|
||
src/views/SeikoWorkshop/WorkshopAssignmentMobile/index.vue
|
||
```
|
||
|
||
新增移动端空布局：
|
||
|
||
```text
|
||
src/views/layout/MobileLayout.vue
|
||
```
|
||
|
||
新增设备判断工具：
|
||
|
||
```text
|
||
src/utils/device.js
|
||
```
|
||
|
||
修改路由配置：
|
||
|
||
```text
|
||
src/router/index.js
|
||
```
|
||
|
||
修改登录后跳转逻辑：
|
||
|
||
```text
|
||
src/permission.js
|
||
```
|
||
|
||
移动端访问路径建议为：
|
||
|
||
```text
|
||
/mobile/workshop-assignment
|
||
```
|
||
|
||
PC 端继续使用现有动态菜单路径：
|
||
|
||
```text
|
||
/SeikoWorkshop/WorkshopAssignment
|
||
```
|
||
|
||
## 4. 移动端页面结构设计
|
||
|
||
现有 PC 页面是左右两栏布局：
|
||
|
||
- 左侧：订单/零件待派工列表。
|
||
- 右侧：选中零件后的工序派工列表。
|
||
|
||
移动端不适合继续使用左右两栏和大表格，建议改为纵向流程。
|
||
|
||
### 4.1 顶部筛选区
|
||
|
||
移动端顶部展示查询条件：
|
||
|
||
- 订单号
|
||
- 产品/零件名称
|
||
- 名称或图号
|
||
- 查询按钮
|
||
- 查看图纸按钮
|
||
- 加急/取消加急按钮
|
||
- 手动报废结单按钮，按原权限控制
|
||
|
||
布局方式：
|
||
|
||
- 筛选项纵向排列。
|
||
- 输入框、下拉框宽度 `100%`。
|
||
- 操作按钮使用两列或满宽布局。
|
||
- 顶部筛选区可固定，也可随页面滚动。第一版建议随页面滚动，避免遮挡内容。
|
||
|
||
### 4.2 待派工零件列表
|
||
|
||
将 PC 端左侧 `el-table` 改为卡片列表。
|
||
|
||
每张卡片展示核心字段：
|
||
|
||
- 订单号
|
||
- 产品名称
|
||
- 零件图号
|
||
- 零件名称
|
||
- 数量
|
||
- 毛坯库存
|
||
- 下达日期
|
||
- 完工期限
|
||
- 订单备注
|
||
- 技术备注
|
||
|
||
交互：
|
||
|
||
- 点击卡片后调用现有行点击逻辑，加载该零件的工序列表。
|
||
- 当前选中卡片需要有明显选中态。
|
||
- 列表底部保留分页，移动端分页建议简化为“上一页 / 下一页 / 当前页”。
|
||
|
||
### 4.3 工序派工列表
|
||
|
||
将 PC 端右侧工序表格改为工序卡片列表。
|
||
|
||
每张工序卡片展示：
|
||
|
||
- 工序顺序
|
||
- 工序名称
|
||
- 投产数
|
||
- 完成数
|
||
- 操作者
|
||
- 报废数量
|
||
- 加工设备
|
||
- 派工状态
|
||
|
||
卡片操作按钮：
|
||
|
||
- 编辑
|
||
- 派工
|
||
- 取消派工
|
||
|
||
按钮禁用条件沿用现有 PC 页面判断逻辑。
|
||
|
||
### 4.4 派工编辑区
|
||
|
||
移动端保留人员和设备选择：
|
||
|
||
- 操作者
|
||
- 设备
|
||
- 派工数量
|
||
- 计划完成日期
|
||
|
||
建议使用 `el-dialog` 或底部弹层形式。
|
||
|
||
Element UI 项目中现有弹窗较多，第一版建议继续使用 `el-dialog`，移动端适配如下：
|
||
|
||
```vue
|
||
<el-dialog :visible.sync="dialogVisible" width="94%" top="5vh">
|
||
```
|
||
|
||
表单布局：
|
||
|
||
- `el-form-item` 纵向排列。
|
||
- `el-select`、`el-input`、`el-date-picker`、`el-input-number` 宽度统一 `100%`。
|
||
- 底部按钮固定为“取消 / 确定”。
|
||
|
||
### 4.5 文件和图纸查看
|
||
|
||
现有页面中图纸、文件查看逻辑继续保留。
|
||
|
||
移动端展示方式：
|
||
|
||
- 文件使用纵向列表。
|
||
- 每个文件展示图标、文件名。
|
||
- 点击后沿用现有下载/预览地址。
|
||
- 弹窗宽度 `94%`。
|
||
|
||
## 5. 业务接口复用
|
||
|
||
移动端页面不新增后端接口，复用现有车间派工页面中的请求。
|
||
|
||
主要请求包括：
|
||
|
||
```text
|
||
精工车间_车间派工_查询
|
||
车间生产管理工艺_零件工序_已派工查询
|
||
车间生产管理工艺_零件工序_派工_工序查询
|
||
车间生产管理工艺_零件工序_派工
|
||
车间生产管理工艺_零件工序_取消派工
|
||
车间生产管理工艺_零件工序_派工_修改数量
|
||
车间生产管理工艺_零件工序_派工_设置计划完成日期
|
||
人事档案管理_人员_部门与人员_派工_查询数据_根据部门编号
|
||
车间派工_手动报废结单_查询信息
|
||
车间派工_手动报废结单
|
||
```
|
||
|
||
请求规范继续遵守项目约定：
|
||
|
||
- 统一 POST 到 `MESCommonBase.ashx`。
|
||
- `url` 字段留空。
|
||
- 使用 `CreateData` 构建请求。
|
||
- 使用 `ExecDatabase` 或现有全局工具方法发送请求。
|
||
- 参数继续使用 `key=value&key2=value2` 字符串。
|
||
- 字段名继续使用后端返回的中文字段。
|
||
|
||
## 6. 路由设计
|
||
|
||
### 6.1 新增移动端空布局
|
||
|
||
新增文件：
|
||
|
||
```text
|
||
src/views/layout/MobileLayout.vue
|
||
```
|
||
|
||
职责：
|
||
|
||
- 不显示侧边栏。
|
||
- 不显示顶部导航。
|
||
- 不显示标签栏。
|
||
- 只渲染当前移动端页面。
|
||
|
||
结构示例：
|
||
|
||
```vue
|
||
<template>
|
||
<section class="mobile-main">
|
||
<router-view/>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'MobileLayout'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mobile-main {
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
background: #f5f7fa;
|
||
overflow-x: hidden;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 6.2 新增静态隐藏路由
|
||
|
||
修改：
|
||
|
||
```text
|
||
src/router/index.js
|
||
```
|
||
|
||
新增：
|
||
|
||
```js
|
||
import MobileLayout from '../views/layout/MobileLayout'
|
||
```
|
||
|
||
在 `constantRouterMap` 中增加：
|
||
|
||
```js
|
||
{
|
||
path: '/mobile',
|
||
component: MobileLayout,
|
||
hidden: true,
|
||
children: [{
|
||
path: 'workshop-assignment',
|
||
component: () => import('@/views/SeikoWorkshop/WorkshopAssignmentMobile/index'),
|
||
meta: { title: '车间派工' }
|
||
}]
|
||
}
|
||
```
|
||
|
||
最终移动端首页路径：
|
||
|
||
```text
|
||
/mobile/workshop-assignment
|
||
```
|
||
|
||
## 7. 移动端登录后首页跳转设计
|
||
|
||
新增工具：
|
||
|
||
```text
|
||
src/utils/device.js
|
||
```
|
||
|
||
内容：
|
||
|
||
```js
|
||
export function isMobileDevice() {
|
||
if (!document || !document.body) {
|
||
return false
|
||
}
|
||
return document.body.getBoundingClientRect().width < 1024
|
||
}
|
||
```
|
||
|
||
修改：
|
||
|
||
```text
|
||
src/permission.js
|
||
```
|
||
|
||
在已登录逻辑中增加判断：
|
||
|
||
- 用户已登录。
|
||
- 当前目标路径是 `/` 或 `/dashboard`。
|
||
- 当前设备为移动端。
|
||
- 自动跳转 `/mobile/workshop-assignment`。
|
||
|
||
设计示例：
|
||
|
||
```js
|
||
import { isMobileDevice } from '@/utils/device'
|
||
|
||
// beforeEach 内部，已登录分支中
|
||
if ((to.path === '/' || to.path === '/dashboard') && isMobileDevice()) {
|
||
next({ path: '/mobile/workshop-assignment', replace: true })
|
||
NProgress.done()
|
||
return
|
||
}
|
||
```
|
||
|
||
这样移动端登录后不会进入桌面首页，而是直接进入移动端派工页。
|
||
|
||
## 8. 样式设计
|
||
|
||
移动端页面样式建议：
|
||
|
||
- 根节点使用 `.mobile-assignment-page`。
|
||
- 页面最小高度 `100vh`。
|
||
- 主背景使用浅灰色。
|
||
- 卡片使用白底、细边框、轻阴影。
|
||
- 卡片圆角控制在 `6px` 或 `8px`。
|
||
- 字号保持可读，不使用随视口缩放的字体。
|
||
- 所有按钮、输入框高度适合触摸操作。
|
||
- 避免横向滚动。
|
||
|
||
建议结构：
|
||
|
||
```scss
|
||
.mobile-assignment-page {
|
||
min-height: 100vh;
|
||
padding: 10px;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.mobile-filter {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.assignment-card {
|
||
background: #fff;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.assignment-card.is-active {
|
||
border-color: #409EFF;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
.card-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 24px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.card-label {
|
||
color: #909399;
|
||
}
|
||
|
||
.card-value {
|
||
color: #303133;
|
||
text-align: right;
|
||
}
|
||
```
|
||
|
||
## 9. 实施步骤
|
||
|
||
1. 新建 `src/views/SeikoWorkshop/WorkshopAssignmentMobile/index.vue`。
|
||
2. 从 `WorkshopAssignment/index.vue` 复制业务数据、方法和接口调用。
|
||
3. 将模板改为移动端筛选区、零件卡片列表、工序卡片列表。
|
||
4. 将弹窗宽度、表单布局和按钮布局改为移动端适配。
|
||
5. 新建 `src/views/layout/MobileLayout.vue`。
|
||
6. 新建 `src/utils/device.js`。
|
||
7. 修改 `src/router/index.js`，增加 `/mobile/workshop-assignment` 静态隐藏路由。
|
||
8. 修改 `src/permission.js`，移动端登录后访问 `/` 或 `/dashboard` 时跳转移动端派工页。
|
||
9. 本地运行项目，分别验证 PC 和移动端宽度。
|
||
|
||
## 10. 验收标准
|
||
|
||
PC 端：
|
||
|
||
- 原车间派工页面正常访问。
|
||
- 原首页正常显示。
|
||
- 原动态菜单不受影响。
|
||
|
||
移动端：
|
||
|
||
- 登录后自动进入 `/mobile/workshop-assignment`。
|
||
- 页面不显示侧边栏、顶部导航、标签栏。
|
||
- 页面只显示移动端车间派工自适应页面。
|
||
- 查询条件可正常使用。
|
||
- 零件列表可正常加载和分页。
|
||
- 点击零件后可加载工序列表。
|
||
- 派工、取消派工、编辑数量、设置计划完成日期功能正常。
|
||
- 查看图纸和文件功能正常。
|
||
- 权限按钮显示逻辑与 PC 端一致。
|
||
- 页面无明显横向滚动、文字重叠、按钮遮挡。
|
||
|
||
## 11. 风险与控制
|
||
|
||
### 11.1 现有页面体量较大
|
||
|
||
风险：
|
||
|
||
- 直接抽公共逻辑可能引入 PC 页面回归问题。
|
||
|
||
控制：
|
||
|
||
- 第一版复制现有页面业务逻辑，只重写移动端模板。
|
||
- 待移动端稳定后，再考虑抽公共 mixin。
|
||
|
||
### 11.2 移动端首页跳转时机
|
||
|
||
风险：
|
||
|
||
- `Layout` 中的设备判断发生较晚，登录跳转时可能还未写入 Vuex。
|
||
|
||
控制：
|
||
|
||
- 在 `permission.js` 中直接使用 DOM 宽度判断，不依赖 Vuex 中的 `device`。
|
||
|
||
### 11.3 动态菜单权限
|
||
|
||
风险：
|
||
|
||
- 移动端隐藏路由如果依赖后端菜单，可能因为菜单未配置导致无法访问。
|
||
|
||
控制：
|
||
|
||
- 将移动端派工路由注册为静态隐藏路由。
|
||
- 登录后仍经过 token 校验，但不依赖菜单显示。
|
||
|
||
### 11.4 手机端表格不可用
|
||
|
||
风险：
|
||
|
||
- 继续使用大表格会产生横向滚动，操作困难。
|
||
|
||
控制：
|
||
|
||
- 移动端核心列表统一改为卡片式展示。
|
||
- 表格只在确实需要多列批量选择时使用，并控制宽度。
|
||
|
||
## 12. 推荐结论
|
||
|
||
建议第一版采用“独立移动端页面 + 移动端空布局 + 登录后设备重定向”的实现方式。
|
||
|
||
该方案改动边界清晰：
|
||
|
||
- PC 端页面不动。
|
||
- 后端接口不动。
|
||
- 权限体系基本不动。
|
||
- 移动端首页可直接进入派工工作流。
|
||
|
||
后续如果移动端使用稳定，再将 PC 和移动端共用的派工请求、字段处理、校验逻辑抽成公共 mixin，减少长期维护成本。
|