my-mom-system/.cursor/plans/production_issue_module_dbfe96a5.plan.md

---
name: Production Issue Module
overview: Create the full production material requisition (生产领料单) module under Warehouse, including 3 API files, router configuration, list page, and a form page with header/line/detail three-level data management, following existing codebase patterns.
todos:
  - id: api-layer
    content: "创建 3 个 API 文件: src/api/warehouse/issue.ts, issueLine.ts, issueDetail.ts，包含类型定义、状态常量和所有 CRUD + 业务接口"
    status: completed
  - id: router-config
    content: 在 router/index.ts 中追加 /warehouse 路由组，包含 issue 的 list/new/edit/view 四条路由
    status: completed
  - id: list-page
    content: 创建 src/views/Warehouse/Issue/index.vue 列表页：搜索区(7字段) + 工具栏(4按钮) + 表格(11列+操作列) + 分页 + 删除/出库校验逻辑
    status: completed
  - id: form-header
    content: 创建 src/views/Warehouse/Issue/form.vue 表头部分：页面框架 + el-collapse 表头表单(16字段, 4列布局) + 模式判断(isAdd/isEdit/isView) + 保存/取消/收起按钮
    status: completed
  - id: form-line-table
    content: form.vue 领料行子表：可编辑 el-table + 添加行 + 物料选择 + 领料数量输入 + 行CRUD
    status: completed
  - id: form-detail-table
    content: form.vue 出库明细子表：选中行后展示 + 仓库/库区/库位三级联动 el-select + 出库数量 + 明细CRUD
    status: completed
  - id: form-dialogs
    content: form.vue 4个选择弹窗：工单选择、物料选择、客户选择、工作站选择，搜索+表格+单选确认
    status: completed
  - id: form-business
    content: form.vue 业务逻辑：执行出库(checkQuantity + executeIssue)、数据加载(编辑/查看模式)、表单校验、状态控制
    status: completed
  - id: test-verify
    content: 整体联调验证：编译检查、页面路由跳转、列表加载、新增/编辑/查看模式切换
    status: completed
isProject: false
---

# 生产领料单模块开发计划

## 背景

根据 [PRD 文档](prd/mom系统生产领料单-页面开发说明文档.md)，开发仓储管理下的「生产领料」功能。该模块是项目中首个 Warehouse 模块，采用 **头(Header) -> 行(Line) -> 明细(Detail)** 三层数据结构，比现有的 WorkOrder（头+只读BOM子表）复杂度更高。

## 核心参考

- 现有最相似模块：[Production/WorkOrder](erp-frontend-vue/src/views/Production/WorkOrder/) (index.vue + form.vue)
- API 模式：[workOrder.ts](erp-frontend-vue/src/api/workOrder.ts) (类型定义 + 状态常量 + API 函数)
- 路由模式：[router/index.ts](erp-frontend-vue/src/router/index.ts) (Layout 子路由，list/new/edit/view 四条)

## 架构概览

```mermaid
graph TD
  subgraph pages [页面层]
    ListPage["index.vue 列表页"]
    FormPage["form.vue 新增/编辑/查看页"]
  end

  subgraph api [API 层]
    IssueAPI["issue.ts 领料单头"]
    IssueLineAPI["issueLine.ts 领料行"]
    IssueDetailAPI["issueDetail.ts 出库明细"]
  end

  subgraph backend [后端接口]
    HeaderAPI["/mes/wm/issueheader/*"]
    LineAPI["/mes/wm/issueline/*"]
    DetailAPI["/mes/wm/issuedetail/*"]
    WorkorderAPI["/mes/pro/workorder/list"]
    ItemAPI["/mes/md/mditem/list"]
    WarehouseAPI["/mes/wm/warehouse|location|area/list"]
  end

  ListPage --> IssueAPI
  FormPage --> IssueAPI
  FormPage --> IssueLineAPI
  FormPage --> IssueDetailAPI
  IssueAPI --> HeaderAPI
  IssueLineAPI --> LineAPI
  IssueDetailAPI --> DetailAPI
  FormPage --> WorkorderAPI
  FormPage --> ItemAPI
  FormPage --> WarehouseAPI
```



## 文件清单

```
erp-frontend-vue/src/
├── api/
│   └── warehouse/
│       ├── issue.ts            # 领料单头 API + 类型 + 状态常量
│       ├── issueLine.ts        # 领料行 CRUD API + 类型
│       └── issueDetail.ts      # 出库明细 CRUD API + 类型
├── views/
│   └── Warehouse/
│       └── Issue/
│           ├── index.vue       # 列表页
│           └── form.vue        # 新增/编辑/查看页（含行表+明细表+弹窗）
└── router/
    └── index.ts                # 追加 /warehouse 路由组
```

---

## 1. API 层（3 个文件）

### 1.1 `src/api/warehouse/issue.ts`

- 类型：`IssueHeader`, `IssueHeaderQuery`, `IssueHeaderListResponse`
- 状态常量：`STATUS_MAP` (PREPARE/CONFIRMED/APPROVED/FINISHED)
- API 函数：
  - `getIssueHeaderList(params)` -> GET `/mes/wm/issueheader/list`
  - `getIssueHeaderDetail(issueId)` -> GET `/mes/wm/issueheader/{issueId}`
  - `createIssueHeader(data)` -> POST `/mes/wm/issueheader`
  - `updateIssueHeader(data)` -> PUT `/mes/wm/issueheader`
  - `deleteIssueHeader(ids)` -> DELETE `/mes/wm/issueheader/{ids}`
  - `executeIssue(issueId)` -> PUT `/mes/wm/issueheader/{issueId}` (执行出库)
  - `checkQuantity(issueId)` -> GET `/mes/wm/issueheader/checkQuantity/{issueId}`
  - `exportIssueHeader(params)` -> POST `/mes/wm/issueheader/export`
- 辅助 API（弹窗选择）：
  - `getWorkorderSelectList(params)` -> GET `/mes/pro/workorder/list`
  - `getItemSelectList(params)` -> GET `/mes/md/mditem/list`
  - `getClientSelectList(params)` -> 复用现有客户接口
  - `getWarehouseList()` -> GET `/mes/wm/warehouse/list`
  - `getLocationList(warehouseId)` -> GET `/mes/wm/location/list`
  - `getAreaList(locationId)` -> GET `/mes/wm/area/list`

### 1.2 `src/api/warehouse/issueLine.ts`

- 类型：`IssueLine`
- API：`getIssueLineList(params)`, `createIssueLine(data)`, `updateIssueLine(data)`, `deleteIssueLine(ids)`

### 1.3 `src/api/warehouse/issueDetail.ts`

- 类型：`IssueDetail`
- API：`getIssueDetailList(params)`, `createIssueDetail(data)`, `updateIssueDetail(data)`, `deleteIssueDetail(ids)`

---

## 2. 路由配置

在 [router/index.ts](erp-frontend-vue/src/router/index.ts) 最后的 `]` 前追加 `/warehouse` 路由组：

```typescript
{
  path: '/warehouse',
  component: Layout,
  redirect: '/warehouse/issue',
  meta: { title: '仓储管理' },
  children: [
    { path: 'issue', name: 'IssueList', component: () => import('@/views/Warehouse/Issue/index.vue'), meta: { title: '生产领料' } },
    { path: 'issue/new', name: 'IssueNew', component: () => import('@/views/Warehouse/Issue/form.vue'), meta: { title: '新增领料单' } },
    { path: 'issue/edit/:id', name: 'IssueEdit', component: () => import('@/views/Warehouse/Issue/form.vue'), meta: { title: '编辑领料单' } },
    { path: 'issue/view/:id', name: 'IssueView', component: () => import('@/views/Warehouse/Issue/form.vue'), meta: { title: '查看领料单' } }
  ]
}
```

---

## 3. 列表页 `index.vue`

遵循 WorkOrder/index.vue 模式：

- **搜索区**：7 个字段 (issueCode, issueName, workorderCode, workstationName, status下拉, beginDate, endDate) + 搜索/重置按钮
- **工具栏**：新增(success) / 修改(primary) / 删除(danger) / 导出(warning) 四个按钮
- **表格**：复选框 + 11 列 (issueCode蓝色链接, issueName, workorderCode, taskCode, workstationName, clientName, issueDate, requiredTime, status标签, 操作列)
- **操作列**：根据 status 动态显隐 — 草稿显示：查看/编辑/删除/执行出库；已完成仅显示：查看
- **分页**：el-pagination，sizes=[10,20,50,100]
- **删除校验**：仅 PREPARE 状态允许，非草稿提示 "只能删除草稿状态的单据!"
- **执行出库**：调用 `checkQuantity` 校验 -> `executeIssue` -> 刷新列表

---

## 4. 表单页 `form.vue` (重点，三层数据)

这是本模块最复杂的部分，包含 **表头表单 + 领料行子表 + 出库明细子表 + 4个选择弹窗**。

### 4.1 页面顶部操作栏

- 新增/编辑模式：保存 + 取消 + 执行出库(编辑模式) + 收起/展开
- 查看模式：新增 + 编辑(仅草稿) + 收起/展开

### 4.2 表头表单 (el-collapse + el-form)

- 4 列布局 (`el-col :span="6"`)
- 字段：issueCode(必填), issueName(必填), 工单(选择弹窗), workorderCode(只读), 任务(选择), taskCode(只读), 工作站(选择), workstationCode/Name(只读), 客户(选择), clientCode/Name(只读), issueDate(日期), requiredTime(日期), status(标签), remark(textarea)
- 选择按钮通过 `el-input` 的 `#append` 插槽实现，与 WorkOrder 一致

### 4.3 领料行子表 (el-table, 可编辑)

- 数据源：`lineList: IssueLine[]`
- 列：序号, 物料编码(带选择按钮), 物料名称(只读), 规格型号(只读), 单位(只读), 领料数量(el-input-number), 批次号, 备注, 操作(编辑明细/删除)
- 「添加行」按钮：push 空行到 lineList
- 行点击/「编辑明细」：设置 `selectedLineIndex`，展示该行的出库明细
- 保存流程：表头保存后，逐行调用 `createIssueLine` / `updateIssueLine`；删除行调用 `deleteIssueLine`

### 4.4 出库明细子表 (el-table, 可编辑)

- 仅当选中某领料行时显示
- 数据源：`detailList: IssueDetail[]` (按 lineId 过滤)
- 列：序号, 物料编码/名称(只读,从行带入), 仓库(el-select), 库区(el-select,联动), 库位(el-select,联动), 批次号, 出库数量(el-input-number), 备注, 操作(删除)
- 仓库/库区/库位**三级联动**：选择仓库 -> 加载库区 -> 选择库区 -> 加载库位
- 保存：调用 `createIssueDetail` / `updateIssueDetail` / `deleteIssueDetail`

### 4.5 选择弹窗（4 个）


| 弹窗    | 数据来源                      | 选择模式  | 回填字段                                                     |
| ----- | ------------------------- | ----- | -------------------------------------------------------- |
| 选择工单  | `/mes/pro/workorder/list` | 单选    | workorderId, workorderCode                               |
| 选择物料  | `/mes/md/mditem/list`     | 单选/多选 | itemId, itemCode, itemName, specification, unitOfMeasure |
| 选择客户  | `/mes/md/client/list`     | 单选    | clientId, clientCode, clientName                         |
| 选择工作站 | workstation接口             | 单选    | workstationId, workstationCode, workstationName          |


弹窗结构遵循 WorkOrder form.vue 的 `el-dialog` + 搜索区 + `el-table` + highlight-current-row + 确定/取消 模式。

### 4.6 数据加载流程（编辑/查看）

```mermaid
sequenceDiagram
  participant Page as form.vue
  participant API as API Layer
  participant BE as Backend

  Page->>API: getIssueHeaderDetail(id)
  API->>BE: GET /mes/wm/issueheader/{id}
  BE-->>Page: 表头数据

  Page->>API: getIssueLineList(issueId)
  API->>BE: GET /mes/wm/issueline/list?issueId=xx
  BE-->>Page: 领料行列表

  Page->>API: getIssueDetailList(issueId)
  API->>BE: GET /mes/wm/issuedetail/list?issueId=xx
  BE-->>Page: 出库明细列表
```



### 4.7 保存流程

1. 表单校验 (issueCode必填, issueName必填)
2. 新增：`createIssueHeader` -> 获取 issueId -> `router.replace` 到编辑页
3. 编辑：`updateIssueHeader` -> 成功提示
4. 领料行的增删改在保存表头后独立操作（行级 CRUD）
5. 出库明细的增删改同样独立操作

### 4.8 执行出库流程

1. 前端校验：至少 1 条领料行，每行有明细数据
2. 调用 `checkQuantity(issueId)` 校验数量匹配
3. 调用 `executeIssue(issueId)` 执行出库
4. 成功后刷新页面数据，status 变为 FINISHED

---

## 5. 关键实现要点

- **三级联动**：仓库 -> 库区 -> 库位，使用 watch 监听上级变化，清空下级选项并重新加载
- **行级编辑**：领料行和出库明细均为表格内编辑（inline edit），非弹窗编辑
- **状态控制**：所有编辑操作受 `isView` 和 `formData.status` 双重控制；FINISHED 状态只读
- **样式复用**：直接复用 WorkOrder 的 `.form-container`, `.page-header`, `.main-card`, `.section-header`, `.dialog-search` 等 CSS 类