add: 新增消息通知

nladmin-ui/src/views/system/notice/NoticeIcon.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-popover
+    placement="top-end"
+    width="450"
+    trigger="manual"
+    v-model="visible">
+    <div style="margin: 5px" v-loading="loading">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane :label="d.label" :name="d.value" v-for="d in dict.notice_type" :key="d.id">
+          <el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" ></el-empty>
+          <div v-for="o in notReadMsgList[d.value-1]" :key="o.notice_id">
+            <a href="javascript:" @click="showMessage(o)">
+              <el-row @click="showMessage">
+                <el-col :span="6">
+                  <el-tag type="danger">{{ dict.label.notice_type[o.notice_type] }}</el-tag>
+                </el-col>
+                <el-col :span="9" style="font-weight: bolder">{{o.notice_title}}</el-col>
+                <el-col :span="9" style="color: #cccccc">{{o.create_time}}</el-col>
+              </el-row>
+              <el-divider ></el-divider>
+            </a>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <div style="text-align: right">
+        <el-button type="text" @click="visible = !visible">取消</el-button>
+        <el-button type="text" @click="toSiteMessage" >查看更多>></el-button>
+      </div>
+    </div>
+    <span slot="reference" @click="fetchNotice">
+      <el-badge :value="notReadMsgCount" :hidden="notReadMsgCount==0">
+        <el-icon class="el-icon-bell" style="font-size: 22px;"></el-icon>
+      </el-badge>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+import crudNotice from './sysNotice'
+import { NOTICE_MESSAGE_UPDATE, NOTICE_SHOW_MESSAGE } from './VueBaseCode'
+export default {
+  dicts: ['deal_status', 'have_read_type', 'notice_type'],
+  name: 'NoticeIcon',
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      activeName: '1',
+      // 未读消息数量
+      notReadMsgCount: 0,
+      // 消息内容
+      notReadMsgList: []
+    }
+  },
+  methods: {
+    /**
+     * 打开列表页
+     */
+    fetchNotice() {
+      if (this.visible) {
+        this.visible = false
+        this.loading = false
+      } else {
+        this.visible = true
+        this.loading = true
+        // 消息列表
+        this.getMessage()
+      }
+    },
+    getMessage() {
+      crudNotice.pageByReceive().then(res => {
+        this.notReadMsgList = res
+        this.loading = false
+      })
+    },
+    /**
+     * 未读的消息数量
+     */
+    receivedCount() {
+      // 查询当前用户的未读消息数量
+      crudNotice.countByReceiveNotRead().then(res => {
+        this.notReadMsgCount = res
+      })
+    },
+    /**
+     * 查看消息
+     */
+    showMessage(message) {
+      // 标记已读
+      crudNotice.read(message.notice_id).then(() => {
+        this.receivedCount()
+      })
+      this.$bus.emit(NOTICE_SHOW_MESSAGE, message)
+      this.visible = false
+    },
+    /**
+     * 跳转到站内信界面
+     */
+    toSiteMessage() {
+      this.$router.push({
+        path: '/monitor/notice'
+      })
+      this.visible = false
+    },
+    handleClick(tab, event) {
+      // console.log(this.dict.notice_type)
+      // console.log(tab, event)
+    }
+  },
+  mounted() {
+    this.getMessage()
+    this.receivedCount()
+    this.$bus.on(NOTICE_MESSAGE_UPDATE, this.receivedCount) // 监听事件
+  },
+  destroyed() {
+    this.$bus.off(NOTICE_MESSAGE_UPDATE)
+  }
+}
+</script>
+
+<style scoped>
+/deep/.el-badge__content.is-fixed {
+  top: 10px;
+}
+.el-divider{
+  margin: 8px 0;
+}
+</style>