--- name: Purchase Order Pages overview: Implement the Purchase Order (采购订单) module per the PRD, upgrading the existing skeletal frontend pages and filling backend gaps (detail-view query, import dialog API, supplier integration). todos: - id: backend-detail-view content: Add selectPoOrderDetailList in PoOrderMapper.xml joining erp_po_order + erp_po_order_line for line-level detail view with filters (trackCode, itemCode, itemName, supplierName, date range). Add /list endpoint alias or param to return this. status: completed - id: backend-import-api content: Add GET /erp/po/order/leadIn endpoint in PoOrderController that queries erp_mp_purchase (APPROVED, unpurchased qty > 0) with search by trackCode/itemCode/itemName, returning 10-column data for import dialog. status: completed - id: backend-date-params content: Update PoOrderMapper.xml selectPoOrderList and selectPoOrderDocList to accept beginDate/endDate params (align with frontend naming). status: completed - id: frontend-supplier-api content: Add poSupplier API functions in purchaseOrder.ts (or new file) calling /erp/po/supplier/list. Map PoSupplier fields (supplierName, contact1, tel, contact1Tel, enableFlag). status: completed - id: frontend-index-fix content: "Fix index.vue detail view: replace row.lines?.[0]?.xxx with flat fields from the new detail-list query. Ensure date params align with backend." status: completed - id: frontend-form-header content: "Rework form.vue header: 4-row x 5-col layout per PRD 4.2. Add collapse toggle, audit fields, status tags using PREPARE/APPROVED codes, businessStatus select, contractNo, contractFile upload placeholder." status: completed - id: frontend-form-supplier content: "Rework supplier dialog in form.vue: use PoSupplier API, add 7 columns (序号/名称/电话/联系人/手机/状态/操作), search by name + contact, 快速添加 + 查询所有 buttons." status: completed - id: frontend-form-import content: "Implement real import dialog in form.vue: call /erp/po/order/leadIn API, 10-column table per PRD 4.5, search fields (跟单编号/料品大类/物料编码/物料名称), 全选 button, confirm adds lines with itemId." status: completed - id: frontend-form-table content: "Enhance material table: add show-summary for 合计 row (数量/金额/到货数量), auto-calc amount=qty*price, compute totalQuantity/totalAmount before save, add supplierCode to supplier selection." status: completed - id: frontend-form-buttons content: "Add all mode-specific buttons: view mode (新增/编辑/审核/反审核/打印/操作/收起), edit mode (保存/撤回/审核/反审核/操作/收起/引入/新增物料), 上一条/下一条 navigation." status: completed isProject: false --- # Purchase Order Page Development Plan ## Current State The module has a working backend (CRUD, approve/unapprove, code generation, summary) and skeletal frontend pages. Key existing files: - **Backend**: [PoOrderController.java](mom-backend/ktg-mes/src/main/java/com/ktg/mes/po/controller/PoOrderController.java), [PoOrderMapper.xml](mom-backend/ktg-mes/src/main/resources/mapper/po/PoOrderMapper.xml), [PoOrderLineMapper.xml](mom-backend/ktg-mes/src/main/resources/mapper/po/PoOrderLineMapper.xml), [PoSupplierController.java](mom-backend/ktg-mes/src/main/java/com/ktg/mes/po/controller/PoSupplierController.java) - **Frontend**: [index.vue](erp-frontend-vue/src/views/Purchasing/Order/index.vue), [form.vue](erp-frontend-vue/src/views/Purchasing/Order/form.vue), [purchaseOrder.ts](erp-frontend-vue/src/api/purchaseOrder.ts), [supplier.ts](erp-frontend-vue/src/api/supplier.ts) ## Gaps to Fill ### Backend 1. **Detail-view query**: The PRD detail view is line-level (83 rows for 44 orders). Current `selectPoOrderList` returns order-level rows. Need a new mapper query `selectPoOrderDetailList` that joins `erp_po_order` with `erp_po_order_line` and supports filters: `trackCode`, `orderCode`, `supplierName`, `itemCode`, `itemName`, `beginDate`, `endDate`. 2. **Import dialog API (引入采购计划单明细)**: Need `GET /erp/po/order/leadIn` that queries `erp_mp_purchase` (status=APPROVED) with `purchaseQty - orderedQty > 0`, returning: planCode, salesOrderCode (trackCode), salesUserName, deliveryDate, itemId, itemCode, itemName, specification, unitName, needDate (demandDate), demandQty, orderedQty, unpurchasedQty. Support search by: trackCode, itemCode, itemName. 3. **Date filter params**: `selectPoOrderList` uses `params.beginOrderDate`/`params.endOrderDate` but frontend sends `beginDate`/`endDate`. Need to add support for both or align naming. 4. **Supplier list endpoint**: Backend already has `GET /erp/po/supplier/list` (at [PoSupplierController](mom-backend/ktg-mes/src/main/java/com/ktg/mes/po/controller/PoSupplierController.java)). Frontend currently calls `/mes/md/vendor` (MOM vendor table). For PO, should use `/erp/po/supplier`. ### Frontend 1. `**index.vue` detail view data model**: Currently accesses `row.lines?.[0]?.trackCode` but the list API returns flat orders without lines. After backend adds the line-level detail query, update the template to use flat fields directly (`row.trackCode`, `row.itemCode`, etc.). 2. `**form.vue` major rework** (the biggest task): - **Status codes**: Use `PREPARE`/`APPROVED`/`CLOSED` instead of Chinese labels `开立`/`审核` - **Header collapse**: Add toggle button and `v-show` for header form (pattern from [PurchasePlan/form.vue](erp-frontend-vue/src/views/Production/PurchasePlan/form.vue)) - **Full 4-row header layout** per PRD 4.2: add missing fields (审核员, 审核日期, 业务状态, 采购合同/上传, 用料需求 as read-only) - **Supplier dialog**: Switch from `/mes/md/vendor` to `/erp/po/supplier` API; add columns for 序号, 电话, 手机号, 状态, 操作(选择); add search by name + contact person + 快速添加 + 查询所有 - **Import dialog**: Replace hardcoded data with real API call to `GET /erp/po/order/leadIn`; add 10-column table per PRD 4.5; add search fields (跟单编号, 料品大类, 物料编码, 物料名称); add 全选 button - **Material table summary row**: Add `show-summary` with sum of 数量, 金额, 到货数量 - **Amount auto-calculation**: `amount = quantity * unitPrice` on change, update `totalQuantity` and `totalAmount` on header before save - **Buttons per mode**: view=[新增/编辑/审核/反审核/打印/操作/收起], edit=[保存/撤回/审核/反审核/操作/收起/引入/新增物料], add=[保存/取消/审核/反审核/收起/引入/新增物料] - **上一条/下一条** navigation (view/edit mode) - **撤回** button: reload saved data from server - **打印** button: `window.print()` or print dialog - **Compute totals** before save: `totalQuantity = sum(line.quantity)`, `totalAmount = sum(line.amount)` 3. `**purchaseOrder.ts` API additions**: Add `getImportPlanDetails(params)`, `getPoSupplierList(params)` functions. ## Architecture ```mermaid flowchart TD subgraph fe [Frontend] IndexVue["index.vue\n(list: detail + document views)"] FormVue["form.vue\n(add/edit/view)"] ApiTs["purchaseOrder.ts"] SupplierApi["supplier API"] end subgraph be [Backend] Controller["PoOrderController"] SupplierCtrl["PoSupplierController"] OrderSvc["PoOrderService"] PurchaseSvc["MpPurchaseService"] OrderMapper["PoOrderMapper.xml"] LineMapper["PoOrderLineMapper.xml"] end subgraph db [Database] PoOrder["erp_po_order"] PoLine["erp_po_order_line"] MpPurchase["erp_mp_purchase"] PoSupplier["erp_po_supplier"] end IndexVue --> ApiTs FormVue --> ApiTs FormVue --> SupplierApi ApiTs --> Controller SupplierApi --> SupplierCtrl Controller --> OrderSvc Controller --> PurchaseSvc OrderSvc --> OrderMapper OrderSvc --> LineMapper OrderMapper --> PoOrder LineMapper --> PoLine PurchaseSvc --> MpPurchase SupplierCtrl --> PoSupplier ``` ## Key Implementation Notes - The `erp_po_order` + `erp_po_order_line` is a proper 1:N header/line model (unlike `erp_mp_purchase` which is flat). Backend already handles insert/update with lines in the controller. - Supplier selection dialog in the PRD references `erp_po_supplier` (not `md_vendor`). The controller at `/erp/po/supplier` is already implemented. Frontend needs a new API wrapper or reuse existing supplier.ts with path change. - For the import dialog, we query `erp_mp_purchase` (approved plans) and map fields to the import dialog's 10 columns. - Pattern reference: [PurchasePlan/form.vue](erp-frontend-vue/src/views/Production/PurchasePlan/form.vue) for header collapse, import dialog, material table patterns.