feat: 场景用例步骤增加停止按钮

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

@@ -1,7 +1,6 @@
 <template>
   <div>
     <api-base-component
-      v-loading="loading"
       @copy="copyRow"
       @remove="remove"
       @active="active"
@@ -32,11 +31,17 @@
         </span>
       </template>
       <template v-slot:button>
-        <el-tooltip :content="$t('api_test.run')" placement="top">
-          <el-button :disabled="!request.enable" @click="run" icon="el-icon-video-play" style="padding: 5px" class="ms-btn" size="mini" circle/>
+        <el-tooltip :content="$t('api_test.run')" placement="top" v-if="!loading">
+          <el-button :disabled="!request.enable" @click="run" icon="el-icon-video-play" style="padding: 5px" class="ms-btn" size="mini" circle />
+        </el-tooltip>
+        <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
+          <el-button :disabled="!request.enable" @click.once="stop" size="mini" style="color:white;padding: 0 0.1px;width: 24px;height: 24px;" class="stop-btn" circle>
+            <div style="transform: scale(0.66)">
+              <span style="margin-left: -4.5px;font-weight: bold;">STOP</span>
+            </div>
+          </el-button>
         </el-tooltip>
       </template>
-
       <!--请求内容-->
       <template v-slot:request>
         <legend style="width: 100%">
@@ -75,6 +80,7 @@
       </template>
       <!-- 执行结果内容 -->
       <template v-slot:result>
+        <div v-loading="loading">
           <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
           <div v-if="request.result">
             <div v-for="(scenario,h) in request.result.scenarios" :key="h">
@@ -113,6 +119,7 @@
               :result="request.requestResult[0]"
               v-else/>
           </div>
+        </div>
       </template>
     </api-base-component>
     <ms-run :debug="true" :reportId="reportId" :run-data="runData" :env-map="envMap"
@@ -437,6 +444,14 @@ export default {
       /*触发执行操作*/
       this.reportId = getUUID();
     },
+    stop() {
+      let url = "/api/automation/stop/" + this.reportId;
+      this.$get(url, () => {
+        this.runLoading = false;
+        this.loading = false;
+        this.$success(this.$t('report.test_stop_success'));
+      });
+    },
     errorRefresh() {
       this.loading = false;
     },
@@ -530,4 +545,10 @@ export default {
 .ms-req-success {
   color: #67C23A;
 }
+
+.stop-btn {
+  background-color: #E62424;
+  border-color: #EE6161;
+  color: white;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-card v-loading="result.loading" style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
+  <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
     <div @click="active(apiCase)" v-if="type!=='detail'">
       <el-row>
         <el-col :span="3">
@@ -20,7 +20,7 @@
             </el-col>
           </el-row>
         </el-col>
-        <el-col :span="api.protocol==='HTTP'?6:10">
+        <el-col :span="api.protocol==='HTTP'?6:10" v-loading="loading && !(apiCase.active||type==='detail')">
           <span @click.stop>
             <i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}" @click="active(apiCase)"/>
             <el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
@@ -64,7 +64,14 @@
         <el-col :span="3">
           <span @click.stop>
             <ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
-                           class="run-button" size="mini" :disabled="!apiCase.id" circle/>
+                           class="run-button" size="mini" :disabled="!apiCase.id" circle v-if="!loading"/>
+            <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
+              <el-button :disabled="!apiCase.id" @click.once="stop" size="mini" style="color:white;padding: 0;width: 28px;height: 28px;" class="stop-btn" circle>
+                <div style="transform: scale(0.72)">
+                  <span style="margin-left: -3.5px;font-weight: bold">STOP</span>
+                </div>
+              </el-button>
+            </el-tooltip>
             <ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
                            size="mini" :disabled="!apiCase.id || isCaseEdit" circle/>
             <ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
@@ -96,7 +103,7 @@
 
     <!-- 请求参数-->
     <el-collapse-transition>
-      <div v-if="apiCase.active||type==='detail'">
+      <div v-if="apiCase.active||type==='detail'" v-loading="loading">
         <el-divider></el-divider>
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
         <ms-api-request-form :isShowEnable="true" :showScript="true" :is-read-only="isReadOnly" :headers="apiCase.request.headers " :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
@@ -223,6 +230,12 @@ export default {
     },
     type: String,
     isCaseEdit: Boolean,
+    loading: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
   },
   created() {
     if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
@@ -272,6 +285,9 @@ export default {
       this.saveTestCase(data);
       this.$emit('singleRun', data);
     },
+    stop() {
+      this.$emit('stop');
+    },
     copyCase(data) {
       if (data && data.request) {
         let uuid = getUUID();
@@ -485,4 +501,10 @@ export default {
   white-space: nowrap;
   width: 150px;
 }
+
+.stop-btn {
+  background-color: #E62424;
+  border-color: #dd3636;
+  color: white;
+}
 </style>

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

@@ -22,9 +22,10 @@
       <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 v-loading="singleLoading && singleRunId === item.id || batchLoadingIds.indexOf(item.id) > -1"
+            <api-case-item :loading="singleLoading && singleRunId === item.id || batchLoadingIds.indexOf(item.id) > -1"
                            @refresh="refresh"
                            @singleRun="singleRun"
+                           @stop="stop"
                            @refreshModule="refreshModule"
                            @copyCase="copyCase"
                            @showExecResult="showExecResult"
@@ -250,6 +251,7 @@ export default {
       let obj = {envId: this.environment, show: true};
       this.batchEdit(obj);
       this.runResult = {testId: getUUID()};
+      this.$refs.apiCaseItem.runLoading = false;
       this.$success(this.$t('organization.integration.successful_operation'));
       this.$emit("refresh");
     },
@@ -257,6 +259,7 @@ export default {
       this.batchLoadingIds = [];
       this.singleLoading = false;
       this.singleRunId = "";
+      this.$refs.apiCaseItem.runLoading = false;
       this.$emit("refresh");
     },
     refresh() {
@@ -405,6 +408,17 @@ export default {
       this.$emit("refresh", row.id);
     },
 
+    stop(callback) {
+      let url = "/api/automation/stop/" + this.reportId;
+      this.$get(url, () => {
+        if (callback) {
+          callback();
+        }
+        this.singleLoading = false;
+        this.$success(this.$t('report.test_stop_success'));
+      });
+    },
+
     batchRun() {
       if (this.currentApi.protocol !== "SQL" && this.currentApi.protocol !== "DUBBO" && this.currentApi.protocol !== "dubbo://" && !this.environment) {
         this.$warning(this.$t('api_test.environment.select_environment'));

frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue

@@ -18,13 +18,16 @@
       <el-button size="small" type="primary" v-else @click.once="stop" style="float: right;margin-right: 20px">{{ $t('report.stop_btn') }}</el-button>
 
       <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+      <div v-loading="loading">
         <!-- TCP 请求参数 -->
         <ms-basis-parameters :request="api.request" ref="requestForm"/>
 
         <!--返回结果-->
         <!-- HTTP 请求返回数据 -->
         <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
-      <ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
+        <ms-request-result-tail :response="responseData" ref="runResult"/>
+      </div>
+
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
     </el-card>

frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue

@@ -43,15 +43,18 @@
 
         </el-form-item>
 
+
+
+      </el-form>
+      <div v-loading="loading">
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
         <!-- HTTP 请求参数 -->
         <ms-api-request-form :isShowEnable="true" :headers="api.request.headers" :request="api.request"/>
-
-      </el-form>
         <!--返回结果-->
         <!-- HTTP 请求返回数据 -->
         <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
-      <ms-request-result-tail v-loading="loading" :response="responseData" ref="runResult"/>
+        <ms-request-result-tail :response="responseData" ref="runResult"/>
+      </div>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
 

frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue

@@ -17,13 +17,15 @@
       </el-dropdown>
       <el-button size="small" type="primary" v-else @click.once="stop" style="float: right;margin-right: 20px">{{ $t('report.stop_btn') }}</el-button>
       <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
+      <div v-loading="loading">
         <!-- TCP 请求参数 -->
         <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
 
         <!--返回结果-->
         <!-- HTTP 请求返回数据 -->
         <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
-      <ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult" v-loading="loading"/>
+        <ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult"/>
+      </div>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
 

frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue

@@ -32,16 +32,16 @@
         <!--        <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>-->
         <!--        <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>-->
 
-        <div v-if="api.method=='TCP'">
+        <div v-if="api.method=='TCP'" v-loading="loading">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
 <!--          <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>-->
           <ms-tcp-format-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
           <!--返回结果-->
           <!-- HTTP 请求返回数据 -->
           <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
-          <ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
+          <ms-request-result-tail :response="responseData" ref="runResult"/>
         </div>
-        <div v-else-if="api.method=='ESB'">
+        <div v-else-if="api.method=='ESB'" v-loading="loading">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
           <esb-definition v-xpack v-if="showXpackCompnent" :show-script="true" :request="api.request"  @callback="runTest" ref="requestForm"/>
         </div>