# 交易市场管理 — 前端技术方案

> 依据：`交易市场管理功能需求.md`、`交易市场管理技术方案.md`；布局对齐 `livestock/quarantineStation/index.vue`（双 `el-card`）；字段 **小驼峰**。

---

## 1. 页面与路由

| 项 | 说明 |
| --- | --- |
| **Vue 路径** | `ruoyi-ui/src/views/livestock/tradeMarket/index.vue` |
| **组件名** | `LivestockTradeMarket` |
| **菜单配置** | 组件路径：`livestock/tradeMarket/index`（「畜牧流通资源管理」目录下，手工配置） |
| **权限前缀** | `livestock:tradeMarket:list\|query\|add\|edit\|remove` |

---

## 2. API 模块

| 项 | 说明 |
| --- | --- |
| **文件** | `ruoyi-ui/src/api/livestock/tradeMarket.js` |
| **Base** | `/livestock/tradeMarket` |

| 方法 | HTTP | URI |
| --- | --- | --- |
| `listTradeMarket` | GET | `/list` |
| `getTradeMarket` | GET | `/{id}` |
| `addTradeMarket` | POST | `/` |
| `updateTradeMarket` | PUT | `/` |
| `delTradeMarket` | DELETE | `/{ids}` |

---

## 3. 页面结构

1. **筛选区**：市场名称（模糊 `marketName`）、运营状态（精确 `operateStatus`）；搜索、重置、新增。  
2. **列表区**：市场名称、详细地址、负责人、联系方式（脱敏）、运营状态、操作。  
3. **新增/编辑弹窗**：`marketName` 1～10、`detailAddress` textarea 1～200、负责人、手机号、`operateStatus`（默认 1）、单图上传。  
4. **查看弹窗**：全部字段只读、照片预览、审计信息；可跳转编辑/删除。

---

## 4. 业务规则（前端）

| 规则 | 实现 |
| --- | --- |
| 名称/地址/负责人 | `trim` 后校验长度；提交 payload 为去空白字符串 |
| 手机号 | `PHONE_REG`：`^1[3-9]\d{9}$` |
| 运营状态 | `operateStatus`：`1` 正常 `2` 停业 `3` 注销；新增默认 `1` |
| 照片 | `POST /common/upload`；`jpg/jpeg/png`、≤10MB、单张；`photoFileUrl` / `photoFilePath` |
| 列表筛选 | `queryParams.marketName`、`operateStatus` 原样提交 |
| 名称唯一 / 关联删除 | 由后端返回错误信息 |
| 地图标点 | **不实现** |

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `livestock.tradeMarket`（`lang/zh/livestock.js`、`lang/bo/livestock.js`） |
| **Mixin** | `livestockLocaleMixin`，`lsNs = 'tradeMarket'` |
| **公共文案** | `livestock.common.*`、`livestock.status.dash` |

---

## 6. 与检疫站 / 交易市场平台对照

| 项 | 检疫站 | 交易市场（本模块） | 交易市场平台·栏位 |
| --- | --- | --- | --- |
| 页面路径 | `livestock/quarantineStation/index` | `livestock/tradeMarket/index` | `tradeMarket/marketStall/index` |
| API Base | `/livestock/quarantineStation` | `/livestock/tradeMarket` | `/tradeMarket/marketStall` |
| 名称字段 | `stationName` | `marketName` | `stallCode`（只读） |

---

## 7. 联调说明

1. 部署 `BizTradeMarketController` 及 `biz_trade_market` 表。  
2. 菜单组件路径 `livestock/tradeMarket/index`，权限与后端 `livestock:tradeMarket:*` 一致。  
3. 验证：CRUD、名称模糊与状态精确筛选、照片上传回显、列表电话脱敏、无地图入口。

---

## 8. 文件清单

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

---

## 9. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：双卡片 CRUD；对齐检疫站页；`marketName` 小驼峰；路径与 `/tradeMarket/*` 平台模块区分 |