176 lines
5.1 KiB
Markdown
176 lines
5.1 KiB
Markdown
# 项目详情风险明细统一导出前端 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.
|
||
>
|
||
> 仓库约束：当前仓库明确禁止开启 subagent，执行时统一使用 `superpowers:executing-plans`。
|
||
|
||
**Goal:** 将项目详情风险明细的导出入口收口为总卡片右上角的统一按钮，并改为调用新的统一后端导出接口。
|
||
|
||
**Architecture:** 前端保持最小改动，继续复用 `RiskDetailSection.vue` 内现有 `this.download(...)` 模式，不额外新增导出页状态管理或 API 包装层。页面仅调整按钮位置、调用路径和禁用逻辑，不改变现有分页、筛选和详情弹窗行为。
|
||
|
||
**Tech Stack:** Vue 2, Element UI, RuoYi 前端下载工具链
|
||
|
||
---
|
||
|
||
## File Map
|
||
|
||
**Modify:**
|
||
|
||
- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
|
||
- 调整统一导出按钮位置，移除区块内导出按钮，切换下载路径
|
||
- `docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md`
|
||
- 记录前端改动与验证结果
|
||
|
||
**No Change Expected:**
|
||
|
||
- `ruoyi-ui/src/api/ccdi/projectOverview.js`
|
||
- 本轮不强制新增导出 API；组件继续直接调用 `this.download`
|
||
- `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
|
||
- 数据结构未改，不需要为按钮位置调整补 mock 字段
|
||
|
||
## Task 1: 收口风险明细导出入口
|
||
|
||
**Files:**
|
||
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
|
||
|
||
- [ ] **Step 1: 先记录当前页面结构和回归点**
|
||
|
||
执行前先确认当前组件里有两处导出按钮：
|
||
|
||
- `涉疑交易明细` 区块右上角 `导出`
|
||
- `异常账户人员信息` 区块右上角 `导出`
|
||
|
||
同时记录这些行为后续不能回归：
|
||
|
||
- `涉疑交易明细` 下拉筛选仍可切换
|
||
- 涉疑交易详情弹窗仍可打开
|
||
- 员工负面征信分页仍可切换
|
||
|
||
- [ ] **Step 2: 修改组件模板，先让构建暴露问题**
|
||
|
||
把统一 `导出` 按钮移动到总卡片头部：
|
||
|
||
```vue
|
||
<div class="section-header">
|
||
<div>
|
||
<div class="section-title">风险明细</div>
|
||
<div class="section-subtitle">展示涉疑交易与异常账户关联人员信息</div>
|
||
</div>
|
||
<el-button size="mini" type="text" :disabled="!projectId" @click="handleRiskDetailExport">
|
||
导出
|
||
</el-button>
|
||
</div>
|
||
```
|
||
|
||
同时删除两个区块内部的导出按钮。
|
||
|
||
- [ ] **Step 3: 调整下载方法**
|
||
|
||
把旧的 `handleExport` 收口成统一方法：
|
||
|
||
```js
|
||
handleRiskDetailExport() {
|
||
if (!this.projectId) {
|
||
return
|
||
}
|
||
this.download(
|
||
"ccdi/project/overview/risk-details/export",
|
||
{ projectId: this.projectId },
|
||
`风险明细_${this.projectId}_${new Date().getTime()}.xlsx`
|
||
)
|
||
}
|
||
```
|
||
|
||
注意：
|
||
|
||
- 不再传 `suspiciousType`
|
||
- 不再依赖 `suspiciousTotal === 0`
|
||
|
||
- [ ] **Step 4: 运行前端构建验证**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS
|
||
|
||
- [ ] **Step 5: 提交本任务**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
|
||
git commit -m "调整风险明细统一导出入口"
|
||
```
|
||
|
||
## Task 2: 做前端回归检查并补实施记录
|
||
|
||
**Files:**
|
||
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
|
||
- Modify: `docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md`
|
||
|
||
- [ ] **Step 1: 做页面回归检查**
|
||
|
||
至少验证以下 5 项：
|
||
|
||
1. 风险明细总卡片右上角显示唯一导出按钮
|
||
2. `涉疑交易明细` 区块内不再显示导出按钮
|
||
3. `异常账户人员信息` 区块内不再显示导出按钮
|
||
4. 切换涉疑交易筛选仍能正常刷新列表
|
||
5. 点击 `详情` 仍能打开流水详情弹窗
|
||
|
||
如果本轮需要本地启动页面，可使用：
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
验证完成后记得关闭前端进程。
|
||
|
||
- [ ] **Step 2: 联调统一导出**
|
||
|
||
在后端接口完成后，手工点击统一导出按钮，确认：
|
||
|
||
- 请求路径为 `ccdi/project/overview/risk-details/export`
|
||
- 浏览器开始下载 `.xlsx`
|
||
- 不再请求旧的 `suspicious-transactions/export`
|
||
|
||
- [ ] **Step 3: 写前端实施记录**
|
||
|
||
在 `docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md` 中记录：
|
||
|
||
- 按钮位置调整
|
||
- 删除的两个局部导出入口
|
||
- 新下载路径和文件名
|
||
- `npm run build:prod` 结果
|
||
- 手工回归点
|
||
|
||
- [ ] **Step 4: 提交本任务**
|
||
|
||
```bash
|
||
git add docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md \
|
||
ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
|
||
git commit -m "完成风险明细统一导出前端实现"
|
||
```
|
||
|
||
## Final Verification
|
||
|
||
- [ ] 运行：
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
- [ ] 确认页面只剩一个统一导出按钮
|
||
- [ ] 确认统一导出按钮只依赖 `projectId`
|
||
- [ ] 确认旧区块按钮全部移除
|
||
- [ ] 如启动了 `npm run dev`，验证结束后手动关闭前端进程
|
||
|