pm/pm_ui/src/layout/components/Navbar.vue

<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 class="right-menu">
      <template v-if="appStore.device !== 'mobile'">
        <!-- 使用 el-badge 包裹图标 -->
        <el-tooltip :content="noticeContent" effect="dark" placement="bottom">
          <div class="right-menu-item" style="height: 70%">
            <el-badge :value="noticeCount" :max="99" :offset="[0, 10]" :hidden="noticeCount == 0 ? true : false"
                      class="badge-container">
              <el-icon @click="showDetail" style="cursor: pointer;">
                <BellFilled/>
              </el-icon>
            </el-badge>
          </div>
        </el-tooltip>
        <!-- 弹框组件 -->
        <el-dialog v-model="dialogVisible2" title="详情" width="30%" :before-close="closeDetailDialog">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="dialog-item">
                <span class="label">标题:</span>
                <el-input v-model="noticeTitle" readonly placeholder="请输入公告标题" style="width: 90%;"></el-input>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="dialog-item">
                <span class="label">类型:</span>
                <el-select v-model="noticeType" disabled placeholder="请选择公告类型" style="width: 90%;">
                  <el-option
                      v-for="dict in sys_notice_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="dialog-item">
                <span class="label">内容:</span>
                <editor v-model="noticeContentV" readonly disabled :min-height="192" style="width: 100%;"></editor>
              </div>
            </el-col>
          </el-row>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="readInfo2">已 读</el-button>
            </div>
          </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible" title="通知" width="50%" :before-close="closeListDialog">
          <el-table v-loading="loading" :data="noticeList" :default-sort="defaultSort" @sort-change="handleSortChange">
            <el-table-column type="selection" width="55" align="center"/>
            <!--            <el-table-column label="序号" align="center" prop="notice_id" width="100" />-->
            <el-table-column
                label="公告标题"
                align="center"
                prop="notice_title"
                :show-overflow-tooltip="true"
            />
            <el-table-column label="公告类型" align="center" prop="notice_type" width="100">
              <template #default="scope">
                <dict-tag :options="sys_notice_type" :value="scope.row.notice_type"/>
              </template>
            </el-table-column>
            <!--            <el-table-column label="状态" align="center" prop="status" width="100">
                          <template #default="scope">
                            <dict-tag :options="sys_notice_status" :value="scope.row.status" />
                          </template>
                        </el-table-column>-->
            <el-table-column label="创建者" align="center" prop="create_by" width="100"/>
            <el-table-column label="创建时间" align="center" prop="create_time" width="100" sortable="custom">
              <template #default="scope">
                <span>{{ parseTime(scope.row.create_time, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
              <template #default="scope">
                <el-button link type="primary" icon="View" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:query']">查看</el-button>
                <el-button link type="primary" icon="Check" @click="readInfo(scope.row)" >已读</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <header-search id="header-search" class="right-menu-item"/>
        <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"/>
          </div>
        </el-tooltip>

        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect"/>
        </el-tooltip>
      </template>
      <div class="avatar-container">
        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="userStore.avatar" class="user-avatar"/>
            <el-icon>
              <caret-bottom/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/user/profile">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>
              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
                <span>布局设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ElMessageBox} from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import pmGit from '@/components/pm/Git'
import pmDoc from '@/components/pm/Doc'
import {listNoticeRead} from "@/api/system/menu";
import {getNotice, show} from "@/api/system/notice";
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import { h } from 'vue';

const {proxy} = getCurrentInstance();
const {sys_notice_status, sys_notice_type} = proxy.useDict("sys_notice_status", "sys_notice_type");

import {connectToWebSocket} from "@/layout/components/websocket";
import {ElNotification} from 'element-plus'

const announcements = ref([])

connectToWebSocket((newAnnounce) => {
  announcements.value.unshift(newAnnounce)
  if (newAnnounce) {
    // 显示右侧提示信息
    // ElNotification({
    //   title: '新公告',
    //   message: '您有新的公告，请注意查收',
    //   type: 'warning',
    //   duration: 5000,
    //   position: 'top-right'
    // });
    debugger
    if (newAnnounce !== "del" && newAnnounce !== "update"){ // 如果删除公告则不提示信息
      txt2("新公告", "您有新的公告，请注意查收",'warning',3000);
    }
    getlistNotice()
  }
})

function txt2(title,msg,type,time) {
  ElNotification({
    title: title,
    message: h('div', { style: 'display: flex; align-items: center;' }, [
      msg,
      h('a', {
        style: 'margin-left: 5px; color: #409eff; text-decoration: underline;',
        onClick: () => showDetail()
      }, '查看')
    ]),
    type: type,
    duration: time,
    position: 'top-right'
  });
}

const getNoticeTypeLabel = (type) => {
  const dict = sys_notice_type.value.find(item => item.value === type)
  return dict ? dict.label : type
}

const markAsRead = (noticeId) => {
  show({noticeId}).then(response => {
    getlistNotice()
  })
}

function showDetail() {
  //getlistNotice()
  dialogVisible.value = true
}


const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

const noticeList = ref([]);
const loading = ref(true);
// 定义响应式变量
const noticeContentV = ref('暂无消息'); // 通知内容
const noticeContent = ref(''); // 通知内容
const noticeCount = ref(0); // 通知数量
const intervalId = ref(null); // 定时器 ID
const notice_id = ref(null); // 通知 ID
const dialogVisible = ref(false); // 控制弹框显示/隐藏
const dialogVisible2 = ref(false); // 控制弹框显示/隐藏
const noticeTitle = ref(''); // 通知标题
const noticeType = ref(''); // 通知类型
const uniqueKey = ref(0); // 新增的唯一键属性
const defaultSort = ref({prop: 'create_time', order: 'descending'}) // 默认排序

function toggleSideBar() {
  appStore.toggleSideBar()
}

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(() => {
  });
}

// function close() {
//   dialogVisible.value = false;
//   show({ noticeId: notice_id.value }).then(response => {
//     getlistNotice();
//   })
// }
function readInfo(row) {
  // dialogVisible.value = false;     // 关闭公告列表弹框
  // dialogVisible2.value = false;    // 同时关闭公告详情弹框
  show({noticeId: row.notice_id}).then(response => {
    getlistNotice();
  });
  txt("已读公告信息", "您已成功读取公告信息",'success',3000);
}
function readInfo2() {
  //dialogVisible.value = false;     // 关闭公告列表弹框
  dialogVisible2.value = false;    // 同时关闭公告详情弹框
  show({noticeId: notice_id.value}).then(response => {
    getlistNotice();
  });
  txt("已读公告信息", "您已成功读取公告信息",'success',3000);
}

function closeListDialog() {
  dialogVisible.value = false;
}

function closeDetailDialog() {
  dialogVisible2.value = false;
}
const queryParams = ref({
  pageNum: 1,
  pageSize: 10000,
  orderByColumn: 'create_time',
  isAsc: 'desc'
});
getlistNotice()

function getlistNotice() {
  loading.value = true;
  listNoticeRead(queryParams.value).then((response) => {
    // 更新唯一键以强制重新渲染
    noticeCount.value = response.data.length;

    loading.value = false;
    noticeList.value = response.data;
    noticeContent.value = "您有" + noticeCount.value + "条未读的信息 (点击铃铛查看消息)";
  });
}
function handleSortChange({column, prop, order}) {
  queryParams.value.orderByColumn = prop;
  queryParams.value.isAsc = order === 'ascending' ? 'asc' : 'desc';
  getlistNotice()
}

function handleUpdate(row) {
  const noticeId = row.notice_id || ids.value;
  getNotice(noticeId).then(response => {
    //form.value = response.data;
    dialogVisible2.value = true;
    noticeContentV.value = response.data.noticeContent;
    noticeTitle.value = response.data.noticeTitle;
    noticeType.value = response.data.noticeType;
    notice_id.value = response.data.noticeId;
  });
}


const emits = defineEmits(['setLayout'])

function setLayout() {
  emits('setLayout');
}

function toggleTheme() {
  settingsStore.toggleTheme()
}

function txt(title,msg,type,time) {
  ElNotification({
    title: title,
    message: msg,
    type: type,
    duration: time,
    position: 'top-right'
  });
}
</script>

<style lang='scss' scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: var(--navbar-bg);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: var(--navbar-text);
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }

      &.theme-switch-wrapper {
        display: flex;
        align-items: center;

        svg {
          transition: transform 0.3s;

          &:hover {
            transform: scale(1.15);
          }
        }
      }
    }

    .avatar-container {
      margin-right: 40px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        i {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>