fix: 修复路由后退无法触发导航问题 修复替换背景图操作不触发路由拦截问题

src/views/map-config/mini-map/MapBase/KonvaMap.vue

@@ -18,7 +18,7 @@
           :style="{ position: 'absolute', left: posX + 'px', top: posY + 'px' }">
           <div class="opt-item" :class="{ disabled: disabledSet }" @click="setDefaultCamera">设为默认相机</div>
           <div class="opt-item" @click="previewCamera">预览相机</div>
-          <div class="opt-item" @click="handleDeleteLabel">删除标签</div>
+          <div class="opt-item" @click="handleDeleteCamera">删除标签</div>
         </div>
 
         <CameraPreview v-if="isShow" :last-pos-x="posX!" :last-pos-y="posY!" :video-url="videoUrl"
@@ -382,6 +382,7 @@ watch(
 
 const clearBg = () => {
   bgImg.src = null as any as string;
+  emit('change', true);
   layer.value.getNode().draw();
 };
 
@@ -428,7 +429,7 @@ const saveLayout = () => {
   emit('change', false);
   return JSON.stringify(layout);
 };
-const deleteLabelFn = () => {
+const deleteCameraFn = () => {
   const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
   index >= 0 && cameras.value.splice(index, 1);
   lastClickedGroupId.value = '';
@@ -438,11 +439,11 @@ const deleteLabelFn = () => {
   if (!defaultShow.value) return;
   defaultShow.value = false;
 }
-const handleDeleteLabel = () => {
+const handleDeleteCamera = () => {
   if (lastClickedGroupId.value === defaultCameraId.value) {
-    openMessageBox('警告', '此相机为默认相机，您确认要删除此相机?', deleteLabelFn)
+    openMessageBox('警告', '此相机为默认相机，您确认要删除此相机?', deleteCameraFn)
   } else {
-    deleteLabelFn();
+    deleteCameraFn();
     ElMessage.success('删除成功！')
   }
   emit('change', true);

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

@@ -1,7 +1,7 @@
 <template>
   <div class="min-map">
     <header class="min-map__header">
-      <section class="min-map__btn" @click="handleBack">
+      <section class="min-map__btn" @click="router.back">
         <img :src="rollback">
         <span>返回</span>
       </section>
@@ -63,7 +63,7 @@ import { onMounted, onUnmounted, ref, computed, reactive, nextTick } from 'vue';
 import { updateMinMapViewLayoutApi, getCamerasByWorkShopId, getWorkshopMiniMapLayoutPCApi, getWorkshopMiniMapLayoutMobileApi } from '@/api/scene/scene';
 import KonvaMap from './MapBase/KonvaMap.vue';
 import useCameraStatus from '@/views/cameras/preview/store/useCameraStatus';
-import { useRoute } from 'vue-router';
+import { onBeforeRouteLeave,useRoute } from 'vue-router';
 import urlJoin from 'url-join';
 import { useGlobSetting } from '@/hooks/setting';
 import { getHeaders } from '@/utils/http/axios';
@@ -145,6 +145,7 @@ const handleAvatarSuccess = (e) => {
   nextTick(() => {
     konvaMap.value.addBg(imgUrlBg.value).then(() => {
       isKnovaDestroy.value = false;
+      isChange.value = true;
     });
   })
 };
@@ -245,13 +246,13 @@ const handleSave = () => {
   isMap.value = true;
   if(!hasBg.value && isMap.value){
     ElMessage.error('请先添加车间地图');
-    return;
+    return false;
   }
   const layout = konvaMap.value.saveLayout();
   const cameraList = JSON.parse(layout).cameraList;
   if (cameraList.length === 0 && hasBg.value) {
     ElMessage.error('请至少添加1个相机标签后发布');
-    return;
+    return false;
   }
   updateMinMapViewLayoutApi({
     layout: JSON.stringify({ ...JSON.parse(layout), isUploadBg: hasBg.value }),
@@ -260,29 +261,33 @@ const handleSave = () => {
   }).then(() => {
     ElMessage.success('保存成功');
   });
+  return true;
 };
 
 const changeMap = (val) => {
   isChange.value = val;
 };
-
-const handleBack = async() =>{
-  if (isChange.value) {
-    await ElMessageBox.confirm('是否保存当前修改?', '提示', {
+onBeforeRouteLeave((to,from,next)=>{
+  if(!isChange.value) {
+    next();
+    return;
+  }
+  setTimeout(()=>{
+    ElMessageBox.confirm('是否保存当前修改?', '提示', {
       confirmButtonText: '是',
       cancelButtonText: '否',
-      type: 'warning',
+      customClass: 'elMessageBox__custom--warning',
+    }).then(async () => {
+      const isSaveSuccess = await handleSave();
+      if(isSaveSuccess) {
+        next();
+      }
+      next(false);
+    }).catch(() => {
+      next()
     })
-      .then(() => {
-        handleSave();
-      })
-      .catch(() => {
-        router.back();
-      });
-  } else {
-    router.back();
-  }
-}
+  },200)
+})
 </script>
 
 <style scoped lang="scss">