站内信模块：整体功能实现

yudao-ui-admin/src/layout/components/Message/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <el-popover placement="bottom" width="600" trigger="click">
+      <!-- icon 展示 -->
+      <el-badge slot="reference" :is-dot="unreadCount > 0" type="danger">
+         <svg-icon icon-class="message" @click="getList"/>
+      </el-badge>
+
+      <!-- 弹出列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column width="120" property="templateNickname" label="日期" />
+        <el-table-column width="180" property="title" label="发送时间">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" align="center" prop="templateType" width="100">
+          <template v-slot="scope">
+            <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+          </template>
+        </el-table-column>
+        <el-table-column property="templateContent" label="内容" />
+      </el-table>
+
+      <!-- 更多 -->
+      <div style="text-align: right; margin-top: 10px">
+        <el-button type="primary" size="mini" @click="goMyList">查看全部</el-button>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import {getUnreadNotifyMessageCount, getUnreadNotifyMessageList} from "@/api/system/notify/message";
+
+export default {
+  name: 'NotifyMessage',
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 列表
+      list: [],
+      // 未读数量,
+      unreadCount: 0,
+    }
+  },
+  created() {
+    // 首次加载小红点
+    this.getUnreadCount()
+    // 轮询刷新小红点
+    window.timer = setInterval(()=>{
+      this.getUnreadCount()
+    },1000 * 60 * 2)
+  },
+  methods: {
+    getList: function() {
+      this.loading = true;
+      getUnreadNotifyMessageList().then(response => {
+        this.list = response.data;
+        this.loading = false;
+        // 强制设置 unreadCount 为 0，避免小红点因为轮询太慢，不消除
+        this.unreadCount = 0
+      });
+    },
+    getUnreadCount: function() {
+      getUnreadNotifyMessageCount().then(response => {
+        this.unreadCount = response.data;
+      })
+    },
+    goMyList: function() {
+      this.$router.push({
+        name: 'MyNotifyMessage'
+      });
+    }
+  }
+}
+</script>
+<style>
+.el-badge__content.is-fixed {
+  top: 10px; /* 保证徽章的位置 */
+}
+</style>