更多ruoyi-nbcio功能请看演示系统

   gitee源代码地址

   前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

因为以后流程的通知需要提醒，所以右上角需要增加消息提醒。

1、增加右上角的按钮与信息

<div class="right-menu"><template v-if="device!=='mobile'"><search id="header-search" class="right-menu-item" /><el-tooltip content="消息" effect="dark" placement="bottom"><message id="message" class="right-menu-item hover-effect"  /></el-tooltip><el-tooltip content="源码地址" effect="dark" placement="bottom"><ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /></el-tooltip>

2、增加一个Message的组件

<template><div><svg-icon icon-class="message" @click="toNotice" /></div>
</template><script>
export default {name: 'Message',data() {return {}},methods: {toNotice () {this.$router.push({path: '/system/notice'})//this.msgCount = 0},}
}
</script>

3、增加上面消息跳转的路由

{path: '/system',component: Layout,hidden: true,redirect: 'noredirect',children: [{path: 'notice',component: () => import('@/views/system/notice/index'),name: 'notice',meta: { title: '通知通告', icon: 'message' }}]},

4、效果图如下

点击上面消息出现下面界面，以后还需要增加提示消息数量的红色数字。