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,216 +94,251 @@
 
 <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",
+    name: "TestReviewRelevance",
-  components: {
+    components: {
-    NodeTree,
+      NodeTree,
-    MsDialogFooter,
+      MsDialogFooter,
-    PriorityTableItem,
+      PriorityTableItem,
-    TypeTableItem,
+      TypeTableItem,
-    MsTableSearchBar,
+      MsTableSearchBar,
-    MsTableAdvSearchBar,
+      MsTableAdvSearchBar,
-    MsTableHeader,
+      MsTableHeader,
-    SwitchProject,
+      SwitchProject,
-    StatusTableItem
+      StatusTableItem
-  },
+    },
-  data() {
+    directives: {
-    return {
+      'el-table-infinite-scroll': elTableInfiniteScroll
-      result: {},
+    },
-      dialogFormVisible: false,
+    data() {
-      isCheckAll: false,
+      return {
-      testReviews: [],
+        result: {},
-      selectIds: new Set(),
+        dialogFormVisible: false,
-      treeNodes: [],
+        isCheckAll: false,
-      selectNodeIds: [],
+        testReviews: [],
-      selectNodeNames: [],
+        tableData: [],
-      projectId: '',
+        selectIds: new Set(),
-      projectName: '',
+        treeNodes: [],
-      projects: [],
+        selectNodeIds: [],
-      condition: {
+        selectNodeNames: [],
-        components: TEST_CASE_CONFIGS
+        projectId: '',
+        projectName: '',
+        projects: [],
+        pageSize: 50,
+        currentPage: 1,
+        total: 0,
+        endStatus: true,
+        condition: {
+          components: TEST_CASE_CONFIGS
+        },
+        priorityFilters: [
+          {text: 'P0', value: 'P0'},
+          {text: 'P1', value: 'P1'},
+          {text: 'P2', value: 'P2'},
+          {text: 'P3', value: 'P3'}
+        ],
+        typeFilters: [
+          {text: this.$t('commons.functional'), value: 'functional'},
+          {text: this.$t('commons.performance'), value: 'performance'},
+          {text: this.$t('commons.api'), value: 'api'}
+        ],
+        statusFilters: [
+          {text: this.$t('test_track.case.status_prepare'), value: 'Prepare'},
+          {text: this.$t('test_track.case.status_pass'), value: 'Pass'},
+          {text: this.$t('test_track.case.status_un_pass'), value: 'UnPass'},
+        ],
+      };
+    },
+    props: {
+      reviewId: {
+        type: String
+      }
+    },
+    watch: {
+      reviewId() {
+        this.initData();
       },
-      priorityFilters: [
+      selectNodeIds() {
-        {text: 'P0', value: 'P0'},
+        this.search();
-        {text: 'P1', value: 'P1'},
+      },
-        {text: 'P2', value: 'P2'},
+      projectId() {
-        {text: 'P3', value: 'P3'}
+        this.getProjectNode();
-      ],
-      typeFilters: [
-        {text: this.$t('commons.functional'), value: 'functional'},
-        {text: this.$t('commons.performance'), value: 'performance'},
-        {text: this.$t('commons.api'), value: 'api'}
-      ],
-      statusFilters: [
-        {text: this.$t('test_track.case.status_prepare'), value: 'Prepare'},
-        {text: this.$t('test_track.case.status_pass'), value: 'Pass'},
-        {text: this.$t('test_track.case.status_un_pass'), value: 'UnPass'},
-      ],
-    };
-  },
-  props: {
-    reviewId: {
-      type: String
-    }
-  },
-  watch: {
-    reviewId() {
-      this.initData();
-    },
-    selectNodeIds() {
-      this.getReviews();
-    },
-    projectId() {
-      this.getProjectNode();
-    }
-  },
-  updated() {
-    this.toggleSelection(this.testReviews);
-  },
-  methods: {
-    openTestReviewRelevanceDialog() {
-      this.getProject();
-      this.initData();
-      this.dialogFormVisible = true;
-    },
-    saveReviewRelevance() {
-      let param = {};
-      param.reviewId = this.reviewId;
-      param.testCaseIds = [...this.selectIds];
-      this.result = this.$post('/test/case/review/relevance', param, () => {
-        this.selectIds.clear();
-        this.$success(this.$t('commons.save_success'));
-        this.dialogFormVisible = false;
-        this.$emit('refresh');
-      });
-    },
-    getReviews() {
-      if (this.reviewId) {
-        this.condition.reviewId = this.reviewId;
-      }
-      if (this.selectNodeIds && this.selectNodeIds.length > 0) {
-        this.condition.nodeIds = this.selectNodeIds;
-      } else {
-        this.condition.nodeIds = [];
       }
+    },
+    updated() {
+      this.toggleSelection(this.testReviews);
+    },
+    methods: {
+      openTestReviewRelevanceDialog() {
+        this.getProject();
+        this.initData();
+        this.dialogFormVisible = true;
+      },
+      saveReviewRelevance() {
+        let param = {};
+        param.reviewId = this.reviewId;
+        param.testCaseIds = [...this.selectIds];
+        this.result = this.$post('/test/case/review/relevance', param, () => {
+          this.selectIds.clear();
+          this.$success(this.$t('commons.save_success'));
+          this.dialogFormVisible = false;
+          this.$emit('refresh');
+        });
+      },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
+      getReviews() {
+        if (this.reviewId) {
+          this.condition.reviewId = this.reviewId;
+        }
+        if (this.selectNodeIds && this.selectNodeIds.length > 0) {
+          this.condition.nodeIds = this.selectNodeIds;
+        } else {
+          this.condition.nodeIds = [];
+        }
 
-      if (this.projectId) {
+        if (this.projectId) {
-        this.condition.projectId = 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;
-            item.checked = false;
+            this.tableData = data.listObject;
+            this.endStatus = this.tableData.length === 50;
+            this.tableData.forEach(item => {
+              item.checked = false;
+            });
+            this.testReviews = this.testReviews.concat(this.tableData);
           });
-        });
+        }
-      }
 
-    },
+      },
-    handleSelectAll(selection) {
+      handleSelectAll(selection) {
-      if (selection.length > 0) {
+        if (selection.length > 0) {
-        this.testReviews.forEach(item => {
+          this.testReviews.forEach(item => {
-          this.selectIds.add(item.id);
+            this.selectIds.add(item.id);
-        });
+          });
-      } else {
+        } else {
-        // this.selectIds.clear();
+          // this.selectIds.clear();
-        this.testReviews.forEach(item => {
+          this.testReviews.forEach(item => {
-          if (this.selectIds.has(item.id)) {
+            if (this.selectIds.has(item.id)) {
-            this.selectIds.delete(item.id);
+              this.selectIds.delete(item.id);
-          }
+            }
-        });
+          });
-      }
+        }
-    },
+      },
-    handleSelectionChange(selection, row) {
+      handleSelectionChange(selection, row) {
-      if (this.selectIds.has(row.id)) {
+        if (this.selectIds.has(row.id)) {
-        this.selectIds.delete(row.id);
+          this.selectIds.delete(row.id);
-      } else {
+        } else {
-        this.selectIds.add(row.id);
+          this.selectIds.add(row.id);
-      }
+        }
-    },
+      },
-    nodeChange(nodeIds, nodeNames) {
+      nodeChange(nodeIds, nodeNames) {
-      this.selectNodeIds = nodeIds;
+        this.selectNodeIds = nodeIds;
-      this.selectNodeNames = nodeNames;
+        this.selectNodeNames = nodeNames;
-    },
+      },
-    initData() {
+      initData() {
-      this.getReviews();
+        // this.testReviews=[];
-      this.getAllNodeTreeByPlanId();
+        // this.getReviews();
-    },
+        // this.getAllNodeTreeByPlanId();
-    refresh() {
+      },
-      this.close();
+      refresh() {
-    },
+        this.close();
-    getAllNodeTreeByPlanId() {
+      },
-      if (this.reviewId) {
+      getAllNodeTreeByPlanId() {
-        let param = {
+        if (this.reviewId) {
-          reviewId: this.reviewId,
+          let param = {
-          projectId: this.projectId
+            reviewId: this.reviewId,
-        };
+            projectId: this.projectId
-        this.result = this.$post("/case/node/list/all/review", param , response => {
+          };
-          this.treeNodes = response.data;
+          this.result = this.$post("/case/node/list/all/review", param, response => {
-        });
+            this.treeNodes = response.data;
-      }
+          });
-    },
+        }
-    close() {
+      },
-      this.selectIds.clear();
+      close() {
-      this.selectNodeIds = [];
+        this.endStatus = false;
-      this.selectNodeNames = [];
+        this.selectIds.clear();
-    },
+        this.selectNodeIds = [];
-    filter(filters) {
+        this.selectNodeNames = [];
-      _filter(filters, this.condition);
+        this.tableData = [];
-      this.initData();
+      },
-    },
+      filter(filters) {
-    toggleSelection(rows) {
+        _filter(filters, this.condition);
-      rows.forEach(row => {
+        this.search();
-        this.selectIds.forEach(id => {
+      },
-          if (row.id === id) {
+      toggleSelection(rows) {
-            // true 是为选中
+        rows.forEach(row => {
-            this.$refs.table.toggleRowSelection(row, true)
+          this.selectIds.forEach(id => {
-          }
+            if (row.id === id) {
+              // true 是为选中
+              this.$refs.table.toggleRowSelection(row, true)
+            }
+          })
         })
-      })
+      },
-    },
+      getProject() {
-    getProject() {
+        if (this.reviewId) {
-      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;
-          let data = res.data;
+            if (data) {
-          if (data) {
+              this.projects = data;
-            this.projects = data;
+              this.projectId = data[0].id;
-            this.projectId = data[0].id;
+              this.projectName = data[0].name;
-            this.projectName = data[0].name;
+            }
+          })
+        }
+      },
+      switchProject() {
+        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() {
-    switchProject() {
+        this.currentPage = 1;
-      this.$refs.switchProject.open({id: this.reviewId, url : '/test/case/review/project/', type: 'review'});
+        this.testReviews = [];
-    },
+        this.getReviews();
-    getProjectNode(projectId) {
+      },
-      const index = this.projects.findIndex(project => project.id === projectId);
-      if (index !== -1) {
-        this.projectName = this.projects[index].name;
-      }
-      if (projectId) {
-        this.projectId = projectId;
-      }
-      this.result = this.$post("/case/node/list/all/review",
-        {reviewId: this.reviewId, projectId: this.projectId} , response => {
-          this.treeNodes = response.data;
-        });
 
-      this.selectNodeIds = [];
+      getProjectNode(projectId) {
+        const index = this.projects.findIndex(project => project.id === projectId);
+        if (index !== -1) {
+          this.projectName = this.projects[index].name;
+        }
+        if (projectId) {
+          this.projectId = projectId;
+        }
+        this.result = this.$post("/case/node/list/all/review",
+          {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: {