消息bug处理

src/views/common/msg.vue

@@ -4,119 +4,126 @@
 </template>
 
 <script>
-  import {parseJsonStr} from '@/utils/common'
-  import {readNotice, routeMsg, readNotices} from '@/utils/msg'
-  export default {
-    name: 'msg',
-    data () {
-      return {
-        visible: false,
-        id: 0,
-        dataForm: {},
-        notify: {}
+import { parseJsonStr } from '@/utils/common'
+import { readNotice, routeMsg, readNotices } from '@/utils/msg'
+export default {
+  name: 'msg',
+  data() {
+    return {
+      visible: false,
+      id: 0,
+      dataForm: {},
+      notify: {}
+    }
+  },
+  mounted() {
+    // this.test()
+  },
+  computed: {
+    // 监听消息变化
+    listenWebsocket() {
+      return this.$store.state.websocket.message
+    },
+    // 监听已读消息数量变化
+    listenCnt() {
+      return this.$store.state.common.msgCollection.length
+    }
+  },
+  watch: {
+    listenWebsocket: function (data) {
+      if (!data) return
+      let json = parseJsonStr(data)
+      // console.log('json = ' + JSON.stringify(json))
+      if (data.indexOf('{"approved') > -1) {
+        readNotices(this, json['approved'])
+        return
+      }
+      if (data.indexOf('[') !== 0) {
+        return
+      }
+      if (json) {
+        this.updateMsgCollections(json)
+        // 只显示最新的最多5条消息
+        const latestFive = json
+          .slice()
+          .sort((a, b) => {
+            const ta = new Date(a.publishTime || a.createTime || 0).getTime()
+            const tb = new Date(b.publishTime || b.createTime || 0).getTime()
+            return tb - ta
+          })
+          .slice(0, 5)
+        latestFive.forEach((item, index) => {
+          setTimeout(() => {
+            this.notice(item)
+          }, index * 500)
+        })
       }
     },
-    mounted () {
-      // this.test()
+    listenCnt: function (cnt) {
+      this.$emit('noticeAdded', cnt)
+    }
+  },
+  methods: {
+    test() {
+      let item = {
+        type: 1,
+        title: '测试标题',
+        content: '这是一条测试消息'
+      }
+      this.notice(item)
+    },
+    // 通知
+    notice(item) {
+      const h = this.$createElement
+      this.notify = this.$notify({
+        title: item.title,
+        message: h('div', {}, [
+          h('p', {}, '消息类别：' + this.getMsgType(item.type)),
+          h('p', {}, '消息内容：' + item.content)
+        ]),
+        duration: 5000,
+        offset: 60
+      })
     },
-    computed: {
-      // 监听消息变化
-      listenWebsocket () {
-        return this.$store.state.websocket.message
-      },
-      // 监听已读消息数量变化
-      listenCnt () {
-        return this.$store.state.common.msgCollection.length
+    // 跳转到消息页面
+    detail(row) {
+      routeMsg(this, row)
+      // readNotice(this, row.noticeId)
+      if (row.type === 3) {
+        readNotice(this, row.noticeId)
+      }
+      if (this.notify) {
+        this.notify.close()
       }
     },
-    watch: {
-      listenWebsocket: function (data) {
-        if (!data) return
-        let json = parseJsonStr(data)
-        // console.log('json = ' + JSON.stringify(json))
-        if (data.indexOf('{"approved') > -1) {
-          readNotices(this, json['approved'])
-          return
-        }
-        if (data.indexOf('[') !== 0) {
-          return
-        }
-        if (json) {
-          this.updateMsgCollections(json)
-          if (json.length <= 1) {
-            json.forEach((item) => {
-              this.notice(item)
-            })
-          }
-        }
-      },
-      listenCnt: function (cnt) {
-        this.$emit('noticeAdded', cnt)
+    // 获取消息类型
+    getMsgType(type) {
+      if (!type) return '未知消息类型'
+      if (type === 1) {
+        return '公告消息'
+      } else if (type === 2) {
+        return '审批消息'
+      } else if (type === 3) {
+        return '我的工作台'
+      } else {
+        return '未知消息类型'
       }
     },
-    methods: {
-      test () {
-        let item = {
-          type: 1,
-          title: '测试标题',
-          content: '这是一条测试消息'
-        }
-        this.notice(item)
-      },
-      // 通知
-      notice (item) {
-        const h = this.$createElement
-        this.notify = this.$notify({
-          title: item.title,
-          message: h('div', {}, [
-            h('p', {}, '消息类别：' + this.getMsgType(item.type)),
-            h('p', {}, '消息内容：' + item.content)
-          ]),
-          duration: 5000,
-          offset: 60
-        })
-      },
-      // 跳转到消息页面
-      detail (row) {
-        routeMsg(this, row)
-        // readNotice(this, row.noticeId)
-        if (row.type === 3) {
-          readNotice(this, row.noticeId)
-        }
-        if (this.notify) {
-          this.notify.close()
-        }
-      },
-      // 获取消息类型
-      getMsgType (type) {
-        if (!type) return '未知消息类型'
-        if (type === 1) {
-          return '公告消息'
-        } else if (type === 2) {
-          return '审批消息'
-        } else if (type === 3) {
-          return '我的工作台'
-        } else {
-          return '未知消息类型'
-        }
-      },
-      // 更新通知列表
-      updateMsgCollections (newCollections) {
-        if (!newCollections || newCollections.length === 0) return
-        newCollections.forEach((item) => {
-          // 判断是否包含当前通知
-          if (this.$store.state.common.msgCollection.findIndex(item1 => item1.noticeId === item.noticeId) === -1) {
-            if (!item.publishTime) {
-              item.publishTime = item.createTime
-            }
-            this.$store.state.common.msgCollection.push(item)
+    // 更新通知列表
+    updateMsgCollections(newCollections) {
+      if (!newCollections || newCollections.length === 0) return
+      newCollections.forEach((item) => {
+        // 判断是否包含当前通知
+        if (this.$store.state.common.msgCollection.findIndex(item1 => item1.noticeId === item.noticeId) === -1) {
+          if (!item.publishTime) {
+            item.publishTime = item.createTime
           }
-        })
-      }
+          this.$store.state.common.msgCollection.push(item)
+        }
+      })
     }
   }
+}
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>