新增项目打标状态联动实施计划
This commit is contained in:
@@ -0,0 +1,317 @@
|
||||
# Project Bank Tag Status Lock 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.
|
||||
|
||||
**Goal:** 在项目列表与项目详情中展示“打标中”状态，并在项目打标期间禁用上传数据页的拉取/上传入口以及参数模型页的修改入口。
|
||||
|
||||
**Architecture:** 以前端现有的 `projectInfo.projectStatus` 为统一判断条件，扩展列表页、详情页和状态统计对状态 `3` 的展示；在 `UploadData.vue` 和 `ParamConfig.vue` 中基于同一状态进入受限/只读态；同时补一个轻量的项目详情刷新链路，确保提交上传或拉取任务后页面能够尽快拿到后端返回的最新状态。仓库当前没有现成的 Vue 单测基建，本计划以 `npm run build:prod` 加手工联调记录替代自动化前端单测。
|
||||
|
||||
**Tech Stack:** Vue 2, Element UI, Axios request wrapper, Node.js, npm
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 扩展项目列表、详情页与状态统计对“打标中”的展示
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/detail.vue`
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue`
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`
|
||||
- Create: `docs/tests/records/2026-03-18-project-bank-tag-status-lock-frontend-verification.md`
|
||||
|
||||
- [ ] **Step 1: Write the verification record skeleton**
|
||||
|
||||
先创建联调记录，明确本次前端验证点：
|
||||
|
||||
```markdown
|
||||
# 项目打标状态联动前端验证记录
|
||||
|
||||
## 验证范围
|
||||
- 列表页状态与统计显示
|
||||
- 详情页状态标签
|
||||
- 上传数据页禁用
|
||||
- 参数模型页只读
|
||||
|
||||
## 验证结果
|
||||
- [ ] 列表页出现“打标中”
|
||||
- [ ] 顶部统计出现“打标中”
|
||||
- [ ] 详情页出现“打标中”
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run baseline build check before edits**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- 当前前端代码可以正常构建
|
||||
- 作为后续改动的基线
|
||||
|
||||
- [ ] **Step 3: Write minimal implementation**
|
||||
|
||||
按最小范围扩展前端状态映射：
|
||||
|
||||
1. `detail.vue` 中把状态映射补到 `3`
|
||||
|
||||
```js
|
||||
const statusMap = {
|
||||
0: "进行中",
|
||||
1: "已完成",
|
||||
2: "已归档",
|
||||
3: "打标中"
|
||||
}
|
||||
```
|
||||
|
||||
2. `ProjectTable.vue` 中补充 `3` 的颜色和操作显隐
|
||||
3. `index.vue` / `SearchBar.vue` 中把 `tabCounts` 和 tabs 扩展到 `3`
|
||||
|
||||
- [ ] **Step 4: Run build to verify it passes**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `PASS`
|
||||
- 说明新增状态展示不会破坏现有页面构建
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/detail.vue ruoyi-ui/src/views/ccdiProject/index.vue ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue docs/tests/records/2026-03-18-project-bank-tag-status-lock-frontend-verification.md
|
||||
git commit -m "补充前端项目打标中状态展示"
|
||||
```
|
||||
|
||||
### Task 2: 让上传数据页在“打标中”进入受限态
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/detail.vue`
|
||||
|
||||
- [ ] **Step 1: Define the failing interaction expectation**
|
||||
|
||||
先把联调记录里的受限行为补完整，锁定以下结果必须成立：
|
||||
|
||||
```markdown
|
||||
- [ ] 打标中时“拉取本行信息”按钮禁用
|
||||
- [ ] 打标中时“上传流水”按钮禁用
|
||||
- [ ] 打标中时仍可查看上传记录列表
|
||||
- [ ] 页面有明确提示文案
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Reproduce current behavior manually**
|
||||
|
||||
手工确认当前页面在 `projectStatus = '3'` 时仍然可以点击：
|
||||
|
||||
1. 打开项目详情页“上传数据”
|
||||
2. 通过 mock `projectInfo.projectStatus = '3'` 或联调真实数据观察页面
|
||||
3. 记录当前“拉取本行信息”和“上传流水”仍可点击的现状
|
||||
|
||||
Expected:
|
||||
|
||||
- 当前行为与需求不符，作为修改前基线
|
||||
|
||||
- [ ] **Step 3: Write minimal implementation**
|
||||
|
||||
在 `UploadData.vue` 中增加统一计算属性，例如：
|
||||
|
||||
```js
|
||||
computed: {
|
||||
isProjectTagging() {
|
||||
return String(this.projectInfo.projectStatus) === "3";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
再基于同一条件处理：
|
||||
|
||||
- 顶部 `拉取本行信息` 按钮 `:disabled="isProjectTagging"`
|
||||
- 流水导入卡片 `disabled: this.isProjectTagging`
|
||||
- 打开弹窗前再次短路返回，避免旧状态下已打开页面绕过按钮禁用
|
||||
- 页面顶部补一句提示，例如：
|
||||
|
||||
```html
|
||||
<div v-if="isProjectTagging" class="tagging-lock-tip">
|
||||
项目正在进行银行流水打标，暂不可上传或拉取数据。
|
||||
</div>
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Run build to verify it passes**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `PASS`
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue ruoyi-ui/src/views/ccdiProject/detail.vue docs/tests/records/2026-03-18-project-bank-tag-status-lock-frontend-verification.md
|
||||
git commit -m "限制前端打标中的上传数据操作"
|
||||
```
|
||||
|
||||
### Task 3: 让参数模型页在“打标中”进入只读态
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
||||
|
||||
- [ ] **Step 1: Define the failing interaction expectation**
|
||||
|
||||
在联调记录中增加参数页检查项：
|
||||
|
||||
```markdown
|
||||
- [ ] 打标中时参数输入框禁用
|
||||
- [ ] 打标中时“保存所有修改”按钮禁用
|
||||
- [ ] 参数页有只读提示文案
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Reproduce current editable behavior**
|
||||
|
||||
手工确认当前 `projectStatus = '3'` 时：
|
||||
|
||||
- 参数输入框仍可编辑
|
||||
- 保存按钮仍可点击
|
||||
|
||||
Expected:
|
||||
|
||||
- 当前行为与需求不符
|
||||
|
||||
- [ ] **Step 3: Write minimal implementation**
|
||||
|
||||
在 `ParamConfig.vue` 中增加：
|
||||
|
||||
```js
|
||||
computed: {
|
||||
isProjectTagging() {
|
||||
return String(this.projectInfo.projectStatus) === "3";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
并将其接到：
|
||||
|
||||
- 参数输入框 `:disabled="isProjectTagging"`
|
||||
- 保存按钮 `:disabled="isProjectTagging || saving"`
|
||||
- 顶部/底部提示文案：
|
||||
|
||||
```html
|
||||
<div v-if="isProjectTagging" class="readonly-tip">
|
||||
项目正在进行银行流水打标，参数暂不可修改。
|
||||
</div>
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Run build to verify it passes**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Expected:
|
||||
|
||||
- `PASS`
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue docs/tests/records/2026-03-18-project-bank-tag-status-lock-frontend-verification.md
|
||||
git commit -m "限制前端打标中的参数修改"
|
||||
```
|
||||
|
||||
### Task 4: 补项目状态刷新链路并完成联调验证
|
||||
|
||||
**Files:**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/detail.vue`
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
||||
- Modify: `docs/tests/records/2026-03-18-project-bank-tag-status-lock-frontend-verification.md`
|
||||
- Create: `docs/reports/implementation/2026-03-18-project-bank-tag-status-lock-frontend-implementation.md`
|
||||
|
||||
- [ ] **Step 1: Write the refresh expectation**
|
||||
|
||||
先在验证记录里加上刷新口径：
|
||||
|
||||
```markdown
|
||||
- [ ] 提交上传或拉取任务后，详情页能重新获取项目状态
|
||||
- [ ] 文件轮询期间如后端状态切为“打标中”，页面会同步受限
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Write minimal implementation**
|
||||
|
||||
建议增加一个轻量的父子联动：
|
||||
|
||||
1. `detail.vue` 监听子组件的 `refresh-project` 事件：
|
||||
|
||||
```html
|
||||
<component
|
||||
...
|
||||
@refresh-project="handleRefresh"
|
||||
/>
|
||||
```
|
||||
|
||||
2. `UploadData.vue` 在这些时机 `this.$emit("refresh-project")`：
|
||||
|
||||
- 批量上传提交成功后
|
||||
- 拉取本行信息提交成功后
|
||||
- 轮询到文件状态变化后
|
||||
- 手工刷新文件列表后
|
||||
|
||||
目标不是做实时推送，而是复用现有轮询时机把 `projectInfo` 更新到最新。
|
||||
|
||||
- [ ] **Step 3: Run build and manual verification**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
手工联调建议：
|
||||
|
||||
1. 启动后端、前端、Mock 服务
|
||||
2. 打开一个项目详情页
|
||||
3. 触发上传流水或拉取本行信息
|
||||
4. 等待后端进入打标流程
|
||||
5. 验证页面状态变为“打标中”，上传/拉取被禁用，参数页只读
|
||||
6. 验证列表页和顶部统计刷新后可显示“打标中”
|
||||
|
||||
完成验证后，按仓库要求关闭测试过程中启动的前后端进程。
|
||||
|
||||
- [ ] **Step 4: Write implementation report and commit**
|
||||
|
||||
实施报告至少记录：
|
||||
|
||||
- 哪些页面补了 `3-打标中`
|
||||
- 哪些按钮/输入框在打标中被禁用
|
||||
- 项目状态刷新是如何接入的
|
||||
- `npm run build:prod` 和手工联调结果
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/detail.vue ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue docs/tests/records/2026-03-18-project-bank-tag-status-lock-frontend-verification.md docs/reports/implementation/2026-03-18-project-bank-tag-status-lock-frontend-implementation.md
|
||||
git commit -m "补充前端项目打标状态联动验证"
|
||||
```
|
||||
|
||||
## Frontend Exit Criteria
|
||||
|
||||
- 列表页、详情页、状态统计都能正确展示 `3-打标中`
|
||||
- 上传数据页在 `3` 状态下禁用上传/拉取入口并给出提示
|
||||
- 参数模型页在 `3` 状态下进入只读态
|
||||
- 提交上传或拉取任务后，详情页能重新拿到最新项目状态
|
||||
- 前端构建通过，联调记录与实施报告已补齐
|
||||
Reference in New Issue
Block a user