车间地图跳转保存提示

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -46,11 +46,7 @@
             <el-button :icon="Refresh" :disabled="!hasBg"> 替换照片 </el-button>
           </el-upload>
 
-          <el-button
-            @click="handleSave"
-            style="margin-left: 40px"
-            type="primary"
-            :disabled="!selectedShopCode"
+          <el-button @click="handleSave" style="margin-left: 40px" type="primary" :disabled="isSave"
             >保存为布局
           </el-button>
         </div>
@@ -136,7 +132,7 @@
 <script setup lang="ts">
   import useMiniMap from './use-mini-map';
   import { storeToRefs } from 'pinia';
-  import { ElMessage, ElInput } from 'element-plus';
+  import { ElMessage, ElInput, ElMessageBox } from 'element-plus';
   import { onMounted, onUnmounted, ref } from 'vue';
   import { updateMinMapViewLayoutApi } from '@/api/scene/scene';
   import { computed } from 'vue';
@@ -144,6 +140,7 @@
   import KonvaMap from './MapBase/KonvaMap.vue';
   import { useUserStore } from '@/store/modules/user';
   import useCameraStatus from '@/views/cameras/preview/store/useCameraStatus';
+  import { onBeforeRouteLeave } from 'vue-router';
 
   const cameraStatus = useCameraStatus();
   const { openInterval, closeInterval } = cameraStatus;
@@ -168,6 +165,9 @@
   // 是否已有背景图
   const hasBg = ref(false);
 
+  //是否能够保存
+  const isSave = computed(() => !(selectedShopCode.value && hasBg.value));
+
   //单个相机时是否上传图片
   const isUploadBg = ref<boolean>(true);
   const isMap = ref(false);
@@ -307,6 +307,24 @@
       });
     }
   };
+
+  onBeforeRouteLeave(async () => {
+    if (!isSave.value) {
+      await ElMessageBox.confirm('是否保存当前修改?', '提示', {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'warning',
+      })
+        .then(() => {
+          handleSave();
+        })
+        .catch(() => {
+          return true;
+        });
+    } else {
+      return true;
+    }
+  });
 </script>
 
 <style scoped lang="scss">