<template>
|
<div class="notice-page">
|
<el-drawer
|
title="消息通知"
|
:visible.sync="drawer"
|
:direction="direction"
|
:before-close="handleClose" style="height: 100vh;z-index: 9999999;">
|
<div class="head">
|
<div class="head-search">
|
<label>消息类型：</label>
|
<el-select v-model="type" placeholder="请选择" style="width: 150px;" size="small" @change="handleType">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<el-dropdown style="margin-right: 20px;" v-if="list.length>0" @command="handleDropdownAll">
|
<span class="el-dropdown-link">
|
<span class="more">···</span>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="1">
|
<i class="el-icon-check"></i>
|
<span>标记所有消息为已读</span>
|
</el-dropdown-item>
|
<el-dropdown-item command="2">
|
<i class="el-icon-delete"></i>
|
<span>删除所有已读消息</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div class="notice-content" v-loading="loading">
|
<scroll-pagination @load="refresh" :finishLoding="finishLoding">
|
<div class="notice-content-item" v-for="(m,i) in list" :key="i">
|
<div class="btns" v-if="m">
|
<!-- v-if="m.messageType==2||m.messageType==3" -->
|
<el-dropdown style="margin-right: 20px;" trigger="click" @command="e=>handleDropdown(e,m)" v-if="false">
|
<span class="el-dropdown-link">
|
<span class="more" style="line-height: 26px;display: inline-block;">···</span>
|
</span>
|
<el-dropdown-menu slot="dropdown" v-if="m.messageType==2">
|
<el-dropdown-item v-for="(n,j) in dropdownList0" :key="j" :command="n.value">
|
{{ n.label }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
<el-dropdown-menu slot="dropdown" v-if="m.messageType==3">
|
<el-dropdown-item v-for="(n,j) in dropdownList1" :key="j" :command="n.value">
|
{{ n.label }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<i class="el-icon-close" style="cursor: pointer;" @click="handleDel(m)"></i>
|
</div>
|
<div class="content" @click="goNoticeDetail(m)" style="cursor: pointer;">
|
<img :src="`../../static/img/notice-${m.messageType}.svg`" alt="" style="width: 50px;margin-right: 18px;">
|
<div class="content-info">
|
<h4 style="font-weight: normal;margin-bottom: 4px;display: flex;align-items: center;justify-content: space-between;">
|
<span>{{ m.theme }}<el-tag :type="!m.viewStatus?'danger':'success'" size="small" v-if="m.messageType==1||m.messageType==2||m.messageType==3" style="margin-left: 8px;">{{ !m.viewStatus?'未处理':'已处理' }}</el-tag></span>
|
<span class="time" style="color: #999999;font-size: 12px;">{{ m.createTime }}</span>
|
</h4>
|
<p style="color: #999999;font-size: 14px;margin-bottom: 6px;" class="ellipsis-multiline">{{ m.content }}</p>
|
<p style="font-size: 12px;color: #999999;display: flex;align-items: center;justify-content: space-between;">
|
<span>发送人：{{m.createUser}}</span>
|
<span>收件人：{{ m.consigneeUser }}</span>
|
</p>
|
</div>
|
</div>
|
<div class="new-notice" v-if="!m.viewStatus">
|
<span>new</span>
|
</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:[],
|
currentPage:1,
|
pageSize: 8, // 一页7条
|
total: null,
|
loading: true, // 组件loading的展示,默认为true
|
finishLoding: false // 加载完成，显示已经没有更多了
|
}
|
},
|
mounted(){
|
this.getTypeDicts();
|
this.currentPage = 1;
|
this.list = [];
|
this.refresh();
|
},
|
methods:{
|
refresh(){
|
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 => {
|
this.drawer = false;
|
row.num = Math.random(100);
|
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.currentPage = 1;
|
this.refresh();
|
this.$emit('goNoticeDetail')
|
})
|
},
|
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.currentPage = 1;
|
this.refresh()
|
}).catch(e => {
|
this.$message.error('删除失败')
|
})
|
}).catch(() => {})
|
},
|
handleType(){
|
this.list = [];
|
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.currentPage = 1;
|
this.refresh();
|
})
|
}
|
},
|
}
|
</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: calc(100% - 60px);
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding: 0 16px;
|
}
|
.notice-content-item{
|
position: relative;
|
width: 100%;
|
padding: 8px;
|
border-radius: 8px;
|
box-sizing: border-box;
|
border: 1px solid #EEEEEE;
|
margin-bottom: 10px;
|
overflow: hidden;
|
}
|
.btns{
|
position: absolute;
|
right: 20px;
|
top: 4px;
|
z-index: 4;
|
}
|
.notice-content-item .btns{
|
opacity: 0;
|
}
|
.time{
|
opacity: 1;
|
}
|
.notice-content-item:hover{
|
box-shadow: 4px 4px 8px 0px rgba(51,51,51,0.04);
|
}
|
.notice-content-item:hover .btns{
|
opacity: 1;
|
}
|
.notice-content-item:hover .time{
|
opacity: 0;
|
}
|
.content{
|
display: flex;
|
align-items: center;
|
}
|
.content-info{
|
flex: 1;
|
}
|
.new-notice{
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 0;
|
height: 0;
|
border-top: 14px solid red;
|
border-right: 14px solid transparent;
|
border-bottom: 14px solid transparent;
|
border-left: 14px solid red;
|
}
|
.new-notice span{
|
position: absolute;
|
font-size: 12px;
|
top: -13px;
|
left: -17px;
|
color: #fff;
|
transform: rotate(-45deg) scale(0.8);
|
}
|
</style>
|
