From 94fe108996bec7944bd24fda997c553737509bad Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期一, 15 七月 2024 17:43:06 +0800 Subject: [PATCH] 通知 --- src/layout/components/Navbar.vue | 101 +++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 82 insertions(+), 19 deletions(-) diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 5fd5250..6ce49db 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -5,28 +5,50 @@ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> <div class="right-menu"> - <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> - <div class="avatar-wrapper"> - <span>{{userName}}</span> - <i class="el-icon-caret-bottom" /> - </div> - <el-dropdown-menu slot="dropdown"> - <router-link to="/profile/index"> - <el-dropdown-item>涓汉淇℃伅</el-dropdown-item> - </router-link> - <router-link to="/"> - <el-dropdown-item>涓婚〉</el-dropdown-item> - </router-link> - <el-dropdown-item @click.native="logout" divided>閫�鍑�</el-dropdown-item> - </el-dropdown-menu> - </el-dropdown> + <div> + <el-badge :value="notify.total" class="item"> + <el-button @click="notifyShow = true" class="share-button" icon="el-icon-bell" type="primary" circle></el-button> + </el-badge> + </div> + <div> + <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> + <span>{{userName}}<i class="el-icon-caret-bottom" /></span> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item @click.native="$router.push('/profile/index')">涓汉淇℃伅</el-dropdown-item> + <el-dropdown-item @click.native="$router.push('/dashboard')">涓婚〉</el-dropdown-item> + <el-dropdown-item @click.native="logout" divided>閫�鍑�</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + </div> </div> + + <el-dialog + title="閫氱煡" + :visible.sync="notifyShow" + width="400px" + :modal="false" + > + <div class="notify-warp" v-if="notify.feedBack && notify.feedBack > 0"> + {{notify.feedBack}}鏉�<el-link @click="jump('/exam/feedback/list')" class="core" type="primary">閿欓鍙嶉</el-link>绛夊緟鎮ㄧ殑澶勭悊锛� + </div> + <div class="notify-warp" v-if="notify.mobilize && notify.mobilize > 0"> + {{notify.mobilize}}鏉�<el-link @click="jump('/user/departmentExamine/list')" class="core" type="primary">閮ㄩ棬璋冨姩瀹℃牳</el-link>绛夊緟鎮ㄧ殑澶勭悊锛� + </div> + <div class="notify-warp" v-if="notify.status && notify.status > 0"> + {{notify.status}}鏉�<el-link @click="jump('/user/UserConditionExamine/list')" class="core" type="primary">鐘舵�佸鏍�</el-link>绛夊緟鎮ㄧ殑澶勭悊锛� + </div> + <span slot="footer" class="dialog-footer"> + <el-button v-if="this.notify.ids && this.notify.ids.length > 0" type="success" @click="allRead">涓�閿叏璇�</el-button> + <el-button type="primary" @click="notifyShow = false">纭� 瀹�</el-button> + </span> + </el-dialog> </div> </template> <script> import { mapGetters, mapMutations } from 'vuex' import loginApi from '@/api/login' +import NotifyApi from '@/api/notify' import Breadcrumb from '@/components/Breadcrumb' import Hamburger from '@/components/Hamburger' @@ -42,7 +64,40 @@ 'userName' ]) }, + data() { + return { + notifyShow: false, + notify: { + total: null, + feedBack: null, + mobilize: null, + status: null, + ids: [] + } + } + }, + mounted() { + this.getAdminNotify() + }, methods: { + jump(path) { + this.$router.push(path) + }, + allRead() { + if (this.notify.ids && this.notify.ids.length > 0) { + NotifyApi.read(this.notify.ids).then(res => { + this.$message.success("涓�閿凡璇诲畬鎴�") + this.notifyShow = false + this.getAdminNotify() + }) + } + }, + getAdminNotify() { + NotifyApi.getAdminNotify().then(res => { + res.response.total === 0 ? res.response.total = null : res.response.total + this.notify = res.response; + }) + }, toggleSideBar () { this.$store.dispatch('app/toggleSideBar') }, @@ -61,8 +116,15 @@ </script> <style lang="scss" scoped> +.core { + margin: 0 5px; +} +.notify-warp { + display: flex; + flex-direction: row; +} .navbar { - height: 50px; + height: 60px; overflow: hidden; position: relative; background: #fff; @@ -91,10 +153,11 @@ } .right-menu { - float: right; + display: flex; + flex-direction: row-reverse; + align-items: center; height: 100%; - line-height: 50px; - + padding-right: 20px; &:focus { outline: none; } -- Gitblit v1.8.0