275 lines
10 KiB
Vue
275 lines
10 KiB
Vue
<template>
|
||
<a-list item-layout="horizontal" :data-source="messageList" :locale="locale">
|
||
<template #loadMore>
|
||
<div
|
||
v-if="messageList && messageList.length > 0 && !loadEndStatus && !loadingMoreStatus"
|
||
:style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
|
||
>
|
||
<a-button @click="onLoadMore">加载更多</a-button>
|
||
</div>
|
||
<div
|
||
v-if="messageList && messageList.length > 0 && loadEndStatus"
|
||
:style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
|
||
>
|
||
没有更多了
|
||
</div>
|
||
</template>
|
||
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>
|
||
<template #actions>
|
||
<a-rate :value="item.starFlag=='1'?1:0" :count="1" @click="clickStar(item)" style="cursor: pointer" disabled />
|
||
</template>
|
||
|
||
<!-- update-begin-author:taoyan date:2023-5-10 for: QQYUN-4744【系统通知】6、系统通知@人后，对方看不到是哪个表单@的，没有超链接。 -->
|
||
<a-list-item-meta>
|
||
<template #description>
|
||
<div v-if="isFormComment(item)" style="background: #f7f7f7;color: #555;padding: 2px 5px;white-space:nowrap;overflow: hidden">
|
||
<div v-html="getHtml(item.msgContent)"></div>
|
||
</div>
|
||
<div>
|
||
{{item.createTime}}
|
||
</div>
|
||
</template>
|
||
<!-- update-end-author:taoyan date:2023-5-10 for: QQYUN-4744【系统通知】6、系统通知@人后，对方看不到是哪个表单@的，没有超链接。 -->
|
||
|
||
<template #title>
|
||
<div style="position: relative">
|
||
<!-- <span style="display: inline-block; position: absolute; left: -16px">
|
||
<exclamation-outlined v-if="noRead(item)" title="未读消息" style="color: red" />
|
||
</span>-->
|
||
|
||
<span>{{ getMsgCategory(item) }}</span>
|
||
<span v-if="item.busType == 'bpm' || item.busType == 'bpm_cc' || item.busType == 'msg_node' || item.busType == 'bpm_msg_node'" class="bpm-cuiban-content" v-html="item.msgContent">
|
||
</span>
|
||
<!-- <a-tooltip v-else>-->
|
||
<!-- <template #title>-->
|
||
<!-- <div v-html="item.msgContent"></div>-->
|
||
<!-- </template>-->
|
||
<!-- {{ item.titile }}-->
|
||
<!-- </a-tooltip>-->
|
||
<span v-else>{{ item.titile }}</span>
|
||
|
||
<a @click="showMessageDetail(item)" style="margin-left: 16px">{{ getHrefText(item) }}</a>
|
||
</div>
|
||
</template>
|
||
<template #avatar>
|
||
<template v-if="item.busType=='email'">
|
||
<a-badge dot v-if="noRead(item)" class="msg-no-read">
|
||
<a-avatar style="background: #79919d"><mail-outlined style="font-size: 16px" title="未读消息"/></a-avatar>
|
||
</a-badge>
|
||
<a-avatar v-else style="background: #79919d"><mail-outlined style="font-size: 16px"/></a-avatar>
|
||
</template>
|
||
|
||
<template v-else-if="item.busType=='bpm_task'">
|
||
<a-badge dot v-if="noRead(item)" class="msg-no-read">
|
||
<a-avatar style="background: #79919d"><interaction-outlined style="font-size: 16px" title="未读消息"/></a-avatar>
|
||
</a-badge>
|
||
<a-avatar v-else style="background: #79919d"><interaction-outlined style="font-size: 16px"/></a-avatar>
|
||
</template>
|
||
|
||
<template v-else-if="item.busType=='bpm'">
|
||
<a-badge dot v-if="noRead(item)" class="msg-no-read">
|
||
<a-avatar style="background: #79919d"><alert-outlined style="font-size: 16px" title="未读消息"/></a-avatar>
|
||
</a-badge>
|
||
<a-avatar v-else style="background: #79919d"><alert-outlined style="font-size: 16px"/></a-avatar>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<a-badge dot v-if="noRead(item)" class="msg-no-read">
|
||
<a-avatar style="background: #79919d"><bell-filled style="font-size: 16px" title="未读消息"/></a-avatar>
|
||
</a-badge>
|
||
<a-avatar v-else style="background: #79919d"><bell-filled style="font-size: 16px" /></a-avatar>
|
||
</template>
|
||
</template>
|
||
</a-list-item-meta>
|
||
</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
|
||
<!-- update-begin-author:liusq date:2023-10-26 for: [QQYUN-6713]系统通知打开弹窗修改 -->
|
||
<keep-alive>
|
||
<component v-if="currentModal" v-bind="bindParams" :key="currentModal" :is="currentModal" @register="modalRegCache[currentModal].register" />
|
||
</keep-alive>
|
||
<!-- update-end-author:liusq date:2023-10-26 for: [QQYUN-6713]系统通知打开弹窗修改 -->
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { FilterOutlined, CloseOutlined, BellFilled, ExclamationOutlined, MailOutlined,InteractionOutlined, AlertOutlined } from '@ant-design/icons-vue';
|
||
import { useSysMessage, useMessageHref } from './useSysMessage';
|
||
import {getGloablEmojiIndex, useEmojiHtml} from "/@/components/jeecg/comment/useComment";
|
||
import { ref, h, watch } from "vue";
|
||
|
||
export default {
|
||
name: 'SysMessageList',
|
||
components: {
|
||
FilterOutlined,
|
||
CloseOutlined,
|
||
BellFilled,
|
||
ExclamationOutlined,
|
||
MailOutlined,
|
||
InteractionOutlined,
|
||
AlertOutlined,
|
||
},
|
||
props:{
|
||
star: {
|
||
type:Boolean,
|
||
default: false
|
||
},
|
||
isLowApp:{
|
||
type:Boolean,
|
||
default: false
|
||
},
|
||
messageCount: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
cancelStarAfterDel: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
emits:['close', 'detail', 'clear', 'close-modal'],
|
||
setup(props, {emit}){
|
||
const { messageList,loadEndStatus,loadingMoreStatus,onLoadMore,noRead, getMsgCategory, getHrefText, searchParams, reset, loadData, updateStarMessage } = useSysMessage(setLocaleText);
|
||
|
||
//系统消息
|
||
const messageCount = ref(0);
|
||
|
||
function reload(params){
|
||
let { fromUser, rangeDateKey, rangeDate } = params;
|
||
searchParams.fromUser = fromUser||'';
|
||
searchParams.rangeDateKey = rangeDateKey||'';
|
||
searchParams.rangeDate = rangeDate||[];
|
||
//list列表为空时赋初始值
|
||
locale.value = { locale: { emptyText: `<a-empty />` }};
|
||
if(props.star===true){
|
||
searchParams.starFlag = '1'
|
||
}else{
|
||
searchParams.starFlag = ''
|
||
}
|
||
reset();
|
||
loadData();
|
||
}
|
||
|
||
function clickStar(item){
|
||
console.log(item)
|
||
updateStarMessage(item);
|
||
// update-begin--author:liaozhiyang---date:20240717---for：【TV360X-349】通知-标星消息tab列表取消标星后，该条信息从标星列表移除
|
||
if (item.starFlag == '1' && props.cancelStarAfterDel) {
|
||
const findIndex = messageList.value.findIndex((item) => item.id === item.id);
|
||
if (findIndex !== -1) {
|
||
messageList.value.splice(findIndex, 1);
|
||
return;
|
||
}
|
||
}
|
||
// update-end--author:liaozhiyang---date:20240717---for：【TV360X-349】通知-标星消息tab列表取消标星后，该条信息从标星列表移除
|
||
if(item.starFlag=='1'){
|
||
item.starFlag = '0'
|
||
}else{
|
||
item.starFlag = '1'
|
||
}
|
||
}
|
||
|
||
// update-begin-author:taoyan date:2023-5-10 for: QQYUN-4744【系统通知】6、系统通知@人后，对方看不到是哪个表单@的，没有超链接
|
||
const { goPage, currentModal, modalRegCache, bindParams, isFormComment } = useMessageHref(emit, props);
|
||
//const emojiIndex = inject('$globalEmojiIndex')
|
||
const emojiIndex = getGloablEmojiIndex()
|
||
const { getHtml } = useEmojiHtml(emojiIndex);
|
||
// update-end-author:taoyan date:2023-5-10 for: QQYUN-4744【系统通知】6、系统通知@人后，对方看不到是哪个表单@的，没有超链接
|
||
|
||
function showMessageDetail(record){
|
||
record.readFlag = '1'
|
||
goPage(record);
|
||
emit('close', record.id)
|
||
//update-begin---author:wangshuai---date:2024-06-11---for:【TV360X-791】收到邮件通知，点击回复，应该把通知公告列表关闭---
|
||
if(record.busType==='email'){
|
||
emit('close-modal')
|
||
}
|
||
//update-end---author:wangshuai---date:2024-06-11---for:【TV360X-791】收到邮件通知，点击回复，应该把通知公告列表关闭---
|
||
}
|
||
|
||
//返回list列表为空数据时展示的内容
|
||
const locale = ref({});
|
||
|
||
/**
|
||
* 未读点击事件
|
||
*/
|
||
function noReadClick() {
|
||
emit('clear')
|
||
}
|
||
|
||
/**
|
||
* 设置list为空的时候提示文本
|
||
*
|
||
*/
|
||
function setLocaleText() {
|
||
//update-begin---author:wangshuai---date:2024-04-24---for:【QQYUN-9105】未读有问题---
|
||
let rangeDateKey = searchParams.rangeDateKey;
|
||
let value = messageCount.value;
|
||
if (value > 0 && !props.star && rangeDateKey && rangeDateKey === '7day') {
|
||
//update-end---author:wangshuai---date:2024-04-24---for:【QQYUN-9105】未读有问题---
|
||
locale.value = {
|
||
emptyText: h(
|
||
'span',
|
||
{
|
||
style: {'color': 'rgb(255,154,0)', 'cursor': 'pointer', 'text-align': 'left', 'display': 'block'},
|
||
onClick: () => {
|
||
noReadClick();
|
||
},
|
||
}, `还剩余未读消息(${value > 99 ? '99+' : value})`)
|
||
}
|
||
} else {
|
||
locale.value = { locale: {emptyText: `<a-empty />` }};
|
||
}
|
||
}
|
||
|
||
//监听信息数量
|
||
watch(() => props.messageCount, (value) => {
|
||
messageCount.value = value;
|
||
}, { immediate: true })
|
||
|
||
return {
|
||
messageList,
|
||
loadEndStatus,
|
||
loadingMoreStatus,
|
||
onLoadMore,
|
||
noRead,
|
||
getMsgCategory,
|
||
getHrefText,
|
||
reload,
|
||
clickStar,
|
||
showMessageDetail,
|
||
isFormComment,
|
||
getHtml,
|
||
modalRegCache,
|
||
currentModal,
|
||
bindParams,
|
||
locale,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.msg-no-read{
|
||
:deep(.ant-badge-dot){
|
||
top: 5px;
|
||
right: 3px;
|
||
}
|
||
}
|
||
:deep(.bpm-cuiban-content) p{
|
||
display: inherit;
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
/** QQYUN-5688 【样式】鼠标放上去怎么不是手 */
|
||
:deep(.ant-rate-disabled){
|
||
.ant-rate-star{
|
||
cursor: pointer !important;
|
||
}
|
||
}
|
||
</style>
|