更新装配、销售、精工车间、技术中心、仓储多个模块，整理文档和SQL脚本

2026-06-29 13:36:34 +08:00
parent 137e276340
commit be0ff91e24
54 changed files with 5066 additions and 723 deletions
--- a/docs/移动端适配/车间派工移动端自适应设计方案.md
+++ b/docs/移动端适配/车间派工移动端自适应设计方案.md
@@ -0,0 +1,521 @@
+# 车间派工移动端自适应设计方案
+
+## 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，减少长期维护成本。