提交代码
This commit is contained in:
wangchengming
parent
bdd5f9d11d
commit
c3fbac5cd5
38
src/api/siteMessage.js
Normal file
38
src/api/siteMessage.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取站内信分页列表
|
||||
export function getSiteMessagePage(query) {
|
||||
console.log('js接收参数', query)
|
||||
return request({
|
||||
url: '/siteMessage/pageList',
|
||||
method: 'get',
|
||||
params: query,
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更改消息状态
|
||||
export function updateSiteMessageStatus(query) {
|
||||
return request({
|
||||
url: '/siteMessage/getSiteMessage',
|
||||
method: 'get',
|
||||
pamras: query,
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 一键已读/清除
|
||||
export function oneClickClear(query) {
|
||||
return request({
|
||||
url: '/siteMessage/oneClickClear',
|
||||
method: 'get',
|
||||
pamras: query,
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</template> -->
|
||||
<el-badge is-dot class="myBadge">
|
||||
<img :src="messageIcon" class="custom-icon" />
|
||||
<el-badge :is-dot="isShowDot" class="myBadge">
|
||||
<img :src="messageIcon" class="custom-icon" @click="openMessage" />
|
||||
</el-badge>
|
||||
|
||||
|
||||
|
|
@ -62,17 +62,51 @@
|
|||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 消息弹窗 -->
|
||||
<el-dialog v-model="visible" :show-close="false" :is-bar="true" :width="800">
|
||||
<template #header="{ titleId }">
|
||||
<div class="el-bar el-bar__standard el-dialog__title">
|
||||
<div v-for="(item, index) in messaeOptions"
|
||||
:class="activeIndex === index ? 'cursor-pointer activeTab' : 'cursor-pointer'"
|
||||
@click="handleChageTab(index)">
|
||||
{{ item }}</div>
|
||||
<div style="flex-grow: 1 !important" />
|
||||
<el-icon @click="closeMessage">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<ul class="messages" v-if="messageDateList.length > 0">
|
||||
<li class="message-item system" v-for="item in messageDateList">
|
||||
<div class="message-content">
|
||||
<div style="width: 100%;">
|
||||
<div class="message-text">{{ item.content }}</div>
|
||||
<div class="message-time">{{ item.noticeTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="activeIndex == 0">
|
||||
<div class="view-detail" v-if="isLink(item.msgType)" @click="handleOpenLink(item.id, item.msgType)">去处理
|
||||
</div>
|
||||
<div class="view-detail" v-else @click="handleReadMessage(item.id)">查看详情</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="moreBtnPanel" v-if="messageDateList.length > 0">
|
||||
<el-button text class="messageBtn" @click="handleClearAll">一键清除</el-button>
|
||||
<el-button text class="messageBtn" @click="handleLoadMore">查看更多</el-button>
|
||||
</div>
|
||||
<el-empty :image-size="200" v-if="messageDateList.length == 0" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
// import { ElBar, ElDialog, ElIcon } from '@hc/element-plus'
|
||||
import systemlogo from '@/assets/logo/systemLogo.png'
|
||||
|
||||
import messageIcon from '@/assets/images/messageIcon.png'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
|
|
@ -86,11 +120,175 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
|
|||
import useAppStore from '@/store/modules/app'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { getSiteMessagePage, updateSiteMessageStatus, oneClickClear } from "@/api/siteMessage"
|
||||
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const timer = ref(null)
|
||||
const isShowDot = ref(false)
|
||||
const visible = ref(false)
|
||||
const messaeOptions = ref(['未读', '已读'])
|
||||
const activeIndex = ref(0)
|
||||
// 消息列表查询条件
|
||||
const tableParamsQuery = ref({
|
||||
readFlag: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 1
|
||||
})
|
||||
const messageDateList = ref([])
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 每隔5s定时刷新 是否有新消息
|
||||
timer.value = setInterval(() => {
|
||||
InitDot()
|
||||
}, 5000)
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer.value)
|
||||
});
|
||||
|
||||
// 判断是否跳转
|
||||
const isLink = (msgType) => {
|
||||
return [10, 20, 30, 40, 50].includes(msgType)
|
||||
}
|
||||
|
||||
|
||||
// 查看消息
|
||||
const openMessage = () => {
|
||||
visible.value = true
|
||||
if (activeIndex.value == 0) InitMessage()
|
||||
else InitReadMessage()
|
||||
}
|
||||
// 关闭消息
|
||||
const closeMessage = () => {
|
||||
visible.value = false
|
||||
}
|
||||
// tab切换
|
||||
const handleChageTab = (index) => {
|
||||
activeIndex.value = index
|
||||
tableParamsQuery.value.readFlag = index
|
||||
if (index == 0) InitMessage()
|
||||
else InitReadMessage()
|
||||
}
|
||||
// 查看更多
|
||||
const handleLoadMore = () => {
|
||||
tableParamsQuery.value.pageNum = tableParamsQuery.value.pageNum + 1
|
||||
tableParamsQuery.value.readFlag = activeIndex.value
|
||||
if (activeIndex.value == 0) getMessage()
|
||||
else getReadMessage()
|
||||
}
|
||||
// 查询未读数据，判读是否显示黄点
|
||||
const InitDot = () => {
|
||||
const search = {
|
||||
readFlag: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 1
|
||||
}
|
||||
getSiteMessagePage(search).then(res => {
|
||||
if (res.code == 200) {
|
||||
isShowDot.value = res.rows.length > 0 ? true : false
|
||||
} else {
|
||||
isShowDot.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询未读消息
|
||||
const InitMessage = () => {
|
||||
tableParamsQuery.value.pageNum = 1
|
||||
getSiteMessagePage(tableParamsQuery.value).then(res => {
|
||||
if (res.code == 200) {
|
||||
messageDateList.value = res.rows
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询更多未读消息
|
||||
const getMessage = () => {
|
||||
getSiteMessagePage(tableParamsQuery.value).then(res => {
|
||||
if (res.code == 200) {
|
||||
if (res.rows.length > 0) {
|
||||
messageDateList.value = messageDateList.value.concat(res.rows);
|
||||
}
|
||||
else {
|
||||
proxy.$modal.msgSuccess(`没有更多了...`)
|
||||
if (tableParamsQuery.value.pageNum != 1) {
|
||||
tableParamsQuery.value.pageNum = tableParamsQuery.value.pageNum - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询已读消息
|
||||
const InitReadMessage = () => {
|
||||
tableParamsQuery.value.pageNum = 1
|
||||
getSiteMessagePage(tableParamsQuery.value).then(res => {
|
||||
if (res.code == 200) {
|
||||
messageDateList.value = res.rows;
|
||||
}
|
||||
})
|
||||
}
|
||||
// 查询更多已读消息
|
||||
const getReadMessage = () => {
|
||||
getSiteMessagePage(tableParamsQuery.value).then(res => {
|
||||
if (res.code == 200) {
|
||||
if (res.rows.length > 0) {
|
||||
messageDateList.value = messageDateList.value.concat(res.rows);
|
||||
}
|
||||
else {
|
||||
proxy.$modal.msgSuccess(`没有更多了...`)
|
||||
if (tableParamsQuery.value.pageNum != 1) {
|
||||
tableParamsQuery.value.pageNum = tableParamsQuery.value.pageNum - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 一键已读/一键删除
|
||||
const handleClearAll = () => {
|
||||
oneClickClear({ readFlag: activeIndex.value }).then(res => {
|
||||
if (res.code == 200) {
|
||||
if (activeIndex.value == 0) InitMessage()
|
||||
else InitReadMessage()
|
||||
} else {
|
||||
proxy.$modal.msgError(`操作失败...`)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 跳转
|
||||
const handleOpenLink = (messageId, msgType) => {
|
||||
updateSiteMessageStatus({ id: messageId }).then(res => {
|
||||
if (res.code == 200) {
|
||||
// 新用户注册审核提醒 esc
|
||||
if (msgType == 10) router.push('/system/userApproval')
|
||||
// 资质申请审核 esc
|
||||
if (msgType == 20) router.push('/qualification/qualificationEscApproval')
|
||||
// 标签申请审核 esc
|
||||
if (msgType == 30) router.push('/labelManage/escApproval')
|
||||
// 高压安全审查整改提醒 esc
|
||||
if (msgType == 40) router.push('/safetyReview/examinerEscTask')
|
||||
// 工具过期 esc
|
||||
if (msgType == 50) router.push('/ppeTool')
|
||||
} else {
|
||||
proxy.$modal.msgError(`操作失败...`)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 标记已读
|
||||
const handleReadMessage = (messageId) => {
|
||||
updateSiteMessageStatus({ id: messageId }).then(res => {
|
||||
if (res.code == 200) {
|
||||
if (activeIndex.value == 0) InitMessage()
|
||||
else InitReadMessage()
|
||||
} else {
|
||||
proxy.$modal.msgError(`操作失败...`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function toggleSideBar() {
|
||||
appStore.toggleSideBar()
|
||||
}
|
||||
|
|
@ -281,10 +479,138 @@ function toggleTheme() {
|
|||
height: 10px;
|
||||
background-color: #DDA100;
|
||||
}
|
||||
|
||||
:deep(.el-badge__content.is-fixed) {
|
||||
top: 20px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
padding-bottom: 0px !important;
|
||||
word-break: break-all !important;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-bar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
background: #ffffff !important;
|
||||
border-bottom: 1px solid rgba(5, 5, 5, 0.06);
|
||||
}
|
||||
|
||||
.el-bar__standard {
|
||||
padding: 0 12px 0 0;
|
||||
font-size: 18px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.el-bar>div:first-child {
|
||||
margin-left: 300px;
|
||||
}
|
||||
|
||||
.el-bar>div,
|
||||
.el-bar>div+.el-icon {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.el-bar>.el-icon {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: 760px !important;
|
||||
padding: 0 !important;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: var(--el-dialog-content-font-size);
|
||||
word-break: break-all;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
width: 86px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #1E1E1E;
|
||||
}
|
||||
|
||||
.activeTab {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #1E1E1E;
|
||||
border-bottom: 3px solid #1A75E6;
|
||||
}
|
||||
|
||||
.messages {
|
||||
list-style: none;
|
||||
padding: 0px !important;
|
||||
margin: 6px 0px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-item:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 150px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
color: #1890ff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.moreBtnPanel {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.messageBtn {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user