refactor(接口测试): 接口case优化

--story=1004973 --user=王孝刚 接口case优化
https://www.tapd.cn/55049933/s/1087741

frontend/src/business/components/api/definition/components/case/ApiCaseHeader.vue

@@ -3,26 +3,37 @@
     <el-card>
       <el-row>
         <el-col :span="1">
-          <el-tag size="mini" :style="{'background-color': getColor(true, api.method), border: getColor(true, api.method)}" class="api-el-tag">
+          <el-tag size="mini"
+                  :style="{'background-color': getColor(true, api.method), border: getColor(true, api.method)}"
+                  class="api-el-tag">
             {{ api.method }}
           </el-tag>
         </el-col>
         <el-col :span="9">
           <div class="variable-combine"> {{ api.name }}</div>
         </el-col>
-        <el-col :span="9">
+        <el-col :span="8">
           <div class="variable-combine" style="margin-left: 10px">{{ api.path === null ? " " : api.path }}</div>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="4">
           <ms-environment-select
             :project-id="projectId"
             :is-read-only="isReadOnly"
             :useEnvironment='useEnvironment'
             @setEnvironment="setEnvironment" ref="environmentSelect"/>
         </el-col>
+        <el-col :span="2">
+          <!-- 保存操作 -->
+          <el-button type="primary" size="small" @click="saveTestCase()"
+                     v-prevent-re-click
+                     v-permission="['PROJECT_API_DEFINITION:READ+EDIT_CASE']">
+            {{ $t('commons.save') }}
+          </el-button>
+        </el-col>
       </el-row>
     </el-card>
   </el-header>
+
 </template>
 
 <script>
@@ -31,10 +42,11 @@ import ApiEnvironmentConfig from "../../../test/components/ApiEnvironmentConfig"
 import MsTag from "../../../../common/components/MsTag";
 import MsEnvironmentSelect from "./MsEnvironmentSelect";
 import {API_METHOD_COLOUR} from "../../model/JsonData";
+import ApiCaseItem from "@/business/components/api/definition/components/case/ApiCaseItem";
 
 export default {
   name: "ApiCaseHeader",
-  components: {MsEnvironmentSelect, MsTag, ApiEnvironmentConfig},
+  components: {MsEnvironmentSelect, MsTag, ApiEnvironmentConfig, ApiCaseItem},
   data() {
     return {
       methodColorMap: new Map(API_METHOD_COLOUR),
@@ -52,11 +64,28 @@ export default {
       default() {
         return {}
       },
+    },
+    apiCase: {
+      type: Object,
+      default() {
+        return {}
+      },
     }
   },
-  created() {
+  mounted() {
+    window.addEventListener('keydown', this.keyDown)
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.keyDown) // 在页面销毁的时候记得解除
   },
   methods: {
+    keyDown(e) {
+      if (!(e.keyCode === 83 && (e.ctrlKey || e.metaKey))) {
+        return;
+      }
+      e.preventDefault();
+      this.saveTestCase();
+    },
     refreshEnvironment() {
       this.$refs.environmentSelect.refreshEnvironment();
     },
@@ -77,6 +106,9 @@ export default {
         return this.methodColorMap.get(method);
       }
     },
+    saveTestCase() {
+      this.$emit("saveCase")
+    }
   }
 }
 </script>

frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue

@@ -126,18 +126,13 @@
         </div>
 
         <ms-jmx-step v-if="apiCase.request.hashTree && apiCase.request.hashTree.length > 0" :request="apiCase.request" :api-id="api.id" :response="apiCase.responseData"/>
-        <!-- 保存操作 -->
-        <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(apiCase)"
-                   v-if="type!=='detail'"
-                   v-prevent-re-click
-                   v-permission="['PROJECT_API_DEFINITION:READ+EDIT_CASE']">
-          {{ $t('commons.save') }}
-        </el-button>
+
       </div>
     </el-collapse-transition>
     <ms-change-history ref="changeHistory"/>
   </el-card>
 
+
 </template>
 
 <script>
@@ -165,6 +160,7 @@ import {API_METHOD_COLOUR} from "../../model/JsonData";
 import MsChangeHistory from "../../../../history/ChangeHistory";
 import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 import {hasPermission} from '@/common/js/utils';
+import ApiCaseHeader from "./ApiCaseHeader";
 
 export default {
   name: "ApiCaseItem",
@@ -196,7 +192,8 @@ export default {
     ShowMoreBtn,
     MsChangeHistory,
     "esbDefinition": esbDefinition.default,
-    "esbDefinitionResponse": esbDefinitionResponse.default
+    "esbDefinitionResponse": esbDefinitionResponse.default ,
+    ApiCaseHeader
   },
   data() {
     return {

frontend/src/business/components/api/definition/components/case/ApiCaseList.vue

@@ -6,6 +6,7 @@
           :api="api"
           @setEnvironment="setEnvironment"
           @addCase="addCase"
+          @saveCase="saveCase(apiCaseList[0])"
           :condition="condition"
           :priorities="priorities"
           :project-id="projectId"
@@ -16,9 +17,8 @@
 
       <el-container v-if="!result.loading">
         <el-main>
-          <div v-for="(item,index) in apiCaseList" :key="item.id ? item.id : item.uuid">
             <api-case-item
-              :loading="singleLoading && singleRunId === item.id || batchLoadingIds.indexOf(item.id) > -1"
+              :loading="singleLoading && singleRunId === apiCaseList[0].id || batchLoadingIds.indexOf(apiCaseList[0].id) > -1"
               @refresh="refresh"
               @singleRun="singleRun"
               @stop="stop"
@@ -34,8 +34,7 @@
               :loaded="loaded"
               :runResult="runResult"
               :maintainerOptions="maintainerOptions"
-              :api-case="item" :index="index" ref="apiCaseItem"/>
-          </div>
+              :api-case="apiCaseList[0]" ref="apiCaseItem"/>
         </el-main>
       </el-container>
     </ms-drawer>
@@ -178,6 +177,9 @@ export default {
       }
       this.visible = true;
     },
+    saveCase(item , hideAlert) {
+      this.$refs.apiCaseItem.saveTestCase(item ,hideAlert);
+    },
     saveApiAndCase(api) {
       if (api && api.url) {
         api.url = undefined;