fix(接口测试): 修复编辑场景用例的参数或其他配置时未保存，关闭时未提示当前没保存用例的缺陷

--bug=1008997 --user=王孝刚 【接口自动化】-编辑场景用例的参数或其他配置时未保存，关闭时未提示当前没保存用例
https://www.tapd.cn/55049933/s/1114319

frontend/src/business/components/api/automation/ApiAutomation.vue

@@ -110,6 +110,7 @@ import {PROJECT_ID} from "@/common/js/constants";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const VersionSelect = requireComponent.keys().length > 0 ? requireComponent("./version/VersionSelect.vue") : {};
+const jsondiffpatch = require('jsondiffpatch');
 
 export default {
   name: "ApiAutomation",
@@ -160,6 +161,8 @@ export default {
       customNum: false,
       //影响API表格刷新的操作。 为了防止高频率刷新模块列表用。如果是模块更新而造成的表格刷新，则不回调模块刷新方法
       initApiTableOpretion: 'init',
+      isLeave: false,
+      isSave: false
     };
   },
   created() {
@@ -279,7 +282,7 @@ export default {
           status: "Underway", principal: getCurrentUser().id,
           apiScenarioModuleId: "default-module", id: getUUID(),
           modulePath: "/" + this.$t("commons.module_title"),
-          level: "P0"
+          level: "P0", type: "add"
         };
         if (this.nodeTree && this.nodeTree.length > 0) {
           currentScenario.apiScenarioModuleId = this.nodeTree[0].id;
@@ -321,28 +324,60 @@ export default {
     },
     handleTabClose() {
       let message = "";
-      this.tabs.forEach(t => {
+      if (!this.isSave) {
-        if (t && this.$store.state.scenarioMap.has(t.currentScenario.id) && this.$store.state.scenarioMap.get(t.currentScenario.id) > 1) {
+        this.tabs.forEach(t => {
-          message += t.currentScenario.name + "，";
+          if (t.currentScenario.type !== "add") {
-        }
+            let v1 = t.currentScenario.scenarioDefinitionOrg;
-      });
+            let v2 = {
-      if (message !== "") {
+              apiScenarioModuleId: t.currentScenario.apiScenarioModuleId,
-        this.$alert(this.$t('commons.scenario') + " [ " + message.substr(0, message.length - 1) + " ] " + this.$t('commons.confirm_info'), '', {
+              name: t.currentScenario.name,
-          confirmButtonText: this.$t('commons.confirm'),
+              status: t.currentScenario.status,
-          cancelButtonText: this.$t('commons.cancel'),
+              principal: t.currentScenario.principal,
-          callback: (action) => {
+              level: t.currentScenario.level,
-            if (action === 'confirm') {
+              tags: t.currentScenario.tags,
-              this.$store.state.scenarioMap.clear();
+              description: t.currentScenario.description,
-              this.tabs = [];
+              scenarioDefinition: t.currentScenario.scenarioDefinition
-              this.activeName = "default";
+            };
-              this.refresh();
+            this.deleteResourceIds(v1.scenarioDefinition);
+            this.deleteResourceIds(v2.scenarioDefinition);
+            let delta = jsondiffpatch.diff(JSON.parse(JSON.stringify(v1)), JSON.parse(JSON.stringify(v2)));
+            if (delta) {
+              this.isLeave = true;
+            }
+            if (t && this.isLeave) {
+              message += t.currentScenario.name + "，";
             }
           }
         });
+        if (message !== "") {
+          this.$alert(this.$t('commons.scenario') + " [ " + message.substr(0, message.length - 1) + " ] " + this.$t('commons.confirm_info'), '', {
+            confirmButtonText: this.$t('commons.confirm'),
+            cancelButtonText: this.$t('commons.cancel'),
+            callback: (action) => {
+              if (action === 'confirm') {
+                this.tabs = [];
+                this.activeName = "default";
+                this.refresh();
+                this.isSave = false;
+              } else {
+                this.isLeave = false;
+                this.isSave = false;
+              }
+            }
+          });
+        } else {
+          this.tabs = [];
+          this.activeName = "default";
+          this.refresh();
+          this.isSave = false;
+          this.isLeave = false;
+        }
       } else {
         this.tabs = [];
         this.activeName = "default";
         this.refresh();
+        this.isSave = false;
+        this.isLeave = false;
       }
     },
     handleCommand(e) {
@@ -367,21 +402,62 @@ export default {
         this.activeName = "default";
       }
     },
+    deleteResourceIds(array) {
+      array.forEach(item => {
+        if (item.resourceId) {
+          delete item.resourceId;
+        }
+        if (item.id) {
+          delete item.id;
+        }
+        if (item.hashTree && item.hashTree.length > 0) {
+          this.deleteResourceIds(item.hashTree);
+        }
+      })
+    },
     closeConfirm(targetName) {
       let t = this.tabs.filter(tab => tab.name === targetName);
-      if (t && this.$store.state.scenarioMap.has(t[0].currentScenario.id) && this.$store.state.scenarioMap.get(t[0].currentScenario.id) > 0) {
+      if (!this.isSave && t[0].currentScenario.type !== 'add') {
-        this.$alert(this.$t('commons.scenario') + " [ " + t[0].currentScenario.name + " ] " + this.$t('commons.confirm_info'), '', {
+        let v1 = t[0].currentScenario.scenarioDefinitionOrg;
-          confirmButtonText: this.$t('commons.confirm'),
+        let v2 = {
-          cancelButtonText: this.$t('commons.cancel'),
+          apiScenarioModuleId: t[0].currentScenario.apiScenarioModuleId,
-          callback: (action) => {
+          name: t[0].currentScenario.name,
-            if (action === 'confirm') {
+          status: t[0].currentScenario.status,
-              this.$store.state.scenarioMap.delete(t[0].currentScenario.id);
+          principal: t[0].currentScenario.principal,
-              this.removeTab(targetName);
+          level: t[0].currentScenario.level,
+          tags: t[0].currentScenario.tags,
+          description: t[0].currentScenario.description,
+          scenarioDefinition: t[0].currentScenario.scenarioDefinition
+        };
+        this.deleteResourceIds(v1.scenarioDefinition);
+        this.deleteResourceIds(v2.scenarioDefinition);
+        let delta = jsondiffpatch.diff(JSON.parse(JSON.stringify(v1)), JSON.parse(JSON.stringify(v2)));
+        if (delta) {
+          this.isLeave = true;
+        }
+        if (this.isLeave) {
+          this.$alert(this.$t('commons.scenario') + " [ " + t[0].currentScenario.name + " ] " + this.$t('commons.confirm_info'), '', {
+            confirmButtonText: this.$t('commons.confirm'),
+            cancelButtonText: this.$t('commons.cancel'),
+            callback: (action) => {
+              if (action === 'confirm') {
+                this.isLeave = false;
+                this.removeTab(targetName);
+                this.isSave = false;
+              } else {
+                this.isLeave = false;
+                this.isSave = false;
+              }
             }
-          }
+          });
-        });
+        } else {
+          this.isLeave = false;
+          this.isSave = false;
+          this.removeTab(targetName);
+        }
       } else {
-        this.$store.state.scenarioMap.delete(t[0].currentScenario.id);
+        this.isLeave = false;
+        this.isSave = false;
         this.removeTab(targetName);
       }
     },
@@ -418,6 +494,7 @@ export default {
       if (this.$refs.apiTrashScenarioList) {
         this.$refs.apiTrashScenarioList.search(data);
       }
+      this.isSave = true;
       this.$refs.nodeTree.list();
     },
     refreshTree() {

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -403,7 +403,10 @@ import {
 } from "@/common/js/utils";
 import "@/common/css/material-icons.css";
 import OutsideClick from "@/common/js/outside-click";
-import {savePreciseEnvProjectIds, saveScenario} from "@/business/components/api/automation/api-automation";
+import {
+  savePreciseEnvProjectIds,
+  saveScenario
+} from "@/business/components/api/automation/api-automation";
 import MsComponentConfig from "./component/ComponentConfig";
 import {ENV_TYPE} from "@/common/js/constants";
 
@@ -420,7 +423,7 @@ export default {
     customNum: {
       type: Boolean,
       default: false
-    }
+    },
   },
   components: {
     'MsVersionHistory': versionHistory.default,
@@ -492,6 +495,7 @@ export default {
       selectedNode: undefined,
       expandedNode: [],
       scenarioDefinition: [],
+      scenarioDefinitionOrg: [],
       path: "/api/automation/create",
       debugData: {},
       reportId: "",
@@ -547,24 +551,12 @@ export default {
     }
   },
   watch: {
-    currentScenario: {
+    scenarioDefinition: {
-      handler(val) {
+      handler(v) {
-        if (val && this.$store.state.scenarioMap) {
+        this.currentScenario.scenarioDefinition = v;
-          let change = this.$store.state.scenarioMap.get(this.currentScenario.id);
-          change = change + 1;
-          this.$store.state.scenarioMap.set(this.currentScenario.id, change);
-        }
       },
       deep: true
     },
-    'currentScenario.tags'() {
-      if (this.$store.state.scenarioMap) {
-        let change = this.$store.state.scenarioMap.get(this.currentScenario.id);
-        change = change + 1;
-        this.$store.state.scenarioMap.set(this.currentScenario.id, change);
-      }
-    },
-
   },
   created() {
     if (!this.currentScenario.apiScenarioModuleId) {
@@ -590,15 +582,10 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.addListener();
-      this.$store.state.scenarioMap.set(this.currentScenario.id, 0);
     });
     if (!this.currentScenario.name) {
       this.$refs.refFab.openMenu();
     }
-    if (!(this.$store.state.scenarioMap instanceof Map)) {
-      this.$store.state.scenarioMap = new Map();
-    }
-    this.$store.state.scenarioMap.set(this.currentScenario.id, 0);
   },
   directives: {OutsideClick},
   computed: {
@@ -1428,7 +1415,6 @@ export default {
             }
             saveScenario(this.path, this.currentScenario, this.scenarioDefinition, this, (response) => {
               this.$success(this.$t('commons.save_success'));
-              this.$store.state.scenarioMap.delete(this.currentScenario.id);
               this.path = "/api/automation/update";
               this.$store.state.pluginFiles = [];
               if (response.data) {
@@ -1520,6 +1506,18 @@ export default {
                 }
                 this.dataProcessing(obj.hashTree);
                 this.scenarioDefinition = obj.hashTree;
+                this.scenarioDefinitionOrg = obj.hashTree;
+                let v1 = {
+                  apiScenarioModuleId: this.currentScenario.apiScenarioModuleId,
+                  name: this.currentScenario.name,
+                  status: this.currentScenario.status,
+                  principal: this.currentScenario.principal,
+                  level: this.currentScenario.level,
+                  tags: this.currentScenario.tags,
+                  description: this.currentScenario.description,
+                  scenarioDefinition: this.scenarioDefinitionOrg
+                };
+                this.currentScenario.scenarioDefinitionOrg = v1
                 this.oldScenarioDefinition = obj.hashTree;
               }
             }
@@ -1543,7 +1541,6 @@ export default {
           if (this.scenarioDefinition) {
             this.resetResourceId(this.scenarioDefinition);
           }
-          this.$store.state.scenarioMap.set(this.currentScenario.id, 0);
         })
       }
     },