JeecgBoot/jeecgboot-vue3/src/views/system/message/components/SysMessageList.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 :style="{ background: item?.izTop && item.izTop == 1 ? '#f7f7f7' : 'auto' }">
        <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, noticeType } = params;
        searchParams.fromUser = fromUser||'';
        searchParams.rangeDateKey = rangeDateKey||'';
        searchParams.rangeDate = rangeDate||[];
        searchParams.noticeType = noticeType || '';
        //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>