<template>
|
<div class="notice-page">
|
<el-drawer
|
title="消息通知"
|
:visible.sync="drawer"
|
:direction="direction"
|
:before-close="handleClose" style="height: 100vh;z-index: 9999999;" size="450px">
|
<div class="notice-content" v-loading="loading">
|
<el-button size="small" type="primary" @click="handleDropdownAll(1)" style="margin-bottom: 10px;margin-left: 330px;">全部已读</el-button>
|
<scroll-pagination @load="refresh" :finishLoding="finishLoding" :list="list" style="height: calc(100% - 50px);" v-if="list.length>0||loading">
|
<div
|
class="notice-content-item"
|
v-for="(m,i) in list"
|
:key="i"
|
:class="{readStyle:m.viewStatus}"
|
@click="goNoticeDetail(m)">
|
<img :src="`../../static/img/notice-${m.viewStatus?1:0}-${m.messageType}.svg`" alt="" style="margin-right: 6px;">
|
<div class="notice-content-item-left">
|
<p>{{ m.theme }}</p>
|
<p style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
|
<span>发送人：{{ m.createUser }}</span>
|
<span>{{ m.createTime }}</span>
|
</p>
|
</div>
|
</div>
|
</scroll-pagination>
|
<!-- <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div> -->
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import ScrollPagination from '../components/tool/scroll-paging.vue'
|
export default {
|
components: {
|
ScrollPagination
|
},
|
data(){
|
return{
|
drawer:false,
|
direction:'rtl',
|
options:[],
|
type:'0',
|
dropdownList0:[
|
{
|
label:'通过',
|
value:0
|
},
|
{
|
label:'不通过',
|
value:1
|
},
|
{
|
label:'查看更多',
|
value:4
|
},
|
],
|
dropdownList1:[
|
{
|
label:'批准',
|
value:2
|
},
|
{
|
label:'不批准',
|
value:3
|
},
|
{
|
label:'查看更多',
|
value:4
|
},
|
],
|
list:[
|
// {
|
// messageType:1,
|
// theme:'测试标题',
|
// createTime: '2019-08-30 15:46:17',
|
// createUser:'<USERNAME>',
|
// viewStatus:false,
|
// },
|
// {
|
// messageType:2,
|
// theme:'测试标题',
|
// createTime: '2019-08-30 15:46:17',
|
// createUser:'<USERNAME>',
|
// viewStatus:true,
|
// },
|
],
|
currentPage:1,
|
pageSize: 8, // 一页7条
|
total: null,
|
loading: true, // 组件loading的展示,默认为true
|
finishLoding: false, // 加载完成，显示已经没有更多了
|
keyMap:{}
|
}
|
},
|
mounted(){
|
this.getTypeDicts();
|
this.currentPage = 1;
|
this.keyMap = {};
|
this.list = [];
|
this.refresh();
|
},
|
methods:{
|
refresh(){
|
const key = `_${this.currentPage}`
|
const value = this.keyMap[key]
|
// 如果value存在，表示缓存有值，那么阻止请求
|
if(value) {
|
return
|
}
|
// value不存在，表示第一次请求,设置占位
|
this.keyMap[key] = 'temp'
|
if(this.currentPage==1){
|
this.loading = true
|
}
|
if(this.list.length==0){
|
this.finishLoding = false
|
}
|
let type = this.type==0?null:this.type;
|
this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'¤t='+this.currentPage+(type?'&messageType='+type:'')).then(res => {
|
if(res.code === 201){
|
return
|
}
|
let list = res.data.records;
|
this.total = res.data.total;
|
if(list.length==0){
|
this.finishLoding = true;
|
}else{
|
if(list.length<this.pageSize){
|
this.finishLoding = true;
|
}
|
this.list = this.list.concat(list)
|
if(this.total==this.list.length){
|
this.finishLoding = true;
|
}
|
this.currentPage++
|
}
|
this.loading = false
|
})
|
},
|
open(){
|
this.drawer = true;
|
},
|
handleClose(){
|
this.drawer = false;
|
},
|
getTypeDicts() {
|
this.$axios.post(this.$api.enums.selectEnumByCategory, {
|
category: "消息类型"
|
}).then(res => {
|
let data = res.data
|
this.options = data;
|
})
|
},
|
goNoticeDetail(row){
|
this.$axios.put(this.$api.informationNotification.triggerModificationStatusToRead+'/'+row.id).then(res => {
|
row.num = Math.random(100);
|
localStorage.setItem("noticeInfo", JSON.stringify(row))
|
this.$bus.$emit("change", JSON.stringify(row));
|
this.$parent.addTab({
|
v: "消息详情",
|
i: "el-icon-s-tools",
|
u: "notice-detail",
|
k:35,
|
p: "abcd"
|
},29);
|
this.list = [];
|
this.keyMap = {};
|
this.currentPage = 1;
|
this.refresh();
|
this.$emit('goNoticeDetail')
|
})
|
this.drawer = false;
|
},
|
handleDropdown(e,row){
|
switch(e){
|
case 0:
|
break;
|
case 4:
|
this.goNoticeDetail(row)
|
break;
|
}
|
},
|
handleDel(row){
|
this.$confirm('是否删除当前数据?', "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$axios.delete(this.$api.informationNotification.deleteDataBasedOnId+'?id='+row.id).then(res => {
|
if (res.code === 201) {
|
return
|
}
|
this.$message.success('删除成功')
|
this.list = [];
|
this.keyMap = {};
|
this.currentPage = 1;
|
this.refresh()
|
}).catch(e => {
|
this.$message.error('删除失败')
|
})
|
}).catch(() => {})
|
},
|
handleType(){
|
this.list = [];
|
this.keyMap = {};
|
this.currentPage = 1;
|
this.refresh();
|
},
|
handleDropdownAll(e){
|
let type = false;
|
if(e==1){
|
type = true;
|
}
|
this.$axios.put(this.$api.informationNotification.informationReadOrDelete+'/'+type).then(res => {
|
if(res.code===201){
|
return
|
}
|
this.$message.success('操作成功')
|
this.list = [];
|
this.keyMap = {};
|
this.currentPage = 1;
|
this.refresh();
|
this.$emit('goNoticeDetail')
|
})
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
>>>.el-drawer__header::before {
|
content: "";
|
display: inline-block;
|
width: 4px;
|
height: 30.24px;
|
background: #3A7BFA;
|
border-radius: 10px;
|
margin-left: 32px;
|
margin-right: 8.5px;
|
}
|
|
>>>.el-drawer__header {
|
color: #303133;
|
}
|
>>>.el-drawer__body{
|
height: calc(100vh - 82px);
|
overflow: hidden;
|
}
|
.head{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 16px;
|
box-sizing: border-box;
|
padding: 0 16px;
|
}
|
.more{
|
font-size: 20px;
|
color: grey !important;
|
cursor: pointer;
|
}
|
.notice-content{
|
height: 100%;
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding: 0 16px;
|
}
|
.notice-content-item{
|
width: 100%;
|
padding: 9px;
|
border-radius: 8px;
|
box-sizing: border-box;
|
margin-bottom: 10px;
|
overflow: hidden;
|
background: #FBF2ED;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
}
|
.notice-content-item-left{
|
width: 100%;
|
}
|
.notice-content-item-left p:nth-child(1){
|
font-size: 14px;
|
color: #FF7756;
|
line-height: 18px;
|
margin-bottom: 8px;
|
}
|
.notice-content-item-left p:nth-child(2){
|
color: #FFAB97;
|
font-size: 12px;
|
}
|
.readStyle{
|
background: #E9F6F2;
|
}
|
.readStyle .notice-content-item-left p:nth-child(1){
|
color: #198D8A;
|
}
|
.readStyle .notice-content-item-left p:nth-child(2){
|
color: #90CBCD;
|
}
|
</style>
|
