新增导航栏显示系统通知

ZR.Admin.WebApi/Controllers/System/SysNoticeController.cs

@@ -32,6 +32,22 @@ namespace ZR.Admin.WebApi.Controllers.System
             _SysNoticeService = SysNoticeService;
         }
 
+        /// <summary>
+        /// 查询通知公告表列表
+        /// </summary>
+        /// <returns></returns>
+        [HttpGet("queryNotice")]
+        public IActionResult QueryNotice([FromQuery] SysNoticeQueryDto parm)
+        {
+            //开始拼装查询条件
+            var predicate = Expressionable.Create<SysNotice>();
+
+            //搜索条件查询语法参考Sqlsugar
+            predicate = predicate.And(m => m.Status == "0");
+            var response = _SysNoticeService.GetPages(predicate.ToExpression(), parm);
+            return SUCCESS(response);
+        }
+
         /// <summary>
         /// 查询通知公告表列表
         /// </summary>
@@ -47,6 +63,7 @@ namespace ZR.Admin.WebApi.Controllers.System
             predicate = predicate.AndIF(!string.IsNullOrEmpty(parm.NoticeTitle), m => m.NoticeTitle.Contains(parm.NoticeTitle));
             predicate = predicate.AndIF(!string.IsNullOrEmpty(parm.NoticeType), m => m.NoticeType == parm.NoticeType);
             predicate = predicate.AndIF(!string.IsNullOrEmpty(parm.CreateBy), m => m.Create_by.Contains(parm.CreateBy) ||  m.Update_by.Contains(parm.CreateBy));
+            predicate = predicate.AndIF(!string.IsNullOrEmpty(parm.Status), m => m.Status == parm.Status);
             var response = _SysNoticeService.GetPages(predicate.ToExpression(), parm);
             return SUCCESS(response);
         }

ZR.Model/System/Dto/SysNoticeDto.cs

@@ -28,5 +28,6 @@ namespace ZR.Model.Dto
         public string NoticeTitle { get; set; }
         public string NoticeType { get; set; }
         public string CreateBy { get; set; }
+        public string Status { get; set; }
     }
 }

ZR.Vue/src/api/system/notice.js

@@ -1,5 +1,14 @@
 import request from '@/utils/request'
 
+// 导航栏查询公告列表
+export function queryNotice(query) {
+  return request({
+    url: '/system/notice/queryNotice',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询公告列表
 export function listNotice(query) {
   return request({

ZR.Vue/src/components/Notice/Index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="layout-navbars-breadcrumb-user-news">
+    <div class="head-box">
+      <div class="head-box-title">通知</div>
+      <div class="head-box-btn" v-if="dataList.length > 0" @click="onAllReadClick">全部已读</div>
+    </div>
+    <div class="content-box">
+      <template v-if="dataList.length > 0">
+        <div class="content-box-item" v-for="(v, k) in dataList" :key="k">
+          <div>{{ v.noticeTitle }}</div>
+          <div class="content-box-msg" v-html="v.noticeContent"></div>
+          <div class="content-box-time">{{ v.updateTime }}</div>
+        </div>
+      </template>
+      <div class="content-box-empty" v-else>
+        <div class="content-box-empty-margin">
+          <i class="el-icon-s-promotion"></i>
+          <div class="mt15">全部已读</div>
+        </div>
+      </div>
+    </div>
+    <div class="foot-box" @click="onGoToGiteeClick" v-if="dataList.length > 0">前往通知中心</div>
+  </div>
+</template>
+
+<script>
+import { queryNotice } from "@/api/system/notice";
+export default {
+  name: "noticeIndex",
+  data() {
+    return {
+      dataList: [],
+    };
+  },
+  mounted() {
+    queryNotice().then((res) => {
+			this.dataList = res.data.result;
+    });
+  },
+  methods: {
+    // 全部已读点击
+    onAllReadClick() {
+      this.dataList = [];
+    },
+    // 前往通知中心点击
+    onGoToGiteeClick() {
+      window.open("https://gitee.com/izory/ZrAdminNetCore");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb-user-news {
+  .head-box {
+    display: flex;
+    border-bottom: 1px solid #ebeef5;
+    box-sizing: border-box;
+    color: #333333;
+    justify-content: space-between;
+    height: 35px;
+    align-items: center;
+    .head-box-btn {
+      color: #1890ff;
+      font-size: 13px;
+      cursor: pointer;
+      opacity: 0.8;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  .content-box {
+    font-size: 13px;
+    .content-box-item {
+      padding-top: 12px;
+      &:last-of-type {
+        padding-bottom: 12px;
+      }
+      .content-box-msg {
+        color: #999999;
+        margin-top: 5px;
+        margin-bottom: 5px;
+      }
+      .content-box-time {
+        color: #999999;
+      }
+    }
+    .content-box-empty {
+      height: 260px;
+      display: flex;
+      .content-box-empty-margin {
+        margin: auto;
+        text-align: center;
+        i {
+          font-size: 60px;
+        }
+      }
+    }
+  }
+  .foot-box {
+    height: 35px;
+    color: #1890ff;
+    font-size: 13px;
+    cursor: pointer;
+    opacity: 0.8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid #ebeef5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  ::v-deep(.el-empty__description p) {
+    font-size: 13px;
+  }
+
+  ::v-deep .el-badge__content .is-fixed {
+    top: 12px !important;
+  }
+}
+</style>

ZR.Vue/src/layout/components/Navbar.vue

@@ -4,8 +4,8 @@
     <hamburger id="hamburger-container" class="hamburger-container" :is-active="sidebar.opened" @toggleClick="toggleSideBar" />
 
     <!-- 面包屑导航 -->
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
@@ -21,6 +21,15 @@
           <zr-doc id="zr-doc" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
+			<!-- 通知 -->
+      <div class="right-menu-item">
+        <el-popover placement="bottom" trigger="click" v-model="isShowUserNewsPopover" width="300" popper-class="el-popover-pupop-user-news">
+          <el-badge @click.stop="isShowUserNewsPopover = !isShowUserNewsPopover" slot="reference">
+            <i class="el-icon-bell" title="通知"></i>
+          </el-badge>
+          <Notice v-show="isShowUserNewsPopover" />
+        </el-popover>
+      </div>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
@@ -46,13 +55,14 @@
 <script>
 import { mapGetters } from "vuex";
 import Breadcrumb from "@/components/Breadcrumb";
-import TopNav from '@/components/TopNav'
+import TopNav from "@/components/TopNav";
 import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";
 import SizeSelect from "@/components/SizeSelect";
 import Search from "@/components/HeaderSearch";
 import ZrGit from "@/components/Zr/Git";
-import ZrDoc from '@/components/Zr/Doc'
+import ZrDoc from "@/components/Zr/Doc";
+import Notice from "@/components/Notice/Index.vue";
 
 export default {
   components: {
@@ -63,7 +73,13 @@ export default {
     SizeSelect,
     Search,
     ZrGit,
-    ZrDoc
+    ZrDoc,
+    Notice,
+  },
+  data() {
+    return {
+      isShowUserNewsPopover: false,
+    };
   },
   computed: {
     ...mapGetters(["sidebar", "avatar", "device"]),
@@ -80,9 +96,9 @@ export default {
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav
+        return this.$store.state.settings.topNav;
-      }
+      },
-    }
+    },
   },
   methods: {
     toggleSideBar() {
@@ -135,7 +151,7 @@ export default {
     float: left;
   }
 
- .topmenu-container {
+  .topmenu-container {
     position: absolute;
     left: 50px;
   }

ZR.Vue/src/views/system/notice/index.vue

@@ -37,6 +37,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="序号" align="center" prop="noticeId" width="100" />
       <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
+			<el-table-column label="内容" align="center" prop="noticeContent" :show-overflow-tooltip="true" />
       <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
         <template slot-scope="scope">
           <dict-tag :options="typeOptions" :value="scope.row.noticeType" />