DOPJAVA/MODULES_INTEGRATION_GUIDE.md

自定义模块整合指南

本文档说明如何将 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/