新增导航栏显示系统通知
This commit is contained in:
不做码农
parent
356ceb514f
commit
31cee32404
@ -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);
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -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({
|
||||
|
||||
123
ZR.Vue/src/components/Notice/Index.vue
Normal file
123
ZR.Vue/src/components/Notice/Index.vue
Normal file
@ -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>
|
||||
@ -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"/>
|
||||
<top-nav id="topmenu-container" class="topmenu-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" />
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
@ -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" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user