refactor: 接口定义测试增加停止按钮

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

@@ -1,10 +1,10 @@
 <template>
 
   <div class="card-container">
-    <el-card class="card-content" v-loading="loading">
+    <el-card class="card-content">
       <!-- 操作按钮 -->
       <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
-                   @command="handleCommand" size="small" style="float: right;margin-right: 20px">
+                   @command="handleCommand" size="small" style="float: right;margin-right: 20px" v-if="!runLoading">
         {{ $t('commons.test') }}
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="load_case">{{ $t('api_test.definition.request.load_case') }}
@@ -15,7 +15,7 @@
           <el-dropdown-item command="save_as_api">{{ $t('api_test.definition.request.save_as') }}</el-dropdown-item>
         </el-dropdown-menu>
       </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>
       <!-- TCP 请求参数 -->
@@ -24,7 +24,7 @@
       <!--返回结果-->
       <!-- HTTP 请求返回数据 -->
       <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
-      <ms-request-result-tail :response="responseData" ref="runResult"/>
+      <ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
     </el-card>
@@ -38,7 +38,7 @@
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
     <!-- 执行组件 -->
     <ms-run :debug="false" :environment="api.environment" :reportId="reportId" :run-data="runData"
-            @runRefresh="runRefresh" ref="runTest"/>
+            @runRefresh="runRefresh" @errorRefresh="errorRefresh" ref="runTest"/>
 
   </div>
 </template>
@@ -87,6 +87,7 @@ export default {
       },
       runData: [],
       reportId: "",
+      runLoading: false
     }
   },
   props: {apiData: {}, currentProtocol: String, syncTabs: Array, projectId: String},
@@ -109,6 +110,7 @@ export default {
       this.$emit('refresh');
     },
     runTest() {
+      this.runLoading = true;
       this.loading = true;
       this.api.request.name = this.api.id;
       this.api.protocol = this.currentProtocol;
@@ -120,6 +122,11 @@ export default {
     runRefresh(data) {
       this.responseData = data;
       this.loading = false;
+      this.runLoading = false;
+    },
+    errorRefresh() {
+      this.loading = false;
+      this.runLoading = false;
     },
     saveAs() {
       this.$emit('saveAs', this.api);
@@ -239,13 +246,22 @@ export default {
           }
         });
       }
-      }
+    },
+    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'));
+      });
+    },
   },
   created() {
     // 深度复制
     this.api = JSON.parse(JSON.stringify(this.apiData));
     this.api.protocol = this.currentProtocol;
     this.currentRequest = this.api.request;
+    this.runLoading = false;
     this.getEnvironments();
     this.getResult();
   }

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

@@ -1,7 +1,7 @@
 <template>
 
   <div class="card-container">
-    <el-card class="card-content" v-loading="loading">
+    <el-card class="card-content">
 
       <el-form :model="api" :rules="rules" ref="apiData" :inline="true" label-position="right">
 
@@ -27,7 +27,7 @@
         <!-- 操作按钮 -->
         <el-form-item>
           <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
-                       @command="handleCommand" size="small">
+                       @command="handleCommand" size="small" v-if="!runLoading">
             {{ $t('commons.test') }}
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="load_case">{{ $t('api_test.definition.request.load_case') }}
@@ -39,6 +39,8 @@
             </el-dropdown-menu>
           </el-dropdown>
 
+          <el-button size="small" type="primary" v-else @click.once="stop">{{ $t('report.stop_btn') }}</el-button>
+
         </el-form-item>
 
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
@@ -49,7 +51,7 @@
       <!--返回结果-->
       <!-- HTTP 请求返回数据 -->
       <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
-      <ms-request-result-tail :response="responseData" ref="runResult"/>
+      <ms-request-result-tail v-loading="loading" :response="responseData" ref="runResult"/>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
 
@@ -110,7 +112,8 @@ export default {
       },
       runData: [],
       reportId: "",
-      envMap: new Map
+      envMap: new Map,
+      runLoading: false
     }
   },
   props: {apiData: {}, currentProtocol: String, syncTabs: Array, projectId: String},
@@ -142,6 +145,7 @@ export default {
     runTest() {
       this.$refs['apiData'].validate((valid) => {
         if (valid) {
+          this.runLoading = true;
           this.loading = true;
           this.api.request.name = this.api.id;
           this.api.request.url = undefined;
@@ -156,6 +160,7 @@ export default {
     },
     errorRefresh() {
       this.loading = false;
+      this.runLoading = false;
     },
     runRefresh(data) {
       this.responseData = {type: 'HTTP', responseResult: {responseCode: ""}, subRequestResults: []};
@@ -163,6 +168,7 @@ export default {
         this.responseData = data;
       }
       this.loading = false;
+      this.runLoading = false;
     },
     saveAs() {
       this.$emit('saveAs', this.api);
@@ -252,7 +258,15 @@ export default {
           }
         });
       }
-    }
+    },
+    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'));
+      });
+    },
   },
   created() {
     // 深度复制
@@ -262,6 +276,7 @@ export default {
     if (!this.api.environmentId && this.$store.state.useEnvironment) {
       this.api.environmentId = this.$store.state.useEnvironment;
     }
+    this.runLoading = false;
     //this.getResult();
   }
 }

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

@@ -1,10 +1,10 @@
 <template>
 
   <div class="card-container">
-    <el-card class="card-content" v-loading="loading">
+    <el-card class="card-content">
       <!-- 操作按钮 -->
       <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
-                   @command="handleCommand" size="small" style="float: right;margin-right: 20px">
+                   @command="handleCommand" size="small" style="float: right;margin-right: 20px" v-if="!runLoading">
         {{$t('commons.test')}}
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
@@ -15,7 +15,7 @@
           <el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
         </el-dropdown-menu>
       </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>
       <!-- TCP 请求参数 -->
       <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
@@ -23,7 +23,7 @@
       <!--返回结果-->
       <!-- HTTP 请求返回数据 -->
       <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
-      <ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult"/>
+      <ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult" v-loading="loading"/>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
 
@@ -87,6 +87,7 @@ export default {
         },
         runData: [],
         reportId: "",
+        runLoading: false
       }
     },
     props: {apiData: {}, currentProtocol: String,syncTabs: Array, projectId: String},
@@ -110,8 +111,10 @@ export default {
       },
       errorRefresh(){
         this.loading = false;
+        this.runLoading = false;
       },
       runTest() {
+        this.runLoading = true;
         this.loading = true;
         this.api.request.name = this.api.id;
         this.api.protocol = this.currentProtocol;
@@ -123,6 +126,7 @@ export default {
       runRefresh(data) {
         this.responseData = data;
         this.loading = false;
+        this.runLoading = false;
       },
       saveAs() {
         this.$emit('saveAs', this.api);
@@ -241,13 +245,22 @@ export default {
             }
           });
         }
-      }
+      },
+      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'));
+        });
+      },
     },
     created() {
       // 深度复制
       this.api = JSON.parse(JSON.stringify(this.apiData));
       this.api.protocol = this.currentProtocol;
       this.currentRequest = this.api.request;
+      this.runLoading = false;
       this.getEnvironments();
       this.getResult();
     }

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

@@ -1,13 +1,13 @@
 <template>
 
   <div class="card-container">
-    <el-card class="card-content" v-loading="loading">
+    <el-card class="card-content">
 
       <el-form :model="api" :rules="rules" ref="apiData" :inline="true" label-position="right">
 
         <!-- 操作按钮 -->
         <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
-                     @command="handleCommand" size="small" style="float: right;margin-right: 20px">
+                     @command="handleCommand" size="small" style="float: right;margin-right: 20px" v-if="!runLoading">
           {{$t('commons.test')}}
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
@@ -18,6 +18,7 @@
             <el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
           </el-dropdown-menu>
         </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('test_track.plan_view.base_info')}} </p>
         <!-- 执行环境 -->
@@ -38,7 +39,7 @@
           <!--返回结果-->
           <!-- HTTP 请求返回数据 -->
           <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
-          <ms-request-result-tail :response="responseData" ref="runResult"/>
+          <ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
         </div>
         <div v-else-if="api.method=='ESB'">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
@@ -62,7 +63,7 @@
 
     <!-- 执行组件 -->
     <ms-run :debug="false" :environment="api.environment" :reportId="reportId" :run-data="runData"
-            @runRefresh="runRefresh" ref="runTest"/>
+            @runRefresh="runRefresh" @errorRefresh="errorRefresh" ref="runTest"/>
 
   </div>
 </template>
@@ -115,6 +116,7 @@ export default {
       runData: [],
       reportId: "",
       showXpackCompnent:false,
+      runLoading: false
     }
   },
   props: {apiData: {}, currentProtocol: String,syncTabs: Array, projectId: String},
@@ -139,6 +141,7 @@ export default {
     runTest() {
       this.$refs['apiData'].validate((valid) => {
         if (valid) {
+          this.runLoading = true;
           this.loading = true;
           this.api.request.name = this.api.id;
           this.api.protocol = this.currentProtocol;
@@ -152,6 +155,11 @@ export default {
     runRefresh(data) {
       this.responseData = data;
       this.loading = false;
+      this.runLoading = false;
+    },
+    errorRefresh() {
+      this.loading = false;
+      this.runLoading = false;
     },
     saveAs() {
       this.$emit('saveAs', this.api);
@@ -238,13 +246,22 @@ export default {
           this.responseData = data;
         }
       });
-    }
+    },
+    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'));
+      });
+    },
   },
   created() {
     // 深度复制
     this.api = JSON.parse(JSON.stringify(this.apiData));
     this.api.protocol = this.currentProtocol;
     this.currentRequest = this.api.request;
+    this.runLoading = false;
     this.getResult();
     if (requireComponent != null && JSON.stringify(esbDefinition) !== '{}') {
       this.showXpackCompnent = true;