feat: 脑图用例没保存提示

frontend/src/business/components/common/components/IsChangeConfirm.vue

@@ -0,0 +1,46 @@
+<template>
+  <ms-edit-dialog
+    :visible.sync="visible"
+    width="30%"
+    :title="$t('请保存')"
+    :with-footer="false"
+    :close-on-click-modal="false">
+    <template v-slot:footer>
+      <el-button type="primary" @click="save" @keydown.enter.native.prevent>{{$t('保存')}}</el-button>
+      <el-button @click="cancel">{{$t('不保存')}}</el-button>
+    </template>
+  </ms-edit-dialog>
+</template>
+
+<script>
+import MsEditDialog from "@/business/components/common/components/MsEditDialog";
+export default {
+  name: "IsChangeConfirm",
+  components: {MsEditDialog},
+  data() {
+    return {
+      visible: false,
+      data: {}
+    }
+  },
+  methods: {
+    open(item) {
+      this.visible = true;
+      this.data = item;
+    },
+    save() {
+      this.$emit('confirm', true);
+      this.visible = false;
+    },
+    cancel() {
+      this.$emit('confirm', false);
+      this.visible = false;
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/common/components/MsModuleMinder.vue

@@ -1,31 +1,38 @@
 <template>
-  <div class="minder" :class="{'full-screen': isFullScreen}">
-    <ms-full-screen-button :is-full-screen.sync="isFullScreen"/>
-    <minder-editor
-      v-if="isActive"
-      class="minder-container"
-      :import-json="importJson"
-      :progress-enable="false"
-      :tags="tags"
-      :height="height"
-      :tag-edit-check="tagEditCheck"
-      :priority-disable-check="priorityDisableCheck"
-      :distinct-tags="distinctTags"
-      :default-mold="defaultMode"
-      @afterMount="$emit('afterMount')"
-      @moldChange="handleMoldChange"
-      :disabled="disabled"
-      @save="save"
-    />
+  <div>
+    <div class="minder" :class="{'full-screen': isFullScreen}">
+      <ms-full-screen-button :is-full-screen.sync="isFullScreen"/>
+      <minder-editor
+        v-if="isActive"
+        class="minder-container"
+        :import-json="importJson"
+        :progress-enable="false"
+        :tags="tags"
+        :height="height"
+        :tag-edit-check="tagEditCheck"
+        :priority-disable-check="priorityDisableCheck"
+        :distinct-tags="distinctTags"
+        :default-mold="defaultMode"
+        @afterMount="$emit('afterMount')"
+        @moldChange="handleMoldChange"
+        :disabled="disabled"
+        @save="save"
+      />
+      <is-change-confirm
+        @confirm="changeConfirm"
+        ref="isChangeConfirm"/>
+    </div>
   </div>
+
 </template>
 
 <script>
 
 import MsFullScreenButton from "@/business/components/common/components/MsFullScreenButton";
+import IsChangeConfirm from "@/business/components/common/components/IsChangeConfirm";
 export default {
   name: "MsModuleMinder",
-  components: {MsFullScreenButton},
+  components: {IsChangeConfirm, MsFullScreenButton},
   props: {
     minderKey: String,
     treeNodes: {
@@ -80,7 +87,8 @@ export default {
       isActive: true,
       isFullScreen: false,
       height: '',
-      defaultMode: 3
+      defaultMode: 3,
+      tmpNode: {}
     }
   },
   created() {
@@ -161,7 +169,24 @@ export default {
     setJsonImport(data) {
       this.importJson = data;
     },
+    changeConfirm(isSave) {
+      if (isSave) {
+        this.save(window.minder.exportJson());
+      } else {
+        this.$store.commit('setIsTestCaseMinderChanged', false);
+        this._handleNodeSelect(this.tmpNode);
+      }
+    },
     handleNodeSelect(node) {
+      let isTestCaseMinderChanged = this.$store.state.isTestCaseMinderChanged;
+      if (isTestCaseMinderChanged) {
+        this.tmpNode = node;
+        this.$refs.isChangeConfirm.open();
+        return;
+      }
+      this._handleNodeSelect(node);
+    },
+    _handleNodeSelect(node) {
       if (node && node.data) {
         let nodeData = node.data;
         let importJson = this.getImportJsonBySelectNode(nodeData);

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

@@ -39,7 +39,8 @@
         </el-tab-pane>
         <el-tab-pane name="default" :label="$t('api_test.definition.case_title')">
           <ms-tab-button
-            :active-dom.sync="activeDom"
+            :active-dom="activeDom"
+            @update:activeDom="updateActiveDom"
             :left-tip="$t('test_track.case.list')"
             :left-content="$t('test_track.case.list')"
             :right-tip="$t('test_track.case.minder')"
@@ -110,6 +111,9 @@
 
       </el-tabs>
 
+      <is-change-confirm
+        @confirm="changeConfirm"
+        ref="isChangeConfirm"/>
     </ms-main-container>
 
 
@@ -131,10 +135,12 @@ import TestCaseNodeTree from "../common/TestCaseNodeTree";
 
 import MsTabButton from "@/business/components/common/components/MsTabButton";
 import TestCaseMinder from "@/business/components/track/common/minder/TestCaseMinder";
+import IsChangeConfirm from "@/business/components/common/components/IsChangeConfirm";
 
 export default {
   name: "TestCase",
   components: {
+    IsChangeConfirm,
     TestCaseMinder,
     MsTabButton,
     TestCaseNodeTree,
@@ -156,6 +162,7 @@ export default {
       loading: false,
       type: '',
       activeDom: 'left',
+      tmpActiveDom: null,
       custom_num: false
     };
   },
@@ -240,6 +247,25 @@ export default {
           break;
       }
     },
+    updateActiveDom(activeDom) {
+      let isTestCaseMinderChanged = this.$store.state.isTestCaseMinderChanged;
+      if (this.activeDom !== 'left' && activeDom === 'left' && isTestCaseMinderChanged) {
+        this.$refs.isChangeConfirm.open();
+        this.tmpActiveDom = activeDom;
+        return;
+      }
+      this.activeDom = activeDom;
+    },
+    changeConfirm(isSave) {
+      if (isSave) {
+        this.$refs.minder.save(window.minder.exportJson());
+      } else {
+        this.$store.commit('setIsTestCaseMinderChanged', false);
+      }
+      this.$nextTick(() => {
+        this.activeDom = this.tmpActiveDom;
+      });
+    },
     changeRedirectParam(redirectIDParam) {
       this.redirectID = redirectIDParam;
       if (redirectIDParam != null) {

frontend/src/business/components/track/common/minder/TestCaseMinder.vue

@@ -20,7 +20,7 @@ import MsModuleMinder from "@/business/components/common/components/MsModuleMind
 import {
   handleAfterSave,
   handleExpandToLevel, handleTestCaseAdd, handTestCaeEdit,
-  listenBeforeExecCommand,
+  listenBeforeExecCommand, listenDblclick,
   listenNodeSelected,
   loadSelectNodes,
   priorityDisableCheck,
@@ -37,7 +37,7 @@ name: "TestCaseMinder",
       dataMap: new Map(),
       tags: [this.$t('api_test.definition.request.case'), this.$t('test_track.case.prerequisite'), this.$t('commons.remark')],
       result: {loading: false},
-      needRefresh: false
+      needRefresh: false,
     }
   },
   props: {
@@ -62,6 +62,9 @@ name: "TestCaseMinder",
     },
     disabled() {
       return !hasPermission('PROJECT_TRACK_CASE:READ+EDIT');
+    },
+    isChanged() {
+      return this.$store.state.isTestCaseMinderChanged;
     }
   },
   watch: {
@@ -69,9 +72,16 @@ name: "TestCaseMinder",
       if (this.$refs.minder) {
         this.$refs.minder.handleNodeSelect(this.selectNode);
       }
+    },
+    '$route'(to) {
+      if (to.name !== 'testCaseCreate' || to.name !== 'testCase' || to.name !== 'testCaseEdit') {
+        this.$warning('请保存用例');
+        return false;
+      }
     }
   },
   mounted() {
+    this.setIsChange(false);
     if (this.selectNode && this.selectNode.data) {
       if (this.$refs.minder) {
         let importJson = this.$refs.minder.getImportJsonBySelectNode(this.selectNode.data);
@@ -84,11 +94,31 @@ name: "TestCaseMinder",
       listenNodeSelected(() => {
         loadSelectNodes(this.getParam(),  getTestCasesForMinder);
       });
+
+      listenDblclick(() => {
+        let minder = window.minder;
+        let selectNodes = minder.getSelectedNodes();
+        let isNotDisableNode = false;
+        // 如果鼠标双击了非模块的节点，表示已经编辑
+        selectNodes.forEach(node => {
+          if (!node.data.disable) {
+            isNotDisableNode = true;
+          }
+        });
+        if (isNotDisableNode) {
+          this.setIsChange(true);
+        }
+      });
+
       listenBeforeExecCommand((even) => {
         if (even.commandName === 'expandtolevel') {
           let level = Number.parseInt(even.commandArgs);
           handleExpandToLevel(level, even.minder.getRoot(), this.getParam(), getTestCasesForMinder);
         }
+        if (['priority', 'resource', 'removenode', 'appendchildnode', 'appendparentnode', 'appendsiblingnode'].indexOf(even.commandName) > 0) {
+          // 这些情况则脑图有改变
+          this.setIsChange(true);
+        }
       });
     },
     getParam() {
@@ -101,6 +131,9 @@ name: "TestCaseMinder",
         isDisable: false
       }
     },
+    setIsChange(isChanged) {
+      this.$store.commit('setIsTestCaseMinderChanged', isChanged);
+    },
     save(data) {
       let saveCases = [];
       let deleteCases = [];
@@ -113,6 +146,7 @@ name: "TestCaseMinder",
       this.result = this.$post('/test/case/minder/edit', param, () => {
         this.$success(this.$t('commons.save_success'));
         handleAfterSave(window.minder.getRoot(), this.getParam());
+        this.setIsChange(false);
       });
     },
     buildSaveCase(root, saveCases, deleteCases, parent) {

frontend/src/business/components/track/common/minder/minderUtils.js

@@ -10,6 +10,15 @@ export function listenNodeSelected(callback) {
   });
 }
 
+export function listenDblclick(callback) {
+  let minder = window.minder;
+  minder.on('dblclick ', function (even) {
+    if (callback) {
+      callback(even);
+    }
+  });
+}
+
 export function listenNodeChange(callback) {
   let minder = window.minder;
   minder.on('contentchange ', function (even) {
@@ -324,6 +333,7 @@ export function tagEditCheck(resourceName) {
   return true;
 }
 
+// 打了用例标签才能选择优先级
 export function priorityDisableCheck() {
   let minder = window.minder;
   let selectNodes = minder.getSelectedNodes();

frontend/src/store/index.js

@@ -26,6 +26,7 @@ const state = {
   selectStep: {},
   currentApiCase: {},
   pluginFiles: [],
+  isTestCaseMinderChanged: false
 }
 
 const store = new Vuex.Store({

frontend/src/store/mutations.js

@@ -15,6 +15,7 @@ const mutations = {
   setTestReviewSelectNodeIds: (state, value) => state.testReviewSelectNodeIds = value,
   setTestReviewModuleOptions: (state, value) => state.testReviewModuleOptions = value,
   setTestPlanViewSelectNode: (state, value) => state.testPlanViewSelectNode = value,
+  setIsTestCaseMinderChanged: (state, value) => state.isTestCaseMinderChanged = value,
 }
 
 export default mutations;