wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
079b412d38e0e1014c6b136c294d5dd652a1256b
ccdi/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md

339 lines
9.0 KiB
Markdown
Raw Blame History

# 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 (`- [x]`) syntax for tracking.
**Goal:** 将结果总览模型区接入真实接口，支持多卡片联动、任意触发/同时触发切换、员工姓名或工号与部门筛选，以及异常标签展示。
**Architecture:** 保持 `PreliminaryCheck.vue` 作为结果总览页面主入口，不新增路由或二级页面。模型卡片接口与人员列表接口分开请求，`RiskModelSection.vue` 内统一维护卡片选择、匹配模式、关键词、部门和分页状态，列表按状态组合查询。
**Tech Stack:** Vue 2, Element UI, Axios (`@/utils/request`), Node.js
---
### Task 1: 补模型区 API 封装
**Files:**
- Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js`
- Test: `ruoyi-ui/tests/unit/preliminary-check-model-api.test.js`
- [x] **Step 1: Write the failing test**
新增接口静态断言，锁定以下方法与路径：
- `getOverviewRiskModelCards`
- `getOverviewRiskModelPeople`
- `/ccdi/project/overview/risk-models/cards`
- `/ccdi/project/overview/risk-models/people`
- `matchMode`
- [x] **Step 2: Run test to verify it fails**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-api.test.js
```
Expected:
- `FAIL`
- [x] **Step 3: Write minimal implementation**
在 API 模块中新增：
- `getOverviewRiskModelCards(projectId)`
- `getOverviewRiskModelPeople(params)`
列表接口需透传：
- `projectId`
- `modelCodes`
- `matchMode`
- `keyword`
- `deptId`
- `pageNum`
- `pageSize`
- [x] **Step 4: Run test to verify it passes**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-api.test.js
```
Expected:
- `PASS`
- [x] **Step 5: Commit**
```bash
git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/tests/unit/preliminary-check-model-api.test.js
git commit -m "补充结果总览模型区前端接口封装"
```
### Task 2: 在入口页接入模型区真实数据
**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
- Test: `ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js`
- [x] **Step 1: Write the failing test**
新增入口页静态断言，要求：
- `PreliminaryCheck.vue` 引入 `getOverviewRiskModelCards`
- 模型区真实数据不再只依赖旧 mock
- 页面仍保留 `loading / empty / loaded` 状态结构
- [x] **Step 2: Run test to verify it fails**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-data-loading.test.js
```
Expected:
- `FAIL`
- [x] **Step 3: Write minimal implementation**
在 `PreliminaryCheck.vue` 中：
- 拉取模型卡片真实数据
- 将模型区交给 `RiskModelSection.vue` 内部继续请求列表接口
- 清理 `preliminaryCheck.mock.js` 中模型区旧的 `warningTypeOptions`、旧 `filterValues.model` 依赖
- 保留空态 mock 作为兜底展示结构，不新增业务逻辑兜底
- [x] **Step 4: Run test to verify it passes**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-data-loading.test.js
```
Expected:
- `PASS`
- [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
git commit -m "接入结果总览模型卡片真实数据"
```
### Task 3: 改造模型卡片多选与触发方式切换
**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue`
- Test: `ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js`
- Test: `ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js`
- [x] **Step 1: Write the failing test**
新增组件静态/行为断言，锁定：
- 卡片支持多选
- 再次点击已选卡片可取消
- 存在 `matchMode`
- 页面出现“任意触发”“同时触发”文案
- [x] **Step 2: Run test to verify it fails**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-multiselect.test.js
node tests/unit/preliminary-check-model-match-mode.test.js
```
Expected:
- `FAIL`
- [x] **Step 3: Write minimal implementation**
在 `RiskModelSection.vue` 中新增状态：
- `selectedModelCodes`
- `matchMode`
- `keyword`
- `deptId`
- `pageNum`
- `pageSize`
- `cardLoading`
- `tableLoading`
交互规则：
- 默认 `selectedModelCodes = []`
- 默认 `matchMode = "ANY"`
- 选中多张卡片时允许切换 `ANY / ALL`
- 不选卡片或仅选一张时，切换模式不报错，仍按当前接口语义请求
- [x] **Step 4: Run test to verify it passes**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-multiselect.test.js
node tests/unit/preliminary-check-model-match-mode.test.js
```
Expected:
- `PASS`
- [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
git commit -m "补充结果总览模型卡片联动交互"
```
### Task 4: 替换筛选条与人员列表列
**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue`
- Test: `ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js`
- Test: `ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js`
- [x] **Step 1: Write the failing test**
锁定以下变更：
- 删除“筛查模型”
- 删除“预警类型”
- 新增“员工姓名或工号”
- 新增“部门”
- 新增“任意触发”“同时触发”
- 删除“预警类型”列
- 新增“工号”列
- 新增“异常标签”列
- [x] **Step 2: Run test to verify it fails**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-table-columns.test.js
```
Expected:
- `FAIL`
- [x] **Step 3: Write minimal implementation**
在筛选区：
- 保留 `查询 / 重置`
- 关键词输入框支持姓名或工号
- 部门优先复用仓库现有部门选项接口
- 重置时恢复：
- `selectedModelCodes = []`
- `matchMode = "ANY"`
- `keyword = ""`
- `deptId = undefined`
- `pageNum = 1`
在表格列：
- 删除 `warningType`
- 增加 `staffCode`
- `modelNames` 显示当前上下文模型名称摘要
- `hitTagList` 用 `el-tag` 展示 `ruleName`
- 颜色映射复用 `DetailQuery.vue` 风险等级映射方式
- [x] **Step 4: Run test to verify it passes**
Run:
```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-table-columns.test.js
```
Expected:
- `PASS`
- [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
git commit -m "调整结果总览模型区筛选与列表列"
```
### Task 5: 前端联调验证与实施记录
**Files:**
- Modify: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`
- Create: `ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js`
- Modify: `docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md`
- 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`
- [x] **Step 1: Write linkage flow assertions**
覆盖以下联动流：
- 默认全部模型
- 选中一张卡片
- 同时选中多张卡片 + `ANY`
- 同时选中多张卡片 + `ALL`
- 取消部分卡片
- 全部取消恢复默认
- 关键词 + 部门 + 多卡片叠加
- [x] **Step 2: Run final frontend verification**
Run:
```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
```
Expected:
- `PASS`
- [x] **Step 3: Write verification and implementation records**
记录：
- 模型区真实接口接入
- 多卡片联动
- 任意触发 / 同时触发切换
- 关键词、部门、分页联动验证
- [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
git commit -m "补充结果总览模型区前端实施记录"
```
Reference in New Issue View Git Blame Copy Permalink