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