4.1 KiB
4.1 KiB
结果总览模型区联动筛选前端实施记录
本次改动
- 在
projectOverview.js新增getOverviewRiskModelCards与getOverviewRiskModelPeople，统一封装模型卡片和模型区人员分页接口。 - 在
PreliminaryCheck.vue接入模型卡片真实请求，并把模型区列表查询职责下沉到RiskModelSection.vue。 - 在
preliminaryCheck.mock.js清理旧的模型筛选 mock 依赖，补齐模型卡片归一化逻辑和空态结构。 - 在
RiskModelSection.vue实现多卡片选中/取消、ANY / ALL匹配方式、关键词与部门筛选、分页请求、模型摘要和异常标签展示。 - 新增或更新
preliminary-check-model-api.test.js、preliminary-check-model-data-loading.test.js、preliminary-check-model-multiselect.test.js、preliminary-check-model-match-mode.test.js、preliminary-check-model-filters.test.js、preliminary-check-model-table-columns.test.js、preliminary-check-model-linkage-flow.test.js、preliminary-check-model-and-detail.test.js与preliminary-check-model-card-grid.test.js，覆盖接口、状态、筛选、联动流和卡片布局断点。
处理说明
- 继续复用现有
PreliminaryCheck.vue作为结果总览页入口，没有新增路由、二级页面或平行容器组件。 - 模型卡片接口与人员分页接口拆分请求，避免入口页承担过多筛选状态，保持模型区联动逻辑集中在组件内部。
- 模型卡片支持多选，再次点击可取消；请求参数统一携带
modelCodes + matchMode + keyword + deptId + pageNum + pageSize。 - 模型区人员列表改为展示姓名、工号、身份证号、所属部门、命中模型摘要和异常标签；异常标签复用
DetailQuery.vue的风险等级颜色映射。 - 部门选项复用系统现有的
deptTreeSelect接口，并在前端展开为可筛选下拉项，保持最短路径实现。 - 模型卡片网格在桌面端调整为固定 5 列，使 10 张卡片按两行展示；平板端降为 2 列，手机端降为 1 列，避免窄屏下卡片挤压。
验证情况
- 已执行如下定向验证：
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
node tests/unit/preliminary-check-model-card-grid.test.js
- 总体验证结果：9 个前端单测命令全部通过，0 failure，0 error。