# 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` 状态下进入只读态
- 提交上传或拉取任务后，详情页能重新拿到最新项目状态
- 前端构建通过，联调记录与实施报告已补齐
