Add basic function of Message Module.
parent
251b7a0266
commit
ee804d7e6c
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div
|
||||
class="message-box"
|
||||
v-if="props.modelValue"
|
||||
v-dialogDrag="{
|
||||
dragEle: '.header',//点击拖动的那个dom的选择器
|
||||
drag: true, //是否开启拖动
|
||||
}"
|
||||
>
|
||||
<div class="header">
|
||||
消息中心
|
||||
<span @click="close"><el-icon><Close /></el-icon></span>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<div class="button-group">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary" :icon="MessageBox"
|
||||
:disabled="showInbox" @click="showInbox = true">
|
||||
收件箱</el-button>
|
||||
<el-button
|
||||
type="primary" :icon="Message"
|
||||
:disabled="!showInbox" @click="showInbox = false">
|
||||
发件箱</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="message-list">
|
||||
<el-empty description="消息为空" v-if="messageList.length == 0" />
|
||||
<div class="message" v-for="item in messageList" :key="item">
|
||||
<div class="message-title">
|
||||
<span>
|
||||
{{item.messageTitle}}
|
||||
<el-tag v-if="item.isRead" type="success">已读</el-tag>
|
||||
<el-tag v-else type="danger">未读</el-tag>
|
||||
</span>
|
||||
<span>
|
||||
<span class="text-link" @click="readMessage(item.messageId)" v-if="!item.isRead">设为已读</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-content" v-html="item.messageContent"></div>
|
||||
<div class="message-footer">{{item.gmtCreate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
:total="messageCount"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[4, 6, 10, 20]"
|
||||
background layout="prev, pager, next, sizes" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { fetchInBoxMessage, fetchOutBoxMessage, readMessageById } from "@/services/messageApi";
|
||||
import { MessageBox, Message } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps(["modelValue"]);
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const showInbox = ref(true);
|
||||
|
||||
const inbox: any = ref([{
|
||||
messageId: "1704037736972881921",
|
||||
senderId: "-1",
|
||||
targetId: "1508326478803185700",
|
||||
messageContent: "<span>暂无消息</span>",
|
||||
messageTitle: "数据请求中",
|
||||
senderName: "系统",
|
||||
isRead: true,
|
||||
gmtCreate: "2023-09-19 15:40:31"
|
||||
}]);
|
||||
|
||||
const outbox: any = ref([{
|
||||
messageId: "1704037736972881921",
|
||||
senderId: "-1",
|
||||
targetId: "1508326478803185700",
|
||||
messageContent: "<span>暂无消息</span>",
|
||||
messageTitle: "数据请求中",
|
||||
senderName: "系统",
|
||||
isRead: true,
|
||||
gmtCreate: "2023-09-19 15:40:31"
|
||||
}]);
|
||||
|
||||
const getMessageList = () => {
|
||||
fetchInBoxMessage().then((res) => {
|
||||
inbox.value = res.data;
|
||||
});
|
||||
fetchOutBoxMessage().then((res) => {
|
||||
outbox.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
const readMessage = (messageId: string) => {
|
||||
readMessageById(messageId).then(() => {
|
||||
getMessageList();
|
||||
})
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(6);
|
||||
|
||||
const messageList = computed(() => {
|
||||
return (showInbox.value ? inbox.value : outbox.value).slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
|
||||
});
|
||||
|
||||
const messageCount = computed(() => {
|
||||
return showInbox.value ? inbox.value.length : outbox.value.length;
|
||||
});
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
getMessageList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.message-box {
|
||||
position: fixed;
|
||||
left: 10%;
|
||||
top: 15%;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
z-index: 999;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
span {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
height: calc(100% - 40px);
|
||||
.button-group {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.message-list {
|
||||
height: calc(100% - 140px);
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
|
||||
.message {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
.message-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.text-link {
|
||||
font-size: small;
|
||||
color: gainsboro;
|
||||
}
|
||||
.text-link:hover {
|
||||
color: #42b983;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.message-footer {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @description 消息模块
|
||||
* @author PeterAlbus
|
||||
* @time 2023-08-19
|
||||
*/
|
||||
|
||||
import http from './httpConfig';
|
||||
import { messageUrl } from "@/services/urlConfig";
|
||||
|
||||
export const fetchInBoxMessage = () => http.get({},messageUrl.getInBoxMessageList);
|
||||
|
||||
export const fetchOutBoxMessage = () => http.get({},messageUrl.getOutBoxMessageList);
|
||||
|
||||
export const unreadMessageCount = () => http.get({},messageUrl.getUnreadMessageCount);
|
||||
|
||||
export const readMessageById = (messageId:string) => http.get({messageId},messageUrl.readMessage);
|
||||
Loading…
Reference in New Issue