fix(测试跟踪): 修复列表执行case卡住的缺陷

--bug=1021859 --user=王孝刚 【测试跟踪】测试计划详情里执行接口用例，状态是stopped的在执行的结果弹框里会一直转圈
https://www.tapd.cn/55049933/s/1339663

api-test/frontend/src/business/definition/components/response/ResponseResult.vue

@@ -9,6 +9,7 @@
           :read-only="true"
           :modes="modes"
           :data.sync="responseResult.body"
+          height="250px"
           ref="codeEdit" />
       </el-tab-pane>
 

framework/sdk-parent/frontend/src/components/environment/EnvironmentEdit.vue

@@ -498,6 +498,9 @@ export default {
         });
         param.config.commonConfig.hosts = validHosts;
       }
+      param.config.commonConfig.variables.forEach(variable => {
+        delete variable.hidden;
+      })
       param.config = JSON.stringify(param.config);
       return param;
     },

framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue

@@ -306,6 +306,7 @@ export default {
       if (isNeedCreate) {
         this.items.push(new KeyValue({ enable: true, id: getUUID(), type: 'CONSTANT', scope: 'api' }));
       }
+      this.currentPage = Math.ceil(this.items.length / this.pageSize);
       this.$emit('change', this.items);
       // TODO 检查key重复
     },
@@ -391,9 +392,9 @@ export default {
     },
     filter(scope) {
       let datas = [];
-      this.variables.forEach((item) => {
+      this.items.forEach((item) => {
         if (this.selectVariable && this.selectVariable != '' && item.name) {
-          if (item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
+          if (item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) === -1) {
             item.hidden = true;
           } else {
             item.hidden = undefined;
@@ -401,9 +402,19 @@ export default {
         } else {
           item.hidden = undefined;
         }
-        datas.push(item);
+        if (!item.hidden) {
+          datas.push(item);
+        }
       });
-      this.variables = datas;
+      this.total = datas.length;
+      // 如果是第一页，则截取0到pageSize（每页显示多少条数据）即可
+      if (this.currentPage == 1) {
+        this.variables = datas.slice(0, this.pageSize);
+        return;
+      }
+      let start = (this.currentPage - 1) * this.pageSize;
+      let end = this.currentPage * this.pageSize;
+      this.variables = datas.slice(start, end);
     },
     filterScope(value, row) {
       if (value == 'ui') {
@@ -467,6 +478,7 @@ export default {
           }
         });
       }
+      this.currentPage = Math.ceil(this.items.length / this.pageSize);
     },
     onChange() {
       this.sortParameters();
@@ -508,15 +520,16 @@ export default {
         importData.id = getUUID();
         importData.enable = true;
         importData.showMore = false;
-        let sameNameIndex = this.variables.findIndex((d) => d.name === importData.name);
+        let sameNameIndex = this.items.findIndex((d) => d.name === importData.name);
         if (sameNameIndex !== -1) {
           if (modeId === 'fullCoverage') {
-            this.variables.splice(sameNameIndex, 1, importData);
+            this.items.splice(sameNameIndex, 1, importData);
           }
         } else {
-          this.variables.splice(this.variables.length - 1, 0, importData);
+          this.items.splice(this.items.length - 1, 0, importData);
         }
       });
+      this.currentPage = Math.ceil(this.items.length / this.pageSize);
     },
     handleExportCommand(command) {
       this.exportJSON();
@@ -528,6 +541,7 @@ export default {
     } else {
       //历史数据默认是 api 应用场景
       _.forEach(this.items, (item) => {
+        delete item.hidden;
         if (!item.scope) {
           this.$set(item, 'scope', 'api');
         }

project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue

@@ -498,6 +498,9 @@ export default {
         });
         param.config.commonConfig.hosts = validHosts;
       }
+      param.config.commonConfig.variables.forEach(variable => {
+        delete variable.hidden;
+      })
       param.config = JSON.stringify(param.config);
       return param;
     },

test-track/frontend/src/api/remote/api/api-definition-report.js

@@ -5,3 +5,8 @@ const BASE_URL = '/api/definition/report/';
 export function apiDefinitionPlanReportGetByCaseId(caseId) {
   return get(BASE_URL + `plan/getReport/${caseId}/API_PLAN`);
 }
+
+export function getApiReportDetail(id) {
+  let url = '/api/definition/report/get/' + id;
+  return get(url);
+}

test-track/frontend/src/business/plan/view/comonents/api/TestPlanApiCaseResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :title="'测试结果'" width="60%"
+  <el-dialog :close-on-click-modal="false" :title="'测试结果'" width="60%" height="300px"
              :visible.sync="visible" class="api-import" @close="close">
     <div v-loading="loading">
       <micro-app v-if="showReport" route-name="ApiReportView"
@@ -12,6 +12,7 @@
 <script>
 import MicroApp from "metersphere-frontend/src/components/MicroApp";
 import {apiDefinitionPlanReportGetByCaseId} from "@/api/remote/api/api-definition-report";
+import {getApiReportDetail} from "@/api/remote/api/api-definition-report";
 
 export default {
   name: "TestPlanApiCaseResult",
@@ -46,11 +47,25 @@ export default {
             });
       });
     },
+    getReport(reportId) {
+      getApiReportDetail(reportId).then((response) => {
+        this.response = {};
+          if (!response.data ||(response.data.status && response.data.status.toUpperCase() === 'RUNNING') ) {
+            setTimeout(this.getReport(reportId), 1000);
+          } else {
+            this.loading = false;
+            this.showReport = true;
+            this.response = JSON.parse(response.data.content);
+          }
+      })
+
+    },
     open(reportId) {
       this.visible = true;
       this.showReport = false;
+      this.loading = true;
       this.$nextTick(() => {
-        this.showReport = true;
+        this.getReport(reportId);
         this.reportId = reportId;
       });
     }