fix(测试跟踪): 【测试计划】github#28250，测试计划，关联了1.6w条用例，查看测试报告页面卡死

--bug=1034232 --user=白奇 【测试计划】github#28250，测试计划，关联了1.6w条用例，查看测试报告页面卡死 https://www.tapd.cn/55049933/s/1451604

framework/sdk-parent/frontend/src/i18n/lang/track/en-US.js

@@ -653,6 +653,7 @@ export default {
     issue_list: "Issue List",
     all_case: "All Case",
     report_summary_length_tips: "Report summary cannot exceed 60000 words",
+    search_placeholder: "Enter ID or name search",
   },
   reporter: "Reporter",
   lastmodify: "Last Modify",

framework/sdk-parent/frontend/src/i18n/lang/track/zh-CN.js

@@ -618,6 +618,7 @@ export default {
     issue_list: "缺陷列表",
     all_case: "所有用例",
     report_summary_length_tips: "报告总结不能超过60000个字符",
+    search_placeholder: "输入 ID 或名称搜索",
   },
   reporter: "报告人",
   lastmodify: "最后更改",

framework/sdk-parent/frontend/src/i18n/lang/track/zh-TW.js

@@ -617,6 +617,7 @@ export default {
     issue_list: "缺陷列錶",
     all_case: "所有用例",
     report_summary_length_tips: "報告總結不能超過60000個字符",
+    search_placeholder: "輸入 ID 或名稱搜索",
   },
   reporter: "報告人",
   lastmodify: "最後更改",

test-track/frontend/src/business/plan/view/comonents/report/detail/TestPlanFunctionalReport.vue

@@ -1,13 +1,29 @@
 <template>
-  <test-plan-report-container id="functional" :title="$t('test_track.report.analysis_functional')">
+  <test-plan-report-container
+    id="functional"
+    :title="$t('test_track.report.analysis_functional')"
+    v-loading="loading"
+  >
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane v-if="resultEnable" :label="$t('test_track.report.test_result')" name="first">
+      <el-tab-pane
+        v-if="resultEnable"
+        :label="$t('test_track.report.test_result')"
+        name="first"
+      >
         <functional-result :function-result="report.functionResult" />
       </el-tab-pane>
-      <el-tab-pane v-if="issueEnable && (isTemplate || isShare || hasPermission('PROJECT_TRACK_ISSUE:READ'))"
+      <el-tab-pane
-                   name="second">
+        v-if="
-        <template v-slot:label>
+          issueEnable &&
-          <tab-pane-count :title="$t('test_track.report.issue_list')" :count="issueSize"/>
+          (isTemplate || isShare || hasPermission('PROJECT_TRACK_ISSUE:READ'))
+        "
+        name="second"
+      >
+        <template #label>
+          <tab-pane-count
+            :title="$t('test_track.report.issue_list')"
+            :count="issueSize"
+          />
         </template>
         <functional-issue-list
           :is-db="isDb"
@@ -16,11 +32,15 @@
           :is-template="isTemplate"
           :report="report"
           :plan-id="planId"
-          @setSize="setIssueSize"/>
+          @setSize="setIssueSize"
+        />
       </el-tab-pane>
       <el-tab-pane name="third" v-if="allEnable">
-        <template v-slot:label>
+        <template #label>
-          <tab-pane-count :title="$t('test_track.report.all_case')" :count="allSize"/>
+          <tab-pane-count
+            :title="$t('test_track.report.all_case')"
+            :count="allTestCase.length"
+          />
         </template>
         <functional-cases
           :is-db="isDb"
@@ -30,11 +50,14 @@
           :report="report"
           :plan-id="planId"
           :all-test-case="allTestCase"
-          @setSize="setAllSize"/>
+        />
       </el-tab-pane>
       <el-tab-pane v-if="failureEnable" name="fourth">
-        <template v-slot:label>
+        <template #label>
-          <tab-pane-count :title="$t('test_track.report.fail_case')" :count="failureSize"/>
+          <tab-pane-count
+            :title="$t('test_track.report.fail_case')"
+            :count="failureTestCase.length"
+          />
         </template>
         <functional-cases
           filter-status="Failure"
@@ -44,12 +67,15 @@
           :is-template="isTemplate"
           :report="report"
           :plan-id="planId"
-          :all-test-case="allTestCase"
+          :all-test-case="failureTestCase"
-          @setSize="setFailureSize"/>
+        />
       </el-tab-pane>
       <el-tab-pane v-if="blockingEnable" name="fifth">
-        <template v-slot:label>
+        <template #label>
-          <tab-pane-count :title="$t('test_track.plan_view.blocking') + $t('commons.track')" :count="blockingSize"/>
+          <tab-pane-count
+            :title="$t('test_track.plan_view.blocking') + $t('commons.track')"
+            :count="blockingTestCase.length"
+          />
         </template>
         <functional-cases
           filter-status="Blocking"
@@ -59,12 +85,15 @@
           :is-template="isTemplate"
           :report="report"
           :plan-id="planId"
-          :all-test-case="allTestCase"
+          :all-test-case="blockingTestCase"
-          @setSize="setBlockingSize"/>
+        />
       </el-tab-pane>
       <el-tab-pane v-if="skipEnable" name="sixth">
-        <template v-slot:label>
+        <template #label>
-          <tab-pane-count :title="$t('test_track.plan_view.skip') + $t('commons.track')" :count="skipSize"/>
+          <tab-pane-count
+            :title="$t('test_track.plan_view.skip') + $t('commons.track')"
+            :count="skipTestCase.length"
+          />
         </template>
         <functional-cases
           filter-status="Skip"
@@ -74,8 +103,8 @@
           :is-template="isTemplate"
           :report="report"
           :plan-id="planId"
-          :all-test-case="allTestCase"
+          :all-test-case="skipTestCase"
-          @setSize="setSkipSize"/>
+        />
       </el-tab-pane>
     </el-tabs>
   </test-plan-report-container>
@@ -89,55 +118,80 @@ import FunctionalIssueList from "@/business/plan/view/comonents/report/detail/co
 import TestPlanReportContainer from "@/business/plan/view/comonents/report/detail/TestPlanReportContainer";
 import TabPaneCount from "@/business/plan/view/comonents/report/detail/component/TabPaneCount";
 import { hasPermission } from "metersphere-frontend/src/utils/permission";
-import {getPlanFunctionAllCase, getSharePlanFunctionAllCase} from "@/api/remote/plan/test-plan";
+import {
+  getPlanFunctionAllCase,
+  getSharePlanFunctionAllCase,
+} from "@/api/remote/plan/test-plan";
 
 export default {
   name: "TestPlanFunctionalReport",
   components: {
     TabPaneCount,
-    TestPlanReportContainer, FunctionalIssueList, FunctionalCases, FunctionalResult, MsFormDivider
+    TestPlanReportContainer,
+    FunctionalIssueList,
+    FunctionalCases,
+    FunctionalResult,
+    MsFormDivider,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: "first",
-      failureSize: 0,
       issueSize: 0,
-      skipSize: 0,
+      allTestCase: [],
-      blockingSize: 0,
+      failureTestCase: [],
-      allSize: 0,
+      blockingTestCase: [],
-      allTestCase: []
+      skipTestCase: [],
+      loading: false,
     };
   },
   props: [
-    'report', 'planId', 'isTemplate', 'isShare', 'shareId', 'config', 'isDb'
+    "report",
+    "planId",
+    "isTemplate",
+    "isShare",
+    "shareId",
+    "config",
+    "isDb",
   ],
   computed: {
     resultEnable() {
-      let disable = this.report.config && this.report.config.functional.children.result.enable === false;
+      let disable =
+        this.report.config &&
+        this.report.config.functional.children.result.enable === false;
       return !disable;
     },
     issueEnable() {
-      let disable = this.report.config && this.report.config.functional.children.issue.enable === false;
+      let disable =
+        this.report.config &&
+        this.report.config.functional.children.issue.enable === false;
       return !disable;
     },
     allEnable() {
-      let disable = this.report.config && this.report.config.functional.children.all.enable === false;
+      let disable =
+        this.report.config &&
+        this.report.config.functional.children.all.enable === false;
       return !disable;
     },
     failureEnable() {
-      let disable = this.report.config && this.report.config.functional.children.failure.enable === false;
+      let disable =
+        this.report.config &&
+        this.report.config.functional.children.failure.enable === false;
       return !disable;
     },
     blockingEnable() {
-      let disable = this.report.config && this.report.config.functional.children.blocking.enable === false;
+      let disable =
+        this.report.config &&
+        this.report.config.functional.children.blocking.enable === false;
       return !disable;
     },
     skipEnable() {
-      let disable = this.report.config && this.report.config.functional.children.skip.enable === false;
+      let disable =
+        this.report.config &&
+        this.report.config.functional.children.skip.enable === false;
       return !disable;
     },
   },
-  mounted() {
+  created() {
     this.initActiveName();
     this.getAllFunctionalTestCase();
   },
@@ -154,61 +208,77 @@ export default {
     allEnable() {
       this.initActiveName();
     },
-    'report.config'() {
+    "report.config"() {
       this.getAllFunctionalTestCase();
-    }
+    },
   },
   methods: {
     initActiveName() {
       if (this.resultEnable) {
-        this.activeName = 'first';
+        this.activeName = "first";
       } else if (this.issueEnable) {
-        this.activeName = 'second';
+        this.activeName = "second";
       } else if (this.allEnable) {
-        this.activeName = 'third';
+        this.activeName = "third";
       } else if (this.failureEnable) {
-        this.activeName = 'fourth';
+        this.activeName = "fourth";
       } else if (this.blockingEnable) {
-        this.activeName = 'fifth';
+        this.activeName = "fifth";
       } else if (this.skipEnable) {
-        this.activeName = 'sixth';
+        this.activeName = "sixth";
       }
     },
-    setFailureSize(size) {
-      this.failureSize = size;
-    },
-    setBlockingSize(size) {
-      this.blockingSize = size;
-    },
-    setSkipSize(size) {
-      this.skipSize = size;
-    },
     setIssueSize(size) {
       this.issueSize = size;
     },
-    setAllSize(size) {
+    handleClick(tab, event) {},
-      this.allSize = size;
-    },
-    handleClick(tab, event) {
-    },
     hasPermission,
+    initAllTestCase(data) {
+      const _skipTestCase = [];
+      const _blockingTestCase = [];
+      const _failureTestCase = [];
+      for (let i = 0; i < data.length; i++) {
+        switch (data[i].status) {
+          case "Skip":
+            _skipTestCase.push(data[i]);
+            break;
+          case "Blocking":
+            _blockingTestCase.push(data[i]);
+            break;
+          case "failure":
+            _failureTestCase.push(data[i]);
+            break;
+          default:
+            break;
+        }
+      }
+      this.allTestCase = data;
+      this.skipTestCase = _skipTestCase;
+      this.blockingTestCase = _blockingTestCase;
+      this.failureTestCase = _failureTestCase;
+      this.loading = false;
+    },
     getAllFunctionalTestCase() {
       if (this.isTemplate || this.isDb) {
-        this.allTestCase = this.report.functionAllCases ? this.report.functionAllCases : [];
+        this.allTestCase = this.report.functionAllCases
+          ? this.report.functionAllCases
+          : [];
       } else if (this.isShare) {
+        this.loading = true;
         let param = this.getStatusList();
         if (param) {
-          getSharePlanFunctionAllCase(this.shareId, this.planId, param)
+          getSharePlanFunctionAllCase(this.shareId, this.planId, param).then(
-            .then((r) => {
+            (r) => {
-              this.allTestCase = r.data;
+              this.initAllTestCase(r.data);
-            });
+            }
+          );
         }
       } else {
+        this.loading = true;
         let param = this.getStatusList();
         if (param) {
-          getPlanFunctionAllCase(this.planId, param)
+          getPlanFunctionAllCase(this.planId, param).then((r) => {
-            .then((r) => {
+            this.initAllTestCase(r.data);
-              this.allTestCase = r.data;
           });
         }
       }
@@ -219,20 +289,18 @@ export default {
         return statusList;
       }
       if (this.failureEnable) {
-        statusList.push('Failure');
+        statusList.push("Failure");
       }
       if (this.blockingEnable) {
-        statusList.push('Blocking');
+        statusList.push("Blocking");
       }
       if (this.skipEnable) {
-        statusList.push('Skip');
+        statusList.push("Skip");
       }
       return statusList.length > 0 ? statusList : null;
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

test-track/frontend/src/business/plan/view/comonents/report/detail/component/FunctionalCases.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="container">
-    <el-table row-key="id" :data="testCases">
+    <el-input
+      v-model="keyword"
+      :placeholder="$t('test_track.report.search_placeholder')"
+      size="small"
+      prefix-icon="el-icon-search"
+      @keyup.enter.native="searchTestCase"
+    />
+    <el-table row-key="id" :data="currentPageTestCase" max-height="700">
       <el-table-column
         prop="num"
         :label="$t('commons.id')"
         show-overflow-tooltip
       >
-        <template v-slot:default="{ row }">
+        <template #default="{ row }">
           <span v-if="isTemplate || isShare">
             {{ row.isCustomNum ? row.customNum : row.num }}
           </span>
@@ -30,7 +37,7 @@
         column-key="priority"
         :label="$t('test_track.case.priority')"
       >
-        <template v-slot:default="scope">
+        <template #default="scope">
           <priority-table-item :value="scope.row.priority" ref="priority" />
         </template>
       </el-table-column>
@@ -59,7 +66,7 @@
         column-key="status"
         :label="$t('test_track.plan_view.execute_result')"
       >
-        <template v-slot:default="scope">
+        <template #default="scope">
           <status-table-item :value="scope.row.status" />
         </template>
       </el-table-column>
@@ -69,11 +76,24 @@
         :label="$t('commons.update_time')"
         show-overflow-tooltip
       >
-        <template v-slot:default="scope">
+        <template #default="scope">
           <span>{{ scope.row.updateTime | datetimeFormat }}</span>
         </template>
       </el-table-column>
     </el-table>
+    <div style="float: right; padding-top: 10px">
+      <el-pagination
+        :current-page.sync="currentPage"
+        :page-size="20"
+        layout="prev, pager, next"
+        :total="filterCases.length"
+        background
+        @current-change="handlePageChange"
+        @prev-click="handlePageChange"
+        @next-click="handlePageChange"
+      >
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -82,7 +102,6 @@ import PriorityTableItem from "../../../../../../common/tableItems/planview/Prio
 import TypeTableItem from "../../../../../../common/tableItems/planview/TypeTableItem";
 import MethodTableItem from "../../../../../../common/tableItems/planview/MethodTableItem";
 import StatusTableItem from "../../../../../../common/tableItems/planview/StatusTableItem";
-import {hasPermission} from "metersphere-frontend/src/utils/permission";
 import { getEditSimpleTestCase } from "@/api/testCase";
 import { openCaseEdit } from "@/business/case/test-case";
 
@@ -112,35 +131,19 @@ export default {
   },
   data() {
     return {
-      testCases: [],
+      keyword: "",
+      filterCases: [],
+      currentPage: 1,
+      currentPageTestCase: [],
     };
   },
-  mounted() {
-    this.getFunctionalTestCase();
-  },
   watch: {
-    testCases() {
+    allTestCase(val) {
-      if (this.testCases) {
+      this.filterCases = val;
-        this.$emit("setSize", this.testCases.length);
+      this.handlePageChange(this.currentPage);
-      }
-    },
-    allTestCase() {
-      this.getFunctionalTestCase();
     },
   },
   methods: {
-    getFunctionalTestCase() {
-      this.testCases = [];
-      if (this.filterStatus) {
-        this.allTestCase.forEach((item) => {
-          if (item.status === this.filterStatus) {
-            this.testCases.push(item);
-          }
-        });
-      } else {
-        this.testCases = this.allTestCase;
-      }
-    },
     redirectFunctionCaseEditPage(caseId, projectId) {
       getEditSimpleTestCase(caseId)
         .then((r) => {
@@ -148,6 +151,21 @@ export default {
         })
         .catch(() => {});
     },
+    searchTestCase() {
+      this.currentPage = 1;
+      this.filterCases = this.allTestCase.filter(
+        (e) =>
+          e.name.includes(this.keyword) || e.customNum.includes(this.keyword)
+      );
+      this.handlePageChange(this.currentPage);
+    },
+    handlePageChange(page) {
+      this.currentPage = page;
+      this.currentPageTestCase = this.filterCases.slice(
+        (page - 1) * 20,
+        page * 20
+      );
+    },
   },
 };
 </script>