fix: 测试计划功能用例页面内存溢出

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml

@@ -246,7 +246,7 @@
         test_case.custom_num) as customNum, test_plan_test_case.executor, test_plan_test_case.status,
         test_plan_test_case.actual_result,
         test_plan_test_case.update_time, test_plan_test_case.create_time,test_case_node.name as model, project.name as
-        projectName,test_plan_test_case.issues as issues,test_plan_test_case.issues_count as issuesCount,
+        projectName, test_plan_test_case.issues_count as issuesCount,
         test_plan_test_case.plan_id as planId,test_case.version_id as versionId,
         project_version.name as versionName
         from test_plan_test_case

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

@@ -1,7 +1,6 @@
 package io.metersphere.track.service;
 
 import com.alibaba.fastjson.JSON;
-import com.alibaba.fastjson.JSONObject;
 import io.metersphere.base.domain.*;
 import io.metersphere.base.mapper.IssuesMapper;
 import io.metersphere.base.mapper.TestCaseIssuesMapper;
@@ -106,15 +105,11 @@ public class TestCaseIssueService {
     }
 
     public void updateIssuesCount(String resourceId) {
-        List<IssuesDao> issues = issuesService.getIssues(resourceId, IssueRefType.PLAN_FUNCTIONAL.name());
+        int issuesCount = issuesService.getIssues(resourceId, IssueRefType.PLAN_FUNCTIONAL.name()).size();
-        int issuesCount = issues.size();
         TestPlanTestCaseExample example = new TestPlanTestCaseExample();
         example.createCriteria().andIdEqualTo(resourceId);
         TestPlanTestCaseWithBLOBs testPlanTestCase = new TestPlanTestCaseWithBLOBs();
         testPlanTestCase.setIssuesCount(issuesCount);
-        if (!CollectionUtils.isEmpty(issues)) {
-            testPlanTestCase.setIssues(JSONObject.toJSONString(issues));
-        }
         testPlanTestCaseMapper.updateByExampleSelective(testPlanTestCase, example);
     }
 

frontend/src/business/components/track/plan/view/TestPlanView.vue

@@ -102,14 +102,13 @@ export default {
     }
   },
   created() {
-    this.$EventBus.$on('projectChange', () => {
+    this.$EventBus.$on('projectChange', this.handleProjectChange);
-      if (this.$route.name === 'planView') {
-        this.$router.push('/track/plan/all');
-      }
-    });
     this.projectId = getCurrentProjectID();
     this.checkVersionEnable();
   },
+  destroyed () {
+    this.$EventBus.$off('projectChange', this.handleProjectChange);
+  },
   mounted() {
     this.getTestPlans();
   },
@@ -117,6 +116,11 @@ export default {
     this.genRedirectParam();
   },
   methods: {
+    handleProjectChange() {
+      if (this.$route.name === 'planView') {
+        this.$router.push('/track/plan/all');
+      }
+    },
     genRedirectParam() {
       this.redirectCharType = this.$route.params.charType;
       this.clickType = this.$route.params.clickType;

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

@@ -29,14 +29,14 @@
       :operators="operators"
       :screen-height="screenHeight"
       :batch-operators="buttons"
-      @handlePageChange="initTableData"
-      @handleRowClick="handleEdit"
       :fields.sync="fields"
       :remember-order="true"
-      @refresh="initTableData"
       :row-order-group-id="planId"
       :row-order-func="editTestPlanTestCaseOrder"
       :enable-order-drag="enableOrderDrag"
+      @refresh="initTableData"
+      @handlePageChange="initTableData"
+      @handleRowClick="handleEdit"
       row-key="id"
       ref="table">
 
@@ -132,24 +132,16 @@
               placement="right"
               width="400"
               trigger="hover">
-              <el-table border class="adjust-table" :data="scope.row.issuesContent" style="width: 100%">
+              <test-plan-case-issue-item
-                <ms-table-column prop="title" :label="$t('test_track.issue.title')" show-overflow-tooltip/>
+                v-if="scope.row.issuesSize && scope.row.issuesSize > 0"
-                <ms-table-column prop="description" :label="$t('test_track.issue.description')">
+                :data="scope.row"/>
-                  <template v-slot:default="scope">
+              <el-button
-                    <el-popover
+                slot="reference"
-                      placement="left"
+                type="text">
-                      width="400"
+                <span @mouseover="loadIssue(scope.row)">
-                      trigger="hover"
+                  {{ scope.row.issuesSize }}
-                    >
+                </span>
-                      <ckeditor :editor="editor" disabled :config="editorConfig"
+              </el-button>
-                                v-model="scope.row.description"/>
-                      <el-button slot="reference" type="text">{{ $t('test_track.issue.preview') }}</el-button>
-                    </el-popover>
-                  </template>
-                </ms-table-column>
-                <ms-table-column prop="platform" :label="$t('test_track.issue.platform')"/>
-              </el-table>
-              <el-button slot="reference" type="text">{{ scope.row.issuesSize }}</el-button>
             </el-popover>
           </template>
         </ms-table-column>
@@ -288,7 +280,6 @@ import MsTableOperator from "../../../../../common/components/MsTableOperator";
 import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
 import {TEST_PLAN_TEST_CASE_CONFIGS} from "../../../../../common/components/search/search-components";
 import BatchEdit from "../../../../case/components/BatchEdit";
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import MsTag from "@/business/components/common/components/MsTag";
 import {
   buildBatchParam,
@@ -303,10 +294,12 @@ import {getTestTemplate} from "@/network/custom-field-template";
 import {editTestPlanTestCaseOrder} from "@/network/test-plan";
 import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
 import {getTestPlanTestCase} from "@/network/testCase";
+import TestPlanCaseIssueItem from "@/business/components/track/plan/view/comonents/functional/TestPlanCaseIssueItem";
 
 export default {
   name: "FunctionalTestCaseList",
   components: {
+    TestPlanCaseIssueItem,
     MsTableColumn,
     MsTable,
     FunctionalTestCaseEdit,
@@ -401,11 +394,6 @@ export default {
           {name: this.$t('test_track.plan_view.skip'), id: 'Skip'}
         ]
       },
-      editor: ClassicEditor,
-      editorConfig: {
-        // 'increaseIndent','decreaseIndent'
-        toolbar: [],
-      },
       selectDataRange: "all",
       testCaseTemplate: {},
       versionFilters: []
@@ -455,21 +443,30 @@ export default {
   },
   mounted() {
     this.$emit('setCondition', this.condition);
-    this.$EventBus.$on("openFailureTestCase", row => {
+    this.$EventBus.$on("openFailureTestCase", this.handleOpenFailureTestCase);
-      this.isReadOnly = true;
-      this.condition.status = 'Failure';
-      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row, this.tableData);
-    });
     this.refreshTableAndPlan();
     this.hasEditPermission = hasPermission('PROJECT_TRACK_PLAN:READ+EDIT');
     this.getMaintainerOptions();
     this.getTemplateField();
     this.getVersionOptions();
   },
-  beforeDestroy() {
+  destroyed() {
-    this.$EventBus.$off("openFailureTestCase");
+    this.$EventBus.$off("openFailureTestCase", this.handleOpenFailureTestCase);
   },
   methods: {
+    loadIssue(row) {
+      if(row.issuesSize && !row.hasLoadIssue) {
+        this.$get("/issues/get/case/PLAN_FUNCTIONAL/" + row.id).then(response => {
+          this.$set(row, "issuesContent", response.data.data);
+          this.$set(row, "hasLoadIssue", true);
+        });
+      }
+    },
+    handleOpenFailureTestCase(row) {
+      this.isReadOnly = true;
+      this.condition.status = 'Failure';
+      this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row, this.tableData);
+    },
     nextPage() {
       this.currentPage++;
       this.initTableData(() => {
@@ -534,7 +531,8 @@ export default {
               }
               this.$set(this.tableData[i], "showTags", JSON.parse(this.tableData[i].tags));
               this.$set(this.tableData[i], "issuesSize", this.tableData[i].issuesCount);
-              this.$set(this.tableData[i], "issuesContent", JSON.parse(this.tableData[i].issues));
+              this.$set(this.tableData[i], "hasLoadIssue", false);
+              this.$set(this.tableData[i], "issuesContent", []);
             }
           }
 

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

@@ -0,0 +1,45 @@
+<template>
+  <el-table v-loading="!data.hasLoadIssue" border class="adjust-table" :data="data.issuesContent" style="width: 100%">
+    <ms-table-column prop="title" :label="$t('test_track.issue.title')" show-overflow-tooltip/>
+    <ms-table-column prop="description" :label="$t('test_track.issue.description')">
+      <template v-slot:default="scope">
+        <el-popover
+          placement="left"
+          width="400"
+          trigger="hover"
+        >
+          <ckeditor :editor="editor" disabled :config="editorConfig"
+                    v-model="scope.row.description"/>
+          <el-button slot="reference" type="text">{{ $t('test_track.issue.preview') }}</el-button>
+        </el-popover>
+      </template>
+    </ms-table-column>
+    <ms-table-column prop="platform" :label="$t('test_track.issue.platform')"/>
+  </el-table>
+</template>
+
+<script>
+
+import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+
+export default {
+  name: "TestPlanCaseIssueItem",
+  components: {MsTableColumn},
+  props: {
+    data: Object
+  },
+  data() {
+    return {
+      visible: true,
+      editor: ClassicEditor,
+      editorConfig: {
+        toolbar: [],
+      },
+    }
+  },
+}
+</script>
+
+<style scoped>
+</style>