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

--bug=1009823 --user=陈建星【测试跟踪】github#9651，功能测试用例点击编辑经常加载慢之后页面奔溃 https://www.tapd.cn/55049933/s/10970588
2022-01-24 22:35:04 +08:00 · 2022-01-24 22:35:04 +08:00 · db73275ccd
parent 58eef7235b
commit db73275ccd
7 changed files with 122 additions and 125 deletions
--- a/backend/src/main/java/io/metersphere/track/controller/TestCaseController.java
+++ b/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);
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/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());
--- a/frontend/src/business/components/common/components/MsPreviousNextButton.vue
+++ b/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: {
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/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() {
-      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 = "";
+    getTestCase(id) {
      this.showInputTag = false;
-      let testCase = this.testCases[index];
-      if (typeof (index) == "undefined") {
+      if (!id) {
        id = this.currentTestCaseInfo.id;
-
-      } else {
-        id = testCase.id;
      }
      this.result = this.$get('/test/case/get/' + id, response => {
        if (response.data) {
--- a/frontend/src/business/components/track/case/components/TestCaseEditShow.vue
+++ b/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() {
-      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 = "";
+    getTestCase(id) {
      this.showInputTag = false;
-      let testCase = this.testCases[index];
-      if (typeof (index) == "undefined") {
+      if (!id) {
        id = this.currentTestCaseInfo.id;
-
-      } else {
-        id = testCase.id;
      }
      this.result = this.$get('/test/case/get/' + id, response => {
        if (response.data) {
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
+++ b/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) {
-      this.testCase = {};
-      let testCase = this.testCases[index];
+    getTestCase(id) {
      // 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;
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/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;
 }