From 0deb4d85944b5f99c76a0a057839ef86def91bae Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Mon, 14 Mar 2022 16:10:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor=20(=E6=8E=A5=E5=8F=A3=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95):=20=E5=9C=BA=E6=99=AF=E9=A1=B5=E9=9D=A2=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=8D=A1=E9=A1=BF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scenario/common/ApiBaseComponent.vue      |  3 +-
 .../scenario/component/ApiComponent.vue       | 57 ++++++++-----------
 .../component/ApiScenarioComponent.vue        |  5 +-
 3 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
index e417473b5f..5cc0cf2bc0 100644
--- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -53,7 +53,8 @@
     <!--最大化不显示具体内容-->
     <div class="header" v-if="!isMax">
       <el-collapse-transition>
-        <div v-show="data.active && showCollapse" :draggable="draggable">
+        <!-- 这里的组件默认不展开时不加载 -->
+        <div v-if="data.active && showCollapse" :draggable="draggable">
           <el-divider></el-divider>
           <fieldset :disabled="data.disabled" class="ms-fieldset">
             <!--四种协议请求内容-->
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
index 232347943b..eff5cc5a6d 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@@ -14,16 +14,15 @@
       :show-version="showVersion"
       :title="displayTitle"
       :if-from-variable-advance="ifFromVariableAdvance">
-
       <template v-slot:afterTitle v-if="(request.refType==='API'|| request.refType==='CASE')&&isSameSpace">
         <span v-if="isShowNum" @click="clickResource(request)">{{ "（ ID: " + request.num + "）" }}</span>
         <span v-else>
-          <el-tooltip class="ms-num" effect="dark"
-                      :content="request.refType==='API'?$t('api_test.automation.scenario.api_none'):$t('api_test.automation.scenario.case_none')"
-                      placement="top">
-            <i class="el-icon-warning"/>
-          </el-tooltip>
-        </span>
+                      <el-tooltip class="ms-num" effect="dark"
+                                  :content="request.refType==='API'?$t('api_test.automation.scenario.api_none'):$t('api_test.automation.scenario.case_none')"
+                                  placement="top">
+                        <i class="el-icon-warning"/>
+                      </el-tooltip>
+                    </span>
         <span v-xpack v-if="request.versionEnable&&showVersion">{{ $t('project.version.name') }}: {{
             request.versionName
           }}</span>
@@ -41,20 +40,20 @@
         <span class="ms-tag ms-step-name-api">{{ getProjectName(request.projectId) }}</span>
       </template>
       <template v-slot:debugStepCode>
-         <span v-if="request.testing" class="ms-test-running">
-           <i class="el-icon-loading" style="font-size: 16px"/>
-           {{ $t('commons.testing') }}
-         </span>
+               <span v-if="request.testing" class="ms-test-running">
+                 <i class="el-icon-loading" style="font-size: 16px"/>
+                 {{ $t('commons.testing') }}
+               </span>
         <!--  场景调试步骤增加误报判断  -->
         <span class="ms-step-debug-code" :class="'ms-req-error-report'" v-if="!loading &&!request.testing && request.debug && request.requestResult[0] && request.requestResult[0].responseResult && request.requestResult[0].status==='errorReportResult'">
-          {{ $t("error_report_library.option.name") }}
-        </span>
+                {{ $t("error_report_library.option.name") }}
+              </span>
         <span class="ms-step-debug-code"
               @click="active"
               :class="request.requestResult[0].success && reqSuccess?'ms-req-success':'ms-req-error'"
               v-else-if="!loading &&!request.testing && request.debug && request.requestResult[0] && request.requestResult[0].responseResult">
-          {{ request.requestResult[0].success && reqSuccess ? 'success' : 'error' }}
-        </span>
+                {{ request.requestResult[0].success && reqSuccess ? 'success' : 'error' }}
+              </span>
       </template>
       <template v-slot:button v-if="!ifFromVariableAdvance">
         <el-tooltip :content="$t('api_test.run')" placement="top" v-if="!loading">
@@ -155,18 +154,7 @@
 </template>
 
 <script>
-import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
-import MsTcpFormatParameters from "../../../definition/components/request/tcp/TcpFormatParameters";
-import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
-import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
-import MsRequestResultTail from "../../../definition/components/response/RequestResultTail";
-import MsRun from "../../../definition/components/Run";
 import {getUUID, getCurrentProjectID, getCurrentWorkspaceId} from "@/common/js/utils";
-import ApiBaseComponent from "../common/ApiBaseComponent";
-import ApiResponseComponent from "./ApiResponseComponent";
-import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
-import TemplateComponent from "@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent";
-import {ENV_TYPE} from "@/common/js/constants";
 import {getUrl} from "@/business/components/api/automation/scenario/component/urlhelper";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
@@ -210,10 +198,16 @@ export default {
     },
   },
   components: {
-    TemplateComponent,
-    CustomizeReqInfo,
-    ApiBaseComponent, ApiResponseComponent,
-    MsSqlBasisParameters, MsTcpFormatParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun,
+    TemplateComponent: () => import("@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent"),
+    CustomizeReqInfo: () => import("@/business/components/api/automation/scenario/common/CustomizeReqInfo"),
+    ApiBaseComponent: () => import("../common/ApiBaseComponent"),
+    ApiResponseComponent: () => import("./ApiResponseComponent"),
+    MsSqlBasisParameters: () => import("../../../definition/components/request/database/BasisParameters"),
+    MsTcpFormatParameters: () => import("../../../definition/components/request/tcp/TcpFormatParameters"),
+    MsDubboBasisParameters: () => import("../../../definition/components/request/dubbo/BasisParameters"),
+    MsApiRequestForm: () => import("../../../definition/components/request/http/ApiHttpRequestForm"),
+    MsRequestResultTail: () => import("../../../definition/components/response/RequestResultTail"),
+    MsRun: () => import("../../../definition/components/Run"),
     "esbDefinition": esbDefinition.default,
     "esbDefinitionResponse": esbDefinitionResponse.default
   },
@@ -254,7 +248,6 @@ export default {
       if (this.request.id && this.request.referenced === 'REF') {
         this.request.disabled = true;
       }
-      this.getWorkspaceId(this.request.projectId);
     } else {
       this.isShowNum = false;
     }
@@ -634,7 +627,7 @@ export default {
           }
         }
       }
-      if(!this.request.enable){
+      if (!this.request.enable) {
         this.$warning(this.$t('api_test.automation.debug_message'));
         return false;
       }
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
index 453c09396c..f8a57839ca 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
@@ -68,8 +68,7 @@ import MsDubboBasisParameters from "../../../definition/components/request/dubbo
 import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
 import ApiBaseComponent from "../common/ApiBaseComponent";
 import {getCurrentProjectID, getCurrentWorkspaceId, getUUID, strMapToObj} from "@/common/js/utils";
-import {ELEMENT_TYPE, STEP, TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
-import {KeyValue} from "@/business/components/api/definition/model/ApiTestModel";
+import {STEP} from "@/business/components/api/automation/scenario/Setting";
 
 export default {
   name: "ApiScenarioComponent",
@@ -149,7 +148,7 @@ export default {
   },
   methods: {
     run() {
-      if(!this.scenario.enable){
+      if (!this.scenario.enable) {
         this.$warning(this.$t('api_test.automation.debug_message'));
         return;
       }