fix: 场景列表停止按钮

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",
@@ -291,9 +292,21 @@ export default {
         }
       }
     },
+    stopRun() {
+      if (this.websocket) {
+        this.websocket.close();
+      }
+      if (this.messageWebSocket) {
+        this.messageWebSocket.close();
+      }
+      this.clearDebug();
+      this.$success(this.$t('report.test_stop_success'));
+      this.reload();
+    },
     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();

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>
@@ -190,7 +204,8 @@
         <!-- 执行结果 -->
         <el-drawer :visible.sync="runVisible" :destroy-on-close="true" direction="ltr" :withHeader="true" :modal="false"
                    size="90%">
-          <sysn-api-report-detail @refresh="search" :debug="true" :scenario="currentScenario" :scenarioId="scenarioId" :infoDb="infoDb" :report-id="reportId" :currentProjectId="projectId"/>
+          <sysn-api-report-detail @refresh="search" :debug="true" :scenario="currentScenario" ref="sysnApiReport"
+                                  :scenarioId="scenarioId" :infoDb="infoDb" :report-id="reportId" :currentProjectId="projectId"/>
         </el-drawer>
         <!-- 执行结果 -->
         <el-drawer :visible.sync="showReportVisible" :destroy-on-close="true" direction="ltr" :withHeader="true" :modal="false"
@@ -245,6 +260,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 +364,7 @@ export default {
       userFilters: [],
       operators: [],
       selectRows: new Set(),
+      isStop: false,
       trashOperators: [
         {
           tip: this.$t('commons.reduction'),
@@ -364,13 +381,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 +481,9 @@ export default {
     };
   },
   created() {
+    scenario.$on('hide', id => {
+      this.hideStopBtn(id);
+    })
     this.projectId = getCurrentProjectID();
     if (!this.projectName || this.projectName === "") {
       this.getProjectName();
@@ -506,6 +519,9 @@ export default {
     this.getPrincipalOptions([]);
 
   },
+  beforeDestroy() {
+    scenario.$off("hide");
+  },
   watch: {
     selectNodeIds() {
       this.currentPage = 1;
@@ -845,7 +861,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 +1056,20 @@ export default {
         }
       }
       return returnObj;
+    },
+    stop(row) {
+      let url = "/api/automation/stop/" + this.reportId;
+      this.$get(url, () => {
+        this.$refs.sysnApiReport.stopRun();
+        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 +1091,10 @@ export default {
 /deep/ .el-card__header {
   padding: 10px;
 }
+
+.stop-btn {
+  background-color: #E62424;
+  border-color: #dd3636;
+  color: white;
+}
 </style>

frontend/src/business/components/track/plan/event-bus.js

 import Vue from 'vue';
 export const hub = new Vue();
+export const scenario = new Vue();