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

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 行。
+  - 验证过程中未发现浏览器控制台错误。

ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue

@@ -120,8 +120,8 @@
           :total="suspiciousTotal"
           :page.sync="suspiciousPageNum"
           :limit.sync="suspiciousPageSize"
-          :page-sizes="[5]"
+          :page-sizes="riskDetailPageSizeOptions"
-          layout="total, prev, pager, next, jumper"
+          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]"
+          :page-sizes="riskDetailPageSizeOptions"
-          layout="total, prev, pager, next, jumper"
+          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]"
+          :page-sizes="riskDetailPageSizeOptions"
-          layout="total, prev, pager, next, jumper"
+          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 : [];

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));

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));

ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js

@@ -21,9 +21,11 @@ const source = fs.readFileSync(
   "摘要 / 交易类型",
   "异常标签",
   "<pagination",
-  "pageSize: 5",
+  "DEFAULT_RISK_DETAIL_PAGE_SIZE",
-  ":page-sizes=\"[5]\"",
+  "RISK_DETAIL_PAGE_SIZE_OPTIONS = [5, 10, 20, 50]",
-  "layout=\"total, prev, pager, next, jumper\"",
+  ":page-sizes=\"riskDetailPageSizeOptions\"",
+  "layout=\"total, sizes, prev, pager, next, jumper\"",
+  "pageSize: this.suspiciousPageSize",
 ].forEach((token) => assert(source.includes(token), token));
 
 [