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

> 依据：`交易订单管理功能需求.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、采购明细表、完成支付、打印小票/凭证、汉藏双语 |