refactor: 功能用例页面性能优化

--bug=1009823 --user=陈建星 【测试跟踪】github#9651，功能测试用例点击编辑经常加载慢之后页面奔溃 https://www.tapd.cn/55049933/s/10970588

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

@@ -100,11 +100,6 @@ public class TestCaseController {
         return testCaseService.listTestCaseMthod(request);
     }
 
-    @PostMapping("/list/ids")
-    public List<TestCaseDTO> getTestPlanCaseIds(@RequestBody QueryTestCaseRequest request) {
-        return testCaseService.listTestCaseIds(request);
-    }
-
     @GetMapping("/relationship/case/{id}/{relationshipType}")
     public List<RelationshipEdgeDTO> getRelationshipCase(@PathVariable("id") String id, @PathVariable("relationshipType") String relationshipType) {
         return testCaseService.getRelationshipCase(id, relationshipType);

backend/src/main/java/io/metersphere/track/service/TestCaseService.java

@@ -1772,15 +1772,6 @@ public class TestCaseService {
         return request.getId();
     }
 
-    public List<TestCaseDTO> listTestCaseIds(QueryTestCaseRequest request) {
-        setDefaultOrder(request);
-        List<String> selectFields = new ArrayList<>();
-        selectFields.add("test_case.id");
-        selectFields.add("test_case.name");
-        request.setSelectFields(selectFields);
-        return extTestCaseMapper.listIds(request);
-    }
-
     public void minderEdit(TestCaseMinderEditRequest request) {
 
         deleteToGcBatch(request.getIds());

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

@@ -1,17 +1,17 @@
 <template>
   <span class="previous-next-button">
-    <span class="head-right-tip" v-if="index + 1 === list.length">
+    <span class="head-right-tip" v-if="countNum === total">
       {{ $t('test_track.plan_view.pre_case') }} : {{list[index - 1] ? list[index - 1].name : ''}}
     </span>
-    <span class="head-right-tip" v-if="index + 1 !== list.length">
+    <span class="head-right-tip" v-if="countNum !== total">
       {{ $t('test_track.plan_view.next_case') }} : {{list[index + 1] ? list[index + 1].name : ''}}
     </span>
 
-    <el-button plain size="mini" icon="el-icon-arrow-up" :disabled="index + 1 <= 1" @click="handlePre()"/>
+    <el-button plain size="mini" icon="el-icon-arrow-up" :disabled="countNum <= 1" @click="handlePre()"/>
     <span>
-      {{ index + 1 }}/{{ list.length }}
+      {{ countNum }}/{{ total }}
     </span>
-    <el-button plain size="mini" icon="el-icon-arrow-down" :disabled="index + 1 >= list.length" @click="handleNext()"/>
+    <el-button plain size="mini" icon="el-icon-arrow-down" :disabled="countNum >= total" @click="handleNext()"/>
   </span>
 </template>
 
@@ -35,6 +35,35 @@
           default() {
             return 0
           }
+        },
+        pageTotal: {
+          type: Number,
+          default() {
+            return 0
+          }
+        },
+        total: {
+          type: Number,
+          default() {
+            return 0
+          }
+        },
+        pageNum: {
+          type: Number,
+          default() {
+            return 0
+          }
+        },
+        pageSize: {
+          type: Number,
+          default() {
+            return 0
+          }
+        }
+      },
+      computed: {
+        countNum() {
+          return this.pageSize * (this.pageNum - 1) + this.index + 1;
         }
       },
       methods: {

frontend/src/business/components/track/case/components/TestCaseEdit.vue

@@ -299,8 +299,6 @@ export default {
         {value: 'manual', label: this.$t('test_track.case.manual')}
       ],
       testCase: {},
-      testCases: [],
-      index: 0,
       showInputTag: true,
       tableType: "",
       stepFilter: new STEP,
@@ -602,7 +600,7 @@ export default {
           this.customFieldForm = parseCustomField(this.form, this.testCaseTemplate, this.customFieldRules, buildTestCaseOldFields(this.form));
           this.reload();
         } else {
-          this.initTestCases(testCase);
+          this.getTestCase(testCase.id);
         }
       } else {
         if (this.selectNode.data) {
@@ -629,40 +627,10 @@ export default {
         this.getComments(this.currentTestCaseInfo);
       }
     },
-    handlePre() {
+    getTestCase(id) {
-      this.index--;
-      this.getTestCase(this.index)
-    },
-    handleNext() {
-      this.index++;
-      this.getTestCase(this.index);
-    },
-    initTestCases(testCase) {
-      if (this.publicEnable) {
-        this.selectCondition.projectId = null;
-      } else {
-        this.selectCondition.workspaceId = null;
-      }
-      this.selectCondition.versionId = testCase.versionId
-        this.result = this.$post('/test/case/list/ids', this.selectCondition, response => {
-          this.testCases = response.data;
-          for (let i = 0; i < this.testCases.length; i++) {
-            if (this.testCases[i].id === testCase.id) {
-              this.index = i;
-              this.getTestCase(i);
-            }
-          }
-        });
-    },
-    getTestCase(index) {
-      let id = "";
       this.showInputTag = false;
-      let testCase = this.testCases[index];
+      if (!id) {
-      if (typeof (index) == "undefined") {
         id = this.currentTestCaseInfo.id;
-
-      } else {
-        id = testCase.id;
       }
       this.result = this.$get('/test/case/get/' + id, response => {
         if (response.data) {

frontend/src/business/components/track/case/components/TestCaseEditShow.vue

@@ -290,8 +290,6 @@ export default {
         {value: 'manual', label: this.$t('test_track.case.manual')}
       ],
       testCase: {},
-      testCases: [],
-      index: 0,
       showInputTag: true,
       tableType: "",
       stepFilter: new STEP,
@@ -561,7 +559,7 @@ export default {
           this.customFieldForm = parseCustomField(this.form, this.testCaseTemplate, this.customFieldRules, buildTestCaseOldFields(this.form));
           this.reload();
         } else {
-          this.initTestCases(testCase);
+          this.getTestCase(testCase.id);
         }
       } else {
         if (this.selectNode.data) {
@@ -585,40 +583,10 @@ export default {
         callback();
       }
     },
-    handlePre() {
+    getTestCase(id) {
-      this.index--;
-      this.getTestCase(this.index)
-    },
-    handleNext() {
-      this.index++;
-      this.getTestCase(this.index);
-    },
-    initTestCases(testCase) {
-      if (this.publicEnable) {
-        this.selectCondition.projectId = null;
-      } else {
-        this.selectCondition.workspaceId = null;
-      }
-      this.selectCondition.versionId = testCase.versionId
-      this.result = this.$post('/test/case/list/ids', this.selectCondition, response => {
-        this.testCases = response.data;
-        for (let i = 0; i < this.testCases.length; i++) {
-          if (this.testCases[i].id === testCase.id) {
-            this.index = i;
-            this.getTestCase(i);
-          }
-        }
-      });
-    },
-    getTestCase(index) {
-      let id = "";
       this.showInputTag = false;
-      let testCase = this.testCases[index];
+      if (!id) {
-      if (typeof (index) == "undefined") {
         id = this.currentTestCaseInfo.id;
-
-      } else {
-        id = testCase.id;
       }
       this.result = this.$get('/test/case/get/' + id, response => {
         if (response.data) {

frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue

@@ -27,7 +27,15 @@
                     </el-col>
 
                     <el-col class="head-right" :span="20">
-                      <ms-previous-next-button :index="index" @pre="handlePre" @next="saveCase(true, true)" :list="testCases"/>
+                      <ms-previous-next-button
+                        :index="index"
+                        :page-num="pageNum"
+                        :page-size="pageSize"
+                        :page-total="pageTotal"
+                        :total="total"
+                        @pre="handlePre"
+                        @next="saveCase(true, true)"
+                        :list="testCases"/>
                       <el-button class="save-btn" type="primary" size="mini" :disabled="isReadOnly" @click="saveCase(true)">
                         {{$t('test_track.save')}} & {{$t('test_track.next')}}
                       </el-button>
@@ -185,7 +193,6 @@ export default {
       showDialog: false,
       testCase: {},
       index: 0,
-      testCases: [],
       editor: ClassicEditor,
       editorConfig: {
         toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|', 'undo', 'redo'],
@@ -207,14 +214,21 @@ export default {
       isCustomFiledActive: false,
       otherInfoActive: true,
       isReadOnly: false,
+      testCases: []
     };
   },
   props: {
     total: {
-      type: Number
+      type: Number,
+
     },
     searchParam: {
       type: Object
+    },
+    pageNum: Number,
+    pageSize: {
+      type: Number,
+      default: 1
     }
   },
   computed: {
@@ -226,6 +240,9 @@ export default {
     },
     statusReadOnly() {
       return !hasPermission('PROJECT_TRACK_PLAN:READ+RUN');
+    },
+    pageTotal() {
+      return this.total / this.pageSize;
     }
   },
   methods: {
@@ -290,6 +307,10 @@ export default {
       };
     },
     saveCase(next, noTip) {
+      if (next && this.index === this.testCases.length - 1) {//需要翻页
+        this.handleNext();
+        return;
+      }
       let param = {};
       param.id = this.testCase.id;
       param.status = this.testCase.status;
@@ -320,7 +341,7 @@ export default {
         }
         this.updateTestCases(param);
         this.setPlanStatus(this.testCase.planId);
-        if (next && this.index < this.testCases.length - 1) {
+        if (next) {
           this.handleNext();
         }
       });
@@ -337,8 +358,15 @@ export default {
       }
     },
     handleNext() {
+      if (this.index === this.testCases.length - 1 && this.pageNum === this.pageTotal) {
+        this.$warning('已经是最后一页');
+        return;
+      } else if (this.index === this.testCases.length - 1) {
+        this.$emit('nextPage');
+        return;
+      }
       this.index++;
-      this.getTestCase(this.index);
+      this.getTestCase(this.testCases[this.index].id);
       this.reloadOtherInfo();
     },
     reloadOtherInfo() {
@@ -348,15 +376,20 @@ export default {
       })
     },
     handlePre() {
+      if (this.index === 0 && this.pageNum === 1) {
+        this.$warning('已经是第一页');
+        return;
+      } else if (this.index === 0) {
+        this.$emit('prePage');
+        return;
+      }
       this.index--;
-      this.getTestCase(this.index);
+      this.getTestCase(this.testCases[this.index].id);
       this.reloadOtherInfo();
     },
-    getTestCase(index) {
+    getTestCase(id) {
-      this.testCase = {};
-      let testCase = this.testCases[index];
       // id 为 TestPlanTestCase 的 id
-      this.result = this.$get('/test/plan/case/get/' + testCase.id, response => {
+      this.result = this.$get('/test/plan/case/get/' + id, response => {
         let item = {};
         Object.assign(item, response.data);
         if (item.results) {
@@ -400,19 +433,30 @@ export default {
         this.getComments(item);
       });
     },
-    openTestCaseEdit(testCase) {
+    openTestCaseEdit(testCase, tableData) {
       this.showDialog = true;
       this.activeTab = 'detail';
       this.hasTapdId = false;
       this.hasZentaoId = false;
       this.isReadOnly = !hasPermission('PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL');
 
+      if (tableData) {
+        this.testCases = tableData;
+        for (let i = 0; i < this.testCases.length; i++) {
+          let item = this.testCases[i];
+          if (item.id === testCase.id) {
+            this.index = i;
+            break;
+          }
+        }
+      }
+
       listenGoBack(this.handleClose);
-      let initFuc = this.initData;
+      let initFuc = this.getTestCase;
       getTemplate('field/template/case/get/relate/', this)
         .then((template) => {
           this.testCaseTemplate = template;
-          initFuc(testCase);
+          initFuc(testCase.id);
         });
       if (this.$refs.otherInfo) {
         this.$refs.otherInfo.reset();
@@ -432,17 +476,6 @@ export default {
     saveReport(reportId) {
       this.$post('/test/plan/case/edit', {id: this.testCase.id, reportId: reportId});
     },
-    initData(testCase) {
-      this.result = this.$post('/test/plan/case/list/ids', this.searchParam, response => {
-        this.testCases = response.data;
-        for (let i = 0; i < this.testCases.length; i++) {
-          if (this.testCases[i].id === testCase.id) {
-            this.index = i;
-            this.getTestCase(i);
-          }
-        }
-      });
-    },
     openTest(item) {
       const type = item.testType;
       const id = item.testId;

frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue

@@ -248,8 +248,14 @@
     <functional-test-case-edit
       ref="testPlanTestCaseEdit"
       :search-param.sync="condition"
+      :page-num="currentPage"
+      :page-size="pageSize"
+      @nextPage="nextPage"
+      @prePage="prePage"
       @refresh="initTableData"
+      :test-cases="tableData"
       :is-read-only="isReadOnly"
+      :total="total"
       @refreshTable="search"/>
 
     <batch-edit ref="batchEdit" @batchEdit="batchEdit"
@@ -448,7 +454,7 @@ export default {
     hub.$on("openFailureTestCase", row => {
       this.isReadOnly = true;
       this.condition.status = 'Failure';
-      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row);
+      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row, this.tableData);
     });
     this.refreshTableAndPlan();
     this.hasEditPermission = hasPermission('PROJECT_TRACK_PLAN:READ+EDIT');
@@ -460,6 +466,18 @@ export default {
     hub.$off("openFailureTestCase");
   },
   methods: {
+    nextPage() {
+      this.currentPage++;
+      this.initTableData(() => {
+        this.$refs.testPlanTestCaseEdit.openTestCaseEdit(this.tableData[0], this.tableData);
+      });
+    },
+    prePage() {
+      this.currentPage--;
+      this.initTableData(() => {
+        this.$refs.testPlanTestCaseEdit.openTestCaseEdit(this.tableData[this.tableData.length - 1], this.tableData);
+      });
+    },
     getTemplateField() {
       this.result.loading = true;
       let p1 = getProjectMember((data) => {
@@ -478,7 +496,7 @@ export default {
     getCustomFieldValue(row, field) {
       return getCustomFieldValue(row, field, this.members);
     },
-    initTableData() {
+    initTableData(callback) {
       initCondition(this.condition, this.condition.selectAll);
       this.enableOrderDrag = this.condition.orders.length > 0 ? false : true;
 
@@ -515,6 +533,9 @@ export default {
               this.$set(this.tableData[i], "issuesContent", JSON.parse(this.tableData[i].issues));
             }
           }
+          if (callback) {
+            callback();
+          }
         });
       }
     },
@@ -527,7 +548,7 @@ export default {
     },
     showDetail(row, event, column) {
       this.isReadOnly = !this.hasEditPermission;
-      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row);
+      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row, this.tableData);
     },
     refresh() {
       this.condition = {components: TEST_PLAN_TEST_CASE_CONFIGS};
@@ -556,7 +577,7 @@ export default {
     },
     handleEdit(testCase, index) {
       this.isReadOnly = false;
-      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(testCase);
+      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(testCase, this.tableData);
     },
     handleDelete(testCase) {
       this.$alert(this.$t('test_track.plan_view.confirm_cancel_relevance') + ' ' + testCase.name + " ？", '', {
@@ -678,14 +699,6 @@ export default {
   margin-left: 10px;
 }
 
-/*.ms-table-header >>> .table-title {*/
-/*  height: 0px;*/
-/*}*/
-
-/*/deep/ .el-table__fixed-body-wrapper {*/
-/*  top: 59px !important;*/
-/*}*/
-
 .ms-table-header {
   margin-bottom: 10px;
 }