style(接口定义): 接口用例 批量处理样式调整

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

@@ -50,16 +50,8 @@
               @setEnvironment="setEnvironment"/>
           </div>
         </el-col>
-
         <el-col :span="1" v-if="!(isReadOnly || isCaseEdit)">
-          <el-dropdown size="small" split-button type="primary" class="ms-api-header-select" @click="addCase"
-                       @command="handleCommand" v-tester>
-            +{{$t('api_test.definition.request.case')}}
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="run">{{$t('api_test.automation.batch_execute')}}</el-dropdown-item>
-              <el-dropdown-item command="batch_edit_case">{{$t('test_track.case.batch_edit_case')}}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+          <el-button size="small" type="primary" @click="addCase">+{{$t('api_test.definition.request.case')}}</el-button>
         </el-col>
       </el-row>
     </el-card>
@@ -166,14 +158,6 @@
       addCase() {
         this.$emit('addCase');
       },
-      handleCommand(e) {
-        if (e === "run") {
-          this.$emit('batchRun');
-        }
-        if (e === 'batch_edit_case') {
-          this.$emit('batchEditCase');
-        }
-      },
       getColor(enable, method) {
         if (enable) {
           return this.methodColorMap.get(method);

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

@@ -3,17 +3,23 @@
     <div @click="active(apiCase)">
       <el-row>
         <el-col :span="5">
-
-          <el-checkbox class="item-select" v-model="apiCase.selected"/>
-
-          <div class="el-step__icon is-text ms-api-col">
-            <div class="el-step__icon-inner">{{ index + 1 }}</div>
-          </div>
-
-          <label class="ms-api-label">{{ $t('test_track.case.priority') }}</label>
-          <el-select size="small" v-model="apiCase.priority" class="ms-api-select" @change="changePriority(apiCase)">
-            <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
-          </el-select>
+          <el-row>
+            <el-col :span="2" style="margin-top: 5px">
+              <el-checkbox class="item-select" v-model="apiCase.selected"/>
+            </el-col>
+            <el-col :span="2" style="margin-top: 2px">
+              <show-more-btn :is-show="apiCase.selected" :buttons="buttons"/>
+            </el-col>
+            <el-col :span="20">
+              <div class="el-step__icon is-text ms-api-col">
+                <div class="el-step__icon-inner">{{ index + 1 }}</div>
+              </div>
+              <label class="ms-api-label">{{ $t('test_track.case.priority') }}</label>
+              <el-select size="small" v-model="apiCase.priority" class="ms-api-select" @change="changePriority(apiCase)">
+                <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
+              </el-select>
+            </el-col>
+          </el-row>
         </el-col>
 
         <el-col :span="8">
@@ -41,7 +47,7 @@
 
         <el-col :span="4">
           <div class="tag-item">
-            <ms-input-tag  :currentScenario="apiCase" ref="tag" @keyup.enter.native="saveTestCase(apiCase)"/>
+            <ms-input-tag :currentScenario="apiCase" ref="tag" @keyup.enter.native="saveTestCase(apiCase)"/>
           </div>
         </el-col>
 
@@ -114,6 +120,7 @@
   import MsRequestResultTail from "../response/RequestResultTail";
   import MsJmxStep from "../step/JmxStep";
   import ApiResponseComponent from "../../../automation/scenario/component/ApiResponseComponent";
+  import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
 
   export default {
     name: "ApiCaseItem",
@@ -130,7 +137,8 @@
       MsDubboBasisParameters,
       MsApiExtendBtns,
       MsRequestResultTail,
-      MsJmxStep
+      MsJmxStep,
+      ShowMoreBtn
     },
     data() {
       return {
@@ -146,6 +154,10 @@
         condition: {},
         responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
         isShowInput: false,
+        buttons: [
+          {name: this.$t('api_test.automation.batch_execute'), handleClick: this.handleRunBatch},
+          {name: this.$t('test_track.case.batch_edit_case'), handleClick: this.handleEditBatch}
+        ],
       }
     },
     props: {
@@ -172,6 +184,12 @@
     },
     watch: {},
     methods: {
+      handleRunBatch() {
+        this.$emit('batchRun');
+      },
+      handleEditBatch() {
+        this.$emit('batchEditCase');
+      },
       deleteCase(index, row) {
         this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + row.name + " ？", '', {
           confirmButtonText: this.$t('commons.confirm'),
@@ -327,6 +345,12 @@
     margin-right: 10px;
   }
 
+  .ms-opt-btn {
+    position: fixed;
+    left: 60px;
+    z-index: 1;
+  }
+
   .tag-item {
     margin-right: 20px;
   }

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

@@ -7,9 +7,7 @@
           @getApiTest="getApiTest"
           @setEnvironment="setEnvironment"
           @addCase="addCase"
-          @batchRun="batchRun"
           @selectAll="selectAll"
-          @batchEditCase="batchEditCase"
           :condition="condition"
           :priorities="priorities"
           :apiCaseList="apiCaseList"
@@ -28,6 +26,8 @@
                            @singleRun="singleRun"
                            @copyCase="copyCase"
                            @showExecResult="showExecResult"
+                           @batchEditCase="batchEditCase"
+                           @batchRun="batchRun"
                            :environment="environment"
                            :is-case-edit="isCaseEdit"
                            :api="api"