# 供应商管理 — 前端技术方案

> 依据：`供应商管理功能需求.md`、`供应商管理技术方案.md`；布局对齐 `dataHub/dataSendRecord/index.vue`（双 `el-card`）；字段 **小驼峰**。

---

## 1. 页面与路由

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

---

## 2. API 模块

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

| 方法 | HTTP | 说明 |
| --- | --- | --- |
| `listSupplier` | GET | `/list` |
| `getSupplier` | GET | `/{id}` |
| `addSupplier` | POST | `/` |
| `updateSupplier` | PUT | `/` |
| `delSupplier` | DELETE | `/{ids}` |

---

## 3. 页面结构

1. **筛选区**：供应商编号、供应商名称（均**精确**匹配）；搜索、重置、新增。  
2. **列表区**：编号、名称、类型、身份识别号、联系方式、经营地点、车辆号码、收费方式、操作（查看/编辑/删除）。  
3. **新增/编辑弹窗**：编号只读（新增为「保存后自动生成」）；类型切换身份字段标签；收费方式联动显示收费标准或两档费率；车辆号牌动态行（最多 10 条，`+` 增行）。  
4. **查看弹窗**：只读全字段；按收费方式展示费率/标准；底部编辑、删除。

---

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

| 规则 | 实现 |
| --- | --- |
| 供应商编号 | 新增不传；编辑只读展示 `supplierCode` |
| 供应商类型 | `1` 个体户 → 身份证校验；`2` 企业 → 18 位 USCC |
| 收费联动 | `feeMethod=1` 隐藏费率；`=2` 显示 `feeStandard`；`=3` 显示两费率 0～100% |
| 提交清洗 | `buildPayload` 按收费方式置不适用字段为 `null` |
| 车辆号牌 | `vehiclePlateList` 编辑；提交为 `vehiclePlates` 数组；车牌正则校验 |
| 名称/手机 | 名称 1～20 trim；`PHONE_REG` |
| 列表展示 | 优先 `supplierTypeName`/`feeMethodName`；车牌 `、` 拼接 |
| 删除 | 确认框展示编号、名称 |

**枚举常量（页面内）**

| 常量 | 值 |
| --- | --- |
| 个体户 | `supplierType = 1` |
| 企业 | `supplierType = 2` |
| 按户计费 | `feeMethod = 1` |
| 按头计费 | `feeMethod = 2` |
| 按额计费 | `feeMethod = 3` |

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `tradeMarket.supplier`（`lang/zh/tradeMarket.js`、`lang/bo/tradeMarket.js`） |
| **Mixin** | `tradeMarketLocaleMixin`，`tmNs = 'supplier'`，方法 `tmT` / `tmCommon` |
| **注册** | `lang/zh-CN.js`、`lang/bo.js` 引入 `tradeMarket` |

---

## 6. 联调说明

1. 部署 `BizSupplierController` 及 `biz_supplier` 表（见后端技术方案）。  
2. 菜单组件 `tradeMarket/supplier/index`，权限与后端 §4 一致。  
3. 验证：编号/名称精确筛选、三种收费方式新增、类型切换证件校验、车辆多条、修改编号不变、逻辑删除、双语切换。

---

## 7. 文件清单

| 类型 | 路径 |
| --- | --- |
| 页面 | `ruoyi-ui/src/views/tradeMarket/supplier/index.vue` |
| API | `ruoyi-ui/src/api/tradeMarket/supplier.js` |
| Mixin | `ruoyi-ui/src/mixins/tradeMarketLocaleMixin.js` |
| i18n | `ruoyi-ui/src/lang/zh/tradeMarket.js`、`lang/bo/tradeMarket.js` |

---

## 8. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：双卡片 CRUD；收费三档联动；车辆动态行；汉藏 i18n |