fix: 修复公共组件表格操作全屏bug

src/components/support/table-operator/index.vue

@@ -44,6 +44,7 @@ import SmartTableColumnModal from './smart-table-column-modal.vue';
 import { message } from 'ant-design-vue';
 import { mergeColumn } from './smart-table-column-merge';
 import { smartSentry } from '/@/lib/smart-sentry';
+import { useAppConfigStore } from '/@/store/modules/system/app-config.js';
 const props = defineProps({
   // 表格列数组
   modelValue: {
@@ -96,44 +97,63 @@ async function buildUserTableColumns () {
 const fullScreenFlag = ref(false);
 function fullScreen () {
   if (fullScreenFlag.value) {
-    //取消全屏
-    exitFullscreen(document.querySelector('#smartAdminLayoutContent'));
-    fullScreenFlag.value = false;
-    document.querySelector('#smartAdminPageTag').style.visibility = 'visible';
-  } else {
-    //全屏
-    launchFullScreen(document.querySelector('#smartAdminLayoutContent'));
-    fullScreenFlag.value = true;
-    document.querySelector('#smartAdminPageTag').style.visibility = 'hidden';
-  }
+      // 退出全屏
+      handleExitFullScreen();
+      exitElementFullscreen(document.body);
+    } else {
+      fullScreenFlag.value = true;
+      useAppConfigStore().startFullScreen();
+      launchElementFullScreen(document.body);
+    }
 }
 
 //判断各种浏览器 -全屏
-function launchFullScreen (element) {
-  if (element.requestFullscreen) {
-    element.requestFullscreen();
-  } else if (element.mozRequestFullScreen) {
-    element.mozRequestFullScreen();
-  } else if (element.webkitRequestFullScreen) {
-    element.webkitRequestFullScreen();
-  } else if (element.msRequestFullscreen) {
-    element.msRequestFullscreen();
-  } else {
-    message.error('当前浏览器不支持部分全屏！');
+  function exitElementFullscreen(element) {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    }
+  }
+  // 处理退出全屏
+  function handleExitFullScreen() {
+    fullScreenFlag.value = false;
+    useAppConfigStore().exitFullScreen();
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
+    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); // Chrome, Safari and Opera
+    document.removeEventListener('MSFullscreenChange', handleFullscreenChange); // Internet Explorer and Edge
+  }
+    function handleFullscreenChange() {
+    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
+      console.log('进入全屏模式');
+    } else {
+      console.log('退出全屏模式');
+      handleExitFullScreen();
+    }
   }
-}
 //判断各种浏览器 -退出全屏
-function exitFullscreen (element) {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  } else if (document.msExitFullscreen) {
-    document.msExitFullscreen();
+  function launchElementFullScreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    } else {
+      message.error('当前浏览器不支持部分全屏！');
+    }
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Chrome, Safari and Opera
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange); // Internet Explorer and Edge
   }
-}
 
 // ----------------- 弹窗 修改表格列 -------------------
 

src/store/modules/system/app-config.js

@@ -35,6 +35,7 @@ export const useAppConfigStore = defineStore({
   state: () => ({
     // 读取config下的默认配置
     ...state,
+    fullScreenFlag: false,
   }),
   actions: {
     reset() {
@@ -48,5 +49,11 @@ export const useAppConfigStore = defineStore({
     hideHelpDoc() {
       this.helpDocExpandFlag = false;
     },
+    startFullScreen() {
+      this.fullScreenFlag = true;
+    },
+    exitFullScreen() {
+      this.fullScreenFlag = false;
+    },
   },
 });