MODULES_INTEGRATION_GUIDE.md 8.6 KB

自定义模块整合指南

本文档说明如何将 6 个自定义模块(caigou, dingdan, iqc, jianmo, jiaohuo, yichang)整合到芋道管理后台项目中。

已完成的工作

1. 页面组件复制

已将以下模块的页面组件复制到 src/views 目录:

模块 源目录 目标目录 状态
jiaohuo (交货管理) jiaohuo/manage-vue/src/views/ src/views/jiaohuo/ ✅ 已复制
iqc (IQC检验) iqc/manage-vue/src/views/ src/views/iqc/ ✅ 已复制
yichang (异常管理) yichang/manage-vue/src/modules/ src/views/yichang/ ✅ 已复制
dingdan (订单管理) dingdan/manage-vue/src/views/ src/views/dingdan/ ✅ 已复制
jianmo (建模管理) jianmo/s0-operating-modeling/src/ src/views/jianmo/ ✅ 已复制
caigou (采购管理) 原为静态HTML src/views/caigou/index.vue ✅ 已转换为Vue组件
caigou (物料采购) dingdan/manage-vue/src/views/purchase-order/ src/views/caigou/ ✅ 已复制

2. 菜单配置 SQL

已创建菜单配置 SQL 脚本:

  • sql/mysql/custom_modules_menu.sql - 自定义模块菜单
  • sql/mysql/material_purchase_menu.sql - 物料采购模块菜单

3. API 接口文件

已创建 jiaohuo 模块的 API 接口文件:

文件 说明
src/api/jiaohuo/order.ts 订单相关接口
src/api/jiaohuo/schedule.ts 排程相关接口
src/api/jiaohuo/production.ts 生产相关接口
src/api/jiaohuo/delivery.ts 交货相关接口
src/api/jiaohuo/supplier.ts 供应商相关接口
src/api/jiaohuo/material.ts 物料相关接口
src/api/jiaohuo/workorder.ts 工单相关接口

4. 工具函数

已创建格式化工具函数:src/utils/format.ts

5. 依赖安装

已安装 xlsx 依赖(用于 caigou 模块的 Excel 解析)

6. 公共组件

已创建以下公共组件:

组件 路径 说明
SearchFilter src/components/SearchFilter/index.vue 搜索筛选组件
StatusBadge src/components/StatusBadge/index.vue 状态标签组件
PermissionButton src/components/PermissionButton/index.vue 权限按钮组件
EmptyState src/components/EmptyState/index.vue 空状态组件
BatchAddDelivery src/components/BatchAddDelivery/index.vue 批量添加交货单组件

7. Store 模块

已创建 IQC 模块的 Store:

Store 路径 说明
application src/store/modules/iqc/application.ts 申请管理 Store
task src/store/modules/iqc/task.ts 任务管理 Store
user src/store/modules/iqc/user.ts 用户管理 Store

8. 配置文件

已创建模块配置文件:src/config/modules.ts

待完成的工作

步骤 1:执行菜单 SQL 脚本

在 MySQL 数据库中执行菜单配置脚本:

# 连接到 MySQL
mysql -h 127.0.0.1 -P 3306 -u root -p ruoyi-vue-pro

# 执行 SQL 脚本
source sql/mysql/custom_modules_menu.sql

或者在 MySQL 客户端(如 Navicat、DBeaver)中打开并执行该脚本。

步骤 2:启动前端服务

cd yudao-ui/yudao-ui-admin-vue3
npm run dev
# 或
pnpm dev

步骤 3:分配菜单权限

  1. 登录管理后台
  2. 进入 系统管理 -> 角色管理
  3. 编辑需要访问新模块的角色
  4. 在菜单权限中勾选新增的模块菜单
  5. 保存并重新登录

模块说明

1. 交货管理 (jiaohuo)

包含以下功能页面:

  • 订单评审 (OrderReview)
  • 订单交付 (OrderDelivery)
  • 出货计划 (ShippingPlan)
  • 订单发货 (OrderShipment)
  • 工单池下达 (WorkOrderPool)
  • 工单工序排产 (ProductionSchedule)
  • 工单物料明细 (WorkOrderMaterial)
  • 工单工序明细 (WorkOrderProcess)
  • 可执行日计划 (DailyPlan)
  • 产线工作日历 (WorkCalendar)
  • 物料需求计划 (MaterialDemand)
  • 物料交货计划 (DeliverySchedule)
  • 供应商交货管理 (SupplierDelivery)
  • 供应商发货单 (SupplierShippingList)

2. IQC检验 (iqc)

包含以下功能页面:

  • 检验申请列表 (ApplicationList)
  • 检验申请表单 (ApplicationForm)
  • 检验任务列表 (TaskList)
  • 检验任务表单 (TaskForm)
  • 我的收藏 (Favorites)
  • 帮助中心 (Help)

3. 异常管理 (yichang)

包含以下子模块:

  • Andon管理 (andon/)
  • 工损管理 (loss/)
  • SIM管理 (sim/)

4. 订单管理 (dingdan)

包含以下功能页面:

  • 我的流程 (MyProcess)
  • 帮助中心 (Help)
  • 采购订单 (purchase-order/)

5. 采购管理 (caigou)

包含以下功能页面:

  • 物料交货计划分析 (index.vue) - Excel 文件分析工具

5.1 物料采购 (caigou - 物料采购子模块)

物料采购模块从 dingdan/manage-vue 整合而来,包含以下功能页面:

组件文件 菜单名称 功能说明
MaterialPurchaseOrder.vue 物料采购订单 管理物料采购订单,支持搜索、筛选、分页、导出
SubcontractOrder.vue 委外加工订单 管理委外加工订单,支持搜索、筛选、分页、导出
MaterialPurchaseRequest.vue 物料采购申请 管理物料采购申请,支持搜索、筛选、分页、导出

菜单配置

物料采购模块使用独立的菜单 SQL 脚本:sql/mysql/material_purchase_menu.sql

菜单层级结构:

物料采购 (ID: 6500, 一级菜单)
├── 物料采购订单 (ID: 6501)
├── 委外加工订单 (ID: 6502)
└── 物料采购申请 (ID: 6503)

执行菜单配置

# 连接到 MySQL
mysql -h 127.0.0.1 -P 3306 -u root -p ruoyi-vue-pro

# 执行物料采购菜单 SQL 脚本
source sql/mysql/material_purchase_menu.sql

权限标识

菜单 权限标识
物料采购订单 caigou:purchase-order:list
委外加工订单 caigou:subcontract-order:list
物料采购申请 caigou:purchase-request:list

6. 建模管理 (jianmo)

包含以下功能页面:

  • 客户管理 (CustomerManagement)
  • 物料管理 (MaterialManagement)
  • 订单优先级配置 (OrderPriorityConfig)
  • 设备管理 (device/)
  • 仓储建模 (warehouse/)
  • 供应建模 (supply/)
  • 制造建模 (manufacturing/)
  • 质量建模 (quality/)

常见问题

Q1: 菜单不显示

  1. 确认 SQL 脚本已正确执行
  2. 确认当前用户的角色已分配新菜单权限
  3. 清除浏览器缓存并重新登录

Q2: 页面报错 "找不到组件"

  1. 检查组件路径是否正确
  2. 确认组件文件已复制到正确位置
  3. 检查组件名称是否与菜单配置中的 component 字段匹配

Q3: 样式问题

原模块可能使用了不同的 UI 框架或样式,需要:

  1. 将样式改为使用 Element Plus 组件
  2. 使用主项目的公共样式变量
  3. 移除冲突的全局样式

Q4: API 调用失败

原模块的 API 可能指向不同的后端服务,需要:

  1. 在后端添加对应的 API 接口
  2. 或修改前端 API 调用指向现有接口

后续优化建议

  1. 统一代码风格:将原模块代码改为 TypeScript,使用主项目的代码规范
  2. 复用公共组件:使用主项目的 ContentWrap、Dialog 等公共组件
  3. 统一 API 层:在 src/api/ 目录下创建对应的 API 模块
  4. 添加权限控制:为各功能添加细粒度的权限控制
  5. 国际化支持:添加多语言支持

文件结构

src/views/
├── caigou/           # 采购管理 & 物料采购
│   ├── index.vue                    # 物料交货计划分析
│   ├── MaterialPurchaseOrder.vue    # 物料采购订单
│   ├── SubcontractOrder.vue         # 委外加工订单
│   └── MaterialPurchaseRequest.vue  # 物料采购申请
├── dingdan/          # 订单管理
│   ├── Help.vue
│   ├── MyProcess.vue
│   └── purchase-order/
├── iqc/              # IQC检验
│   ├── ApplicationForm.vue
│   ├── ApplicationList.vue
│   ├── Favorites.vue
│   ├── Help.vue
│   ├── TaskForm.vue
│   └── TaskList.vue
├── jianmo/           # 建模管理
│   ├── views/
│   │   ├── CustomerManagement.vue
│   │   ├── MaterialManagement.vue
│   │   ├── OrderPriorityConfig.vue
│   │   ├── device/
│   │   ├── warehouse/
│   │   └── ...
│   └── ...
├── jiaohuo/          # 交货管理
│   ├── DailyPlan.vue
│   ├── DeliverySchedule.vue
│   ├── OrderDelivery.vue
│   ├── OrderReview.vue
│   └── ...
└── yichang/          # 异常管理
    ├── andon/
    ├── loss/
    └── sim/