fix: 功能用例保存快捷键对多个tab生效

--bug=1008251 --user=陈建星 【github#7986】功能用例中同时打开多个用例,保存最开始打开的用例时,页面渲染标题重复 #7986 https://www.tapd.cn/55049933/s/1073101

frontend/src/business/components/track/case/TestCase.vue

@@ -132,7 +132,7 @@ import SelectMenu from "../common/SelectMenu";
 import MsContainer from "../../common/components/MsContainer";
 import MsAsideContainer from "../../common/components/MsAsideContainer";
 import MsMainContainer from "../../common/components/MsMainContainer";
-import {getCurrentProjectID, getUUID, hasPermission} from "@/common/js/utils";
+import {getCurrentProjectID, getUUID, hasPermission, setCurTabId} from "@/common/js/utils";
 import TestCaseNodeTree from "../common/TestCaseNodeTree";
 
 import MsTabButton from "@/business/components/common/components/MsTabButton";
@@ -186,14 +186,7 @@ export default {
         this.renderComponent = true;
       });
     },
-    '$route'(to, from) {
-      if (to.path.indexOf('/track/case/all') == -1) {
-        if (this.$refs && this.$refs.autoScenarioConfig) {
-          this.$refs.autoScenarioConfig.forEach(item => {
-            /*item.removeListener();*/
-          });
-        }
-      }
+    '$route'(to) {
       this.init(to);
     },
     activeName(newVal, oldVal) {
@@ -271,7 +264,6 @@ export default {
       if (redirectIDParam != null) {
         if (this.redirectFlag == "none") {
           this.activeName = "default";
-          this.addListener();
           this.redirectFlag = "redirected";
         }
       } else {
@@ -297,12 +289,8 @@ export default {
         label = tab.testCaseInfo.name;
         this.tabs.push({label: label, name: name, testCaseInfo: tab.testCaseInfo});
       }
-      if (this.$refs && this.$refs.testCaseEdit) {
-        this.$refs.testCaseEdit.forEach(item => {
-          /* item.removeListener();*/
-        });  //  删除所有tab的 ctrl + s 监听
-        this.addListener();
-      }
+
+      setCurTabId(this, tab, 'testCaseEdit');
     },
     handleTabClose() {
       let message = "";
@@ -352,7 +340,6 @@ export default {
       this.tabs = this.tabs.filter(tab => tab.name !== targetName);
       if (this.tabs.length > 0) {
         this.activeName = this.tabs[this.tabs.length - 1].name;
-        this.addListener(); //  自动切换当前标签时，也添加监听
       } else {
         this.activeName = "default";
       }
@@ -364,16 +351,6 @@ export default {
       }
       this.$refs.testCaseList.exportTestCase(type);
     },
-    addListener() {
-      let index = this.tabs.findIndex(item => item.name === this.activeName); //  找到当前选中tab的index
-      if (index != -1) {   //  为当前选中的tab添加监听
-        this.$nextTick(() => {
-          /*
-                    this.$refs.testCaseEdit[index].addListener();
-          */
-        });
-      }
-    },
     init(route) {
       let path = route.path;
       if (path.indexOf("/track/case/edit") >= 0 || path.indexOf("/track/case/create") >= 0) {

frontend/src/business/components/track/case/components/TestCaseEdit.vue

@@ -149,7 +149,7 @@ import MsDialogFooter from '../../../common/components/MsDialogFooter'
 import {
   getCurrentProjectID,
   getCurrentUser,
-  getNodePath,
+  getNodePath, getUUID,
   handleCtrlSEvent, hasPermission,
   listenGoBack,
   removeGoBackListener
@@ -280,6 +280,7 @@ export default {
         id: 'id',
         label: 'name',
       },
+      tabId: getUUID()
     };
   },
   props: {
@@ -339,6 +340,9 @@ export default {
       deep: true
     }
   },
+  beforeDestroy() {
+    this.removeListener();
+  },
   mounted() {
     this.getSelectOptions();
     if (this.type === 'edit' || this.type === 'copy') {
@@ -828,7 +832,9 @@ export default {
       document.removeEventListener("keydown", this.createCtrlSHandle);
     },
     createCtrlSHandle(event) {
-      handleCtrlSEvent(event, this.saveCase);
+      let curTabId = this.$store.state.curTabId;
+      if (curTabId === this.tabId)
+        handleCtrlSEvent(event, this.saveCase);
     },
     saveFollow() {
       if (this.showFollow) {

frontend/src/common/js/utils.js

@@ -488,3 +488,14 @@ export function getShareId() {
   }
   return "";
 }
+
+export function setCurTabId(vueObj, tab, ref) {
+  vueObj.$nextTick(() => {
+    if (vueObj.$refs && vueObj.$refs[ref]) {
+      let index = tab.index ? Number.parseInt(tab.index) : vueObj.tabs.length;
+      let cutEditTab = vueObj.$refs[ref][index - 1];
+      let curTabId = cutEditTab ? cutEditTab.tabId : null;
+      vueObj.$store.commit('setCurTabId', curTabId);
+    }
+  })
+}

frontend/src/store/index.js

@@ -20,7 +20,6 @@ const state = {
 
   testReviewSelectNode: {},
   testReviewSelectNodeIds: [],
-  testReviewModuleOptions: [],
   useEnvironment: "",
   testPlanViewSelectNode: {},
   selectStep: {},
@@ -33,7 +32,8 @@ const state = {
   scenarioMap: new Map(),
   apiMap: new Map(),
   apiStatus: new Map(),
-  testCaseMap: new Map()
+  testCaseMap: new Map(),
+  curTabId: null
 }
 
 const store = new Vuex.Store({

frontend/src/store/mutations.js

@@ -13,13 +13,11 @@ const mutations = {
 
   setTestReviewSelectNode: (state, value) => state.testReviewSelectNode = value,
   setTestReviewSelectNodeIds: (state, value) => state.testReviewSelectNodeIds = value,
-  setTestReviewModuleOptions: (state, value) => state.testReviewModuleOptions = value,
   setTestPlanViewSelectNode: (state, value) => state.testPlanViewSelectNode = value,
   setIsTestCaseMinderChanged: (state, value) => state.isTestCaseMinderChanged = value,
   setCurrentProjectIsCustomNum: (state, value) => state.currentProjectIsCustomNum = value,
-  setTestCaseTemplate: (state, value) => {
-    state.testCaseTemplate = value
-  },
+  setTestCaseTemplate: (state, value) => state.testCaseTemplate = value,
+  setCurTabId: (state, value) => state.curTabId = value,
 }
 
 export default mutations;