Procházet zdrojové kódy

feat(frontend): 添加页面关闭提示并优化设置保存逻辑

- 在 action_config.vue 中添加 onBeforeUnmount 钩子,用于移除页面关闭事件监听器
- 在 onMounted 中添加页面关闭事件监听器,用于在打开实时预览弹出框时阻止页面关闭- 在 Setting/index.vue 中修改保存按钮点击事件,使用新的 onSava 方法
- 优化保存逻辑,成功保存后显示成功提示信息
panqiuyao před 5 měsíci
rodič
revize
7ae01ef212

+ 17 - 1
frontend/src/views/Setting/components/action_config.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits , watch,onMounted, reactive } from 'vue'
+import { ref, defineProps, defineEmits , watch,onMounted, reactive,onBeforeUnmount } from 'vue'
 import EditDialog from "./EditDialog.vue";
 import { ElMessage, ElMessageBox } from 'element-plus';import client from "@/stores/modules/client";
 import icpList from '@/utils/ipc';
@@ -81,11 +81,27 @@ const tabs = ref([]); // 所有标签页
 const editId = ref(0); // 当前编辑行的索引
 const selectID = ref(0) //当前默认的ID
 
+
+onBeforeUnmount(()=>{
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+})
+
 onMounted(()=>{
+  window.addEventListener('beforeunload', handleBeforeUnload);
   topsTab.value = 'left';
   getTopList()
 })
 
+const handleBeforeUnload = (e)=>{
+  if(dialogVisible.value){
+    e.preventDefault();
+    const message = '您已打开实时预览弹出框,请先取消或者保存后,关闭编辑弹出框,后再关闭此窗口';
+    e.returnValue = message; // 标准方式
+    ElMessage.error('您已打开实时预览弹出框,请先取消或者保存后,关闭编辑弹出框,后再关闭此窗口,')
+    return message; // 兼容某些浏览器
+  }
+
+}
 /**
  * 监听topsTab变化,获取对应标签页的设备配置列表。
  */

+ 10 - 3
frontend/src/views/Setting/index.vue

@@ -116,7 +116,7 @@
           </div>
     </div>
       <div class="text-center mt-8">
-        <button class="bg-gradient-to-r from-primary" @click="saveSetting(activeIndex)" v-if="activeIndex !== 4">
+        <button class="bg-gradient-to-r from-primary" @click="onSava(activeIndex)" v-if="activeIndex !== 4">
           保存
         </button>
       </div>
@@ -387,13 +387,20 @@ const toggleTab = async (item) => {
   let oldType = activeIndex.value;
 
   if([0,1,2].includes(oldType)){
-      const next =  await  saveSetting(oldType)
-    console.log(next);
+   const next =  await  saveSetting(oldType)
     if(next === false) return ;
   }
    activeIndex.value = item;
 };
 
+const onSava = async (index)=>{
+  const next =  await  saveSetting(index)
+
+  if(next !== false){
+    ElMessage.success('保存成功')
+  }
+
+}
 
 /**
  * 保存当前表单配置。