<template>
|
<div v-loading.fullscreen.lock="fullscreenLoading">
|
<el-row class="tac">
|
<el-col :span="4">
|
<el-menu
|
default-active="2"
|
class="el-menu-vertical-demo"
|
@open="handleOpen"
|
@close="handleClose"
|
style="top: 100px"
|
>
|
|
<el-menu-item index="1" @click="GetAllMessage">
|
<i class="el-icon-monitor"></i>
|
<span slot="title">全部</span>
|
</el-menu-item>
|
<el-divider class="dividerClass"></el-divider>
|
<el-menu-item index="2" @click="GetUnreadMessage">
|
<i class="el-icon-folder"></i>
|
<span slot="title"
|
>未读<el-badge
|
v-show="noreadNum > 0"
|
class="mark"
|
:value="noreadNum"
|
style="margin-left: 10px; margin-top: -5px"
|
/></span>
|
</el-menu-item>
|
<el-divider class="dividerClass"></el-divider>
|
<el-menu-item index="3" @click="GetReadMessage">
|
<i class="el-icon-folder-opened"></i>
|
<span slot="title">已读</span>
|
</el-menu-item>
|
</el-menu>
|
</el-col>
|
|
<el-col :span="16">
|
<ul class="list" style="margin-top: -10px;border:1px;height:50px">
|
<li class="list-items" style="float: left; margin-right: 50px">
|
当前位置>{{state}}
|
</li>
|
|
|
|
<li class="list-items" style="float: right; margin-right: 50px">
|
<div>
|
<i
|
@click="Refresh"
|
class="el-icon-refresh"
|
style="cursor: pointer; font-size: 25px"
|
title="刷新"
|
></i>
|
</div>
|
</li>
|
</ul>
|
|
<div class="infinite-list-wrapper" ref="wrapper" style="border: 1px solid #dcdfe6;">
|
<ul
|
|
v-infinite-scroll="load"
|
infinite-scroll-disabled="disabled"
|
>
|
<li
|
v-for="(item, index) in messageList"
|
class="list-item"
|
:key="index"
|
>
|
<div @click="clickMessageDetailed(item)" style=" width: 80%;">
|
<span style="color: #7dbcfc" v-if="item.messagetype == 1"
|
>[系统消息]</span
|
>
|
<span style="color: #7dbcfc" v-else-if="item.messagetype == 2"
|
>[人工消息]</span
|
>
|
<span
|
:style="item.isread == 0 ? 'color:#fd4c4c' : 'color:#cdcaca'"
|
>{{ item.isread == 0 ? "[未读]" : "[已读]" }}</span
|
>
|
<span>{{ item.messagetitle }}</span>
|
</div>
|
<div
|
style="
|
font-size: 13px;
|
color: #cdcaca;
|
|
|
"
|
>
|
{{ item.createTime }}
|
</div>
|
</li>
|
<li v-if="loading" class="list-items" style="">加载中...</li>
|
</ul>
|
</div>
|
</el-col>
|
<el-divider direction="vertical" class="dividerHeightClass"></el-divider>
|
<el-col :span="4"></el-col>
|
</el-row>
|
<detailed-dialog ref="detailedDialog" />
|
</div>
|
</template>
|
|
<script>
|
import {
|
listSystemmessageList,
|
listSystemmessageCount,
|
updateSystemmessage,
|
} from "@/api/project/message";
|
import { getUserProfile } from "@/api/system/user";
|
import DetailedDialog from "./detailedDialog";
|
export default {
|
components: { DetailedDialog },
|
computed: {
|
noMore() {
|
return this.pageNum * this.pageSize >= this.total;
|
},
|
disabled() {
|
return this.loading || this.noMore;
|
},
|
},
|
data() {
|
return {
|
count: 0,
|
total: 0,
|
pageNum: 1,
|
pageSize: 10,
|
noreadNum: 0,
|
messageList: [],
|
loading: false,
|
fullscreenLoading: false,
|
searchData: {},
|
userID: "",
|
state:"未读",
|
};
|
},
|
async mounted() {
|
await this.GetUser();
|
await this.list();
|
this.GetCount();
|
},
|
methods: {
|
GetCount() {
|
listSystemmessageCount()
|
.then((res) => {
|
this.$nextTick(() => {
|
this.noreadNum = res.data;
|
});
|
})
|
.catch((error) => {});
|
},
|
async GetUser() {
|
await getUserProfile()
|
.then((res) => {
|
this.userID = res.data.userName;
|
|
if (this.userID == null || this.userID == "") {
|
this.$message.error("未获取到用户ID");
|
}
|
})
|
.catch((error) => {
|
this.$message.error(error);
|
});
|
},
|
list() {
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.searchData.del_flag = 0;
|
this.searchData.receiveuserno = this.userID;
|
this.searchData.isread = 0;
|
this.GetMessageList();
|
},
|
GetAllMessage() {
|
this.state="全部";
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.searchData.del_flag = 0;
|
this.searchData.receiveuserno = this.userID;
|
this.searchData.isread = null;
|
this.GetMessageList();
|
},
|
GetUnreadMessage() {
|
this.state="未读";
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.searchData.del_flag = 0;
|
this.searchData.receiveuserno = this.userID;
|
this.searchData.isread = 0;
|
this.GetMessageList();
|
},
|
GetReadMessage() {
|
this.state="已读";
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.searchData.del_flag = 0;
|
this.searchData.receiveuserno = this.userID;
|
this.searchData.isread = 1;
|
this.GetMessageList();
|
},
|
Refresh() {
|
this.pageNum = 1;
|
this.pageSize = 10;
|
|
this.GetMessageList();
|
},
|
GetMessageList() {
|
this.GetCount();
|
this.fullscreenLoading = true;
|
listSystemmessageList({
|
...this.searchData,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
|
})
|
.then((res) => {
|
|
if (this.pageNum == 1) {
|
this.messageList = res.rows;
|
} else {
|
var list=[];
|
for(var i=0;i<res.rows.length;i++){
|
|
if(this.messageList.indexOf(r=>r.id==res.rows[i].id)==-1){
|
list.push(res.rows[i]);
|
}
|
}
|
this.messageList = this.messageList.concat(list);
|
}
|
|
this.total = res.total;
|
})
|
.catch((error) => {})
|
.finally(() => {
|
this.fullscreenLoading = false;
|
});
|
},
|
clickMessageDetailed(item) {
|
this.$refs.detailedDialog.init(item.id);
|
let data = item;
|
if (data.isread == 0) {
|
item.isread = 1;
|
updateSystemmessage(item)
|
.then((res) => {
|
this.noreadNum--;
|
})
|
.catch((error) => {});
|
}
|
},
|
|
handleOpen(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
handleClose(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
load() {
|
this.loading = true;
|
setTimeout(() => {
|
this.pageNum++;
|
this.GetMessageList();
|
this.loading = false;
|
}, 2000);
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.infinite-list-wrapper {
|
overflow: auto;
|
height: calc(100vh - 145px);
|
width: 100%;
|
}
|
.list-item {
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
height: 50px;
|
|
margin: 10px;
|
}
|
.dividerClass {
|
margin: 1px 0 !important;
|
}
|
.dividerHeightClass {
|
margin: 1px 0 !important;
|
height: calc(100vh - 100px);
|
}
|
.list-items {
|
display: flex;
|
align-items: center;
|
|
height: 50px;
|
|
margin: 10px;
|
}
|
</style>
|
