为风险明细列表添加分页选择器

2026-06-26 15:16:30 +08:00
parent 999350265b
commit 87b2352001
5 changed files with 60 additions and 20 deletions
--- a/docs/reports/implementation/2026-06-26-risk-detail-pagination-size-selector.md
+++ b/docs/reports/implementation/2026-06-26-risk-detail-pagination-size-selector.md
@@ -0,0 +1,25 @@
+# 风险明细列表分页选择器实施记录
+
+## 保存路径确认
+
+- 本实施记录保存于 `docs/reports/implementation/`，符合项目实施记录目录规范。
+
+## 修改内容
+
+- 在 `RiskDetailSection.vue` 中为风险明细卡片内的三个列表统一启用分页条数选择器。
+- 新增风险明细列表共享分页选项 `[5, 10, 20, 50]`，首屏默认仍保持每页 5 条。
+- 涉疑交易明细、员工负面征信信息、异常账户人员信息翻页或切换每页条数时，均使用当前分页参数重新请求对应接口。
+
+## 影响范围
+
+- 仅影响项目详情结果总览中的风险明细前端展示与分页请求参数。
+- 不涉及后端接口、数据库结构、导出逻辑和风险模型计算逻辑。
+
+## 验证情况
+
+- 已通过 `nvm use` 切换到 Node `v14.21.3` 后执行风险明细分页相关前端源码断言测试。
+- 已执行 `npm run build:prod`，构建通过，仅保留项目既有资源体积 warning。
+- 已在应用内浏览器打开真实项目详情结果总览页面，验证风险明细分页选择器展示与切换：
+  - `0430test` 项目涉疑交易明细从 `5条/页` 切换为 `10条/页` 后展示 10 行。
+  - `0430test` 项目异常账户人员信息从 `5条/页` 切换为 `10条/页` 后展示 6 行。
+  - 验证过程中未发现浏览器控制台错误。
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
@@ -120,8 +120,8 @@
          :total="suspiciousTotal"
          :page.sync="suspiciousPageNum"
          :limit.sync="suspiciousPageSize"
-          :page-sizes="[5]"
-          layout="total, prev, pager, next, jumper"
+          :page-sizes="riskDetailPageSizeOptions"
+          layout="total, sizes, prev, pager, next, jumper"
          @pagination="handlePageChange"
        />
      </div>
@@ -174,8 +174,8 @@
          :total="employeeCreditNegativeTotal"
          :page.sync="employeeCreditNegativePageNum"
          :limit.sync="employeeCreditNegativePageSize"
-          :page-sizes="[5]"
-          layout="total, prev, pager, next, jumper"
+          :page-sizes="riskDetailPageSizeOptions"
+          layout="total, sizes, prev, pager, next, jumper"
          @pagination="handleEmployeeCreditNegativePageChange"
        />
      </div>
@@ -209,8 +209,8 @@
          :total="abnormalAccountTotal"
          :page.sync="abnormalAccountPageNum"
          :limit.sync="abnormalAccountPageSize"
-          :page-sizes="[5]"
-          layout="total, prev, pager, next, jumper"
+          :page-sizes="riskDetailPageSizeOptions"
+          layout="total, sizes, prev, pager, next, jumper"
          @pagination="handleAbnormalAccountPageChange"
        />
      </div>
@@ -352,6 +352,8 @@ const SUSPICIOUS_TYPE_OPTIONS = [
  { value: "NAME_LIST", label: "名单库命中" },
  { value: "MODEL_RULE", label: "模型规则命中" },
 ];
+const DEFAULT_RISK_DETAIL_PAGE_SIZE = 5;
+const RISK_DETAIL_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];

 const normalizeSuspiciousType = (value) => (
  SUSPICIOUS_TYPE_OPTIONS.some((item) => item.value === value) ? value : "ALL"
@@ -465,17 +467,17 @@ export default {
      detailData: createEmptyDetailData(),
      currentSuspiciousType: "ALL",
      suspiciousPageNum: 1,
-      suspiciousPageSize: 5,
+      suspiciousPageSize: DEFAULT_RISK_DETAIL_PAGE_SIZE,
      suspiciousTotal: 0,
      suspiciousTransactionList: [],
      employeeCreditNegativeLoading: false,
      employeeCreditNegativePageNum: 1,
-      employeeCreditNegativePageSize: 5,
+      employeeCreditNegativePageSize: DEFAULT_RISK_DETAIL_PAGE_SIZE,
      employeeCreditNegativeTotal: 0,
      employeeCreditNegativeList: [],
      abnormalAccountLoading: false,
      abnormalAccountPageNum: 1,
-      abnormalAccountPageSize: 5,
+      abnormalAccountPageSize: DEFAULT_RISK_DETAIL_PAGE_SIZE,
      abnormalAccountTotal: 0,
      abnormalAccountList: [],
      projectId: null,
@@ -483,6 +485,9 @@ export default {
    };
  },
  computed: {
+    riskDetailPageSizeOptions() {
+      return RISK_DETAIL_PAGE_SIZE_OPTIONS;
+    },
    suspiciousTypeOptions() {
      return SUSPICIOUS_TYPE_OPTIONS;
    },
@@ -499,13 +504,13 @@ export default {
        this.projectId = value && value.projectId ? value.projectId : null;
        this.currentSuspiciousType = normalizeSuspiciousType(value && value.suspiciousType);
        this.suspiciousPageNum = 1;
-        this.suspiciousPageSize = 5;
+        this.suspiciousPageSize = DEFAULT_RISK_DETAIL_PAGE_SIZE;
        this.suspiciousTotal = Number(value && value.total) || 0;
        this.employeeCreditNegativePageNum = 1;
-        this.employeeCreditNegativePageSize = 5;
+        this.employeeCreditNegativePageSize = DEFAULT_RISK_DETAIL_PAGE_SIZE;
        this.employeeCreditNegativeTotal = Number(value && value.employeeCreditNegativeTotal) || 0;
        this.abnormalAccountPageNum = 1;
-        this.abnormalAccountPageSize = 5;
+        this.abnormalAccountPageSize = DEFAULT_RISK_DETAIL_PAGE_SIZE;
        this.abnormalAccountTotal = 0;
        this.abnormalAccountList = [];
        const rows = Array.isArray(value && value.suspiciousTransactionList)
@@ -531,7 +536,7 @@ export default {
        this.suspiciousPageNum = pageInfo;
      } else {
        this.suspiciousPageNum = pageInfo.page;
-        this.suspiciousPageSize = 5;
+        this.suspiciousPageSize = pageInfo.limit || this.suspiciousPageSize;
      }
      await this.loadSuspiciousTransactions();
    },
@@ -540,7 +545,7 @@ export default {
        this.employeeCreditNegativePageNum = pageInfo;
      } else {
        this.employeeCreditNegativePageNum = pageInfo.page;
-        this.employeeCreditNegativePageSize = 5;
+        this.employeeCreditNegativePageSize = pageInfo.limit || this.employeeCreditNegativePageSize;
      }
      await this.loadEmployeeCreditNegative();
    },
@@ -549,7 +554,7 @@ export default {
        this.abnormalAccountPageNum = pageInfo;
      } else {
        this.abnormalAccountPageNum = pageInfo.page;
-        this.abnormalAccountPageSize = 5;
+        this.abnormalAccountPageSize = pageInfo.limit || this.abnormalAccountPageSize;
      }
      await this.loadAbnormalAccountPeople();
    },
@@ -567,7 +572,7 @@ export default {
          projectId: this.projectId,
          suspiciousType: this.currentSuspiciousType,
          pageNum: this.suspiciousPageNum,
-          pageSize: 5,
+          pageSize: this.suspiciousPageSize,
        });
        const data = (response && response.data) || {};
        this.suspiciousTotal = Number(data.total) || 0;
@@ -593,7 +598,7 @@ export default {
        const response = await getOverviewEmployeeCreditNegative({
          projectId: this.projectId,
          pageNum: this.employeeCreditNegativePageNum,
-          pageSize: 5,
+          pageSize: this.employeeCreditNegativePageSize,
        });
        const data = (response && response.data) || {};
        this.employeeCreditNegativeList = Array.isArray(data.rows) ? data.rows : [];
--- a/ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js
+++ b/ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js
@@ -19,4 +19,8 @@ const source = fs.readFileSync(
  "abnormalAccountList",
  "handleAbnormalAccountPageChange",
  "loadAbnormalAccountPeople",
+  ":page-sizes=\"riskDetailPageSizeOptions\"",
+  "layout=\"total, sizes, prev, pager, next, jumper\"",
+  "pageSize: this.abnormalAccountPageSize",
+  "this.abnormalAccountPageSize = pageInfo.limit || this.abnormalAccountPageSize",
 ].forEach((token) => assert(source.includes(token), token));
--- a/ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js
+++ b/ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js
@@ -19,4 +19,8 @@ const source = fs.readFileSync(
  "loadEmployeeCreditNegative",
  "handleEmployeeCreditNegativePageChange",
  "getOverviewEmployeeCreditNegative",
+  ":page-sizes=\"riskDetailPageSizeOptions\"",
+  "layout=\"total, sizes, prev, pager, next, jumper\"",
+  "pageSize: this.employeeCreditNegativePageSize",
+  "this.employeeCreditNegativePageSize = pageInfo.limit || this.employeeCreditNegativePageSize",
 ].forEach((token) => assert(source.includes(token), token));
--- a/ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js
+++ b/ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js
@@ -21,9 +21,11 @@ const source = fs.readFileSync(
  "摘要 / 交易类型",
  "异常标签",
  "<pagination",
-  "pageSize: 5",
-  ":page-sizes=\"[5]\"",
-  "layout=\"total, prev, pager, next, jumper\"",
+  "DEFAULT_RISK_DETAIL_PAGE_SIZE",
+  "RISK_DETAIL_PAGE_SIZE_OPTIONS = [5, 10, 20, 50]",
+  ":page-sizes=\"riskDetailPageSizeOptions\"",
+  "layout=\"total, sizes, prev, pager, next, jumper\"",
+  "pageSize: this.suspiciousPageSize",
 ].forEach((token) => assert(source.includes(token), token));

 [