# Special Check Extended Query Frontend Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 在项目详情专项核查页中新增“拓展查询”卡片，支持采购、招聘、调动 3 个主题的 Tab 切换、独立查询栏、列表分页和详情弹窗。

**Architecture:** 保持 `SpecialCheck.vue` 作为专项核查页主容器，不新增路由。前端新增独立的拓展查询区块组件和 3 个主题详情弹窗，继续通过 `@/api/ccdi/projectSpecialCheck.js` 统一封装专项核查域接口；每个 Tab 独立维护查询参数、列表状态和详情状态，避免主题之间互相污染。

**Tech Stack:** Vue 2, Element UI, Axios (`@/utils/request`), Node.js

---

### Task 1: 扩展专项核查 API 封装

**Files:**
- Modify: `ruoyi-ui/src/api/ccdi/projectSpecialCheck.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-api.test.js`

- [ ] **Step 1: Write the failing test**

新增 API 契约静态断言，锁定以下方法与路径：

- `getExtendedPurchaseList`
- `getExtendedPurchaseDetail`
- `getExtendedRecruitmentList`
- `getExtendedRecruitmentDetail`
- `getExtendedTransferList`
- `getExtendedTransferDetail`
- `/ccdi/project/special-check/extended-query/purchase/list`
- `/ccdi/project/special-check/extended-query/purchase/detail`
- `/ccdi/project/special-check/extended-query/recruitment/list`
- `/ccdi/project/special-check/extended-query/recruitment/detail`
- `/ccdi/project/special-check/extended-query/transfer/list`
- `/ccdi/project/special-check/extended-query/transfer/detail`
- 所有列表与详情请求都必须携带 `projectId`
- 采购查询参数名：`applicantName`
- 采购查询参数名：`applyDateStart`、`applyDateEnd`
- 招聘查询参数名：`interviewerName`
- 3 个详情接口主键参数名分别锁定为：`purchaseId`、`recruitId`、`id`
- 调动查询参数名：`staffName`
- 调动查询参数名：`transferDateStart`、`transferDateEnd`

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-api.test.js
```

Expected:

- `FAIL`

- [ ] **Step 3: Write minimal implementation**

在 `projectSpecialCheck.js` 中新增 6 个方法。

实现要求：

- 统一使用 `@/utils/request`
- 6 个方法都显式透传 `projectId`
- 采购列表查询显式透传 `applicantName`
- 招聘主题查询参数字段命名必须使用 `interviewerName`
- 调动列表查询显式透传 `staffName`
- 采购和调动主题透传日期区间起止字段
- 不拆到新的 API 文件，继续归属专项核查域

- [ ] **Step 4: Run test to verify it passes**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-api.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/api/ccdi/projectSpecialCheck.js ruoyi-ui/tests/unit/special-check-extended-query-api.test.js
git commit -m "补充专项核查拓展查询前端接口"
```

### Task 2: 在专项核查页挂载拓展查询卡片主组件

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue`
- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-layout.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-card-order.test.js`

- [ ] **Step 1: Write the failing test**

新增页面结构断言，锁定以下内容：

- `SpecialCheck.vue` 在图谱外链卡片下方新增“拓展查询”卡片
- 页面顺序必须是“家庭资产负债 -> 图谱外链 -> 拓展查询”
- 拓展查询卡片内部存在 3 个 Tab：采购记录、招聘记录、调动记录
- 当 `projectId` 有效但家庭资产负债列表为空时，拓展查询卡片仍然可见

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-layout.test.js
node tests/unit/special-check-extended-query-card-order.test.js
```

Expected:

- `FAIL`

- [ ] **Step 3: Write minimal implementation**

在 `SpecialCheck.vue` 中：

- 保持现有家庭资产负债区块和图谱占位卡片不变
- 在图谱卡片后挂载 `ExtendedQuerySection`
- 显式透传当前 `projectId`
- 即使家庭资产负债列表为空，只要 `projectId` 有效也继续渲染拓展查询卡片
- 拓展查询卡片必须放在当前家庭资产负债 `loaded / empty` 分支之外，或通过单独渲染分支挂载，不能继续依赖现有 `v-else` 门禁
- 卡片标题、副标题沿用设计文档口径

在 `ExtendedQuerySection.vue` 中：

- 搭出卡片壳、Tab 区、列表占位区域
- 明确定义 `projectId` 为必传 props
- 不先堆复杂逻辑，优先把结构固定下来

- [ ] **Step 4: Run test to verify it passes**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-layout.test.js
node tests/unit/special-check-extended-query-card-order.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue ruoyi-ui/tests/unit/special-check-extended-query-layout.test.js ruoyi-ui/tests/unit/special-check-extended-query-card-order.test.js
git commit -m "挂载专项核查拓展查询卡片"
```

### Task 3: 实现 3 个主题 Tab 的独立查询栏与列表状态

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-tabs.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-filters.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-state-cache.test.js`

- [ ] **Step 1: Write the failing test**

新增主题交互断言，锁定：

- 采购 Tab 查询栏显示“申请人姓名 + 申请日期范围”
- 招聘 Tab 查询栏只显示“面试官姓名”
- 调动 Tab 查询栏显示“员工姓名 + 调动日期范围”
- 切换 Tab 时，各主题保留自己的查询参数和分页状态
- 首次切到某个 Tab 时才触发该 Tab 的首查
- 列表查询失败时提示错误并清空当前主题列表
- `projectId` 变化时清空三类主题的查询状态、列表状态和详情状态

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-tabs.test.js
node tests/unit/special-check-extended-query-filters.test.js
node tests/unit/special-check-extended-query-state-cache.test.js
```

Expected:

- `FAIL`

- [ ] **Step 3: Write minimal implementation**

在 `ExtendedQuerySection.vue` 中：

- 为 `purchase / recruitment / transfer` 维护独立状态对象
- 统一封装 `handleTabChange / handleQuery / resetQuery / loadList`
- 每次列表请求和详情请求都显式带上 `projectId`
- 采购主题查询字段使用 `applicantName`
- 招聘主题查询字段使用 `interviewerName`
- 调动主题查询字段保留 `staffName`
- 采购、调动日期范围在提交前拆成开始/结束字段
- 列表空态、加载态和分页都绑定到当前激活主题
- 当前主题列表查询失败时要弹出错误提示，并清空该主题的 `rows` 与 `total`
- 监听 `projectId` 变化，清空 3 个主题的本地状态，并按新 `projectId` 触发当前激活 Tab 首查

- [ ] **Step 4: Run test to verify it passes**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-tabs.test.js
node tests/unit/special-check-extended-query-filters.test.js
node tests/unit/special-check-extended-query-state-cache.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue ruoyi-ui/tests/unit/special-check-extended-query-tabs.test.js ruoyi-ui/tests/unit/special-check-extended-query-filters.test.js ruoyi-ui/tests/unit/special-check-extended-query-state-cache.test.js
git commit -m "实现专项核查拓展查询主题切换"
```

### Task 4: 实现主题列表列与详情弹窗

**Files:**
- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedPurchaseDetailDialog.vue`
- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedRecruitmentDetailDialog.vue`
- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedTransferDetailDialog.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-columns.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-detail-dialogs.test.js`

- [ ] **Step 1: Write the failing test**

新增列表列与详情弹窗断言，锁定：

- 采购列表列：采购事项 ID、项目名称、标的物名称、申请人姓名、申请日期、操作
- 招聘列表列：招聘项目编号、招聘项目名称、职位名称、面试官姓名摘要、录用情况、操作
- 调动列表列：员工姓名、调动类型、调动前部门、调动后部门、调动日期、操作
- 操作列统一文案为“查看详情”
- 3 个主题都通过弹窗查看全部字段
- 调动主题补齐详情弹窗，不再只有列表页
- 详情弹窗存在打开与关闭的交互链路
- 详情弹窗字段完整性与独立业务页展示结构保持一致
- 详情查询失败时只提示错误，不污染当前主题列表或其它主题状态

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-columns.test.js
node tests/unit/special-check-extended-query-detail-dialogs.test.js
```

Expected:

- `FAIL`

- [ ] **Step 3: Write minimal implementation**

在 `ExtendedQuerySection.vue` 中：

- 按当前主题渲染对应表格列
- 点击“查看详情”时调用当前主题详情接口
- 详情数据按主题分流到对应弹窗

详情弹窗要求：

- 采购详情尽量复用 [index.vue](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue) 的分组展示结构
- 招聘详情尽量复用 [index.vue](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue) 的分组展示结构
- 调动详情参照现有表单字段补齐“基本信息 / 调动前 / 调动后 / 审计信息”分组

- [ ] **Step 4: Run test to verify it passes**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-columns.test.js
node tests/unit/special-check-extended-query-detail-dialogs.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedPurchaseDetailDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedRecruitmentDetailDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedTransferDetailDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue ruoyi-ui/tests/unit/special-check-extended-query-columns.test.js ruoyi-ui/tests/unit/special-check-extended-query-detail-dialogs.test.js
git commit -m "补充专项核查拓展查询详情弹窗"
```

### Task 5: 完成前端回归验证并沉淀测试记录

**Files:**
- Create: `docs/tests/records/2026-03-24-special-check-extended-query-frontend-verification.md`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-api.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-layout.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-card-order.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-tabs.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-filters.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-state-cache.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-columns.test.js`
- Test: `ruoyi-ui/tests/unit/special-check-extended-query-detail-dialogs.test.js`

- [ ] **Step 1: Run focused frontend tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/special-check-extended-query-api.test.js
node tests/unit/special-check-extended-query-layout.test.js
node tests/unit/special-check-extended-query-card-order.test.js
node tests/unit/special-check-extended-query-tabs.test.js
node tests/unit/special-check-extended-query-filters.test.js
node tests/unit/special-check-extended-query-state-cache.test.js
node tests/unit/special-check-extended-query-columns.test.js
node tests/unit/special-check-extended-query-detail-dialogs.test.js
```

Expected:

- 所有新增静态/结构测试 `PASS`
- 包含失败态下“提示错误 + 清空列表”的断言

- [ ] **Step 2: Run build verification**

Run:

```bash
cd ruoyi-ui
npm run build:prod
```

Expected:

- `PASS`
- 若仍有既有资源体积告警，在验证记录中注明“与本次改动无关”

- [ ] **Step 3: Write verification record**

在 `docs/tests/records/2026-03-24-special-check-extended-query-frontend-verification.md` 记录：

- 实际执行命令
- 结果
- 是否验证了 3 个 Tab 的差异化查询栏
- 是否验证了图谱卡片下方新增拓展查询卡片

- [ ] **Step 4: Commit**

```bash
git add docs/tests/records/2026-03-24-special-check-extended-query-frontend-verification.md
git commit -m "补充专项核查拓展查询前端验证记录"
```
