From c05b0d665fe1c88895d061b0e7fcd57b7cef996b Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Thu, 1 Jul 2021 17:25:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=9A=E7=9A=84=E7=8C=AE=E7=A4=BC?=
 =?UTF-8?q?=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/scenario/EditApiScenario.vue   | 60 +++++++++++++++----
 .../functional/FunctionalTestCaseList.vue     |  2 +-
 frontend/src/common/js/utils.js               |  9 +++
 3 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index facbe14a16..d92cdd4c7d 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -105,7 +105,7 @@
         <el-row>
           <el-col :span="21">
             <!-- 调试部分 -->
-            <div class="ms-debug-div" @click="showAll">
+            <div class="ms-debug-div" @click="showAll" :class="{'is-top' : isTop}" ref="debugHeader">
               <el-row style="margin: 5px">
                 <el-col :span="4" class="ms-col-one ms-font">
                   <el-tooltip placement="top" effect="light">
@@ -144,9 +144,11 @@
                                :project-list="projectList" ref="envPopover"/>
                 </el-col>
                 <el-col :span="4">
-                  <el-button :disabled="scenarioDefinition.length < 1" size="mini" type="primary" v-prevent-re-click
-                             @click="runDebug">{{ $t('api_test.request.debug') }}
-                  </el-button>
+                  <el-tooltip content="Ctrl + R">
+                    <el-button :disabled="scenarioDefinition.length < 1" size="mini" type="primary" v-prevent-re-click
+                               @click="runDebug">{{ $t('api_test.request.debug') }}
+                    </el-button>
+                  </el-tooltip>
                   <el-tooltip class="item" effect="dark" :content="$t('commons.refresh')" placement="right-start">
                     <el-button :disabled="scenarioDefinition.length < 1" size="mini" icon="el-icon-refresh"
                                v-prevent-re-click @click="getApiScenario"></el-button>
@@ -158,8 +160,9 @@
                 </el-col>
               </el-row>
             </div>
+
             <!-- 场景步骤内容 -->
-            <div>
+            <div ref="stepInfo">
               <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
                 <i class="el-icon-circle-plus-outline ms-open-btn ms-open-btn-left" v-prevent-re-click @click="openExpansion"/>
               </el-tooltip>
@@ -279,7 +282,14 @@ import {
 import {parseEnvironment} from "../../definition/model/EnvironmentModel";
 import {ELEMENT_TYPE, ELEMENTS} from "./Setting";
 import MsApiCustomize from "./ApiCustomize";
-import {getUUID, objToStrMap, strMapToObj, handleCtrlSEvent, getCurrentProjectID} from "@/common/js/utils";
+import {
+  getUUID,
+  objToStrMap,
+  strMapToObj,
+  handleCtrlSEvent,
+  getCurrentProjectID,
+  handleCtrlREvent
+} from "@/common/js/utils";
 import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
 import MsInputTag from "./MsInputTag";
 import MsRun from "./DebugRun";
@@ -392,7 +402,8 @@ export default {
       stepEnable: true,
       envResult: {
         loading: false
-      }
+      },
+      isTop: false,
     }
   },
   created() {
@@ -403,8 +414,11 @@ export default {
     this.getWsProjects();
     this.getMaintainerOptions();
     this.getApiScenario();
-    this.addListener(); //  添加 ctrl s 监听
-
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.addListener();
+    });
   },
   directives: {OutsideClick},
   computed: {
@@ -561,14 +575,20 @@ export default {
     },
     addListener() {
       document.addEventListener("keydown", this.createCtrlSHandle);
-      // document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi)));
+      document.addEventListener("keydown", this.createCtrlRHandle);
+      document.addEventListener("scroll", this.handleScroll, true);
     },
     removeListener() {
       document.removeEventListener("keydown", this.createCtrlSHandle);
+      document.removeEventListener("keydown", this.createCtrlRHandle);
+      document.removeEventListener("scroll", this.handleScroll);
     },
     createCtrlSHandle(event) {
       handleCtrlSEvent(event, this.editScenario);
     },
+    createCtrlRHandle(event) {
+      handleCtrlREvent(event, this.runDebug);
+    },
     getIdx(index) {
       return index - 0.33
     },
@@ -870,7 +890,7 @@ export default {
     },
     runDebug() {
       /*触发执行操作*/
-      this.$refs['currentScenario'].validate((valid) => {
+      this.$refs.currentScenario.validate((valid) => {
         if (valid) {
           let definition = JSON.parse(JSON.stringify(this.currentScenario));
           definition.hashTree = this.scenarioDefinition;
@@ -1252,6 +1272,17 @@ export default {
     disableAll() {
       this.stepEnable = false;
       this.stepNode();
+    },
+    handleScroll() {
+      let stepInfo = this.$refs.stepInfo;
+      let debugHeader = this.$refs.debugHeader;
+      let originWidth = debugHeader.clientWidth;
+      if (stepInfo.getBoundingClientRect().top <= 178) {
+        this.isTop = true;
+        debugHeader.style.width = originWidth + 'px';
+      } else {
+        this.isTop = false;
+      }
     }
   }
 }
@@ -1421,4 +1452,11 @@ export default {
 .ms-open-btn-left {
   margin-left: 35px;
 }
+
+.is-top {
+  position: fixed;
+  top: 125px;
+  background: white;
+  z-index: 999;
+}
 </style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
index 6ba4123c77..139beab7d3 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
@@ -73,7 +73,7 @@
           <template v-slot:default="scope">
             <ms-tag v-for="(tag, index) in scope.row.showTags" :key="tag + '_' + index" type="success" effect="plain"
                     :content="tag" style="margin-left: 0px; margin-right: 2px"/>
-            <span></span>
+            <span/>
           </template>
         </ms-table-column>
           <ms-table-column
diff --git a/frontend/src/common/js/utils.js b/frontend/src/common/js/utils.js
index bbab13fd0b..2f681bd8a0 100644
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@@ -440,6 +440,15 @@ export function handleCtrlSEvent(event, func) {
   }
 }
 
+export function handleCtrlREvent(event, func) {
+  if (event.keyCode === 82 && event.ctrlKey) {
+    func();
+    event.preventDefault();
+    event.returnValue = false;
+    return false;
+  }
+}
+
 export function strMapToObj(strMap) {
   if (strMap) {
     let obj = Object.create(null);