# 隔离圈位管理 — 前端技术方案

> 依据：`隔离圈位管理功能需求.md`、`隔离圈位管理技术方案.md`；布局对齐 `tradeMarket/distributor/index.vue`（双 `el-card`）；字段 **小驼峰**。

---

## 1. 页面与路由

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

---

## 2. API 模块

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

| 方法 | HTTP | URI |
| --- | --- | --- |
| `listIsolationPen` | GET | `/list` |
| `getIsolationPen` | GET | `/{id}` |
| `addIsolationPen` | POST | `/` |
| `updateIsolationPen` | PUT | `/` |
| `delIsolationPen` | DELETE | `/{ids}` |
| `getIsolationSetting` | GET | `/setting` |
| `updateIsolationSetting` | PUT | `/setting` |

---

## 3. 页面结构

1. **筛选区**：圈位编号（模糊）；搜索、重置、新增、**设置隔离天数**（`config` 权限）。  
2. **列表区**：圈位编号、备注、操作（查看/编辑/删除）。  
3. **新增/编辑弹窗**：编号只读；备注 textarea（≤50 字）。  
4. **查看弹窗**：编号、备注、审计信息。  
5. **设置隔离天数弹窗**：`el-input-number`（1～3650，整数）+ 单位「天」；配置备注 ≤50 字。

---

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

| 规则 | 实现 |
| --- | --- |
| 圈位编号 | 新增不传；编辑/查看只读 `penCode` |
| 圈位备注 | 选填；`validatePenRemark` 最长 50；提交 trim 后空串为 `null` |
| 列表筛选 | `queryParams.penCode` 原样提交，后端模糊 |
| 默认隔离天数 | `defaultDays` 必填；`MIN=1`、`MAX=3650`；`el-input-number` `:precision="0"` |
| 配置备注 | 选填 ≤50；`validateSettingRemark` |
| 配置回显 | 打开设置弹窗时 `getIsolationSetting`；无数据则空表单 |
| 配置保存 | `updateIsolationSetting`；成功提示 `msgSettingOk`，不刷新圈位列表 |

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `tradeMarket.isolationPen`（`lang/zh/tradeMarket.js`、`lang/bo/tradeMarket.js`） |
| **Mixin** | `tradeMarketLocaleMixin`，`tmNs = 'isolationPen'` |
| **公共文案** | `tradeMarket.common.*` |

---

## 6. 联调说明

1. 部署 `BizIsolationPenController` 及 `biz_isolation_pen`、`biz_isolation_setting` 表。  
2. 菜单 `tradeMarket/isolationPen/index`，含 `config` 按钮权限。  
3. 验证：圈位 CRUD、编号模糊、设置天数首次保存与覆盖、权限按钮显隐。

---

## 7. 文件清单

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

---

## 8. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：双卡片；圈位 CRUD + 设置隔离天数弹窗；复用 tradeMarket mixin |