refactor (接口测试): 场景步骤重构优化

frontend/src/business/components/api/automation/ApiAutomation.vue

@@ -532,6 +532,10 @@ export default {
       } else {
         this.activeName = "default";
       }
+      let index = this.tabs.findIndex(item => item.name === targetName);
+      if (index !== -1) {
+        this.tabs.splice(index, 1);
+      }
     },
     setTabLabel(data) {
       for (const tab of this.tabs) {

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -1785,11 +1785,18 @@ export default {
       this.stepStatus(resourceIds, this.scenarioDefinition);
     },
     handleDeleteBatch() {
+      this.$alert(this.$t('test_track.module.delete_batch_confirm'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
             this.getAllResourceIds().forEach(item => {
               this.recursionDelete(item, this.scenarioDefinition);
             });
             this.sort();
             this.forceRerender();
+          }
+        }
+      });
     },
     recursionDelete(resourceId, nodes) {
       for (let i in nodes) {

frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue

@@ -58,7 +58,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">
             <!--四种协议请求内容-->
@@ -260,18 +261,6 @@ export default {
   margin-right: 10px;
 }
 
-.ms-step-name {
-  display: inline-block;
-  font-size: 13px;
-  margin: 0 5px;
-  overflow-x: hidden;
-  padding-bottom: 0;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: 140px;
-}
-
 .scenario-version {
   display: inline-block;
   font-size: 13px;
@@ -398,9 +387,4 @@ fieldset {
   width: 60px;
 }
 
-.ms-step-selected {
-  cursor: pointer;
-  border-color: #783887;
-}
-
 </style>

frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue

@@ -71,9 +71,8 @@
       </template>
       <!--请求内容-->
       <template v-slot:request>
-        <legend style="width: 100%">
+        <legend>
           <div v-if="!ifFromVariableAdvance">
-
             <customize-req-info :is-customize-req="isCustomizeReq" :request="request" @setDomain="setDomain"/>
             <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
             <ms-api-request-form
@@ -156,18 +155,7 @@
 </template>
 
 <script>
-import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
+import {getUUID, getCurrentProjectID} from "@/common/js/utils";
-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,
+    TemplateComponent: () => import("@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent"),
-    CustomizeReqInfo,
+    CustomizeReqInfo: () => import("@/business/components/api/automation/scenario/common/CustomizeReqInfo"),
-    ApiBaseComponent, ApiResponseComponent,
+    ApiBaseComponent: () => import("../common/ApiBaseComponent"),
-    MsSqlBasisParameters, MsTcpFormatParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun,
+    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
   },
@@ -251,7 +245,6 @@ export default {
 
     if (this.request.num) {
       this.isShowNum = true;
-      this.getWorkspaceId(this.request.projectId);
       this.request.root = true;
       if (this.request.id && this.request.referenced === 'REF') {
         this.request.disabled = true;

frontend/src/business/components/api/definition/components/ApiVariable.vue

@@ -55,15 +55,6 @@
           </el-autocomplete>
         </el-col>
 
-        <el-col class="item">
-          <el-input v-model="item.description" size="small" maxlength="200"
-                    :placeholder="$t('commons.description')" show-word-limit>
-          </el-input>
-
-          <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
-                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit/>
-
-        </el-col>
 
         <el-col v-if="isActive && item.type === 'file'" class="item">
           <ms-api-body-file-upload :parameter="item"/>
@@ -97,7 +88,7 @@
 
     <ms-api-variable-json :append-to-body="appendDialogToBody" ref="variableJson" @callback="callback"/>
 
-    <api-variable-setting :append-to-body="appendDialogToBody"
+    <api-variable-setting :append-to-body="appendDialogToBody" :suggestions="suggestions"
       ref="apiVariableSetting"/>
 
   </div>

frontend/src/business/components/api/definition/components/ApiVariableSetting.vue

@@ -31,6 +31,15 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item :label="$t('commons.description')">
+            <el-input v-model="data.description" size="small" maxlength="200"
+                      :placeholder="$t('commons.description')" show-word-limit style="width: 80%;margin-left: 25px">
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </ms-edit-dialog>
 </template>

frontend/src/business/components/api/definition/components/body/ApiBody.vue

@@ -25,7 +25,7 @@
         {{ $t('api_test.definition.request.body_binary') }}
       </el-radio>
     </el-radio-group>
-    <div style="min-width: 1200px;" v-if="body.type == 'Form Data' || body.type == 'WWW_FORM'">
+    <div v-if="body.type == 'Form Data' || body.type == 'WWW_FORM'">
       <el-row v-if="body.type == 'Form Data' || body.type == 'WWW_FORM'">
         <el-link class="ms-el-link" @click="batchAdd"> {{ $t("commons.batch_add") }}</el-link>
       </el-row>

frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue

@@ -50,7 +50,7 @@
         </el-tab-pane>
 
         <!--请求体-->
-        <el-tab-pane v-if="isBodyShow" :label="$t('api_test.request.body')" name="body" style="overflow: auto">
+        <el-tab-pane v-if="isBodyShow" :label="$t('api_test.request.body')" name="body">
           <ms-api-body @editScenarioAdvance="editScenarioAdvance" :scenario-definition="scenarioDefinition" @headersChange="reloadBody" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
         </el-tab-pane>
 

frontend/src/i18n/en-US.js

@@ -2225,6 +2225,7 @@ export default {
       name: "Name",
       delete_confirm: "Confirm delete module:",
       delete_all_resource: "and all submodules and test cases under the module",
+      delete_batch_confirm: "Steps to confirm batch deletion of selected scenarios？",
       module: "Module",
       title: "Title",
       describe: "Describe",

frontend/src/i18n/zh-CN.js

@@ -2229,6 +2229,7 @@ export default {
       add_module: "添加模块",
       name: "模块名称",
       delete_confirm: "确认删除模块: ",
+      delete_batch_confirm: "确认批量删除勾选的场景步骤？",
       delete_all_resource: "以及模块下所有子模块和测试用例",
       module: "模块",
       title: "标题",

frontend/src/i18n/zh-TW.js

@@ -2229,6 +2229,7 @@ export default {
       name: "模塊名稱",
       delete_confirm: "確認刪除模塊: ",
       delete_all_resource: "以及模塊下所有子模塊和測試用例",
+      delete_batch_confirm: "確認批量刪除勾選的場景步驟？",
       module: "模塊",
       title: "標題",
       status: "狀態",