update 消息通知

pm_ui/src/api/system/menu.js

@@ -57,4 +57,19 @@ export function delMenu(menuId) {
     url: '/system/menu/' + menuId,
     method: 'delete'
   })
-}
+}
+// 查询公告信息
+export function listNoticeRead() {
+  return request({
+    url: '/system/menu/listNoticeRead',
+    method: 'get'
+  })
+}
+// 查询统计信息
+export function showAllCountData(query) {
+  return request({
+    url: '/system/menu/showAllCountData',
+    method: 'get',
+    params: query
+  })
+}

pm_ui/src/api/system/notice.js

@@ -41,4 +41,12 @@ export function delNotice(noticeId) {
     url: '/system/notice/' + noticeId,
     method: 'delete'
   })
-}
+}
+// 查看公告
+export function show(data) {
+  return request({
+    url: '/system/menu/show',
+    method: 'post',
+    data: data
+  })
+}

pm_ui/src/layout/components/Navbar.vue

@@ -6,6 +6,50 @@
 
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
+        <!-- 使用 el-badge 包裹图标 -->
+        <el-badge :value="noticeCount" :max="99" :hidden="noticeCount === 0" class="badge-container">
+          <el-tooltip :content="noticeContent" effect="dark" placement="bottom">
+            <div class="right-menu-item" style="height: 70%">
+              <el-icon @click="showDetail"><BellFilled /></el-icon>
+            </div>
+          </el-tooltip>
+        </el-badge>
+
+
+        <!-- 弹框组件 -->
+        <el-dialog v-model="dialogVisible" title="通知" width="30%">
+          <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" readonly placeholder="请选择公告类型" style="width: 90%;">
+                  <el-option
+                      v-for="dict in dict.type.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>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="dialogVisible = false">已 读</el-button>
+          </span>
+        </el-dialog>
+
         <header-search id="header-search" class="right-menu-item" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -56,6 +100,8 @@ 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'
@@ -64,6 +110,17 @@ const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
+// 定义响应式变量
+const noticeContentV = ref('暂无消息'); // 通知内容
+const noticeContent = ref(''); // 通知内容
+const noticeCount = reactive(0); // 通知数量
+const intervalId = ref(null); // 定时器 ID
+const notice_id = ref(null); // 通知 ID
+const dialogVisible = ref(false); // 控制弹框显示/隐藏
+const noticeTitle = ref(''); // 通知标题
+const noticeType = ref(''); // 通知类型
+const uniqueKey = ref(0); // 新增的唯一键属性
+
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -80,7 +137,6 @@ function handleCommand(command) {
       break;
   }
 }
-
 function logout() {
   ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
     confirmButtonText: '确定',
@@ -92,6 +148,29 @@ function logout() {
     })
   }).catch(() => { });
 }
+function showDetail() {
+  console.log("show"+noticeCount)
+  if (noticeCount === 0){
+    listNoticeRead();
+    return;
+  }
+  dialogVisible.value = true;
+  show({ noticeId: notice_id.value }).then(response => {
+    listNoticeRead();
+  })
+}
+listNoticeRead().then((response) => {
+  // 更新唯一键以强制重新渲染
+  console.log(response)
+  noticeCount = response.data.length;
+  if (response.data.length>0){
+    noticeContentV.value = response.data[0].notice_content;
+    noticeTitle.value = response.data[0].notice_title;
+    noticeType.value = response.data[0].notice_type;
+    notice_id.value = response.data[0].notice_id;
+  }
+  noticeContent.value = "您有" + noticeCount + "条未读的信息 (点击铃铛查看消息)";
+});
 
 const emits = defineEmits(['setLayout'])
 function setLayout() {