补充结果总览模型区前端实施记录

2026-03-20 11:32:18 +08:00
parent 2285ebd3f0
commit e5afc1adee
5 changed files with 130 additions and 26 deletions
--- a/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md
+++ b/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md
@@ -1,6 +1,6 @@
 # Results Overview Risk Model Linkage 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.
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [x]`) syntax for tracking.

 **Goal:** 将结果总览模型区接入真实接口，支持多卡片联动、任意触发/同时触发切换、员工姓名或工号与部门筛选，以及异常标签展示。

@@ -16,7 +16,7 @@
 - Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js`
 - Test: `ruoyi-ui/tests/unit/preliminary-check-model-api.test.js`

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

 新增接口静态断言，锁定以下方法与路径：

@@ -26,7 +26,7 @@
 - `/ccdi/project/overview/risk-models/people`
 - `matchMode`

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

 Run:

@@ -39,7 +39,7 @@ Expected:

 - `FAIL`

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

 在 API 模块中新增：

@@ -56,7 +56,7 @@ Expected:
 - `pageNum`
 - `pageSize`

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

 Run:

@@ -69,7 +69,7 @@ Expected:

 - `PASS`

- [ ] **Step 5: Commit**
+- [x] **Step 5: Commit**

 ```bash
 git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/tests/unit/preliminary-check-model-api.test.js
@@ -83,7 +83,7 @@ git commit -m "补充结果总览模型区前端接口封装"
 - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
 - Test: `ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js`

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

 新增入口页静态断言，要求：

@@ -91,7 +91,7 @@ git commit -m "补充结果总览模型区前端接口封装"
 - 模型区真实数据不再只依赖旧 mock
 - 页面仍保留 `loading / empty / loaded` 状态结构

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

 Run:

@@ -104,7 +104,7 @@ Expected:

 - `FAIL`

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

 在 `PreliminaryCheck.vue` 中：

@@ -113,7 +113,7 @@ Expected:
 - 清理 `preliminaryCheck.mock.js` 中模型区旧的 `warningTypeOptions`、旧 `filterValues.model` 依赖
 - 保留空态 mock 作为兜底展示结构，不新增业务逻辑兜底

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

 Run:

@@ -126,7 +126,7 @@ Expected:

 - `PASS`

- [ ] **Step 5: Commit**
+- [x] **Step 5: Commit**

 ```bash
 git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js
@@ -140,7 +140,7 @@ git commit -m "接入结果总览模型卡片真实数据"
 - Test: `ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js`
 - Test: `ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js`

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

 新增组件静态/行为断言，锁定：

@@ -149,7 +149,7 @@ git commit -m "接入结果总览模型卡片真实数据"
 - 存在 `matchMode`
 - 页面出现“任意触发”“同时触发”文案

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

 Run:

@@ -163,7 +163,7 @@ Expected:

 - `FAIL`

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

 在 `RiskModelSection.vue` 中新增状态：

@@ -183,7 +183,7 @@ Expected:
 - 选中多张卡片时允许切换 `ANY / ALL`
 - 不选卡片或仅选一张时，切换模式不报错，仍按当前接口语义请求

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

 Run:

@@ -197,7 +197,7 @@ Expected:

 - `PASS`

- [ ] **Step 5: Commit**
+- [x] **Step 5: Commit**

 ```bash
 git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js
@@ -211,7 +211,7 @@ git commit -m "补充结果总览模型卡片联动交互"
 - Test: `ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js`
 - Test: `ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js`

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

 锁定以下变更：

@@ -224,7 +224,7 @@ git commit -m "补充结果总览模型卡片联动交互"
 - 新增“工号”列
 - 新增“异常标签”列

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

 Run:

@@ -238,7 +238,7 @@ Expected:

 - `FAIL`

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

 在筛选区：

@@ -260,7 +260,7 @@ Expected:
 - `hitTagList` 用 `el-tag` 展示 `ruleName`
 - 颜色映射复用 `DetailQuery.vue` 风险等级映射方式

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

 Run:

@@ -274,7 +274,7 @@ Expected:

 - `PASS`

- [ ] **Step 5: Commit**
+- [x] **Step 5: Commit**

 ```bash
 git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js
@@ -290,7 +290,7 @@ git commit -m "调整结果总览模型区筛选与列表列"
 - Create: `docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md`
 - Create: `docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md`

- [ ] **Step 1: Write linkage flow assertions**
+- [x] **Step 1: Write linkage flow assertions**

 覆盖以下联动流：

@@ -302,7 +302,7 @@ git commit -m "调整结果总览模型区筛选与列表列"
 - 全部取消恢复默认
 - 关键词 + 部门 + 多卡片叠加

- [ ] **Step 2: Run final frontend verification**
+- [x] **Step 2: Run final frontend verification**

 Run:

@@ -321,7 +321,7 @@ Expected:

 - `PASS`

- [ ] **Step 3: Write verification and implementation records**
+- [x] **Step 3: Write verification and implementation records**

 记录：

@@ -330,7 +330,7 @@ Expected:
 - 任意触发 / 同时触发切换
 - 关键词、部门、分页联动验证

- [ ] **Step 4: Commit**
+- [x] **Step 4: Commit**

 ```bash
 git add ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md
--- a/docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md
+++ b/docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md
@@ -0,0 +1,35 @@
+# 结果总览模型区联动筛选前端实施记录
+
+## 本次改动
+
+- 在 [`projectOverview.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/api/ccdi/projectOverview.js) 新增 `getOverviewRiskModelCards` 与 `getOverviewRiskModelPeople`，统一封装模型卡片和模型区人员分页接口。
+- 在 [`PreliminaryCheck.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue) 接入模型卡片真实请求，并把模型区列表查询职责下沉到 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue)。
+- 在 [`preliminaryCheck.mock.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js) 清理旧的模型筛选 mock 依赖，补齐模型卡片归一化逻辑和空态结构。
+- 在 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue) 实现多卡片选中/取消、`ANY / ALL` 匹配方式、关键词与部门筛选、分页请求、模型摘要和异常标签展示。
+- 新增或更新 [`preliminary-check-model-api.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-api.test.js)、[`preliminary-check-model-data-loading.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js)、[`preliminary-check-model-multiselect.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js)、[`preliminary-check-model-match-mode.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js)、[`preliminary-check-model-filters.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js)、[`preliminary-check-model-table-columns.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js)、[`preliminary-check-model-linkage-flow.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js) 与 [`preliminary-check-model-and-detail.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js)，覆盖接口、状态、筛选和联动流。
+
+## 处理说明
+
+- 继续复用现有 `PreliminaryCheck.vue` 作为结果总览页入口，没有新增路由、二级页面或平行容器组件。
+- 模型卡片接口与人员分页接口拆分请求，避免入口页承担过多筛选状态，保持模型区联动逻辑集中在组件内部。
+- 模型卡片支持多选，再次点击可取消；请求参数统一携带 `modelCodes + matchMode + keyword + deptId + pageNum + pageSize`。
+- 模型区人员列表改为展示姓名、工号、身份证号、所属部门、命中模型摘要和异常标签；异常标签复用 [`DetailQuery.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue) 的风险等级颜色映射。
+- 部门选项复用系统现有的 `deptTreeSelect` 接口，并在前端展开为可筛选下拉项，保持最短路径实现。
+
+## 验证情况
+
+- 已执行如下定向验证：
+
+```bash
+cd ruoyi-ui
+node tests/unit/preliminary-check-model-api.test.js
+node tests/unit/preliminary-check-model-data-loading.test.js
+node tests/unit/preliminary-check-model-multiselect.test.js
+node tests/unit/preliminary-check-model-match-mode.test.js
+node tests/unit/preliminary-check-model-filters.test.js
+node tests/unit/preliminary-check-model-table-columns.test.js
+node tests/unit/preliminary-check-model-linkage-flow.test.js
+node tests/unit/preliminary-check-model-and-detail.test.js
+```
+
+- 总体验证结果：8 个前端单测命令全部通过，0 failure，0 error。
--- a/docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md
+++ b/docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md
@@ -0,0 +1,44 @@
+# 结果总览模型区联动筛选前端验证记录
+
+## 验证范围
+
+- 结果总览模型区 API 封装
+- 入口页模型卡片真实数据接入
+- 模型卡片多选与 `ANY / ALL` 触发方式切换
+- 员工姓名或工号、部门、分页联动查询
+- 人员列表工号、模型摘要与异常标签展示
+
+## 验证命令
+
+```bash
+cd ruoyi-ui
+node tests/unit/preliminary-check-model-api.test.js
+node tests/unit/preliminary-check-model-data-loading.test.js
+node tests/unit/preliminary-check-model-multiselect.test.js
+node tests/unit/preliminary-check-model-match-mode.test.js
+node tests/unit/preliminary-check-model-filters.test.js
+node tests/unit/preliminary-check-model-table-columns.test.js
+node tests/unit/preliminary-check-model-linkage-flow.test.js
+node tests/unit/preliminary-check-model-and-detail.test.js
+```
+
+## 验证结果
+
+- 2026-03-20 执行 `preliminary-check-model-api.test.js` 红灯验证，确认缺少模型卡片与模型人员分页接口封装。
+- 2026-03-20 完成 API 封装后重新执行 `preliminary-check-model-api.test.js`，断言通过。
+- 2026-03-20 执行 `preliminary-check-model-data-loading.test.js` 红灯验证，确认入口页尚未接入模型卡片真实接口且 mock 仍保留旧筛选依赖。
+- 2026-03-20 完成入口页与 mock 改造后重新执行 `preliminary-check-model-data-loading.test.js`，断言通过。
+- 2026-03-20 执行 `preliminary-check-model-multiselect.test.js` 与 `preliminary-check-model-match-mode.test.js` 红灯验证，确认模型区尚未具备多选和 `matchMode` 状态。
+- 2026-03-20 完成模型卡片多选、触发方式与人员列表请求状态改造后，重新执行上述 2 个测试，断言通过。
+- 2026-03-20 执行 `preliminary-check-model-filters.test.js` 与 `preliminary-check-model-table-columns.test.js` 红灯验证，确认模型区筛选条和表格列仍为旧结构。
+- 2026-03-20 完成员工姓名或工号、部门筛选以及工号列、异常标签列改造后，重新执行上述 2 个测试，断言通过。
+- 2026-03-20 新增并执行 `preliminary-check-model-linkage-flow.test.js`，确认默认全部模型、卡片增删、`ANY / ALL` 切换、关键词/部门/分页参数以及重置逻辑均已落到组件状态与请求参数构造中。
+- 2026-03-20 追加执行 `preliminary-check-model-and-detail.test.js`，确认模型区与风险明细区的静态文案断言与当前实现一致。
+- 2026-03-20 执行上述 8 个前端单测命令，总结果全部通过，0 failure，0 error。
+
+## 结论
+
+- 结果总览模型区前端已切换为真实接口驱动，入口页负责模型卡片数据，模型区组件负责联动查询。
+- 模型区已支持多卡片联动、`任意触发 / 同时触发` 切换，以及姓名或工号、部门、分页组合筛选。
+- 人员列表已展示工号、命中模型摘要和异常标签，并复用风险等级颜色映射。
+- 本轮验证仅执行前端静态单测，未启动额外前后端进程，因此无需执行进程清理。
--- a/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
+++ b/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
@@ -17,7 +17,7 @@ const detail = fs.readFileSync(
  "utf8"
 );

-["模型预警次数统计", "命中模型涉及人员", "筛查模型", "预警类型"].forEach((token) =>
+["模型预警次数统计", "命中模型涉及人员", "员工姓名或工号", "异常标签"].forEach((token) =>
  assert(model.includes(token), token)
 );
 ["涉险交易明细", "异常账户人员信息", "查看详情"].forEach((token) =>
--- a/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js
+++ b/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js
@@ -0,0 +1,25 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/RiskModelSection.vue"
+  ),
+  "utf8"
+);
+
+[
+  'return "全部模型"',
+  "this.selectedModelCodes = [...this.selectedModelCodes, modelCode]",
+  "this.selectedModelCodes = this.selectedModelCodes.filter((item) => item !== modelCode)",
+  "modelCodes: this.selectedModelCodes",
+  "matchMode: this.matchMode",
+  'this.matchMode = "ANY"',
+  'this.keyword = ""',
+  "this.deptId = undefined",
+  "this.pageNum = 1",
+  "keyword: this.keyword",
+  "deptId: this.deptId",
+].forEach((token) => assert(source.includes(token), token));