From 817c65f7e21b675368a384fd7209c7bee573d23c Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期五, 21 六月 2024 12:31:25 +0800
Subject: [PATCH] !126 fix: 进入审批页面会多次加载用户列表和部门等接口 进入点击取消之后也会重新加载接口 Merge pull request !126 from 玲娜贝er/dev

---
 src/layout/index.vue |   82 +++++++++++++++++++++++------------------
 1 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index da55d54..29fb5ff 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+      <!-- <el-scrollbar>
+        <div :class="{ 'fixed-header': fixedHeader }">
+          <navbar ref="navbarRef" @setLayout="setLayout" />
+          <tags-view v-if="needTagsView" />
+        </div>
+        <app-main />
+        <settings ref="settingRef" />
+      </el-scrollbar> -->
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar ref="navbarRef" @setLayout="setLayout" />
+        <navbar ref="navbarRef" @set-layout="setLayout" />
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
@@ -13,18 +21,15 @@
   </div>
 </template>
 
-<script setup>
-import { useWindowSize } from '@vueuse/core'
-import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
-import defaultSettings from '@/settings'
+<script setup lang="ts">
+import SideBar from './components/Sidebar/index.vue';
+import { AppMain, Navbar, Settings, TagsView } from './components';
+import useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+import { initWebSocket } from '@/utils/websocket';
 
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
-const sideTheme = computed(() => settingsStore.sideTheme);
 const sidebar = computed(() => useAppStore().sidebar);
 const device = computed(() => useAppStore().device);
 const needTagsView = computed(() => settingsStore.tagsView);
@@ -35,45 +40,49 @@
   openSidebar: sidebar.value.opened,
   withoutAnimation: sidebar.value.withoutAnimation,
   mobile: device.value === 'mobile'
-}))
+}));
 
-const { proxy } = getCurrentInstance();
-const { width, height } = useWindowSize();
+const { width } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
+  if (device.value === 'mobile') {
+    useAppStore().closeSideBar({ withoutAnimation: false });
   }
   if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
+    useAppStore().toggleDevice('mobile');
+    useAppStore().closeSideBar({ withoutAnimation: true });
   } else {
-    useAppStore().toggleDevice('desktop')
+    useAppStore().toggleDevice('desktop');
   }
-})
+});
 
-const navbarRef = ref(null);
+const navbarRef = ref<InstanceType<typeof Navbar>>();
+const settingRef = ref<InstanceType<typeof Settings>>();
 
 onMounted(() => {
   nextTick(() => {
-    navbarRef.value.initTenantList();
-  })
-})
+    navbarRef.value?.initTenantList();
+  });
+});
 
-function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false })
-}
+onMounted(() => {
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
+});
 
-const settingRef = ref(null);
-function setLayout() {
-  settingRef.value.openSetting();
-}
+const handleClickOutside = () => {
+  useAppStore().closeSideBar({ withoutAnimation: false });
+};
+
+const setLayout = () => {
+  settingRef.value?.openSetting();
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@import '@/assets/styles/mixin.scss';
+@import '@/assets/styles/variables.module.scss';
 
 .app-wrapper {
   @include clearfix;
@@ -104,6 +113,7 @@
   z-index: 9;
   width: calc(100% - #{$base-sidebar-width});
   transition: width 0.28s;
+  background: $fixed-header-bg;
 }
 
 .hideSidebar .fixed-header {
@@ -117,4 +127,4 @@
 .mobile .fixed-header {
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3