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
   },
@@ -232,7 +226,7 @@ export default {
       environmentMap: this.envMap,
       isShowNum: false,
       response: {},
-      dataWorkspaceId:'',
+      dataWorkspaceId: '',
     }
   },
   created() {
@@ -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;
@@ -702,7 +695,7 @@ export default {
             dataSelectRange: 'edit:' + resource.id,
             projectId: resource.projectId,
             type: resource.protocol,
-            workspaceId:this.dataWorkspaceId,
+            workspaceId: this.dataWorkspaceId,
           }
         });
         window.open(definitionData.href, '_blank');

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

@@ -1,7 +1,7 @@
 export default {
   commons: {
     project_permission: '请先添加该项目权限',
-    no_permission:'暂无权限',
+    no_permission: '暂无权限',
     failure_continues: "失败继续",
     full_screen_editing: "全屏编辑",
     trash: "回收站",
@@ -243,8 +243,8 @@ export default {
     follow_success: "关注成功",
     cancel_follow_success: "取消关注成功",
     type: "类型",
-    type_of_num:"请输入整数类型",
+    type_of_num: "请输入整数类型",
-    validity_period:'有效期',
+    validity_period: '有效期',
     please_select_a_deadline: "请选择截止时间",
     relationship: {
       name: '依赖关系',
@@ -911,7 +911,7 @@ export default {
     api_test_report: '接口测试报告',
     load_test_report: '性能测试报告',
     test_plan_report: '测试计划报告',
-    report_sharing_link:'报告分享链接',
+    report_sharing_link: '报告分享链接',
     recent: '我最近的报告',
     search_by_name: '根据名称搜索',
     batch_add_monitor_tips: '格式：名称,IP,Port,描述<br/>如：项目1,192.168.1.52,9100,测试',
@@ -1158,14 +1158,14 @@ export default {
       rule: {
         input_code: "请输入 HTTP Code"
       },
-      range_type:{
+      range_type: {
         value_eq: "值-等于[value=]",
         value_not_eq: "值-不等于[value!=]",
-        value_contain:"值-包含[include=]",
+        value_contain: "值-包含[include=]",
         length_eq: "长度-等于[length=]",
         length_not_eq: "长度-不等于[length!=]",
-        length_large_than:"长度-大于[length>]",
+        length_large_than: "长度-大于[length>]",
-        length_shot_than:"长度-小于[length<]",
+        length_shot_than: "长度-小于[length<]",
         regular_match: "正则匹配",
       }
     },
@@ -2229,6 +2229,7 @@ export default {
       add_module: "添加模块",
       name: "模块名称",
       delete_confirm: "确认删除模块: ",
+      delete_batch_confirm: "确认批量删除勾选的场景步骤？",
       delete_all_resource: "以及模块下所有子模块和测试用例",
       module: "模块",
       title: "标题",
@@ -3055,8 +3056,8 @@ export default {
       delete: "删除",
       read: "查看脚本",
     },
-    personal_information:{
+    personal_information: {
-      name:'设置',
+      name: '设置',
       personal_setting: '个人设置',
       api_keys: 'API Keys',
       edit_password: "修改密码",
@@ -3076,7 +3077,7 @@ export default {
   error_report_library: {
     name: "误报库",
     assertion: "误报断言",
-    tips:"注：在\"项目设置-设置环境-全局断言\"中启用误报将进行以下规则匹配",
+    tips: "注：在\"项目设置-设置环境-全局断言\"中启用误报将进行以下规则匹配",
     use_error_report: "启用误报",
     use_desc: "失败断言与误报规则冲突时统一处理为误报",
     option: {

frontend/src/i18n/zh-TW.js

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