| | |
| | | <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 v-if="notify.role === 3"> |
| | | <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="true" |
| | | :modal-append-to-body="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> |
| | | <div class="notify-warp" v-if="notify.feedBack === 0 && notify.mobilize === 0 && notify.status === 0 "> |
| | | <el-empty description="暂无通知"></el-empty> |
| | | </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' |
| | | |
| | |
| | | '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') |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .core { |
| | | margin: 0 5px; |
| | | } |
| | | .notify-warp { |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: center; |
| | | } |
| | | .navbar { |
| | | height: 50px; |
| | | height: 60px; |
| | | overflow: hidden; |
| | | position: relative; |
| | | background: #fff; |
| | |
| | | } |
| | | |
| | | .right-menu { |
| | | float: right; |
| | | display: flex; |
| | | flex-direction: row-reverse; |
| | | align-items: center; |
| | | height: 100%; |
| | | line-height: 50px; |
| | | |
| | | padding-right: 20px; |
| | | &:focus { |
| | | outline: none; |
| | | } |