huimv-baqing/doc/交易市场平台/隔离圈位管理/隔离圈位管理前端技术方案.md

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

依据：隔离圈位管理功能需求.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