整理docs目录并补充文档规范
This commit is contained in:
@@ -0,0 +1,362 @@
|
||||
# Project Upload File Delete Frontend Implementation Plan
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**Goal:** 在项目详情-上传数据-上传文件列表中新增操作列，实现“查看错误原因”和“删除”交互，并让删除后的记录显示为“已删除”。
|
||||
|
||||
**Architecture:** 先把状态到“操作/标签”的判断抽取到一个轻量 helper，通过 Node 可执行脚本做最小自动化校验；然后在 `ccdiProjectUpload.js` 新增删除接口，在 `UploadData.vue` 中接入操作列、删除确认框、删除后刷新列表与统计。保留现有轮询机制，不新增前端全局状态管理。
|
||||
|
||||
**Tech Stack:** Vue 2, Element UI, Axios request wrapper, Node script verification, npm build
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 抽取状态与操作规则并先写失败测试
|
||||
|
||||
**Files:**
|
||||
- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/uploadFileActionRules.mjs`
|
||||
- Create: `tests/frontend/upload-file-action-rules.test.mjs`
|
||||
|
||||
**Step 1: Write the failing test**
|
||||
|
||||
新建一个轻量 Node 规则测试脚本，先定义期望行为：
|
||||
|
||||
```javascript
|
||||
import assert from "node:assert/strict";
|
||||
import {
|
||||
getUploadFileAction,
|
||||
getUploadFileStatusText,
|
||||
getUploadFileStatusType
|
||||
} from "../../ruoyi-ui/src/views/ccdiProject/components/detail/uploadFileActionRules.mjs";
|
||||
|
||||
assert.deepEqual(getUploadFileAction("parsed_failed"), { key: "viewError", text: "查看错误原因" });
|
||||
assert.deepEqual(getUploadFileAction("parsed_success"), { key: "delete", text: "删除" });
|
||||
assert.equal(getUploadFileAction("deleted"), null);
|
||||
assert.equal(getUploadFileStatusText("deleted"), "已删除");
|
||||
assert.equal(getUploadFileStatusType("deleted"), "info");
|
||||
```
|
||||
|
||||
**Step 2: Run test to verify it fails**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node tests/frontend/upload-file-action-rules.test.mjs
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `FAIL`
|
||||
- 原因是 helper 文件还不存在
|
||||
|
||||
**Step 3: Write minimal implementation**
|
||||
|
||||
创建 helper 文件：
|
||||
|
||||
```javascript
|
||||
export function getUploadFileAction(status) {
|
||||
const actionMap = {
|
||||
parsed_failed: { key: "viewError", text: "查看错误原因" },
|
||||
parsed_success: { key: "delete", text: "删除" }
|
||||
};
|
||||
return actionMap[status] || null;
|
||||
}
|
||||
|
||||
export function getUploadFileStatusText(status) {
|
||||
const map = {
|
||||
uploading: "上传中",
|
||||
parsing: "解析中",
|
||||
parsed_success: "解析成功",
|
||||
parsed_failed: "解析失败",
|
||||
deleted: "已删除"
|
||||
};
|
||||
return map[status] || status;
|
||||
}
|
||||
|
||||
export function getUploadFileStatusType(status) {
|
||||
const map = {
|
||||
uploading: "primary",
|
||||
parsing: "warning",
|
||||
parsed_success: "success",
|
||||
parsed_failed: "danger",
|
||||
deleted: "info"
|
||||
};
|
||||
return map[status] || "info";
|
||||
}
|
||||
```
|
||||
|
||||
**Step 4: Run test to verify it passes**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node tests/frontend/upload-file-action-rules.test.mjs
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `PASS`
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/components/detail/uploadFileActionRules.mjs tests/frontend/upload-file-action-rules.test.mjs
|
||||
git commit -m "test: 补充上传文件操作规则测试"
|
||||
```
|
||||
|
||||
### Task 2: 新增删除 API 契约
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/api/ccdiProjectUpload.js`
|
||||
|
||||
**Step 1: Write the failing usage**
|
||||
|
||||
先在计划中约定组件调用的新 API 形式，后续组件实现前必须存在：
|
||||
|
||||
```javascript
|
||||
export function deleteFileUploadRecord(id) {
|
||||
return request({
|
||||
url: `/ccdi/file-upload/${id}`,
|
||||
method: "delete"
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: Run a quick import smoke check**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node -e "const fs=require('fs'); const text=fs.readFileSync('ruoyi-ui/src/api/ccdiProjectUpload.js','utf8'); if(!text.includes('deleteFileUploadRecord')) process.exit(1);"
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `FAIL`
|
||||
|
||||
**Step 3: Write minimal implementation**
|
||||
|
||||
把旧的按 `projectId + uploadType` 删除接口保留不动，新加按记录 ID 删除的方法：
|
||||
|
||||
```javascript
|
||||
export function deleteFileUploadRecord(id) {
|
||||
return request({
|
||||
url: `/ccdi/file-upload/${id}`,
|
||||
method: "delete"
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
**Step 4: Run smoke check to verify it passes**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node -e "const fs=require('fs'); const text=fs.readFileSync('ruoyi-ui/src/api/ccdiProjectUpload.js','utf8'); if(!text.includes('deleteFileUploadRecord')) process.exit(1);"
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- 退出码 `0`
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/api/ccdiProjectUpload.js
|
||||
git commit -m "feat: 新增上传文件按记录删除接口"
|
||||
```
|
||||
|
||||
### Task 3: 在列表中渲染操作列和错误原因弹窗
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/uploadFileActionRules.mjs`
|
||||
- Test: `tests/frontend/upload-file-action-rules.test.mjs`
|
||||
|
||||
**Step 1: Write the failing test**
|
||||
|
||||
先扩充规则测试，确保无操作状态不会返回按钮：
|
||||
|
||||
```javascript
|
||||
assert.equal(getUploadFileAction("uploading"), null);
|
||||
assert.equal(getUploadFileAction("parsing"), null);
|
||||
```
|
||||
|
||||
**Step 2: Run test to verify it fails**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node tests/frontend/upload-file-action-rules.test.mjs
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- 如果 helper 暂未覆盖全部状态，则 `FAIL`
|
||||
|
||||
**Step 3: Write minimal implementation**
|
||||
|
||||
在 `UploadData.vue` 中：
|
||||
|
||||
- 引入 helper
|
||||
- 给表格新增“操作”列
|
||||
- 根据 `getUploadFileAction(scope.row.fileStatus)` 渲染按钮
|
||||
- 增加 `handleViewError(row)`，直接读取 `row.errorMessage || "未知错误"` 并调用：
|
||||
|
||||
```javascript
|
||||
this.$alert(row.errorMessage || "未知错误", "错误信息", {
|
||||
confirmButtonText: "确定",
|
||||
type: "error"
|
||||
});
|
||||
```
|
||||
|
||||
表格模板示例：
|
||||
|
||||
```vue
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="getRowAction(scope.row)"
|
||||
type="text"
|
||||
@click="handleRowAction(scope.row)"
|
||||
>
|
||||
{{ getRowAction(scope.row).text }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
```
|
||||
|
||||
**Step 4: Run test to verify it passes**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node tests/frontend/upload-file-action-rules.test.mjs
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `PASS`
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue ruoyi-ui/src/views/ccdiProject/components/detail/uploadFileActionRules.mjs tests/frontend/upload-file-action-rules.test.mjs
|
||||
git commit -m "feat: 新增上传文件列表操作列与错误原因查看"
|
||||
```
|
||||
|
||||
### Task 4: 接入删除确认与刷新逻辑
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
||||
- Modify: `ruoyi-ui/src/api/ccdiProjectUpload.js`
|
||||
|
||||
**Step 1: Write the failing manual checklist**
|
||||
|
||||
先记录需要被满足的行为：
|
||||
|
||||
- `parsed_success` 行点击“删除”必须弹出二次确认
|
||||
- 确认后调用 `deleteFileUploadRecord(row.id)`
|
||||
- 成功后提示“删除成功”
|
||||
- 成功后刷新 `loadStatistics()` 与 `loadFileList()`
|
||||
- 若仍存在 `uploading/parsing` 记录，则继续轮询；否则不重复启动轮询
|
||||
|
||||
**Step 2: Implement the minimal component code**
|
||||
|
||||
在 `UploadData.vue` 新增删除逻辑：
|
||||
|
||||
```javascript
|
||||
async handleDeleteFile(row) {
|
||||
await this.$confirm(
|
||||
"删除后将同步删除流水分析平台中的文件，并清除本系统中该文件对应的所有银行流水数据，是否继续？",
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
);
|
||||
|
||||
await deleteFileUploadRecord(row.id);
|
||||
this.$message.success("删除成功");
|
||||
await Promise.all([this.loadStatistics(), this.loadFileList()]);
|
||||
|
||||
if (this.statistics.uploading > 0 || this.statistics.parsing > 0) {
|
||||
this.startPolling();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
并在统一入口 `handleRowAction(row)` 中根据 action key 分流到：
|
||||
|
||||
- `viewError`
|
||||
- `delete`
|
||||
|
||||
**Step 3: Run build to verify no syntax errors**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `BUILD SUCCESS` 或等价的前端打包成功输出
|
||||
|
||||
**Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue ruoyi-ui/src/api/ccdiProjectUpload.js
|
||||
git commit -m "feat: 接入上传文件删除确认与刷新逻辑"
|
||||
```
|
||||
|
||||
### Task 5: 完成前端手工回归验证
|
||||
|
||||
**Files:**
|
||||
- Verify only: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
||||
- Verify only: `ruoyi-ui/src/api/ccdiProjectUpload.js`
|
||||
- Verify only: `tests/frontend/upload-file-action-rules.test.mjs`
|
||||
|
||||
**Step 1: Run rules test**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node tests/frontend/upload-file-action-rules.test.mjs
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `PASS`
|
||||
|
||||
**Step 2: Run production build**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- 打包成功
|
||||
|
||||
**Step 3: Perform manual UI verification**
|
||||
|
||||
手工验证清单：
|
||||
|
||||
- `parsed_failed` 行显示“查看错误原因”
|
||||
- 点击后能弹出错误信息
|
||||
- `parsed_success` 行显示“删除”
|
||||
- 点击删除会出现确认框
|
||||
- 删除成功后状态显示为“已删除”
|
||||
- `deleted` 行不再显示任何操作按钮
|
||||
|
||||
**Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "test: 完成上传文件删除前端回归验证"
|
||||
```
|
||||
Reference in New Issue
Block a user