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

name, overview, todos, isProject

name	overview	todos	isProject
Purchase Order Pages	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).	id content status backend-detail-view 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. completed id content status backend-import-api 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. completed id content status backend-date-params Update PoOrderMapper.xml selectPoOrderList and selectPoOrderDocList to accept beginDate/endDate params (align with frontend naming). completed id content status frontend-supplier-api Add poSupplier API functions in purchaseOrder.ts (or new file) calling /erp/po/supplier/list. Map PoSupplier fields (supplierName, contact1, tel, contact1Tel, enableFlag). completed id content status frontend-index-fix 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. completed id content status frontend-form-header 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. completed id content status frontend-form-supplier Rework supplier dialog in form.vue: use PoSupplier API, add 7 columns (序号/名称/电话/联系人/手机/状态/操作), search by name + contact, 快速添加 + 查询所有 buttons. completed id content status frontend-form-import 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. completed id content status frontend-form-table Enhance material table: add show-summary for 合计 row (数量/金额/到货数量), auto-calc amount=qty*price, compute totalQuantity/totalAmount before save, add supplierCode to supplier selection. completed id content status frontend-form-buttons Add all mode-specific buttons: view mode (新增/编辑/审核/反审核/打印/操作/收起), edit mode (保存/撤回/审核/反审核/操作/收起/引入/新增物料), 上一条/下一条 navigation. completed	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, PoOrderMapper.xml, PoOrderLineMapper.xml, PoSupplierController.java
• Frontend: index.vue, form.vue, purchaseOrder.ts, 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). 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)
• 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

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 for header collapse, import dialog, material table patterns.