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

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