refactor(测试跟踪): 关联测试用例一次加载全部优化

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

@@ -77,9 +77,10 @@ public class TestCaseController {
         return testCaseService.getTestCaseNames(request);
     }
 
-    @PostMapping("/reviews/case")
+    @PostMapping("/reviews/case/{goPage}/{pageSize}")
-    public List<TestCase> getReviewCase(@RequestBody QueryTestCaseRequest request) {
+    public Pager<List<TestCase>> getReviewCase(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody QueryTestCaseRequest request) {
-        return testCaseService.getReviewCase(request);
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        return PageUtils.setPageInfo(page, testCaseService.getReviewCase(request));
     }
 
     @GetMapping("/get/{testCaseId}")

frontend/package.json

@@ -34,7 +34,8 @@
     "html2canvas": "^1.0.0-rc.7",
     "jspdf": "^2.1.1",
     "yan-progress": "^1.0.3",
-    "nprogress": "^0.2.0"
+    "nprogress": "^0.2.0",
+    "el-table-infinite-scroll": "^1.0.10"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

frontend/src/business/components/track/review/view/components/TestReviewRelevance.vue

@@ -11,7 +11,9 @@
 
       <el-container class="main-content">
         <el-aside class="tree-aside" width="250px">
-          <el-link type="primary" class="project-link" @click="switchProject">{{projectName ? projectName : $t('test_track.switch_project') }}</el-link>
+          <el-link type="primary" class="project-link" @click="switchProject">{{projectName ? projectName :
+            $t('test_track.switch_project') }}
+          </el-link>
           <node-tree class="node-tree"
                      @nodeSelectEvent="nodeChange"
                      @refresh="refresh"
@@ -21,9 +23,11 @@
 
         <el-container>
           <el-main class="case-content">
-            <ms-table-header :condition.sync="condition" @search="getReviews" title="" :show-create="false"/>
+            <ms-table-header :condition.sync="condition" @search="search" title="" :show-create="false"/>
             <el-table
               :data="testReviews"
+              v-el-table-infinite-scroll="loadData"
+              class="infinite-list"
               @filter-change="filter"
               row-key="id"
               @select-all="handleSelectAll"
@@ -72,7 +76,7 @@
                 </template>
               </el-table-column>
             </el-table>
-            <div style="text-align: center">共 {{testReviews.length}} 条</div>
+            <div style="text-align: center">共 {{total}} 条</div>
           </el-main>
         </el-container>
       </el-container>
@@ -90,19 +94,20 @@
 
 <script>
 
-import NodeTree from "../../../common/NodeTree";
+  import NodeTree from "../../../common/NodeTree";
-import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
-import PriorityTableItem from "../../../common/tableItems/planview/PriorityTableItem";
+  import PriorityTableItem from "../../../common/tableItems/planview/PriorityTableItem";
-import TypeTableItem from "../../../common/tableItems/planview/TypeTableItem";
+  import TypeTableItem from "../../../common/tableItems/planview/TypeTableItem";
-import MsTableSearchBar from "../../../../common/components/MsTableSearchBar";
+  import MsTableSearchBar from "../../../../common/components/MsTableSearchBar";
-import MsTableAdvSearchBar from "../../../../common/components/search/MsTableAdvSearchBar";
+  import MsTableAdvSearchBar from "../../../../common/components/search/MsTableAdvSearchBar";
-import MsTableHeader from "../../../../common/components/MsTableHeader";
+  import MsTableHeader from "../../../../common/components/MsTableHeader";
-import SwitchProject from "../../../case/components/SwitchProject";
+  import SwitchProject from "../../../case/components/SwitchProject";
-import {TEST_CASE_CONFIGS} from "../../../../common/components/search/search-components";
+  import {TEST_CASE_CONFIGS} from "../../../../common/components/search/search-components";
-import {_filter} from "../../../../../../common/js/utils";
+  import {_filter} from "../../../../../../common/js/utils";
-import StatusTableItem from "@/business/components/track/common/tableItems/planview/StatusTableItem";
+  import StatusTableItem from "@/business/components/track/common/tableItems/planview/StatusTableItem";
+  import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
-export default {
+  export default {
     name: "TestReviewRelevance",
     components: {
       NodeTree,
@@ -115,12 +120,16 @@ export default {
       SwitchProject,
       StatusTableItem
     },
+    directives: {
+      'el-table-infinite-scroll': elTableInfiniteScroll
+    },
     data() {
       return {
         result: {},
         dialogFormVisible: false,
         isCheckAll: false,
         testReviews: [],
+        tableData: [],
         selectIds: new Set(),
         treeNodes: [],
         selectNodeIds: [],
@@ -128,6 +137,10 @@ export default {
         projectId: '',
         projectName: '',
         projects: [],
+        pageSize: 50,
+        currentPage: 1,
+        total: 0,
+        endStatus: true,
         condition: {
           components: TEST_CASE_CONFIGS
         },
@@ -159,7 +172,7 @@ export default {
         this.initData();
       },
       selectNodeIds() {
-      this.getReviews();
+        this.search();
       },
       projectId() {
         this.getProjectNode();
@@ -185,6 +198,9 @@ export default {
           this.$emit('refresh');
         });
       },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
       getReviews() {
         if (this.reviewId) {
           this.condition.reviewId = this.reviewId;
@@ -197,11 +213,15 @@ export default {
 
         if (this.projectId) {
           this.condition.projectId = this.projectId;
-        this.result = this.$post('/test/case/reviews/case', this.condition, response => {
+          this.result = this.$post(this.buildPagePath('/test/case/reviews/case'), this.condition, response => {
-          this.testReviews = response.data;
+            let data = response.data;
-          this.testReviews.forEach(item => {
+            this.total = data.itemCount;
+            this.tableData = data.listObject;
+            this.endStatus = this.tableData.length === 50;
+            this.tableData.forEach(item => {
               item.checked = false;
             });
+            this.testReviews = this.testReviews.concat(this.tableData);
           });
         }
 
@@ -232,8 +252,9 @@ export default {
         this.selectNodeNames = nodeNames;
       },
       initData() {
-      this.getReviews();
+        // this.testReviews=[];
-      this.getAllNodeTreeByPlanId();
+        // this.getReviews();
+        // this.getAllNodeTreeByPlanId();
       },
       refresh() {
         this.close();
@@ -244,19 +265,21 @@ export default {
             reviewId: this.reviewId,
             projectId: this.projectId
           };
-        this.result = this.$post("/case/node/list/all/review", param , response => {
+          this.result = this.$post("/case/node/list/all/review", param, response => {
             this.treeNodes = response.data;
           });
         }
       },
       close() {
+        this.endStatus = false;
         this.selectIds.clear();
         this.selectNodeIds = [];
         this.selectNodeNames = [];
+        this.tableData = [];
       },
       filter(filters) {
         _filter(filters, this.condition);
-      this.initData();
+        this.search();
       },
       toggleSelection(rows) {
         rows.forEach(row => {
@@ -270,7 +293,7 @@ export default {
       },
       getProject() {
         if (this.reviewId) {
-        this.$post("/test/case/review/projects", {reviewId: this.reviewId},res => {
+          this.$post("/test/case/review/projects", {reviewId: this.reviewId}, res => {
             let data = res.data;
             if (data) {
               this.projects = data;
@@ -281,8 +304,24 @@ export default {
         }
       },
       switchProject() {
-      this.$refs.switchProject.open({id: this.reviewId, url : '/test/case/review/project/', type: 'review'});
+        this.$refs.switchProject.open({id: this.reviewId, url: '/test/case/review/project/', type: 'review'});
       },
+      loadData() {
+        if (this.dialogFormVisible) {
+          if (this.endStatus === true) {
+            this.currentPage += 1;
+            this.getReviews();
+          } else {
+            this.$message.warning(this.$t('test_track.review_view.last_page'));
+          }
+        }
+      },
+      search() {
+        this.currentPage = 1;
+        this.testReviews = [];
+        this.getReviews();
+      },
+
       getProjectNode(projectId) {
         const index = this.projects.findIndex(project => project.id === projectId);
         if (index !== -1) {
@@ -292,14 +331,14 @@ export default {
           this.projectId = projectId;
         }
         this.result = this.$post("/case/node/list/all/review",
-        {reviewId: this.reviewId, projectId: this.projectId} , response => {
+          {reviewId: this.reviewId, projectId: this.projectId}, response => {
             this.treeNodes = response.data;
           });
 
         this.selectNodeIds = [];
       }
     }
-}
+  }
 </script>
 
 <style scoped>

frontend/src/i18n/en-US.js

@@ -807,6 +807,7 @@ export default {
       all_case: "All case",
       start_review: "Start Review",
       relevance_case: "Relevance Case",
+      last_page: "It's the end！",
       execute_result: "Result",
     },
     module: {

frontend/src/i18n/zh-CN.js

@@ -809,6 +809,7 @@ export default {
       all_case: "全部用例",
       start_review: "开始评审",
       relevance_case: "关联用例",
+      last_page: "已经到底了！",
       execute_result: "评审结果",
     },
     module: {

frontend/src/i18n/zh-TW.js

@@ -809,6 +809,7 @@ export default {
       all_case: "全部用例",
       start_review: "開始評審",
       relevance_case: "關聯用例",
+      last_page: "已經到底了！",
       execute_result: "評審結果",
     },
     module: {