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

> 依据：`供应商管理功能需求.md`、`供应商管理技术方案.md`（后端 v1.3）；布局对齐 `tradeMarket/distributor/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\|assignAccount` |

---

## 2. API 模块

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

| 方法 | HTTP | 说明 |
| --- | --- | --- |
| `listSupplier` | GET | `/list`，Query：`pageNum`、`pageSize`、`supplierCode`、`supplierName` |
| `getSupplier` | GET | `/{id}` |
| `addSupplier` | POST | `/`，Body 不含 `supplierCode` |
| `updateSupplier` | PUT | `/`，Body 含 `id`，不含 `supplierCode` |
| `delSupplier` | DELETE | `/{ids}`，单条传一个 id |
| `assignAccountSupplier` | POST | `/assignAccount/{id}`，无 Body |

---

## 3. 页面结构

1. **筛选区**：供应商编号、供应商名称（均**精确**匹配）；搜索、重置、新增。  
2. **列表区**：编号、名称、类型、身份识别号、联系方式、经营地点、车辆号码、收费方式、**账号分配**、操作（查看 / 编辑 / **分配账号** / 删除）。  
3. **新增/编辑弹窗**（550px）：编号只读（新增占位「保存后自动生成」）；类型切换身份字段；收费方式联动收费标准或两档费率；车辆号牌动态行（最多 10 条）；备注 ≤500 字。  
4. **查看弹窗**（720px）：只读全字段；按收费方式展示费率/标准；**账号分配状态**、**已分配登录名**、审计信息；底部：**分配账号**（未分配时）、编辑、删除、关闭。

---

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

| 规则 | 实现 |
| --- | --- |
| 供应商编号 | 新增 `buildPayload` **不传** `supplierCode`；编辑弹窗只读展示 |
| 供应商类型 | `1` 个体户 → 身份证、`ID_CARD_REG`；`2` 企业 → USCC、`USCC_REG` |
| 收费联动 | `feeMethod=1` 隐藏费率；`=2` 显示 `feeStandard`；`=3` 显示两费率 0～100% |
| 提交清洗 | `buildPayload` 按收费方式置不适用字段为 `null` |
| 车辆号牌 | `vehiclePlateList` 编辑；提交为 `vehiclePlates` 数组；`PLATE_REG`；最多 10 条 |
| 名称/手机 | 名称 trim 1～20 字；`PHONE_REG`；身份号 `trim().toUpperCase()` |
| 列表筛选 | `supplierCode`、`supplierName` **精确**（与承销商模糊不同） |
| 列表展示 | 优先 `supplierTypeName`/`feeMethodName`；车牌 `、` 拼接 |
| 删除 | 确认框展示编号、名称；后端存在未结算结算单时 msg「存在未结算的结算单，无法删除」，由 `request` 拦截器 toast |
| 分配账号 | `canAssignAccount(row)`：`Number(row.accountAssigned) === 0` 且有 `assignAccount` 权限；确认 `confirmAssign`；调 `assignAccountSupplier`；成功 toast `msgAssignOk` 并刷新列表；详情弹窗打开时重新 `getSupplier` |
| 账号列 | `accountAssigned === 1` 显示「是」+ `assignedLoginName`；否则「否」 |
| 后端角色 | 分配账号绑定角色 **103**（承销商为 104） |

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

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

**正则（页面内）**

| 名称 | 用途 |
| --- | --- |
| `ID_CARD_REG` | 18 位居民身份证 |
| `USCC_REG` | 18 位统一社会信用代码 |
| `PHONE_REG` | 大陆手机号 |
| `PLATE_REG` | 车牌号 |

**提交字段（`buildPayload`）**

| 字段 | 新增 | 修改 | 说明 |
| --- | --- | --- | --- |
| `supplierName` | Y | Y | trim |
| `supplierType` | Y | Y | |
| `identityNo` | Y | Y | 大写 |
| `contactPhone` | Y | Y | |
| `businessLocation` | N | N | |
| `vehiclePlates` | N | N | 字符串数组，≤10 |
| `feeMethod` | Y | Y | |
| `feeStandard` | 条件 | 条件 | `feeMethod=2` |
| `transactionFeeRate` | 条件 | 条件 | `feeMethod=3` |
| `managementFeeRate` | 条件 | 条件 | `feeMethod=3` |
| `remark` | N | N | |
| `id` | — | Y | |
| `supplierCode` | **禁止** | **禁止** | |

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `tradeMarket.supplier`（`lang/zh/tradeMarket.js`、`lang/bo/tradeMarket.js`） |
| **Mixin** | `tradeMarketLocaleMixin`，`tmNs = 'supplier'`，方法 `tmT` / `tmCommon` |
| **公共文案** | `tradeMarket.common.*`（含 `assignAccount`、`msgAssignOk`） |
| **状态文案** | `tradeMarket.status.yes` / `no` / `dash` |

**`supplier` 节点扩展键（v1.3）**

| 键 | 用途 |
| --- | --- |
| `colAccount` | 账号分配列 |
| `viewAssignedLogin` | 详情已分配登录名 |
| `confirmAssign` | 分配账号确认 |

---

## 6. 联调说明

1. 部署 `BizSupplierController` 及 `biz_supplier` 表；已分配账号字段见 `alter_biz_supplier_distributor_assign_account.sql`。  
2. 菜单组件 `tradeMarket/supplier/index`，权限与后端 §4 一致（含 `assignAccount`）。  
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`（`supplier` 节点及 `common`/`status`） |

---

## 8. 与承销商前端对照

| 项 | 供应商 | 承销商 |
| --- | --- | --- |
| 页面 | `tradeMarket/supplier/index.vue` | `tradeMarket/distributor/index.vue` |
| 筛选 | 编号/名称**精确** | **模糊** |
| 特色字段 | 车辆号牌、收费方式/费率 | **销售去向** |
| 分配账号 API | `assignAccountSupplier` | `assignAccountDistributor` |
| 后端角色 | **103** | **104** |
| 编辑弹窗宽度 | 550px | 720px |

---

## 9. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：双卡片 CRUD；收费三档联动；车辆动态行；汉藏 i18n |
| 1.1 | 分配账号 API/列表列/操作按钮；权限 `assignAccount`（方案稿） |
| 1.3 | **与实现对齐**：落地 `assignAccountSupplier`、账号列/详情/列表操作、`canAssignAccount`/`handleAssignAccount`；删除未结算结算单联调说明；`buildPayload` 字段表；i18n 扩展键；与承销商对照表；同步后端 v1.3 |