# 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 "补充专项核查拓展查询前端验证记录" ```