web_dist/src/layout/Header/functionList/message.vue

<template>
  <div title="消息" @click="showMessageLayer">
    <el-badge :hidden="unreadCount === 0" :value="unreadCount" :max="99" type="danger">
      <i class="sfont el-icon-message"></i>
    </el-badge>
  </div>
  <div v-if="messageLayerVisible" class="message-layer">
    <div style="position: absolute; top: 8px; left: 520px"><el-button circle type="info" plain icon="el-icon-close" @click="messageLayerVisible = false"></el-button></div>
    <div class="sender">
      <div v-for="(item, index) in allSenders" :key="index" :style="activated(item.sender)" @click="handleClickSender(item)">
        <el-badge :value="item.unreadCount" :max="99" type="danger" :hidden="item.unreadCount === 0">
          <div class="sender-info">{{ item.senderName }}</div>
        </el-badge>
      </div>
    </div>
    <div class="content">
      <p v-show="currentSender.senderName">{{ currentSender.senderName }}</p>
      <div v-for="(itm, index) in allMessages" :key="index">
        <div class="content-title-box">
          <div class="content-title">{{ itm.title }}</div>
          <div class="content-time">{{ itm.sendDatetime }}</div>
        </div>
        <div class="content-box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ itm.content }}</div>
      </div>
    </div>
  </div>
  <el-dialog title="重要系统通知" v-model="systemMessages.show" :append-to-body="true" :destroy-on-close="true" center>
    <div class="system-message-time">{{ systemMessages.list[systemMessages.current].sendDatetime }}</div>
    <div class="system-message-content">{{ systemMessages.list[systemMessages.current].content }}</div>
    <div class="system-message-footer">
      <el-button type="primary" icon="el-icon-arrow-left" :disabled="systemMessages.current === 0" circle title="上一条" @click="messageIndexIncrease(-1)"></el-button>
      <span class="system-message-count">{{ systemMessages.current + 1 }} / {{ systemMessages.list.length }}</span>
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        :disabled="systemMessages.current === systemMessages.list.length - 1"
        circle
        title="下一条"
        @click="messageIndexIncrease(1)"
      ></el-button>
    </div>
  </el-dialog>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { onPageRefresh, fetchAllSenders, fetchAllMessages } from '../../../api/messages/index'
import store from '@/store'
import { clone } from '../../../utils/clone'

export default defineComponent({
  name: 'message',
  setup() {
    const unreadCount = ref(0)
    const systemMessages = reactive({
      show: false,
      list: [],
      current: 0,
    })
    const messageIndexIncrease = (val) => {
      systemMessages.current += val
      if (val === 1) {
        if (pushedMessageIds.value.indexOf(systemMessages.list[systemMessages.current].id) === -1) {
          store.commit('app/setSystemMessages', systemMessages.list[systemMessages.current].id)
        }
      }
    }
    const pushedMessageIds = ref([])

    const currentSender = ref({})
    const activated = (sender) => {
      return {
        background: currentSender.value.sender === sender ? '#0b85ff' : '',
        color: currentSender.value.sender === sender ? 'white' : '',
        fontWeight: currentSender.value.sender === sender ? 'bold' : '',
      }
    }
    const allSenders = ref([])
    const allMessages = ref([])
    const messageLayerVisible = ref(false)
    const showMessageLayer = () => {
      if (!messageLayerVisible.value) {
        fetchAllSenders().then((res) => {
          allSenders.value = res
          messageLayerVisible.value = true
          handleClickSender(res[0])
        })
      } else {
        messageLayerVisible.value = false
      }
    }

    const handleClickSender = (messageIndex) => {
      currentSender.value = messageIndex
      fetchAllMessages(messageIndex.sender).then((res) => {
        allMessages.value = res
        messageIndex.unreadCount = 0
      })
    }

    onMounted(() => {
      pushedMessageIds.value = clone(store.state.app.systemMessages)
      onPageRefresh(pushedMessageIds.value).then((res) => {
        unreadCount.value = res.unreadCount
        if (res.systemMessage.length > 0) {
          systemMessages.list = res.systemMessage
          systemMessages.current = 0
          systemMessages.show = true
          if (pushedMessageIds.value.indexOf(systemMessages.list[0].id) === -1) {
            pushedMessageIds.value.push(systemMessages.list[0].id)
            store.commit('app/setSystemMessages', systemMessages.list[0].id)
          }
        }
      })
    })

    return {
      allSenders,
      allMessages,
      unreadCount,
      currentSender,
      messageLayerVisible,
      systemMessages,
      activated,
      showMessageLayer,
      handleClickSender,
      messageIndexIncrease,
    }
  },
})
</script>

<style lang="scss" scoped>
i {
  font-size: 18px !important;
  cursor: pointer;
  font-size: 18px;
  &:focus {
    outline: none;
  }
}
.message-layer {
  display: flex;
  position: absolute;
  top: 60px;
  right: 100px;
  width: 560px;
  height: 460px;
  border: 1px solid gray;
  box-shadow: 2px 3px 10px 1px gray;
  background: white;
  z-index: 1000;
  .sender {
    width: 160px;
    border-right: 1px solid lightgray;
    > div {
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
      margin: 8px;
      border: 1px solid lightgray;
      &:hover {
        cursor: pointer;
        background: #409eff;
        color: white;
        font-weight: bold;
      }
    }
  }
  .content {
    width: 400px;
    padding: 8px;
    > p {
      margin-top: 8px;
      font-size: 15px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    > div {
      margin-bottom: 16px;
      border-radius: 4px;
      border: 2px solid rgb(31, 177, 31);
    }
  }
}
.sender-info {
  width: 106px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.content-title-box {
  display: flex;
  height: 26px;
  line-height: 26px;
  background: rgba(198, 231, 148, 0.452);
  padding: 0 4px;
  font-weight: bold;
  border-bottom: 1px dashed lightgray;
}
.content-title {
  width: 260px;
  padding-right: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.content-time {
  width: 130px;
}
.content-box {
  background: rgba(198, 231, 148, 0.452);
  padding: 4px;
}
.system-message-time {
  font-size: 13px;
  color: gray;
}
.system-message-content {
  margin-top: 16px;
  font-size: 16px;
  font-weight: bold;
}
.system-message-footer {
  margin-top: 20px;
  width: 100%;
  text-align: right;
  > span {
    font-size: 12px;
    color: gray;
    margin: 0 8px;
  }
}
</style>