JY1.0/docs/移动端适配/车间派工移动端自适应设计方案.md

车间派工移动端自适应设计方案

1. 需求目标

需求:车间需求一个车间派工组件的移动端功能,车间内及时操作

本次方案包含两部分：

1. 将现有车间派工组件复制并改造为移动端自适应页面。
2. 移动端用户登录系统后，首页只显示该自适应派工页面，不显示桌面端首页、侧边栏、顶部导航和标签栏。

总体原则：

• 不影响现有 PC 端车间派工页面。
• 不修改后端接口和参数格式。
• 移动端只改交互和布局，业务逻辑尽量复用现有页面。
• 保持 Vue 2 + Element UI + Options API 写法。

2. 当前代码基础

现有车间派工页面：

src/views/SeikoWorkshop/WorkshopAssignment/index.vue

现有登录后首页：

src/views/dashboard/index.vue

现有主布局：

src/views/layout/Layout.vue
src/views/layout/components/AppMain.vue

现有动态路由生成：

src/router/getRouter.js
src/permission.js

现有设备判断逻辑：

src/views/layout/mixin/ResizeHandler.js
src/store/modules/app.js

项目中已有类似移动端/滑动版页面命名示例：

src/views/AssemblyManagement/AssemblyExecutionSliding/index.vue
src/views/AssemblyManagement/ReceiveAssemblyTaskSliding/index.vue
src/views/AssemblyManagement/ReplenishmentOrdersSliding/index.vue

因此本次建议采用“新增独立移动端页面”的方式，而不是直接改造现有 PC 页面。

3. 总体设计

新增移动端页面：

src/views/SeikoWorkshop/WorkshopAssignmentMobile/index.vue

新增移动端空布局：

src/views/layout/MobileLayout.vue

新增设备判断工具：

src/utils/device.js

修改路由配置：

src/router/index.js

修改登录后跳转逻辑：

src/permission.js

移动端访问路径建议为：

/mobile/workshop-assignment

PC 端继续使用现有动态菜单路径：

/SeikoWorkshop/WorkshopAssignment

4. 移动端页面结构设计

现有 PC 页面是左右两栏布局：

• 左侧：订单/零件待派工列表。
• 右侧：选中零件后的工序派工列表。

移动端不适合继续使用左右两栏和大表格，建议改为纵向流程。

4.1 顶部筛选区

移动端顶部展示查询条件：

• 订单号
• 产品/零件名称
• 名称或图号
• 查询按钮
• 查看图纸按钮
• 加急/取消加急按钮
• 手动报废结单按钮，按原权限控制

布局方式：

• 筛选项纵向排列。
• 输入框、下拉框宽度 100%。
• 操作按钮使用两列或满宽布局。
• 顶部筛选区可固定，也可随页面滚动。第一版建议随页面滚动，避免遮挡内容。

4.2 待派工零件列表

将 PC 端左侧 el-table 改为卡片列表。

每张卡片展示核心字段：

• 订单号
• 产品名称
• 零件图号
• 零件名称
• 数量
• 毛坯库存
• 下达日期
• 完工期限
• 订单备注
• 技术备注

交互：

• 点击卡片后调用现有行点击逻辑，加载该零件的工序列表。
• 当前选中卡片需要有明显选中态。
• 列表底部保留分页，移动端分页建议简化为“上一页 / 下一页 / 当前页”。

4.3 工序派工列表

将 PC 端右侧工序表格改为工序卡片列表。

每张工序卡片展示：

• 工序顺序
• 工序名称
• 投产数
• 完成数
• 操作者
• 报废数量
• 加工设备
• 派工状态

卡片操作按钮：

• 编辑
• 派工
• 取消派工

按钮禁用条件沿用现有 PC 页面判断逻辑。

4.4 派工编辑区

移动端保留人员和设备选择：

• 操作者
• 设备
• 派工数量
• 计划完成日期

建议使用 el-dialog 或底部弹层形式。

Element UI 项目中现有弹窗较多，第一版建议继续使用 el-dialog，移动端适配如下：

<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. 业务接口复用

移动端页面不新增后端接口，复用现有车间派工页面中的请求。

主要请求包括：

精工车间_车间派工_查询
车间生产管理工艺_零件工序_已派工查询
车间生产管理工艺_零件工序_派工_工序查询
车间生产管理工艺_零件工序_派工
车间生产管理工艺_零件工序_取消派工
车间生产管理工艺_零件工序_派工_修改数量
车间生产管理工艺_零件工序_派工_设置计划完成日期
人事档案管理_人员_部门与人员_派工_查询数据_根据部门编号
车间派工_手动报废结单_查询信息
车间派工_手动报废结单

请求规范继续遵守项目约定：

• 统一 POST 到 MESCommonBase.ashx。
• url 字段留空。
• 使用 CreateData 构建请求。
• 使用 ExecDatabase 或现有全局工具方法发送请求。
• 参数继续使用 key=value&key2=value2 字符串。
• 字段名继续使用后端返回的中文字段。

6. 路由设计

6.1 新增移动端空布局

新增文件：

src/views/layout/MobileLayout.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 新增静态隐藏路由

修改：

src/router/index.js

新增：

import MobileLayout from '../views/layout/MobileLayout'

在 constantRouterMap 中增加：

{
  path: '/mobile',
  component: MobileLayout,
  hidden: true,
  children: [{
    path: 'workshop-assignment',
    component: () => import('@/views/SeikoWorkshop/WorkshopAssignmentMobile/index'),
    meta: { title: '车间派工' }
  }]
}

最终移动端首页路径：

/mobile/workshop-assignment

7. 移动端登录后首页跳转设计

新增工具：

src/utils/device.js

内容：

export function isMobileDevice() {
  if (!document || !document.body) {
    return false
  }
  return document.body.getBoundingClientRect().width < 1024
}

修改：

src/permission.js

在已登录逻辑中增加判断：

• 用户已登录。
• 当前目标路径是 / 或 /dashboard。
• 当前设备为移动端。
• 自动跳转 /mobile/workshop-assignment。

设计示例：

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。
• 字号保持可读，不使用随视口缩放的字体。
• 所有按钮、输入框高度适合触摸操作。
• 避免横向滚动。

建议结构：

.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，减少长期维护成本。