fix: 会议管理页面合并

spring

8 天以前 3f3d35d6d6445f9cc90a8cf7bb496bee7f465542

 src/layout/components/Navbar.vue

@@ -1,34 +1,52 @@
<template>

  <div class="navbar">

    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />

    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />



    <div>

      <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"

        @toggleClick="toggleSideBar" />

      <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />

    </div>

    <!--    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->

    <div class="center-menu">

      <span class="label">{{ userStore.currentFactoryName }}</span>

      <el-dropdown @command="handleFactoryChange" class="right-menu-item hover-effect" trigger="click">

        <div>

          <el-icon size="20">

            <Switch />

          </el-icon>

        </div>

        <template #dropdown>

          <el-dropdown-menu>

            <el-dropdown-item v-for="item in factoryList" :key="item.deptId" :command="item">

              {{ item.deptName }}

            </el-dropdown-item>

          </el-dropdown-menu>

        </template>

      </el-dropdown>

    </div>

    <div class="right-menu">

      <template v-if="appStore.device !== 'mobile'">

        <header-search id="header-search" class="right-menu-item" />



        <el-tooltip content="源码地址" effect="dark" placement="bottom">

          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />

        </el-tooltip>



        <el-tooltip content="文档地址" effect="dark" placement="bottom">

          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />

        </el-tooltip>



        <screenfull id="screenfull" class="right-menu-item hover-effect" />



        <el-tooltip content="主题模式" effect="dark" placement="bottom">

          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">

            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />

            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />

      <!-- 消息通知 -->

      <el-popover

        v-model:visible="notificationVisible"

        :width="500"

        placement="bottom-end"

        trigger="click"

        :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] }"

        popper-class="notification-popover"

      >

        <template #reference>

          <div class="notification-container right-menu-item hover-effect">

            <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-badge">

              <el-icon :size="20" style="cursor: pointer;">

                <Bell />

              </el-icon>

            </el-badge>

          </div>

        </el-tooltip>



        <el-tooltip content="布局大小" effect="dark" placement="bottom">

          <size-select id="size-select" class="right-menu-item hover-effect" />

        </el-tooltip>

      </template>

        </template>

        <NotificationCenter

          @unreadCountChange="handleUnreadCountChange"

          ref="notificationCenterRef"

        />

      </el-popover>

      <div class="avatar-container">

        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

          <div class="avatar-wrapper">

@@ -56,6 +74,7 @@


<script setup>

import { ElMessageBox } from 'element-plus'

import { Bell } from '@element-plus/icons-vue'

import Breadcrumb from '@/components/Breadcrumb'

import TopNav from '@/components/TopNav'

import Hamburger from '@/components/Hamburger'

@@ -64,28 +83,39 @@
import HeaderSearch from '@/components/HeaderSearch'

import RuoYiGit from '@/components/RuoYi/Git'

import RuoYiDoc from '@/components/RuoYi/Doc'

import NotificationCenter from './NotificationCenter/index.vue'

import useAppStore from '@/store/modules/app'

import useUserStore from '@/store/modules/user'

import useSettingsStore from '@/store/modules/settings'

import { userLoginFacotryList } from "@/api/system/user.js"

import Cookies from "js-cookie";

import { decrypt } from "@/utils/jsencrypt"



const appStore = useAppStore()

const userStore = useUserStore()

const settingsStore = useSettingsStore()



const factoryList = ref([])

const notificationVisible = ref(false)

const notificationCenterRef = ref(null)

const unreadCount = ref(0)

function toggleSideBar() {

  appStore.toggleSideBar()

}

// const redirect = ref(undefined)

// watch(route, (newRoute) => {

//   redirect.value = newRoute.query && newRoute.query.redirect

// }, { immediate: true })



function handleCommand(command) {

  switch (command) {

    case "setLayout":

      setLayout();

      break;

      setLayout()

      break

    case "logout":

      logout();

      break;

      logout()

      break

    default:

      break;

      break

  }

}



@@ -96,19 +126,92 @@
    type: 'warning'

  }).then(() => {

    userStore.logOut().then(() => {

      location.href = '/index';

      location.href = '/index'

    })

  }).catch(() => { });

  }).catch(() => { })

}



const emits = defineEmits(['setLayout'])

function setLayout() {

  emits('setLayout');

  emits('setLayout')

}



function toggleTheme() {

  settingsStore.toggleTheme()

}



function getUserLoginFacotryList() {

  if (userStore.id) {

    userLoginFacotryList({ userId: userStore.id }).then(res => {

      console.log('res', res)

      factoryList.value = res.data

    })

  } else {

    factoryList.value = []

  }

}



function handleFactoryChange(command) {

  console.log('command', command)

  handleLogin(command.deptId);

}



function handleLogin(currentFatoryId) {

  const loginForm = {

    username: Cookies.get("username"),

    password: Cookies.get("password") === undefined ? null : decrypt(Cookies.get("password")),

    currentFatoryId: currentFatoryId

  }

  userStore.loginCheckFactory(loginForm).then(res => {

    forceReload();

  }).catch((err) => {

    console.log(err)

  })

}

function forceReload() {

  const currentUrl = window.location.origin + window.location.pathname;

  const timestamp = new Date().getTime();

  window.location.href = `${currentUrl}?reload=${timestamp}`;

}



getUserLoginFacotryList();



// 消息通知相关

function handleUnreadCountChange(count) {

  unreadCount.value = count

}



// 组件挂载时加载未读数量和定时刷新

let unreadCountTimer = null

onMounted(() => {

  // 延迟加载，确保组件已渲染

  nextTick(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  })

  // 定时刷新未读数量（每30秒）

  unreadCountTimer = setInterval(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  }, 30000)

})



// 监听 popover 显示状态，打开时加载消息列表

watch(notificationVisible, (val) => {

  if (val && notificationCenterRef.value) {

    nextTick(() => {

      notificationCenterRef.value.loadMessages()

    })

  }

})



onUnmounted(() => {

  if (unreadCountTimer) {

    clearInterval(unreadCountTimer)

  }

})

</script>



<style lang='scss' scoped>

@@ -118,6 +221,22 @@
  position: relative;

  background: var(--navbar-bg);

  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);



  .center-menu {

    line-height: 50px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;



    .label {

      font-weight: bold;

      font-size: 18px;

      color: #333333;

      margin-right: 10px;

    }

  }



  .hamburger-container {

    line-height: 46px;

@@ -179,10 +298,23 @@


        svg {

          transition: transform 0.3s;

          


          &:hover {

            transform: scale(1.15);

          }

        }

      }

    }



    .notification-container {

      margin-right: 20px;

      display: flex;

      align-items: center;

      cursor: pointer;



      .notification-badge {

        :deep(.el-badge__content) {

          border: none;

        }

      }

    }

@@ -198,14 +330,14 @@
          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 10px;

          border-radius: 50px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 25px;

          top: 14px;

          font-size: 12px;

        }

      }

@@ -213,3 +345,17 @@
  }

}

</style>



<style lang="scss">

.notification-popover {

  padding: 0 !important;

  
  .el-popover__title {

    display: none;

  }

  
  .el-popover__body {

    padding: 0 !important;

  }

}

</style>