From c23cd4aa5002ca52711a7f4ebe712a3f7f12bfff Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Mon, 30 Aug 2021 14:53:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E5=9C=BA=E6=99=AF=E5=88=97=E8=A1=A8=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=81=9C=E6=AD=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/report/SysnApiReportDetail.vue |  2 +
 .../automation/scenario/ApiScenarioList.vue   | 51 ++++++++++++++++---
 .../components/track/plan/event-bus.js        |  1 +
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/frontend/src/business/components/api/automation/report/SysnApiReportDetail.vue b/frontend/src/business/components/api/automation/report/SysnApiReportDetail.vue
index 3b66fc59ec..5079b6a5aa 100644
--- a/frontend/src/business/components/api/automation/report/SysnApiReportDetail.vue
+++ b/frontend/src/business/components/api/automation/report/SysnApiReportDetail.vue
@@ -68,6 +68,7 @@ import MsApiReportViewHeader from "./ApiReportViewHeader";
 import {RequestFactory} from "../../definition/model/ApiTestModel";
 import {windowPrint, getCurrentProjectID, getUUID} from "@/common/js/utils";
 import {ELEMENTS} from "../scenario/Setting";
+import {scenario} from "@/business/components/track/plan/event-bus";
 
 export default {
   name: "SysnApiReportDetail",
@@ -294,6 +295,7 @@ export default {
     removeReport() {
       let url = "/api/scenario/report/remove/real/" + this.reportId;
       this.$get(url, response => {
+        scenario.$emit('hide', this.scenarioId);
         this.$success(this.$t('schedule.event_success'));
         this.websocket.close();
         this.messageWebSocket.close();
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index c19b090b59..0b9f86fff2 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -178,6 +178,20 @@
                            min-width="120px"/>
         </span>
 
+        <template v-slot:opt-before="scope">
+          <ms-table-operator-button v-permission=" ['PROJECT_API_SCENARIO:READ+RUN']"
+                                    :tip="$t('api_test.automation.execute')" icon="el-icon-video-play" class="run-button"
+                                    @exec="execute(scope.row)" v-if="!scope.row.isStop && !trashEnable" style="margin-right: 10px;"/>
+          <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
+            <el-button v-if="!trashEnable" @click.once="stop(scope.row)" size="mini" style="color:white;padding: 0;width: 28px;height: 28px;margin-right: 10px;" 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>
+
+        </template>
+
         <template v-slot:opt-behind="scope">
           <ms-scenario-extend-buttons v-if="!trashEnable" style="display: contents" @openScenario="openScenario" :row="scope.row"/>
         </template>
@@ -245,6 +259,7 @@ import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOpe
 import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
 import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
 import MsTable from "@/business/components/common/components/table/MsTable";
+import {scenario} from "@/business/components/track/plan/event-bus";
 
 export default {
   name: "MsApiScenarioList",
@@ -348,6 +363,7 @@ export default {
       userFilters: [],
       operators: [],
       selectRows: new Set(),
+      isStop: false,
       trashOperators: [
         {
           tip: this.$t('commons.reduction'),
@@ -364,13 +380,6 @@ export default {
         },
       ],
       unTrashOperators: [
-        {
-          tip: this.$t('api_test.automation.execute'),
-          icon: "el-icon-video-play",
-          exec: this.execute,
-          class: "run-button",
-          permissions: ['PROJECT_API_SCENARIO:READ+RUN']
-        },
         {
           tip: this.$t('commons.edit'),
           icon: "el-icon-edit",
@@ -471,6 +480,9 @@ export default {
     };
   },
   created() {
+    scenario.$on('hide', id => {
+      this.hideStopBtn(id);
+    })
     this.projectId = getCurrentProjectID();
     if (!this.projectName || this.projectName === "") {
       this.getProjectName();
@@ -506,6 +518,9 @@ export default {
     this.getPrincipalOptions([]);
 
   },
+  beforeDestroy() {
+    scenario.$off("hide");
+  },
   watch: {
     selectNodeIds() {
       this.currentPage = 1;
@@ -845,7 +860,10 @@ export default {
       run.executeType = "Saved";
       this.$post(url, run, response => {
         this.runVisible = true;
+        this.$set(row, "isStop", true);
         this.reportId = run.id;
+      }, () => {
+        this.$set(row, "isStop", false);
       });
     },
     copy(row) {
@@ -1037,6 +1055,19 @@ export default {
         }
       }
       return returnObj;
+    },
+    stop(row) {
+      let url = "/api/automation/stop/" + this.reportId;
+      this.$get(url, () => {
+        this.$set(row, "isStop", false);
+      });
+    },
+    hideStopBtn(scenarioId) {
+      for (let data of this.tableData) {
+        if (scenarioId && scenarioId === data.id) {
+          this.$set(data, "isStop", false);
+        }
+      }
     }
   }
 };
@@ -1058,4 +1089,10 @@ export default {
 /deep/ .el-card__header {
   padding: 10px;
 }
+
+.stop-btn {
+  background-color: #E62424;
+  border-color: #dd3636;
+  color: white;
+}
 </style>
diff --git a/frontend/src/business/components/track/plan/event-bus.js b/frontend/src/business/components/track/plan/event-bus.js
index 789cde61b6..e697981c47 100644
--- a/frontend/src/business/components/track/plan/event-bus.js
+++ b/frontend/src/business/components/track/plan/event-bus.js
@@ -1,2 +1,3 @@
 import Vue from 'vue';
 export const hub = new Vue();
+export const scenario = new Vue();