huimv-baqing/doc/交易市场平台/交易订单管理/交易订单管理前端技术方案.md

交易订单管理 — 前端技术方案

依据：交易订单管理功能需求.md、交易订单管理技术方案.md；布局对齐 tradeMarket/marketEntry/index.vue（双 el-card）；字段 小驼峰。

---

1. 页面与路由

项	说明
Vue 路径	ruoyi-ui/src/views/tradeMarket/tradeOrder/index.vue
组件名	TradeMarketTradeOrder
菜单配置	组件路径：tradeMarket/tradeOrder/index（「交易市场平台」目录下，手工配置）
权限前缀	tradeMarket:tradeOrder:list\|query\|add\|edit\|remove\|pay

---

2. API 模块

项	说明
文件	ruoyi-ui/src/api/tradeMarket/tradeOrder.js
Base	/tradeMarket/tradeOrder

方法	HTTP	说明
listTradeOrder	GET	/list
getTradeOrder	GET	/{id}
addTradeOrder	POST	/
updateTradeOrder	PUT	/
delTradeOrder	DELETE	/{ids}
listTradeOrderSupplierEarTags	GET	/supplierEarTags?supplierId=
completeTradeOrderPay	PUT	/completePay

关联接口

方法	文件	说明
listSupplier	supplier.js	供应商筛选/表单
listDistributor	distributor.js	承销商筛选/表单
/common/upload	—	支付凭证上传

---

3. 页面结构

1. 筛选区：订单编号模糊；供应商、承销商精确；搜索、重置、新增。
   
2. 列表区：编号、创建时间、双方、采购明细入口、头数、金额、状态标签、支付凭证缩略图、完成时间、操作。
   
3. 新增/编辑弹窗：供应商/承销商可搜、采购明细可增删行（耳标/重量/金额）、头数与金额只读联动。
   
4. 完成支付弹窗：单图上传 → completePay。
   
5. 采购明细表弹窗：列表快捷只读查看。
   
6. 查看弹窗：全字段 + 明细表 + 审计；待支付可编辑/删除。
   
7. 打印：待支付「打印小票」；已完成「打印凭证」（新窗口 HTML + window.print()）。

---

4. 业务规则（前端）

规则	实现
订单状态	0 待支付 / 1 已完成；操作按钮按 §8.7 矩阵显示
换供应商	onSupplierChange 清空 lineList 并重载耳标
耳标下拉	listTradeOrderSupplierEarTags（进栏子表）；earTagOptionsForRow 排除本单已选
明细校验	至少 1 行；耳标不重复；重量/金额 > 0
汇总	syncTotals：totalHeads = lineList.length；totalAmount = sum(amount) 保留 2 位
完成支付	payVoucherUrl/payVoucherPath；jpg/jpeg/png ≤10MB
打印边界	小票仅待支付；凭证仅已完成
删除/编辑	前端拦截已完成；后端 R7 二次校验

---

5. 国际化

项	说明
语言包	tradeMarket.tradeOrder（lang/zh/tradeMarket.js、lang/bo/tradeMarket.js）
Mixin	tradeMarketLocaleMixin，tmNs = 'tradeOrder'

---

6. 联调说明

1. 部署 BizTradeOrderController 及 biz_trade_order、biz_trade_order_line 表。
   
2. 预置供应商（含收费配置）、承销商、市场进栏耳标数据。
   
3. 菜单组件 tradeMarket/tradeOrder/index，权限与后端一致。
   
4. 验证：新增待支付、修改明细、完成支付生成结算单、打印、逻辑删除、双语切换。

---

7. 文件清单

类型	路径
页面	ruoyi-ui/src/views/tradeMarket/tradeOrder/index.vue
API	ruoyi-ui/src/api/tradeMarket/tradeOrder.js
Mixin	ruoyi-ui/src/mixins/tradeMarketLocaleMixin.js（复用）
i18n	ruoyi-ui/src/lang/zh/tradeMarket.js、lang/bo/tradeMarket.js（tradeOrder 节点）

---

8. 修订记录

版本	说明
1.0	初版：列表+CRUD、采购明细表、完成支付、打印小票/凭证、汉藏双语