340 lines
8.8 KiB
Vue
340 lines
8.8 KiB
Vue
<template>
|
|
<div class="navbar">
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
|
@toggleClick="toggleSideBar"/>
|
|
|
|
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container"/>
|
|
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container"/>
|
|
|
|
|
|
|
|
<div class="right-menu">
|
|
<el-button @click="drawerTru" type="primary" style="margin: 10px 0;">
|
|
<i class="el-icon-s-comment"></i>
|
|
</el-button>
|
|
<template v-if="device!=='mobile'">
|
|
<search id="header-search" class="right-menu-item"/>
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect"/>
|
|
|
|
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
<size-select id="size-select" class="right-menu-item hover-effect"/>
|
|
</el-tooltip>
|
|
|
|
</template>
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
<div class="avatar-wrapper">
|
|
<img :src="avatar" class="user-avatar">
|
|
<i class="el-icon-caret-bottom"/>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<router-link to="/user/profile">
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
</router-link>
|
|
<el-dropdown-item @click.native="setting = true">
|
|
<span>布局设置</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item divided @click.native="logout">
|
|
<span>退出登录</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<el-drawer
|
|
title="我是标题"
|
|
:visible.sync="drawer"
|
|
size="50%"
|
|
:with-header="false">
|
|
|
|
<el-radio-group v-model="type" @change="selectNotice">
|
|
<el-radio-button label="0" >全部</el-radio-button>
|
|
<el-radio-button label="1" >通知</el-radio-button>
|
|
<el-radio-button label="2" >公告</el-radio-button>
|
|
</el-radio-group>
|
|
<br>
|
|
<el-radio-group v-model="state" @change="selectNotice">
|
|
<el-radio-button label="0" >全部</el-radio-button>
|
|
<el-radio-button label="2">已读</el-radio-button>
|
|
<el-radio-button label="1">未读</el-radio-button>
|
|
</el-radio-group>
|
|
|
|
|
|
|
|
|
|
<el-descriptions class="margin-top" v-for="notice in notices" :column="2" border>
|
|
<template slot="extra">
|
|
<el-button type="primary" size="small" @click="lookNotice(notice)">阅读信息</el-button>
|
|
</template>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-user"></i>
|
|
消息发布时间
|
|
</template>
|
|
{{ notice.noticeTitle }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-mobile-phone"></i>
|
|
消息发布人
|
|
</template>
|
|
{{notice.createBy}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-location-outline"></i>
|
|
消息类型
|
|
</template>
|
|
<el-tag size="small" v-if=" notice.noticeType == 1">通知</el-tag>
|
|
<el-tag size="warning" v-if=" notice.noticeType == 2">公告</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-tickets"></i>
|
|
当前状态
|
|
</template>
|
|
<el-tag size="small" v-if=" notice.state == 1">未读</el-tag>
|
|
<el-tag size="success" v-if=" notice.state == 2">已读</el-tag>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-drawer>
|
|
|
|
<el-dialog
|
|
:visible.sync="dialogVisible"
|
|
width="30%">
|
|
<el-descriptions class="margin-top" :column="2" border>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-user"></i>
|
|
消息发布时间
|
|
</template>
|
|
{{ notice.noticeTitle }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-mobile-phone"></i>
|
|
消息发布人
|
|
</template>
|
|
{{notice.createBy}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-location-outline"></i>
|
|
消息类型
|
|
</template>
|
|
<el-tag size="small" v-if=" notice.noticeType == 1">通知</el-tag>
|
|
<el-tag size="warning" v-if=" notice.noticeType == 2">公告</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-tickets"></i>
|
|
当前状态
|
|
</template>
|
|
<el-tag size="small" v-if=" notice.state == 1">未读</el-tag>
|
|
<el-tag size="success" v-if=" notice.state == 2">已读</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-tickets"></i>
|
|
内容
|
|
</template>
|
|
<span v-html="notice.noticeContent"></span>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex'
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
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 {findList, lookNotice} from "@/api/system/notice";
|
|
|
|
export default {
|
|
data(){
|
|
return{
|
|
drawer:false,
|
|
type:0,
|
|
state:0,
|
|
notices:[],
|
|
dialogVisible:false,
|
|
notice:{}
|
|
}
|
|
},
|
|
components: {
|
|
Breadcrumb,
|
|
TopNav,
|
|
Hamburger,
|
|
Screenfull,
|
|
SizeSelect,
|
|
Search
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'sidebar',
|
|
'avatar',
|
|
'device'
|
|
]),
|
|
setting: {
|
|
|
|
get() {
|
|
return this.$store.state.settings.showSettings
|
|
},
|
|
set(val) {
|
|
this.$store.dispatch('settings/changeSetting', {
|
|
key: 'showSettings',
|
|
value: val
|
|
})
|
|
}
|
|
},
|
|
topNav: {
|
|
get() {
|
|
return this.$store.state.settings.topNav
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
lookNotice(notice){
|
|
this.dialogVisible=true
|
|
lookNotice(notice.id,notice.state).then(res=>{
|
|
this.notice=res.data
|
|
})
|
|
this.findAll();
|
|
},
|
|
drawerTru(){
|
|
this.drawer=true
|
|
this.findAll()
|
|
},
|
|
findAll(){
|
|
findList({state:this.state,noticeType:this.type}).then(res=>{
|
|
this.notices=res.data;
|
|
})
|
|
},
|
|
selectNotice(){
|
|
this.findAll();
|
|
},
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
async logout() {
|
|
this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
location.href = '/index';
|
|
})
|
|
}).catch(() => {
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar {
|
|
height: 50px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
|
|
.hamburger-container {
|
|
line-height: 46px;
|
|
height: 100%;
|
|
float: left;
|
|
cursor: pointer;
|
|
transition: background .3s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .025)
|
|
}
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
float: left;
|
|
}
|
|
|
|
.topmenu-container {
|
|
position: absolute;
|
|
left: 50px;
|
|
}
|
|
|
|
.errLog-container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.right-menu {
|
|
float: right;
|
|
height: 70%;
|
|
line-height: 50px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.right-menu-item {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
color: #5a5e66;
|
|
vertical-align: text-bottom;
|
|
|
|
&.hover-effect {
|
|
cursor: pointer;
|
|
transition: background .3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .025)
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 30px;
|
|
|
|
.avatar-wrapper {
|
|
margin-top: 5px;
|
|
position: relative;
|
|
|
|
.user-avatar {
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|