<template>
|
<a-list item-layout="horizontal" :data-source="messageList">
|
<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>
|
|
<a-list-item-meta :description="item.createTime">
|
<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'" 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>
|
|
<a @click="showMessageDetail(item)" style="margin-left: 16px">查看详情</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>
|
</template>
|
|
<script>
|
|
import { FilterOutlined, CloseOutlined, BellFilled, ExclamationOutlined, MailOutlined,InteractionOutlined, AlertOutlined } from '@ant-design/icons-vue';
|
import { useSysMessage, useMessageHref } from './useSysMessage';
|
|
|
export default {
|
name: 'SysMessageList',
|
components: {
|
FilterOutlined,
|
CloseOutlined,
|
BellFilled,
|
ExclamationOutlined,
|
MailOutlined,
|
InteractionOutlined,
|
AlertOutlined
|
},
|
props:{
|
star: {
|
type:Boolean,
|
default: false
|
}
|
},
|
emits:['close', 'detail'],
|
setup(props, {emit}){
|
const { messageList,loadEndStatus,loadingMoreStatus,onLoadMore,noRead, getMsgCategory, searchParams, reset, loadData, updateStarMessage } = useSysMessage();
|
|
function reload(params){
|
let { fromUser, rangeDateKey, rangeDate } = params;
|
searchParams.fromUser = fromUser||'';
|
searchParams.rangeDateKey = rangeDateKey||'';
|
searchParams.rangeDate = rangeDate||[];
|
if(props.star===true){
|
searchParams.starFlag = '1'
|
}else{
|
searchParams.starFlag = ''
|
}
|
reset();
|
loadData();
|
}
|
|
function clickStar(item){
|
console.log(item)
|
updateStarMessage(item);
|
if(item.starFlag=='1'){
|
item.starFlag = '0'
|
}else{
|
item.starFlag = '1'
|
}
|
}
|
|
const { goPage } = useMessageHref(emit);
|
|
function showMessageDetail(record){
|
record.readFlag = '1'
|
goPage(record);
|
emit('close', record.id)
|
}
|
|
return {
|
messageList,
|
loadEndStatus,
|
loadingMoreStatus,
|
onLoadMore,
|
noRead,
|
getMsgCategory,
|
reload,
|
clickStar,
|
showMessageDetail
|
}
|
}
|
};
|
</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;
|
}
|
</style>
|
