web_dist/src/layout/function-list/message/Message.vue

<template>
  <div
    title="消息"
    @click="showMessageLayer"
    style="height: 18px"
    :class="unreadCount > 0 ? 'twinkle' : ''"
  >
    <el-badge
      :hidden="unreadCount <= 0"
      :value="unreadCount"
      :max="99"
      type="danger"
    >
      <el-icon>
        <Message />
      </el-icon>
    </el-badge>
  </div>
  <MessageDialog v-model="messageLayerVisible" />
  <el-dialog
    title="重要系统通知"
    v-model="systemMessages.show"
    :append-to-body="true"
    :destroy-on-close="true"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="system-message-time">
      {{ systemMessages.list[systemMessages.current].sendDatetime }}
    </div>
    <pre class="system-message-content">{{
      systemMessages.list[systemMessages.current].content
    }}</pre>
    <div class="system-message-footer">
      <el-button
        type="primary"
        icon="ArrowLeft"
        :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="Arrow-right"
        :disabled="systemMessages.current === systemMessages.list.length - 1"
        circle
        title="下一条"
        @click="messageIndexIncrease(1)"
      ></el-button>
    </div>
    <div style="width: 100%; text-align: right; margin-top: -30px">
      <el-button
        icon="Close"
        type="danger"
        :disabled="systemMessages.current !== systemMessages.list.length - 1"
        @click="systemMessages.show = false"
        >关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, onMounted, ref, reactive } from "vue";
import { onPageRefresh } from "@/api/messages";
import { useSystemStore } from "@/pinia/system-store";
import MessageDialog from "@/layout/function-list/message/MessageDialog.vue";

const systemStore = useSystemStore();
const unreadCount = computed(() => {
  return systemStore.unreadMessageCount;
});
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
    ) {
      systemStore.pushSystemMessage(
        systemMessages.list[systemMessages.current].id
      );
    }
  }
};
const pushedMessageIds = ref([]);

const messageLayerVisible = ref(false);
const showMessageLayer = () => {
  messageLayerVisible.value = true;
};

onMounted(() => {
  pushedMessageIds.value = systemStore.systemMessages;
  onPageRefresh(systemStore.getSystemMessages).then(res => {
    systemStore.setUnreadMessageCount(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);
        systemStore.pushSystemMessage(systemMessages.list[0].id);
      }
    }
  });
});
</script>

<style lang="scss" scoped>
@keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.twinkle {
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}

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(53, 131, 221);
    }
  }
}

.sender-info {
  width: 106px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.message-body {
  margin: 8px;
  border: 1px dashed;
  border-radius: 4px;
}

.content-title-box {
  display: flex;
  height: 26px;
  line-height: 26px;
  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 {
  font-size: 12px;
  width: 130px;
}

.content-box {
  padding: 4px;
  margin-bottom: 12px;
  background: rgb(248, 247, 247);
}

.system-message-time {
  font-size: 13px;
  color: gray;
}

.system-message-content {
  margin-top: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  white-space: pre-wrap;
}

.system-message-footer {
  margin-top: 20px;
  width: 100%;
  text-align: center;

  > span {
    font-size: 12px;
    color: gray;
    margin: 0 8px;
  }
}
</style>