wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c278d11390844aac34a88b3e7f1f9ce874c5e17c
ccdi/docs/plans/frontend/2026-03-24-special-check-extended-query-frontend-implementation.md

13 KiB
Raw Blame History

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:

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:

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

Expected:

  • PASS

  • Step 5: Commit

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:

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:

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

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:

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:

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

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:

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 的分组展示结构

  • 招聘详情尽量复用 index.vue 的分组展示结构

  • 调动详情参照现有表单字段补齐“基本信息 / 调动前 / 调动后 / 审计信息”分组

  • Step 4: Run test to verify it passes

Run:

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

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:

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:

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

git add docs/tests/records/2026-03-24-special-check-extended-query-frontend-verification.md
git commit -m "补充专项核查拓展查询前端验证记录"
Reference in New Issue View Git Blame Copy Permalink