564 lines
13 KiB
Vue
564 lines
13 KiB
Vue
<!--
|
|
* @Author: hisense.liangjunhua
|
|
* @Date: 2022-06-21 11:55:07
|
|
* @LastEditors: hisense.liangjunhua
|
|
* @LastEditTime: 2022-07-27 15:57:26
|
|
* @Description: 告诉大家这是什么
|
|
-->
|
|
<template>
|
|
<div class="notice-list">
|
|
<a-breadcrumb>
|
|
<a-breadcrumb-item>
|
|
<a @click="goBack('/home')">共享门户</a>
|
|
</a-breadcrumb-item>
|
|
<a-breadcrumb-item>消息中心</a-breadcrumb-item>
|
|
</a-breadcrumb>
|
|
<div class="top">
|
|
<div class="left">
|
|
<div class="item" :class="{ select: selectNav == nav.key }" v-for="nav in navList" :key="nav.key">
|
|
<i :class="nav.key" @click="changeNav(nav)"></i>
|
|
<div>{{ nav.title + '(' + nav.num + ')' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn">
|
|
<div class="left">
|
|
<a-select ref="select" v-model:value="value" style="width: 120px" @focus="focus" @change="handleChange">
|
|
<a-select-option value="全部消息">全部消息</a-select-option>
|
|
<a-select-option value="已读消息">已读消息</a-select-option>
|
|
<a-select-option value="未读消息">未读消息</a-select-option>
|
|
</a-select>
|
|
<div class="check">
|
|
<div>
|
|
共
|
|
<span>{{ total }}</span>
|
|
条消息
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<a-checkbox :checked="
|
|
selectData.length !== 0 && selectData.length === data.length
|
|
" stlye="margin-right:0.3rem;" @change="changeCheckAll()"></a-checkbox>
|
|
<div>全选当前页</div>
|
|
<span @click="read()">标记为已读</span>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<a-list item-layout="horizontal" :data-source="data">
|
|
<template #renderItem="{ item }" @click="goNoticePage(item)">
|
|
<a-list-item>
|
|
<a-list-item-meta description="">
|
|
<template #title>
|
|
<div class="left" @click="read(item)" :class="item.readStatus === 0 ? 'bold-text' : ''">
|
|
{{ item.content }}
|
|
</div>
|
|
<div class="right">{{ '发布时间：' + item.senderDate }}</div>
|
|
</template>
|
|
<template #avatar>
|
|
<a-checkbox :checked="item.checked" @change="changeCheckBox(item)"></a-checkbox>
|
|
<a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
|
|
<a-avatar :src="item.src" />
|
|
</a-badge>
|
|
<a-avatar :src="item.src" v-show="item.readStatus == 1" />
|
|
</template>
|
|
</a-list-item-meta>
|
|
</a-list-item>
|
|
</template>
|
|
</a-list>
|
|
</div>
|
|
<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" show-less-items
|
|
:show-size-changer="false" @change="changePageNum" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onBeforeUnmount } from 'vue'
|
|
import mybus from '@/myplugins/mybus'
|
|
import { message } from 'ant-design-vue'
|
|
import { mynotice, mynoticeRead } from '@/api/home'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const total = ref(0)
|
|
const pageSize = ref(8)
|
|
const pageNum = ref(1)
|
|
const value = ref('全部消息')
|
|
const obj = reactive({ page: pageNum.value, limit: pageSize.value })
|
|
const navList = reactive([
|
|
{
|
|
title: '全部',
|
|
key: 'all',
|
|
num: 0,
|
|
},
|
|
{
|
|
title: '通知',
|
|
key: 'notice',
|
|
num: 0,
|
|
},
|
|
{
|
|
title: '评论',
|
|
key: 'comment',
|
|
num: 0,
|
|
},
|
|
{
|
|
title: '其它',
|
|
key: 'other',
|
|
num: 0,
|
|
},
|
|
])
|
|
const selectNav = ref('all')
|
|
const selectData = ref([])
|
|
const data = ref([])
|
|
const changeNav = (nav) => {
|
|
selectNav.value = nav.key
|
|
if (nav.key === 'all') {
|
|
delete obj.from
|
|
} else {
|
|
obj.from = nav.title
|
|
}
|
|
value.value = '全部消息'
|
|
delete obj.readStatus
|
|
init()
|
|
}
|
|
const changeCheckBox = (item) => {
|
|
item.checked = !item.checked
|
|
if (item.checked) {
|
|
selectData.value.push(item.id)
|
|
} else {
|
|
selectData.value = selectData.value.filter((val) => val !== item.id)
|
|
}
|
|
}
|
|
const changeCheckAll = () => {
|
|
if (selectData.value.length == data.value.length) {
|
|
selectData.value = []
|
|
data.value.forEach((val) => {
|
|
val.checked = false
|
|
})
|
|
} else {
|
|
selectData.value = []
|
|
data.value.forEach((val) => {
|
|
val.checked = true
|
|
selectData.value.push(val.id)
|
|
})
|
|
}
|
|
}
|
|
const changePageNum = (page) => {
|
|
pageNum.value = page
|
|
obj.page = pageNum.value
|
|
init()
|
|
}
|
|
const handleChange = () => {
|
|
pageNum.value = 1
|
|
obj.page = pageNum.value
|
|
switch (value.value) {
|
|
case '全部消息':
|
|
delete obj.readStatus
|
|
break
|
|
case '已读消息':
|
|
obj.readStatus = 1
|
|
break
|
|
case '未读消息':
|
|
obj.readStatus = 0
|
|
break
|
|
default:
|
|
delete obj.readStatus
|
|
break
|
|
}
|
|
init()
|
|
}
|
|
const goBack = (url) => {
|
|
router.push({
|
|
path: url,
|
|
})
|
|
}
|
|
|
|
// 申请状态
|
|
let applyStateObj = {
|
|
0: '待办',
|
|
1: '已办',
|
|
}
|
|
let typeObj = {
|
|
0: '申请前台',
|
|
1: '申请后台',
|
|
2: '上架前台',
|
|
3: '上架后台',
|
|
4: '下架前台',
|
|
5: '下架后台',
|
|
6: '需求前台',
|
|
7: '需求后台',
|
|
8: '评论前台',
|
|
9: '评论后台',
|
|
10: '会议室前台',
|
|
11: '会议室后台',
|
|
12: '其他'
|
|
}
|
|
|
|
// 对应的后台管理的页面
|
|
let pageObj = {
|
|
'申请后台': {
|
|
0: 'myAgent-CompetencyApplication',
|
|
1: 'hasToDoTasks-CompetencyApplication',
|
|
},
|
|
'上架后台': {
|
|
0: 'myAgent-AbilityResourceShelf',
|
|
1: 'hasToDoTasks-AbilityResourceShelf',
|
|
},
|
|
'下架后台': {
|
|
0: 'myAgent-AbilityResourcesRemoved',
|
|
1: 'hasToDoTasks-AbilityResourcesRemoved',
|
|
},
|
|
'需求后台': {
|
|
0: 'myAgent-ApplicationforCompetencyRequirements',
|
|
1: 'hasToDoTasks-ApplicationForCompetencyRequirements',
|
|
},
|
|
'评论后台': {
|
|
0: 'myAgent-CommentModeration',
|
|
1: 'hasToDoTasks-CommentModeration',
|
|
},
|
|
'会议室后台': {
|
|
0: 'activiti-RoomExamineAdmin',
|
|
1: 'activiti-RoomExamineAdmin',
|
|
},
|
|
}
|
|
|
|
// 前台tab名称
|
|
const tabTypeObj = {
|
|
'申请前台': '能力申请',
|
|
'上架前台': '能力上架',
|
|
'下架前台': '能力下架',
|
|
'需求前台': '需求评论',
|
|
'评论前台': '需求评论',
|
|
'会议室前台': '会议室前台'
|
|
}
|
|
|
|
// 会议室后台
|
|
const goPage = (item) => {
|
|
if (item.jumpUrl && item.type !== 12) {
|
|
let typeText = typeObj[item.type];
|
|
console.log('item------------>', item);
|
|
console.log('typeText类型------------>', typeText);
|
|
// "http://192.168.124.236:9796/#/personalCenter?tabTypeName=能力申请"
|
|
let _url = item.jumpUrl && item.jumpUrl.split('#')
|
|
let openType = '_self';
|
|
// 如果是跳转到后台管理，重新打开页面
|
|
if (typeText && typeText.indexOf('后台') !== -1) {
|
|
openType = '_blank'
|
|
} else {
|
|
if (_url[1] && _url[1].indexOf('personalCenter') !== -1) {
|
|
window.sessionStorage.setItem('type', JSON.stringify('apply'))
|
|
}
|
|
}
|
|
window.open(item.jumpUrl, openType)
|
|
|
|
}
|
|
return;
|
|
// if (typeText) {
|
|
// console.log('typeText类型------------>', typeText);
|
|
// // 是后台，跳转到后台相关页面
|
|
// if (typeText.indexOf('后台') !== -1) {
|
|
// let _applyState = item.applyState
|
|
// let _page = pageObj[typeText][_applyState]
|
|
// window.open(window.SITE_CONFIG.backUrl + `/#/${_page}`)
|
|
// } else if (typeText.indexOf('前台') !== -1) {
|
|
// if (typeText == '会议室前台') {
|
|
// router.push({
|
|
// path: '/DetailsPageconetent',
|
|
// query: {
|
|
// select: '基础设施',
|
|
// formPage: 'noticePage'
|
|
// },
|
|
// })
|
|
// } else {
|
|
// window.sessionStorage.setItem('type', JSON.stringify('apply'))
|
|
// router.push({
|
|
// path: '/personalCenter',
|
|
// query: {
|
|
// tabTypeName: tabTypeObj[typeText] || '能力申请',
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
}
|
|
|
|
// 更改消息状态
|
|
const read = (item) => {
|
|
if (selectData.value.length === 0 && !item) {
|
|
return message.error('未选择消息！')
|
|
}
|
|
console.log(selectData.value)
|
|
if (item) {
|
|
// 已读状态,跳转页面
|
|
if (item.readStatus === 1) {
|
|
return goPage(item)
|
|
}
|
|
mynoticeRead(item.id).then((res) => {
|
|
if (res.data.code == 0) {
|
|
message.success('通知已读！')
|
|
mybus.emit('getMynotice')
|
|
init()
|
|
// 页面跳转
|
|
setTimeout(() => {
|
|
goPage(item)
|
|
}, 1500)
|
|
} else {
|
|
message.error('操作失败！')
|
|
}
|
|
}).catch(err => {
|
|
message.error(err)
|
|
})
|
|
} else {
|
|
console.log('提交')
|
|
selectData.value.map((val) => {
|
|
mynoticeRead(val).then((res) => {
|
|
if (res.data.code == 0) {
|
|
// message.success('操作成功！')
|
|
mybus.emit('getMynotice')
|
|
init()
|
|
} else {
|
|
message.error('操作失败！')
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
const init = () => {
|
|
// from 通知 评论 readStatus 0 未读 1 已读
|
|
mynotice(obj).then((res) => {
|
|
console.log('消息=============>', res.data.data)
|
|
res.data.data.list.forEach((val) => {
|
|
if (val.from === '通知') {
|
|
val.src = require('@/assets/mynoticeView/notice.png')
|
|
} else if (val.from === '评论') {
|
|
val.src = require('@/assets/mynoticeView/comment.png')
|
|
} else if (val.from === '其它') {
|
|
val.src = require('@/assets/mynoticeView/other.png')
|
|
}
|
|
val.checked = false
|
|
})
|
|
data.value = res.data.data.list
|
|
total.value = res.data.data.total
|
|
selectData.value = []
|
|
})
|
|
}
|
|
navList.forEach((val) => {
|
|
if (val.title === '全部') {
|
|
mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
|
|
val.num = res.data.data.total
|
|
})
|
|
} else {
|
|
mynotice({
|
|
page: pageNum.value,
|
|
limit: pageSize.value,
|
|
from: val.title,
|
|
}).then((res) => {
|
|
val.num = res.data.data.total
|
|
})
|
|
}
|
|
})
|
|
init()
|
|
mybus.on('noticeListInit', () => {
|
|
init()
|
|
})
|
|
onBeforeUnmount(() => {
|
|
mybus.off('noticeListInit')
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.notice-list {
|
|
padding: 0.64rem 0 0;
|
|
background: #f4f5f8;
|
|
|
|
.ant-breadcrumb {
|
|
padding: 0.1rem 3.1rem;
|
|
}
|
|
|
|
.top {
|
|
background: #fff;
|
|
padding: 0.18rem 3.1rem 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
|
|
|
|
.left {
|
|
display: flex;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 1.28rem;
|
|
margin-bottom: 0.16rem;
|
|
border-bottom: 3px solid #fff;
|
|
|
|
i {
|
|
display: inline-block;
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
margin-bottom: 0.15rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.all {
|
|
background: url('~@/assets/mynoticeView/all.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.notice {
|
|
background: url('~@/assets/mynoticeView/notice.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.comment {
|
|
background: url('~@/assets/mynoticeView/comment.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.other {
|
|
background: url('~@/assets/mynoticeView/other.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.item:nth-of-type(1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.select {
|
|
border-bottom: 3px solid #0058e1;
|
|
color: #0058e1;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 0.32rem;
|
|
|
|
div {
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.reset {
|
|
color: #0058e1;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
background: #fff;
|
|
margin-top: 0.16rem;
|
|
padding: 0.14rem 3.1rem 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.ant-select {
|
|
margin-right: 0.24rem;
|
|
}
|
|
|
|
|
|
.check {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
div {
|
|
margin-left: 0.24rem;
|
|
|
|
span {
|
|
font-size: 18px;
|
|
color: #0058e1;
|
|
}
|
|
}
|
|
|
|
div:nth-of-type(1) {
|
|
margin-left: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
div {
|
|
margin: 0 0.1rem;
|
|
}
|
|
|
|
span {
|
|
cursor: pointer;
|
|
color: #0058e1;
|
|
text-align: center;
|
|
align-self: center;
|
|
padding: 0.05rem 0.1rem;
|
|
}
|
|
|
|
span:hover {
|
|
background: rgba(0, 88, 225, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
background: #fff;
|
|
padding: 0 3.1rem;
|
|
height: 4.75rem;
|
|
overflow-y: scroll;
|
|
|
|
:deep(.ant-list-item-meta) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.ant-checkbox-wrapper {
|
|
margin-right: 0.3rem;
|
|
}
|
|
|
|
.ant-list-item-meta-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.bold-text {
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.left {
|
|
width: 9.2rem;
|
|
max-height: 0.43rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.ant-badge-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.left:hover {
|
|
color: #0058e1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-pagination {
|
|
background: #fff;
|
|
margin-top: 0;
|
|
padding: 0.2rem 0 0.2rem;
|
|
}
|
|
}
|
|
</style>
|