186 lines
6.4 KiB
Markdown
186 lines
6.4 KiB
Markdown
# Project Detail Risk People Export Frontend Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
>
|
||
> **Repo note:** 本仓库 `AGENTS.md` 明确禁止开启 subagent，执行本计划时请在当前会话使用 `superpowers:executing-plans`。
|
||
|
||
**Goal:** 为项目详情“结果总览 -> 风险总览”人员列表的“导出”按钮接通真实下载动作，让前端按当前项目导出全部风险人员，同时不影响现有分页和“查看项目”行为。
|
||
|
||
**Architecture:** 前端继续使用 `PreliminaryCheck.vue -> RiskPeopleSection.vue` 现有结构，不新增导出弹窗、导出状态管理或 API 封装层。实现采用仓库现成的 `this.download(...)` 模式，直接在 `RiskPeopleSection.vue` 中根据 `projectId` 触发 `/ccdi/project/overview/risk-people/export` 下载，保持改动集中在结果总览人员组件和静态结构回归测试中。
|
||
|
||
**Tech Stack:** Vue 2, Element UI, SCSS, 若依前端 `download` 插件, Node `assert` 结构测试
|
||
|
||
---
|
||
|
||
### Task 1: 锁定风险人员导出按钮的前端契约
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js`
|
||
- Create: `ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js`
|
||
|
||
- [ ] **Step 1: 先写失败测试，锁定导出方法、下载路径和文件名**
|
||
|
||
```javascript
|
||
[
|
||
"handleRiskPeopleExport",
|
||
"this.download(",
|
||
"ccdi/project/overview/risk-people/export",
|
||
"projectId: this.projectId",
|
||
"风险人员总览_",
|
||
].forEach((token) => assert(source.includes(token), token));
|
||
```
|
||
|
||
```javascript
|
||
assert(source.includes("@click=\"handleRiskPeopleExport\""), "导出按钮必须绑定导出事件");
|
||
```
|
||
|
||
- [ ] **Step 2: 运行前端结构测试，确认当前按钮还只是静态文案**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- FAIL，提示缺少 `handleRiskPeopleExport`
|
||
- FAIL，提示“导出”按钮尚未绑定 `@click`
|
||
|
||
- [ ] **Step 3: 提交当前失败测试基线到工作区，不提交 Git**
|
||
|
||
工作区保持红灯，继续下一任务实现，不要在此步提前提交。
|
||
|
||
### Task 2: 在 `RiskPeopleSection.vue` 中接通最短路径导出
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue`
|
||
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js`
|
||
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js`
|
||
|
||
- [ ] **Step 1: 写最小实现，只在组件内接通下载**
|
||
|
||
```vue
|
||
<el-button size="mini" type="text" @click="handleRiskPeopleExport">导出</el-button>
|
||
```
|
||
|
||
```javascript
|
||
handleRiskPeopleExport() {
|
||
if (!this.projectId) {
|
||
return;
|
||
}
|
||
this.download(
|
||
"ccdi/project/overview/risk-people/export",
|
||
{
|
||
projectId: this.projectId,
|
||
},
|
||
`风险人员总览_${this.projectId}_${new Date().getTime()}.xlsx`
|
||
);
|
||
},
|
||
```
|
||
|
||
- [ ] **Step 2: 保持现有分页与查看项目逻辑不变**
|
||
|
||
重点确认实现时不要改动：
|
||
|
||
- `loadRiskPeoplePage`
|
||
- `handlePageChange`
|
||
- `handleViewProject`
|
||
- `sectionData -> localRows` 的 watch 逻辑
|
||
|
||
- [ ] **Step 3: 跑前端结构回归测试**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS
|
||
- 导出按钮已接通
|
||
- 分页与“查看项目”相关断言不受影响
|
||
|
||
- [ ] **Step 4: 提交本任务**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue \
|
||
ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
|
||
git commit -m "接通风险总览人员列表前端导出"
|
||
```
|
||
|
||
### Task 3: 补齐前端验证记录与实施留痕
|
||
|
||
**Files:**
|
||
- Create: `docs/reports/implementation/2026-03-30-project-detail-risk-people-export-frontend-record.md`
|
||
- Create: `docs/tests/records/2026-03-30-project-detail-risk-people-export-frontend-verification.md`
|
||
- Verify: `docs/design/2026-03-30-project-detail-risk-people-export-design.md`
|
||
|
||
- [ ] **Step 1: 跑本次前端最小回归集**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS
|
||
|
||
- [ ] **Step 2: 记录测试结果**
|
||
|
||
在 `docs/tests/records/2026-03-30-project-detail-risk-people-export-frontend-verification.md` 记录：
|
||
|
||
- 执行命令
|
||
- 通过情况
|
||
- 按钮下载路径
|
||
- 分页与查看项目未受影响的结论
|
||
|
||
- [ ] **Step 3: 记录实施内容**
|
||
|
||
在 `docs/reports/implementation/2026-03-30-project-detail-risk-people-export-frontend-record.md` 记录：
|
||
|
||
- 为什么直接使用 `this.download(...)`
|
||
- 为什么不额外新增 `projectOverview.js` 导出封装
|
||
- 本次只修改 `RiskPeopleSection.vue`
|
||
- 文件名和下载参数口径
|
||
|
||
- [ ] **Step 4: 提交本任务**
|
||
|
||
```bash
|
||
git add docs/reports/implementation/2026-03-30-project-detail-risk-people-export-frontend-record.md \
|
||
docs/tests/records/2026-03-30-project-detail-risk-people-export-frontend-verification.md
|
||
git commit -m "补充风险总览人员导出前端记录"
|
||
```
|
||
|
||
### 最终验证
|
||
|
||
- [ ] 运行前端回归：
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-export.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js
|
||
```
|
||
|
||
- [ ] 确认以下结果：
|
||
- `RiskPeopleSection.vue` 的“导出”按钮已接通真实下载动作
|
||
- 下载参数仅包含 `projectId`
|
||
- 当前分页不会影响导出范围
|
||
- “查看项目”和分页逻辑仍正常
|
||
|
||
- [ ] 准备执行时，只暂存本次任务相关前端文件后再提交
|