Cold_erp_web/src/layouts/Header/Notice.vue

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import type { TabsPaneContext } from 'element-plus'
import { User_News_See } from '@/api/user/index'

interface NoticeType {
  CreateTime: string
  Id: number
  T_Tag: number
  T_Title: string
  T_Url: string
  T_uuid: string
}

const router = useRouter()
const globalStore = GlobalStore()
const activeName = ref('first')
const newsList = computed<NoticeType[]>(() => {
  return globalStore.noticeList
})

/**
 * 查看通知消息
 */
const previewNotice = async (item: NoticeType) => {
  router.push(item.T_Url)
  const res: any = await User_News_See({ User_tokey: globalStore.GET_User_tokey, Id: item.Id })
  if (res.Code) {
    ElMessage({
      type: 'success',
      message: '确认查看消息！'
    })
    globalStore.SET_NoticeList(
      newsList.value.filter((notice: NoticeType) => item.Id !== notice.Id),
      true
    )
  }
}

const handleClick = (tab: TabsPaneContext) => {
  const { props } = tab
  globalStore.SET_NoticeList([], true)
  globalStore.SET_NoticePage(1)
  switch (props.name) {
    case 'first':
      globalStore.SET_User_News_List()
      break
    case 'second':
      globalStore.SET_User_News_List(1)
      break
  }
}

onMounted(() => {
  const tabs__content = document.querySelector('#notice')?.getElementsByClassName('el-tabs__content')[0]

  tabs__content?.addEventListener('scroll', (e: any) => {
    const { target } = e
    if (
      target.scrollHeight - target.scrollTop === target.clientHeight &&
      globalStore.noticeTotal !== newsList.value.length
    ) {
      globalStore.SET_NoticePage()
      globalStore.SET_User_News_List()
    }
  })

  if (!globalStore.noticeList.length) {
    globalStore.SET_User_News_List()
  }
})

defineExpose({
  newsList: newsList.value
})
</script>
<template>
  <div class="notice">
    <el-tabs v-model="activeName" @tab-click="handleClick" id="notice">
      <transition-group
        appear
        leave-active-class="animate__animated animate__fadeOutLeft"
        enter-active-class="animate__animated animate__fadeInLeft"
      >
        <el-tab-pane label="未读" name="first" key="first">
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in newsList" :key="item.T_uuid" @click="previewNotice(item)">
              <div class="item">
                <div class="item-box">
                  <el-badge :is-dot="item.T_Tag === 0"
                    ><div class="item-content">{{ item.T_Title }}</div></el-badge
                  >
                </div>
                <span>{{ item.CreateTime.split(' ')[0] }}</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-tab-pane>
        <el-tab-pane label="全部" name="second" key="second">
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in newsList" :key="item.T_uuid" @click="previewNotice(item)">
              <div class="item">
                <div class="item-box">
                  <el-badge :is-dot="item.T_Tag === 0"
                    ><div class="item-content">{{ item.T_Title }}</div></el-badge
                  >
                </div>
                <span>{{ item.CreateTime.split(' ')[0] }}</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-tab-pane>
      </transition-group>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.notice {
  padding: 20px;
  width: 500px;
  height: 270px;
  overflow: hidden;
  :deep(.el-tabs__content) {
    height: 180px;
    overflow-y: scroll;
  }
  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .item-box {
      width: 330px;
      .el-badge {
        max-width: 100%;
        :deep(.el-badge__content.is-fixed.is-dot) {
          left: 0px;
          margin-left: -12px;
        }
        .item-content {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 100%;
          display: inline-block;
        }
      }
    }
  }
}
</style>