# 特色区域详情窗口添加查看客户功能设计文档 ## 文档信息 - **日期**: 2026-02-28 - **作者**: Claude Code - **模块**: 区域绘制 - 特色区域 - **需求来源**: 用户需求 ## 1. 概述 ### 1.1 背景数字支行辅助管理系统的区域绘制功能包含两种区域类型： 1. **行政区域**（btnType=1）：使用 index.vue 页面，区域详情窗口已有"查看客户"按钮 2. **特色区域**（btnType=2）：使用 BMapPolygonEditor.vue 组件，区域详情窗口缺少"查看客户"功能 ### 1.2 目标在特色区域的区域详情窗口中，添加"查看客户"按钮，使功能与行政区域保持一致，方便用户快速查看该区域内的客户信息。 ### 1.3 范围 **涉及模块：** - 前端：`ruoyi-ui/src/map/BMapPolygonEditor.vue` - 复用组件：`ruoyi-ui/src/views/grid/map/draw-area/customer-modal.vue` **不涉及：** - 后端 API 修改 - 数据库修改 - 新增文件 ## 2. 需求分析 ### 2.1 用户需求在区域绘制的特色区域详情窗口内，添加一个查看客户的按钮，功能与特色区域列表（menulist-modal）中的查看客户功能保持一致。 ### 2.2 功能需求 #### 必须实现（MVP） - ✅ 在区域详情窗口的按钮区域添加"查看客户"图标按钮 - ✅ 点击按钮后打开客户查看模态框 - ✅ 模态框中显示该特色区域的企业、个人、商户客户列表 - ✅ 支持客户类型切换（企业/个人/商户） - ✅ 支持分页查询 - ✅ 支持点击客户名称跳转到客户详情页 #### 可选功能 - 无 ### 2.3 非功能需求 - **性能**: 不影响页面加载速度 - **易用性**: 图标按钮风格与现有按钮保持一致 - **兼容性**: 不影响现有功能 - **可维护性**: 代码结构清晰，复用现有组件 ## 3. 技术设计 ### 3.1 整体架构采用组件复用架构： - **展示层**: BMapPolygonEditor.vue（特色区域地图编辑器） - **组件层**: CustomerModal.vue（客户查看模态框，已存在） - **数据层**: API 接口（shapeCustList，已存在） ### 3.2 方案选择经过方案对比分析，选择**方案1：添加图标按钮** **方案对比：** | 方案 | 优点 | 缺点 | 评分 | |------|------|------|------| | 方案1：图标按钮 | UI风格一致、改动最小、实现简单 | 图标不如文字明显 | ★★★★★ | | 方案2：文字按钮 | 按钮明显、文字清晰 | 可能破坏布局、需要调整样式 | ★★★☆☆ | | 方案3：替换布局 | 与行政区域一致 | 改动大、影响用户体验 | ★★☆☆☆ | ### 3.3 数据流程 ``` 用户操作流程: 用户点击特色区域 ↓ 显示区域详情窗口（area-info-modal） ↓ 用户点击"查看客户"图标按钮 ↓ 触发 previewCustomer() 方法 ↓ 调用 this.$refs.customerModal.onOpen() ↓ CustomerModal 组件接收参数: - cardType="featured" (标识特色区域) - :detailInfo="areaForm" (包含 shapeId) - :btnType="'2'" (特色区域类型) ↓ CustomerModal 调用 shapeCustList API ↓ 获取并展示客户列表数据 ↓ 用户可切换客户类型（企业/个人/商户） ↓ 用户可点击客户名称查看详情 ``` ### 3.4 接口设计 **使用现有接口：** #### 获取特色区域客户列表 - **接口**: `shapeCustList` - **文件**: `@/api/grid/draw-area.js` - **参数**: - shapeId: 区域ID - pageNum: 页码 - pageSize: 每页条数 - custType: 客户类型（0=个人，1=商户，2=企业） - **返回**: 客户列表数据 **无需新增接口。** ### 3.5 组件设计 #### BMapPolygonEditor.vue 修改 **1. 引入组件** ```javascript import CustomerModal from "@/views/grid/map/draw-area/customer-modal.vue" export default { components: { // ... 现有组件 CustomerModal, }, } ``` **2. 添加组件引用** 在 template 末尾（约第273行之后）添加： ```vue ``` **3. 添加图标按钮** 在区域详情窗口的按钮区域（第221-270行），建议位置在"修改信息"按钮之后： ```vue