Teams/kunshan-bzfm-mes-vue
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
赵正易
2024-11-28 13:40:47 +08:00
parent bc75b6012c
commit 4a3117405b
278 changed files with 36671 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/components/Notice/Index.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<div>
<el-popover placement="bottom" trigger="click" width="400px" popper-class="el-popover-pupop-user-news">
<template #reference>
<el-badge :show-zero="false" :value="allDotNum" style="line-height: 18px">
<el-icon><bell /></el-icon>
</el-badge>
</template>
<el-tabs v-model="noticeType">
<el-tab-pane name="0">
<template #label>
<el-badge :show-zero="false" :value="dotNumInfo.noticeNum"> 通知 </el-badge>
</template>
<div class="content-box">
<el-scrollbar>
<div class="content-box-item" v-for="item in noticeList">
<div class="left">
<svg-icon name="gonggao" color="#fff" size="16"></svg-icon>
</div>
<div class="content" @click="handleDetails(item, 0)">
<div class="title">
{{ item.noticeTitle }}
</div>
<div class="content-box-time">{{ dayjs(item.create_time).format('YYYY-MM-DD') }}</div>
</div>
<!-- <div v-if="!readList.includes(item.noticeId)">
<el-button text @click="handleReadNotice(item)">已读</el-button>
</div> -->
</div>
</el-scrollbar>
<el-empty v-if="noticeList.length <= 0" :image-size="60"></el-empty>
</div>
<div class="foot-box">
<div class="read" @click="onAllReadClick" v-show="dotNumInfo.noticeNum > 0">标记当前页已读</div>
<div class="goNotice" @click="handleToNotice" v-if="settings.noticeUrl">前往通知中心</div>
</div>
</el-tab-pane>
<el-tab-pane name="1">
<template #label>
<el-badge :show-zero="false" :value="dotNumInfo.chatNum"> 私信 </el-badge>
</template>
<div class="content-box">
<el-scrollbar>
<div class="content-box-item" v-for="item in chatList" @click="handleDetails(item, 1)">
<el-avatar :src="item.fromUser.avatar"></el-avatar>
<div class="content">
<div class="title">
<span class="name">{{ item.fromUser.nickName }}</span>
回复：{{ item.message }}
</div>
<div class="content-box-time">{{ formatTime(item.chatTime) }}</div>
</div>
</div>
<el-empty v-if="chatList.length <= 0" :image-size="60"></el-empty>
</el-scrollbar>
</div>
<div class="foot-box">
<div class="read" @click="onAllReadClick" v-if="dotNumInfo.chatNum > 0">标记当前页已读</div>
</div>
</el-tab-pane>
<el-tab-pane name="2">
<template #label>
<el-badge :show-zero="false" :value="dotNumInfo.sysMsgNum"> 系统 </el-badge>
</template>
<div class="content-box">
<el-scrollbar>
<div class="content-box-item" v-for="item in sysList">
<div class="left">
<svg-icon name="gonggao" color="#fff" size="16"></svg-icon>
</div>
<div class="content">
<div class="title">
{{ item.content }}
</div>
<div class="content-box-time">{{ formatTime(dayjs(item.addTime).valueOf()) }}</div>
</div>
<div v-if="item.isRead == 0">
<el-button text @click="handleRead(item)">已读</el-button>
</div>
</div>
<el-empty v-if="sysList.length <= 0" :image-size="60"></el-empty>
</el-scrollbar>
</div>
<div class="foot-box">
<div class="read" @click="onAllReadClick" v-if="dotNumInfo.sysMsgNum > 0">标记当前页已读</div>
</div>
</el-tab-pane>
</el-tabs>
</el-popover>
<noticeInfo ref="noticeInfoRef"></noticeInfo>
</div>
</template>
<script setup name="noticeIndex">
import { listMySysUserMsg, readSysUserMsg } from '@/api/system/sysusermsg'
import noticeInfo from './noticeInfo.vue'
import useSocketStore from '@/store/modules/socket'
import useUserStore from '@/store/modules/user'
import { dayjs } from 'element-plus'
import { formatTime } from '@/utils/index'
import settings from '@/settings'
const { proxy } = getCurrentInstance()
const socketStore = useSocketStore()
const noticeType = ref('0')
const noticeList = computed(() => {
return socketStore.noticeList
})
const allDotNum = computed(() => {
return socketStore.getAllDotNum
})
const chatList = computed(() => {
return socketStore.getSessionList(useUserStore().userId)
})
/**
* 小红点信息
*/
const dotNumInfo = computed(() => {
return socketStore.getMsgNum
})
const noticeInfoRef = ref()
/**
* 查看公告详情
* @param {*} item
* @param {*} type
*/
function handleDetails(item, type) {
var info = {}
if (type == 0) {
info = { type, ...item, title: item.noticeTitle }
} else if (type == 1) {
info = { type, title: item.fromUser.nickName, userId: item.userId }
}
proxy.$refs['noticeInfoRef'].handleOpen(type, info)
}
/**
* 已读消息
* @param {*} item
*/
function handleRead(item) {
readSysUserMsg(item.msgId, 1).then(() => {
init()
})
}
// 全部已读点击
function onAllReadClick() {
if (noticeType.value == 2) {
readSysUserMsg(0, 1).then(() => {
init()
})
}
useSocketStore().readAll(noticeType.value)
}
/**
* 已读通知
*/
function handleReadNotice(item) {
useSocketStore().readPromptNotice(item.noticeId)
}
// 前往通知中心点击
function handleToNotice() {
window.open(settings.noticeUrl)
}
const sysList = ref([])
function init() {
listMySysUserMsg({ isRead: 0, msgType: 1 }).then((res) => {
const { result, totalNum } = res.data
sysList.value = result
socketStore.setSysMsgNum(totalNum)
})
}
init()
</script>
<style lang="scss" scoped>
.content-box {
font-size: 13px;
height: 200px;
overflow: hidden;
.content-box-item {
margin-bottom: 10px;
margin-right: 10px;
display: flex;
cursor: pointer;
.left {
display: flex;
align-items: center;
border-radius: 50%;
width: 30px;
height: 30px;
justify-content: center;
background: linear-gradient(23deg, rgba(110, 227, 225, 0.18) 0%, #00d9f5 100%);
}
&:hover {
color: var(--el-color-primary);
}
.content {
margin-left: 8px;
word-wrap: break-word;
word-break: break-all;
position: relative;
flex: 1;
.name {
color: var(--el-color-primary);
}
}
.content-box-time {
margin-top: 3px;
color: #ccc;
}
}
}
.foot-box {
color: var(--el-color-primary);
font-size: 13px;
cursor: pointer;
height: 25px;
line-height: 25px;
border-top: 1px solid #eee;
.read {
top: 7px;
right: 0;
color: var(--el-color-primary);
cursor: pointer;
z-index: 2;
font-size: 12px;
float: left;
}
.goNotice {
float: right;
}
}
</style>