调整结果总览详情弹窗分页与模型摘要

2026-03-25 16:02:46 +08:00
parent 8e0274df88
commit be3448eb44
8 changed files with 145 additions and 8 deletions
--- a/docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-pagination-and-model-summary-adjustment-implementation.md
+++ b/docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-pagination-and-model-summary-adjustment-implementation.md
@@ -0,0 +1,36 @@
+# 结果总览查看详情弹窗分页与命中模型摘要调整实施记录
+
+## 变更日期
+
+- 2026-03-25
+
+## 变更范围
+
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/`
+- 单测：`ruoyi-ui/tests/unit/`
+
+## 实施内容
+
+### 1. 流水异常明细分页展示
+
+- 在 `ProjectAnalysisAbnormalTab.vue` 中为 `BANK_STATEMENT` 类型分组增加本地分页状态。
+- 流水异常明细改为每页展示 5 条记录。
+- 在流水表格下方新增分页器，仅当流水记录数超过 5 条时显示。
+- 切换详情数据后，流水分页自动重置到第一页。
+
+### 2. 命中模型摘要移除当前命中模型
+
+- 在 `ProjectAnalysisSidebar.vue` 中移除“当前命中模型”字段展示。
+- 保留“命中模型数”和“核心异常标签”展示。
+- `ProjectAnalysisDialog.vue` 与 `preliminaryCheck.mock.js` 中同步移除侧栏摘要默认结构里的 `currentModel` 字段。
+
+### 3. 测试更新
+
+- 更新 `project-analysis-dialog-abnormal-tab.test.js`，校验流水异常分页配置与分页事件接线。
+- 更新 `project-analysis-dialog-sidebar.test.js`，校验命中模型摘要不再展示“当前命中模型”。
+
+## 结果
+
+- 结果总览查看详情弹窗中的流水异常明细已按每页 5 条展示。
+- 侧栏“命中模型摘要”已移除“当前命中模型”字段。
+- 顶部来源提示区“当前命中模型”保留不变，继续用于从“命中模型涉及人员列表”进入时的上下文提示。
--- a/docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-pagination-and-model-summary-adjustment-verification.md
+++ b/docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-pagination-and-model-summary-adjustment-verification.md
@@ -0,0 +1,38 @@
+# 结果总览查看详情弹窗分页与命中模型摘要调整验证记录
+
+## 验证日期
+
+- 2026-03-25
+
+## 验证范围
+
+- 结果总览查看详情弹窗
+- 流水异常明细分页展示
+- 命中模型摘要字段展示
+
+## 验证命令
+
+```bash
+cd ruoyi-ui
+node tests/unit/preliminary-check-summary-and-people.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/project-analysis-dialog-layout.test.js
+node tests/unit/project-analysis-dialog-sidebar.test.js
+node tests/unit/project-analysis-dialog-abnormal-tab.test.js
+node tests/unit/project-analysis-dialog-empty-field.test.js
+node tests/unit/preliminary-check-api-integration.test.js
+node tests/unit/preliminary-check-project-analysis-source-context.test.js
+node tests/unit/project-analysis-dialog-source-highlight.test.js
+npm run build:prod
+```
+
+## 验证结果
+
+- 上述 Node 单测全部通过。
+- `npm run build:prod` 构建成功。
+- 构建过程中仅出现项目既有的静态资源体积告警，未出现本次改动引入的新错误。
+
+## 结论
+
+- 本次“流水异常明细分页展示”和“命中模型摘要移除当前命中模型”调整已完成，前端相关回归通过。
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
@@ -12,7 +12,7 @@

        <el-table
          v-if='group.groupType === "BANK_STATEMENT"'
-          :data="group.records || []"
+          :data="getStatementPageRecords(group)"
          class="abnormal-table"
        >
          <el-table-column prop="trxDate" label="交易时间" min-width="160" />
@@ -57,6 +57,19 @@
          </el-table-column>
          <el-table-column prop="displayAmount" label="交易金额" min-width="140" />
        </el-table>
+        <div
+          v-if='group.groupType === "BANK_STATEMENT" && getStatementTotal(group) > statementPageSize'
+          class="abnormal-pagination"
+        >
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :current-page="getStatementPage(group)"
+            :page-size="statementPageSize"
+            :total="getStatementTotal(group)"
+            @current-change="handleStatementPageChange(group, $event)"
+          />
+        </div>

        <div v-else-if='group.groupType === "OBJECT"' class="object-card-grid">
          <article
@@ -104,11 +117,54 @@ export default {
      }),
    },
  },
+  data() {
+    return {
+      statementPageSize: 5,
+      statementPageMap: {},
+    };
+  },
+  watch: {
+    detailGroups: {
+      immediate: true,
+      handler(groups) {
+        const nextPageMap = {};
+        groups
+          .filter((group) => group && group.groupType === "BANK_STATEMENT")
+          .forEach((group, index) => {
+            const groupKey = this.resolveGroupKey(group, index);
+            nextPageMap[groupKey] = 1;
+          });
+        this.statementPageMap = nextPageMap;
+      },
+    },
+  },
  computed: {
    detailGroups() {
      return Array.isArray(this.detailData && this.detailData.groups) ? this.detailData.groups : [];
    },
  },
+  methods: {
+    resolveGroupKey(group, index = 0) {
+      return group.groupCode || group.groupName || `BANK_STATEMENT_${index}`;
+    },
+    getStatementPage(group) {
+      const groupKey = this.resolveGroupKey(group);
+      return this.statementPageMap[groupKey] || 1;
+    },
+    getStatementTotal(group) {
+      return Array.isArray(group && group.records) ? group.records.length : 0;
+    },
+    getStatementPageRecords(group) {
+      const records = Array.isArray(group && group.records) ? group.records : [];
+      const currentPage = this.getStatementPage(group);
+      const startIndex = (currentPage - 1) * this.statementPageSize;
+      return records.slice(startIndex, startIndex + this.statementPageSize);
+    },
+    handleStatementPageChange(group, page) {
+      const groupKey = this.resolveGroupKey(group);
+      this.$set(this.statementPageMap, groupKey, page);
+    },
+  },
 };
 </script>

@@ -145,6 +201,12 @@ export default {
  overflow: hidden;
 }

+.abnormal-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
 .multi-line-cell {
  display: flex;
  flex-direction: column;
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -89,7 +89,6 @@ export default {
      type: Object,
      default: () => ({
        modelCount: 0,
-        currentModel: "-",
        riskTags: [],
      }),
    },
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
@@ -30,10 +30,6 @@
        <span class="sidebar-field__label">命中模型数</span>
        <span class="sidebar-field__value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
      </div>
-      <div class="sidebar-field">
-        <span class="sidebar-field__label">当前命中模型</span>
-        <span class="sidebar-field__value">{{ sidebarData.modelSummary.currentModel || "-" }}</span>
-      </div>
      <div class="sidebar-field sidebar-field--column">
        <span class="sidebar-field__label">核心异常标签</span>
        <div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
@@ -250,7 +250,6 @@ export function buildProjectAnalysisDialogData({ person, source = "riskPeople",
      },
      modelSummary: {
        modelCount: safePerson.modelCount || (Array.isArray(safePerson.modelNames) ? safePerson.modelNames.length : "-"),
-        currentModel: currentModelValue,
        hasRiskTags: riskTags.length > 0,
        riskTags,
      },
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
@@ -28,6 +28,12 @@ const abnormalTab = fs.readFileSync(
  'group.groupType === "BANK_STATEMENT"',
  'group.groupType === "OBJECT"',
  "group.groupName",
+  "statementPageSize: 5",
+  "statementPageMap",
+  "slice(startIndex, startIndex + this.statementPageSize)",
+  "<el-pagination",
+  ':page-size="statementPageSize"',
+  '@current-change="handleStatementPageChange(group, $event)"',
  "交易时间",
  "本方账户",
  "对方账户",
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
@@ -34,13 +34,14 @@ const entry = fs.readFileSync(
  "风险等级",
  "所属项目",
  "命中模型数",
-  "当前命中模型",
  "核心异常标签",
  "暂无异常标签",
  "formatRiskTag",
  "tag.ruleName",
 ].forEach((token) => assert(sidebar.includes(token), token));

+assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当前命中模型字段");
+
 assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块");
 assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");