390 lines
9.7 KiB
Markdown
390 lines
9.7 KiB
Markdown
# 特色区域查看客户功能实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**目标:** 在特色区域详情窗口添加"查看客户"图标按钮，复用现有的 customer-modal 组件，实现客户列表查看功能。
|
||
|
||
**架构:** 组件复用架构 - BMapPolygonEditor.vue 引入 CustomerModal.vue，通过 refs 调用模态框的 onOpen() 方法。
|
||
|
||
**技术栈:** Vue 2.x, Element UI, 若依框架
|
||
|
||
**设计文档:** `docs/plans/2026-02-28-featured-area-customer-view-design.md`
|
||
|
||
---
|
||
|
||
## 任务 1: 引入 CustomerModal 组件
|
||
|
||
**文件:**
|
||
- 修改: `ruoyi-ui/src/map/BMapPolygonEditor.vue:20-30`（import 区域）
|
||
|
||
**步骤 1: 在 script 标签内添加 import 语句**
|
||
|
||
在第22行（MenuEdit 导入语句之后）添加：
|
||
|
||
```javascript
|
||
import CustomerModal from "@/views/grid/map/draw-area/customer-modal.vue"
|
||
```
|
||
|
||
**步骤 2: 在 components 中注册组件**
|
||
|
||
在第26-30行的 components 对象中添加 CustomerModal：
|
||
|
||
```javascript
|
||
components: {
|
||
MenuEdit,
|
||
BMapPolygonEditor,
|
||
MenuEdit,
|
||
CustomerModal, // 新增
|
||
},
|
||
```
|
||
|
||
**步骤 3: 验证 import 路径正确**
|
||
|
||
运行前端项目验证无报错：
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
预期: 浏览器控制台无 "Failed to mount component" 错误
|
||
|
||
**步骤 4: 提交代码**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/map/BMapPolygonEditor.vue
|
||
git commit -m "feat(featured-areas): 引入 CustomerModal 组件"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 2: 在 template 中添加组件引用
|
||
|
||
**文件:**
|
||
- 修改: `ruoyi-ui/src/map/BMapPolygonEditor.vue:270-275`（template 末尾）
|
||
|
||
**步骤 1: 在 template 末尾添加组件标签**
|
||
|
||
在第273行（`</transition>` 之后，`<div class="search-box">` 之前）添加：
|
||
|
||
```vue
|
||
</transition>
|
||
<!-- 查看客户模态框 -->
|
||
<customer-modal
|
||
ref="customerModal"
|
||
cardType="featured"
|
||
:detailInfo="areaForm"
|
||
:btnType="'2'"
|
||
/>
|
||
<div class="search-box">
|
||
```
|
||
|
||
**步骤 2: 验证组件引用**
|
||
|
||
在浏览器中打开特色区域页面，验证控制台无报错。
|
||
|
||
**步骤 3: 验证 props 传递**
|
||
|
||
在 Vue DevTools 中检查 customer-modal 组件的 props：
|
||
- cardType 应该是 "featured"
|
||
- detailInfo 应该是 areaForm 对象
|
||
- btnType 应该是 "2"
|
||
|
||
**步骤 4: 提交代码**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/map/BMapPolygonEditor.vue
|
||
git commit -m "feat(featured-areas): 添加 CustomerModal 组件引用"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 3: 在区域详情窗口添加查看客户图标按钮
|
||
|
||
**文件:**
|
||
- 修改: `ruoyi-ui/src/map/BMapPolygonEditor.vue:221-240`（edit-operate 按钮区域）
|
||
|
||
**步骤 1: 定位按钮插入位置**
|
||
|
||
找到第221-240行的代码区域，这是 `infoType === 'SHOW'` 的按钮区域：
|
||
- 第229行：修改信息按钮结束
|
||
- 第240行：删除区域按钮开始
|
||
|
||
我们需要在修改信息按钮之后插入查看客户按钮。
|
||
|
||
**步骤 2: 添加查看客户图标按钮**
|
||
|
||
在第239行（修改信息 tooltip 结束）之后，第240行（删除区域 tooltip 开始）之前插入：
|
||
|
||
```vue
|
||
</el-tooltip>
|
||
<!-- 查看客户 -->
|
||
<el-tooltip placement="top" effect="light" content="查看客户">
|
||
<i
|
||
class="el-icon-user icon-area"
|
||
@click.stop="previewCustomer"
|
||
/>
|
||
</el-tooltip>
|
||
<!-- 删除区域 -->
|
||
<el-tooltip placement="top" effect="light" content="删除区域">
|
||
```
|
||
|
||
**步骤 3: 验证图标样式**
|
||
|
||
在浏览器中：
|
||
1. 打开特色区域页面
|
||
2. 点击一个已绘制的区域
|
||
3. 查看区域详情窗口底部的图标按钮区域
|
||
4. 验证新添加的"用户图标"样式与其他图标一致
|
||
|
||
**步骤 4: 验证 tooltip 显示**
|
||
|
||
1. 鼠标悬停在新添加的用户图标上
|
||
2. 验证 tooltip 显示"查看客户"
|
||
3. 验证 tooltip 样式与其他 tooltip 一致
|
||
|
||
**步骤 5: 提交代码**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/map/BMapPolygonEditor.vue
|
||
git commit -m "feat(featured-areas): 添加查看客户图标按钮"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 4: 实现 previewCustomer 方法
|
||
|
||
**文件:**
|
||
- 修改: `ruoyi-ui/src/map/BMapPolygonEditor.vue:900-1000`（methods 区域）
|
||
|
||
**步骤 1: 定位 methods 区域**
|
||
|
||
找到 methods 对象的最后，准备添加新方法。建议添加在 `updateAreaShape()` 方法之后。
|
||
|
||
**步骤 2: 添加 previewCustomer 方法**
|
||
|
||
在 methods 对象中添加：
|
||
|
||
```javascript
|
||
/**
|
||
* 调整边界
|
||
*/
|
||
updateAreaShape() {
|
||
// ... 现有代码
|
||
},
|
||
/**
|
||
* 查看客户
|
||
*/
|
||
previewCustomer() {
|
||
this.$refs.customerModal.onOpen()
|
||
}
|
||
```
|
||
|
||
**步骤 3: 验证方法调用**
|
||
|
||
在浏览器控制台中测试：
|
||
1. 打开特色区域页面
|
||
2. 点击一个区域，打开区域详情窗口
|
||
3. 打开 Vue DevTools
|
||
4. 找到 BMapPolygonEditor 组件
|
||
5. 在控制台执行：`$vm0.previewCustomer()`
|
||
6. 验证 customer-modal 模态框成功打开
|
||
|
||
**步骤 4: 提交代码**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/map/BMapPolygonEditor.vue
|
||
git commit -m "feat(featured-areas): 实现 previewCustomer 方法"
|
||
```
|
||
|
||
---
|
||
|
||
## 任务 5: 功能测试
|
||
|
||
**文件:**
|
||
- 无需修改文件
|
||
|
||
**步骤 1: 启动前端项目**
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
预期: 项目成功启动在 http://localhost:80
|
||
|
||
**步骤 2: 登录系统**
|
||
|
||
1. 访问 http://localhost:80
|
||
2. 使用测试账号登录：
|
||
- 用户名: admin
|
||
- 密码: admin123
|
||
|
||
**步骤 3: 进入特色区域页面**
|
||
|
||
1. 导航到"网格管理" > "区域绘制"
|
||
2. 点击"特色区域"标签（btnType=2）
|
||
3. 等待地图加载完成
|
||
|
||
**步骤 4: 测试查看客户按钮**
|
||
|
||
1. 在左侧菜单中选择一个特色区域图层
|
||
2. 在地图上点击一个已绘制的特色区域
|
||
3. 验证右上角弹出区域详情窗口
|
||
4. 查看窗口底部的图标按钮区域
|
||
5. 验证显示"用户图标"（查看客户按钮）
|
||
|
||
**步骤 5: 测试点击功能**
|
||
|
||
1. 点击"查看客户"图标
|
||
2. 验证：
|
||
- customer-modal 对话框成功打开
|
||
- 对话框标题显示"查看客户"
|
||
- 顶部显示区域名称和规模信息
|
||
- 客户列表成功加载
|
||
- 显示三种客户类型标签（企业/个人/商户）
|
||
|
||
**步骤 6: 测试客户类型切换**
|
||
|
||
1. 点击"个人"标签
|
||
2. 验证客户列表刷新，显示个人客户
|
||
3. 点击"商户"标签
|
||
4. 验证客户列表刷新，显示商户客户
|
||
5. 点击"企业"标签
|
||
6. 验证客户列表刷新，显示企业客户
|
||
|
||
**步骤 7: 测试分页功能**
|
||
|
||
1. 如果客户数量超过10条，验证分页器显示
|
||
2. 点击下一页
|
||
3. 验证客户列表刷新，显示第二页数据
|
||
4. 修改每页显示条数
|
||
5. 验证列表重新加载
|
||
|
||
**步骤 8: 测试客户详情跳转**
|
||
|
||
1. 点击表格中的客户名称（el-button）
|
||
2. 验证路由跳转到客户详情页面
|
||
3. 验证详情页面显示正确的客户信息
|
||
|
||
**步骤 9: 测试现有功能兼容性**
|
||
|
||
1. 关闭客户模态框
|
||
2. 依次点击其他4个图标按钮：
|
||
- 重新申请
|
||
- 修改信息
|
||
- 删除区域
|
||
- 调整边界
|
||
3. 验证这些按钮功能正常，无报错
|
||
|
||
**步骤 10: 测试行政区域兼容性**
|
||
|
||
1. 切换到"行政区域"标签（btnType=1）
|
||
2. 点击一个行政区域
|
||
3. 验证行政区域的"查看客户"按钮功能正常
|
||
4. 验证两个区域类型的查看客户功能互不影响
|
||
|
||
**步骤 11: 检查浏览器控制台**
|
||
|
||
1. 打开浏览器开发者工具
|
||
2. 切换到 Console 标签
|
||
3. 执行所有测试步骤
|
||
4. 验证控制台无 JavaScript 报错
|
||
5. 验证控制台无 Vue 警告
|
||
|
||
**步骤 12: 最终提交**
|
||
|
||
如果所有测试通过：
|
||
|
||
```bash
|
||
git status
|
||
```
|
||
|
||
预期: 无未提交的文件
|
||
|
||
---
|
||
|
||
## 任务 6: 更新文档（可选）
|
||
|
||
**文件:**
|
||
- 修改: `docs/plans/2026-02-28-featured-area-customer-view-design.md`
|
||
|
||
**步骤 1: 更新验收标准**
|
||
|
||
在验收标准的各项前打勾：
|
||
|
||
```markdown
|
||
### 6.1 功能验收
|
||
|
||
- [x] 区域详情窗口中显示"查看客户"图标按钮
|
||
- [x] 点击按钮后成功打开客户查看模态框
|
||
- [x] 模态框顶部显示正确的区域名称和规模
|
||
- [x] 客户列表正确加载（企业/个人/商户三种类型）
|
||
- [x] 客户类型切换功能正常
|
||
- [x] 分页功能正常
|
||
- [x] 点击客户名称可跳转到客户详情页
|
||
|
||
### 6.2 UI验收
|
||
|
||
- [x] 图标样式与现有图标按钮一致
|
||
- [x] 图标大小、颜色、间距合理
|
||
- [x] Tooltip 正确显示"查看客户"
|
||
- [x] 图标位置合理，不拥挤
|
||
|
||
### 6.3 性能验收
|
||
|
||
- [x] 页面加载速度无明显变化
|
||
- [x] 模态框打开速度正常（<1秒）
|
||
- [x] 客户列表加载速度正常（<2秒）
|
||
|
||
### 6.4 兼容性验收
|
||
|
||
- [x] 现有4个图标按钮功能正常
|
||
- [x] 行政区域的查看客户功能正常
|
||
- [x] 浏览器控制台无报错
|
||
```
|
||
|
||
**步骤 2: 提交文档更新**
|
||
|
||
```bash
|
||
git add docs/plans/2026-02-28-featured-area-customer-view-design.md
|
||
git commit -m "docs: 更新特色区域查看客户功能验收状态"
|
||
```
|
||
|
||
---
|
||
|
||
## 完成检查清单
|
||
|
||
实施完成后，验证以下内容：
|
||
|
||
- [ ] 所有6个任务已完成
|
||
- [ ] 所有 git commits 已提交
|
||
- [ ] 前端项目无编译错误
|
||
- [ ] 浏览器控制台无 JavaScript 错误
|
||
- [ ] 功能测试全部通过
|
||
- [ ] 代码已推送到远程仓库（如需要）
|
||
|
||
## 回滚方案
|
||
|
||
如果实施过程中遇到问题，可以回滚：
|
||
|
||
```bash
|
||
# 查看提交历史
|
||
git log --oneline
|
||
|
||
# 回滚到指定提交（替换 <commit-hash> 为实际的 commit hash）
|
||
git reset --hard <commit-hash>
|
||
|
||
# 或者回滚所有提交（回到初始状态）
|
||
git reset --hard HEAD~4
|
||
```
|
||
|
||
## 相关资源
|
||
|
||
- **设计文档**: `docs/plans/2026-02-28-featured-area-customer-view-design.md`
|
||
- **修改文件**: `ruoyi-ui/src/map/BMapPolygonEditor.vue`
|
||
- **复用组件**: `ruoyi-ui/src/views/grid/map/draw-area/customer-modal.vue`
|
||
- **参考实现**: `ruoyi-ui/src/views/grid/map/draw-area/components/menulist-modal.vue:413-416`
|
||
- **Element UI 文档**: https://element.eleme.cn/#/zh-CN/component/tooltip
|
||
- **Vue 2.x 文档**: https://v2.cn.vuejs.org/
|