325 lines
8.8 KiB
Vue
325 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">
|
|
<template v-if="device!=='mobile'">
|
|
<i class="el-icon-message-solid" @click="noticeTableList"></i>
|
|
<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>
|
|
<el-dialog
|
|
title="公告"
|
|
:visible.sync="noticeTableVisible"
|
|
width="50%">
|
|
<el-radio-group v-model="form.noticeType" @change="getNoticeList">
|
|
<el-radio-button label="">全部</el-radio-button>
|
|
<el-radio-button label="1">通知</el-radio-button>
|
|
<el-radio-button label="2">公告</el-radio-button>
|
|
</el-radio-group>
|
|
<br> <br>
|
|
<el-radio-group v-model="form.isRead" @change="getNoticeList">
|
|
<el-radio-button label="">全部</el-radio-button>
|
|
<el-radio-button label="0">已读</el-radio-button>
|
|
<el-radio-button label="1">未读</el-radio-button>
|
|
</el-radio-group>
|
|
<br><br><br>
|
|
<el-card class="box-card" v-for="notice in noticeAttr">
|
|
|
|
<!-- <div slot="header" class="clearfix">-->
|
|
<!-- <span>卡片名称</span>-->
|
|
<!-- <el-button style="float: right">阅 读 消 息</el-button>-->
|
|
<!-- </div>-->
|
|
<!-- <div v-for="o in 4" :key="o" class="text item">-->
|
|
<!-- {{'列表内容 ' + o }}-->
|
|
<!-- </div>-->
|
|
<el-descriptions class="margin-top" :title="notice.noticeTitle" :column="2" :size="'medium'" border>
|
|
<template slot="extra">
|
|
<el-button size="small" @click="readNotice(notice)">阅读消息</el-button>
|
|
</template>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-user"></i>
|
|
消息发布时间
|
|
</template>
|
|
{{notice.createTime}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-user"></i>
|
|
消息发布人
|
|
</template>
|
|
{{notice.createBy}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-tickets"></i>
|
|
消息类型
|
|
</template>
|
|
<dict-tag :options="dict.type.sys_notice_type" :value="notice.noticeType"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
<i class="el-icon-office-building"></i>
|
|
消息当前状态
|
|
</template>
|
|
<dict-tag :options="dict.type.is_read" :value="notice.isRead"/>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="noticeTableVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="noticeTableVisible = false">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog
|
|
:title="noticeInfo.noticeTitle"
|
|
:visible.sync="noticeVisble"
|
|
width="30%">
|
|
<editor v-model="noticeInfo.noticeContent" :min-height="192"/>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="noticeVisble = false">取 消</el-button>
|
|
<el-button type="primary" @click="noticeVisble = false">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</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 { getNoticeList, updateAsUserDept } from '@/api/system/notice'
|
|
|
|
export default {
|
|
dicts: ['is_read', 'sys_notice_type'],
|
|
data() {
|
|
return {
|
|
noticeVisble: false,
|
|
noticeInfo: {},
|
|
noticeAttr: [
|
|
{
|
|
createTime: '',
|
|
createBy: 'admin',
|
|
noticeType: '1',
|
|
isRead: '1',
|
|
noticeTitle: '哈哈',
|
|
noticeContent: '嘻嘻嘻嘻嘻',
|
|
noticeId: 1,
|
|
},
|
|
{
|
|
createTime: '',
|
|
createBy: 'admin',
|
|
noticeType: '2',
|
|
isRead: '0',
|
|
noticeTitle: '哈撒大大哈',
|
|
noticeContent: '嘻嘻嘻嘻阿尽快嘻',
|
|
noticeId: 2,
|
|
},
|
|
{
|
|
createTime: '',
|
|
createBy: 'admin',
|
|
noticeType: '1',
|
|
isRead: '0',
|
|
noticeTitle: '哈哈是',
|
|
noticeContent: '嘻嘻嘻萨达嘻嘻',
|
|
noticeId: 3,
|
|
}
|
|
],
|
|
form: {
|
|
noticeType: '',
|
|
isRead: ''
|
|
},
|
|
messageTotal: undefined,
|
|
noticeTableVisible: false
|
|
}
|
|
},
|
|
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
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getNoticeList() {
|
|
getNoticeList(this.form).then(res => {
|
|
console.log(res)
|
|
this.noticeAttr = res.data
|
|
})
|
|
},
|
|
readNotice(row) {
|
|
this.noticeInfo = row
|
|
this.noticeVisble = true
|
|
updateAsUserDept(row.id).then(res => {
|
|
this.getNoticeList()
|
|
})
|
|
},
|
|
noticeTableList() {
|
|
this.getNoticeList()
|
|
this.noticeTableVisible = true
|
|
},
|
|
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: 100%;
|
|
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>
|