refactor(测试跟踪): 脑图单个模块下用例数量过多时，分页加载

--bug=1011554 --user=陈建星 【测试计划】-关联3000+条用例后，某个模块包括1000+条用例，脑图显示页面卡死了 https://www.tapd.cn/55049933/s/1169013

backend/src/main/java/io/metersphere/track/controller/TestCaseController.java

@@ -88,11 +88,18 @@ public class TestCaseController {
     }
 
     @PostMapping("/list/minder")
-    public List<TestCaseDTO> listDetail(@RequestBody QueryTestCaseRequest request) {
+    public List<TestCaseDTO> listForMinder(@RequestBody QueryTestCaseRequest request) {
         checkPermissionService.checkProjectOwner(request.getProjectId());
         return testCaseService.listTestCaseForMinder(request);
     }
 
+    @PostMapping("/list/minder/{goPage}/{pageSize}")
+    public Pager<List<TestCaseDTO>> listForMinder(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody QueryTestCaseRequest request) {
+        checkPermissionService.checkProjectOwner(request.getProjectId());
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        return PageUtils.setPageInfo(page, testCaseService.listTestCaseForMinder(request));
+    }
+
     /*jenkins项目下所有接口和性能测试用例*/
     @GetMapping("/list/method/{projectId}")
     public List<TestCaseDTO> listByMethod(@PathVariable String projectId) {

backend/src/main/java/io/metersphere/track/controller/TestPlanTestCaseController.java

@@ -47,6 +47,12 @@ public class TestPlanTestCaseController {
         return testPlanTestCaseService.listForMinder(request);
     }
 
+    @PostMapping("/list/minder/{goPage}/{pageSize}")
+    public Pager<List<TestPlanCaseDTO>> listForMinder(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody QueryTestPlanCaseRequest request) {
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        return PageUtils.setPageInfo(page, testPlanTestCaseService.listForMinder(request));
+    }
+
     @GetMapping("/list/node/{planId}/{nodePaths}")
     public List<TestPlanCaseDTO> getTestPlanCasesByNodePath(@PathVariable String planId, @PathVariable String nodePaths) {
         String nodePath = nodePaths.replace("f", "/");

backend/src/main/java/io/metersphere/track/controller/TestReviewTestCaseController.java

@@ -61,6 +61,12 @@ public class TestReviewTestCaseController {
         return testReviewTestCaseService.listForMinder(request);
     }
 
+    @PostMapping("/list/minder/{goPage}/{pageSize}")
+    public Pager<List<TestReviewCaseDTO>> listForMinder(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody QueryCaseReviewRequest request) {
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        return PageUtils.setPageInfo(page, testReviewTestCaseService.listForMinder(request));
+    }
+
     @PostMapping("/edit")
     @MsAuditLog(module = OperLogModule.TRACK_TEST_CASE_REVIEW, type = OperLogConstants.REVIEW, content = "#msClass.getLogDetails(#testCaseReviewTestCase)", msClass = TestReviewTestCaseService.class)
     public void editTestCase(@RequestBody TestCaseReviewTestCase testCaseReviewTestCase) {

frontend/src/business/components/common/components/MsModuleMinder.vue

@@ -33,6 +33,7 @@
 
 import MsFullScreenButton from "@/business/components/common/components/MsFullScreenButton";
 import IsChangeConfirm from "@/business/components/common/components/IsChangeConfirm";
+import {minderPageInfoMap} from "@/network/testCase";
 export default {
   name: "MsModuleMinder",
   components: {IsChangeConfirm, MsFullScreenButton},
@@ -114,6 +115,9 @@ export default {
   created() {
     this.height = document.body.clientHeight - 285;
   },
+  destroyed() {
+    minderPageInfoMap.clear();
+  },
   mounted() {
     this.defaultMode = 3;
     if (this.minderKey) {
@@ -281,6 +285,7 @@ export default {
           data: {
             text: nodeData.name,
             id: nodeData.id,
+            caseNum: nodeData.caseNum,
             disable: this.moduleDisable || nodeData.id === 'root',
             tagEnable: this.tagEnable,
             type: 'node',

frontend/src/business/components/track/common/minder/minderUtils.js

@@ -2,6 +2,7 @@ import i18n from "@/i18n/i18n";
 import {getCurrentProjectID} from "../../../../../common/js/utils";
 import {success, warning} from "../../../../../common/js/message";
 import {deleteIssueRelate} from "@/network/Issue";
+import {minderPageInfoMap} from "@/network/testCase";
 
 export function listenNodeSelected(callback) {
   let minder = window.minder;
@@ -61,7 +62,7 @@ export function loadNode(node, param, getCaseFuc, setParamCallback, getExtraNode
     }
     if (getCaseFuc) {
       getCaseFuc(request, (testCases) => {
-        appendCaseNodes(node, testCases, param, setParamCallback);
+        initNodeCase(node, testCases, param, setParamCallback);
 
         if (getExtraNodeFuc) {
           param.result.loading = true;
@@ -73,6 +74,21 @@ export function loadNode(node, param, getCaseFuc, setParamCallback, getExtraNode
 
       });
     }
+  } else if (data.type === 'nextPage') {
+    // 分页处理，如果某个模块下用例太多，则分步加载
+    if (param.result) {
+      param.result.loading = true;
+    }
+    let request = param.request;
+    request.nodeId = data.nodeId;
+    let minderPageInfo = minderPageInfoMap.get(request.nodeId);
+    minderPageInfo.pageNum++;
+    if (getCaseFuc) {
+      getCaseFuc(request, (testCases) => {
+        appendNodeCases(node.parent, testCases, param, setParamCallback);
+        window.minder.removeNode(node);
+      });
+    }
   }
   data.loaded = true;
 }
@@ -277,24 +293,64 @@ function getNodeData(text, resource, isDisable, type) {
 }
 
 /**
- * 添加用例节点
+ * 初始化模块下的用例
  * @param parent
  * @param testCases
  * @param result
  */
-export function appendCaseNodes(parent, testCases, param, setParamCallback) {
+export function initNodeCase(parent, testCases, param, setParamCallback) {
   clearChildren(parent);
+  appendNodeCases(parent, testCases, param, setParamCallback);
+}
+
+/**
+ * 在模块下添加用例
+ * @param parent
+ * @param testCases
+ * @param param
+ * @param setParamCallback
+ */
+export function appendNodeCases(parent, testCases, param, setParamCallback) {
   if (testCases) {
     for (let i = 0; i < testCases.length; i++) {
       appendCase(parent, testCases[i], param.isDisable, setParamCallback);
     }
   }
+
+  appendNextPageNode(parent);
+
   expandNode(parent);
   if (param.result) {
     param.result.loading = false;
   }
 }
 
+/**
+ * 判断下当前模块的用例数量是不是分页的
+ * 是分页的话，添加下一页节点
+ * @param parent
+ */
+export function appendNextPageNode(parent) {
+  let caseNum = 0;
+  if (parent.children) {
+    for (const item of parent.children) {
+      if (item.data.type === 'case') {
+        caseNum++;
+      }
+    }
+  }
+  let minderPageInfo = minderPageInfoMap.get(parent.data.id === 'root' ? '' : parent.data.id);
+  let total = minderPageInfo.total;
+  if (total > caseNum) {
+    let nexPageNode = {
+      text: '...',
+      type: 'nextPage',
+      nodeId: parent.data.id
+    }
+    appendChildNode(parent, nexPageNode);
+  }
+}
+
 export function appendExtraNodes(parent, nodes) {
   if (nodes) {
     if (!parent.children) {
@@ -342,7 +398,6 @@ function appendChildNode(parent, childData, fresh) {
   }
   let km = window.minder;
   var node = km.createNode(childData, parent);
-  km.select(node, true);
   if (fresh) {
     if (parent.isExpanded()) {
       node.render();

frontend/src/network/testCase.js

@@ -4,26 +4,47 @@ import i18n from "@/i18n/i18n";
 import {basePost} from "@/network/base-network";
 import {baseGet} from "./base-network";
 
+export const minderPageInfoMap = new Map();
+
+function getMinderPageInfo(request) {
+  if (!minderPageInfoMap.get(request.nodeId)) {
+    minderPageInfoMap.set(request.nodeId, {
+      pageNum: 1,
+      pageSize: 100
+    });
+  }
+  return minderPageInfoMap.get(request.nodeId);
+}
+
 export function getTestCasesForMinder(request, callback) {
-  return post('/test/case/list/minder', request, (response) => {
+  let minderPageInfo = getMinderPageInfo(request);
+  let url = '/test/case/list/minder/' + minderPageInfo.pageNum + '/' + minderPageInfo.pageSize;
+  return post(url, request, (response) => {
     if (callback) {
-      callback(response.data);
+      minderPageInfo.total = response.data.itemCount;
+      callback(response.data.listObject);
     }
   });
 }
 
 export function getPlanCasesForMinder(request, callback) {
-  return post('/test/plan/case/list/minder', request, (response) => {
+  let minderPageInfo = getMinderPageInfo(request);
+  let url = '/test/plan/case/list/minder/' + minderPageInfo.pageNum + '/' + minderPageInfo.pageSize;
+  return post(url, request, (response) => {
     if (callback) {
-      callback(response.data);
+      minderPageInfo.total = response.data.itemCount;
+      callback(response.data.listObject);
     }
   });
 }
 
 export function getReviewCasesForMinder(request, callback) {
-  return post('/test/review/case/list/minder', request, (response) => {
+  let minderPageInfo = getMinderPageInfo(request);
+  let url = '/test/review/case/list/minder/' + minderPageInfo.pageNum + '/' + minderPageInfo.pageSize;
+  return post(url, request, (response) => {
     if (callback) {
-      callback(response.data);
+      minderPageInfo.total = response.data.itemCount;
+      callback(response.data.listObject);
     }
   });
 }