From d53844ef153996c6e787a47556c1c213754e7eab Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Mon, 16 Aug 2021 17:25:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=BA=E6=99=AF=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E5=A2=9E=E5=8A=A0=E5=81=9C=E6=AD=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scenario/component/ApiComponent.vue       | 97 +++++++++++--------
 .../components/case/ApiCaseItem.vue           | 30 +++++-
 .../components/case/ApiCaseList.vue           | 16 ++-
 .../components/runtest/RunTestDubboPage.vue   | 15 +--
 .../components/runtest/RunTestHTTPPage.vue    | 15 +--
 .../components/runtest/RunTestSQLPage.vue     | 14 +--
 .../components/runtest/RunTestTCPPage.vue     |  6 +-
 7 files changed, 129 insertions(+), 64 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
index a1a98107ae..0e8a34de8f 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/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,44 +80,46 @@
       </template>
       <!-- 执行结果内容 -->
       <template v-slot:result>
-        <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">
-            <el-tabs v-model="request.activeName" closable class="ms-tabs">
-              <el-tab-pane v-for="(item,i) in scenario.requestResults" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
-                <api-response-component :currentProtocol="request.protocol" :apiActive="true" :result="item"/>
+        <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">
+              <el-tabs v-model="request.activeName" closable class="ms-tabs">
+                <el-tab-pane v-for="(item,i) in scenario.requestResults" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
+                  <api-response-component :currentProtocol="request.protocol" :apiActive="true" :result="item"/>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          </div>
+          <div v-else-if="showXpackCompnent&&request.backEsbDataStruct != null">
+            <esb-definition-response
+              :currentProtocol="request.protocol"
+              :request="request"
+              :is-api-component="false"
+              :show-options-button="false"
+              :show-header="true"
+              :result="request.requestResult"
+              v-xpack
+              v-if="showXpackCompnent"
+            />
+          </div>
+          <div v-else>
+            <el-tabs v-model="request.activeName" closable class="ms-tabs" v-if="request.requestResult && request.requestResult.length > 1">
+              <el-tab-pane v-for="(item,i) in request.requestResult" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
+                <api-response-component
+                  :currentProtocol="request.protocol"
+                  :apiActive="true"
+                  :result="item"
+                />
               </el-tab-pane>
             </el-tabs>
+            <api-response-component
+              :currentProtocol="request.protocol"
+              :apiActive="true"
+              :result="request.requestResult[0]"
+              v-else/>
           </div>
         </div>
-        <div v-else-if="showXpackCompnent&&request.backEsbDataStruct != null">
-          <esb-definition-response
-            :currentProtocol="request.protocol"
-            :request="request"
-            :is-api-component="false"
-            :show-options-button="false"
-            :show-header="true"
-            :result="request.requestResult"
-            v-xpack
-            v-if="showXpackCompnent"
-          />
-        </div>
-        <div v-else>
-          <el-tabs v-model="request.activeName" closable class="ms-tabs" v-if="request.requestResult && request.requestResult.length > 1">
-            <el-tab-pane v-for="(item,i) in request.requestResult" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
-              <api-response-component
-                :currentProtocol="request.protocol"
-                :apiActive="true"
-                :result="item"
-              />
-            </el-tab-pane>
-          </el-tabs>
-          <api-response-component
-            :currentProtocol="request.protocol"
-            :apiActive="true"
-            :result="request.requestResult[0]"
-            v-else/>
-        </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>
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
index 6dc32e3122..8f527e8c1e 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
+++ b/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>
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
index 1e50c788d1..63bcccae15 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
+++ b/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'));
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
index f857010390..e1d7e34f80 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
+++ b/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>
-      <!-- TCP 请求参数 -->
-      <ms-basis-parameters :request="api.request" ref="requestForm"/>
+      <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"/>
+      </div>
 
-      <!--返回结果-->
-      <!-- HTTP 请求返回数据 -->
-      <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
-      <ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
     </el-card>
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
index 721b67ad0d..c3771eb45a 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
+++ b/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"/>
+        <!--返回结果-->
+        <!-- HTTP 请求返回数据 -->
+        <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
+        <ms-request-result-tail :response="responseData" ref="runResult"/>
+      </div>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
 
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
index 42cea48ef0..a4f3f3cd7b 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
+++ b/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>
-      <!-- TCP 请求参数 -->
-      <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
+      <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"/>
+        <!--返回结果-->
+        <!-- HTTP 请求返回数据 -->
+        <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
+        <ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult"/>
+      </div>
 
       <ms-jmx-step :request="api.request" :response="responseData"/>
 
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
index 66b9039062..8662fc58c6 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
+++ b/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>