设置消息为已读

src/utils/common.js

@@ -10,3 +10,11 @@ export function toPercent (val) {
 export function toNumber (rate) {
   return rate ? (Number(rate / 100)).toFixed(2) : 0
 }
+
+/**
+ * 字符串转JSON对象
+ */
+export function parseJsonStr (str) {
+  str = str.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2')
+  return JSON.parse(str)
+}

src/views/common/msg.vue

@@ -4,6 +4,7 @@
 </template>
 
 <script>
+  import {parseJsonStr} from '@/utils/common'
   export default {
     name: 'msg',
     data () {
@@ -14,8 +15,13 @@
       }
     },
     computed: {
+      // 监听消息变化
       listenWebsocket () {
         return this.$store.state.websocket.message
+      },
+      // 监听已读消息数量变化
+      listenCnt () {
+        return this.$store.state.common.msgCollection.length
       }
     },
     watch: {
@@ -24,11 +30,10 @@
           return
         }
         const h = this.$createElement
-        let newMsgCollections = JSON.parse(data)
-        console.log('newMsgCollections = ' + JSON.stringify(newMsgCollections))
+        let newMsgCollections = parseJsonStr(data)
+        // console.log('newMsgCollections = ' + JSON.stringify(newMsgCollections))
         if (newMsgCollections) {
           this.updateMsgCollections(newMsgCollections)
-          this.$emit('noticeAdded', this.$store.state.common.msgCollection.length)
           if (newMsgCollections.length <= 5) {
             newMsgCollections.forEach((item) => {
               this.$notify({
@@ -42,62 +47,11 @@
             })
           }
         }
-        // 刷新消息
-        this.$store.dispatch('websocket/WEBSOCKET_SEND', 'refreshMessage')
-    // const newmsg = JSON.parse(newstr)
-    // if (newstr && newstr.indexOf('[') === -1) {
-    //   // 收到信消息
-    //   this.$notification.open({
-    //     message: newmsg.objName,
-    //     description: newmsg.title
-    //   })
-      // // 刷新消息
-      // this.$store.dispatch('websocket/WEBSOCKET_SEND', 'refreshMessage')
-    // } else {
-    //   this.noticeData = []
-    //   this.messageData = []
-    //   this.msgCount = newmsg.length
-    //   for (var i = 0; i < newmsg.length; i++) {
-    //     var m = newmsg[i]
-    //     m.createDate = m.objName + ' · ' + this.nowTimeAgo(m.createDate)
-    //     if (m.messageType.indexOf('Notice') !== -1) {
-    //       this.noticeData.push(m)
-    //     }
-    //     if (m.messageType.indexOf('Message') !== -1) {
-    //       this.messageData.push(m)
-    //     }
-    //   }
-  //   }
+      },
+      listenCnt: function (cnt) {
+        this.$emit('noticeAdded', cnt)
       }
     },
-    // mounted () {
-    //   const that = this
-    //   const h = this.$createElement
-    //   this.$nextTick(() => {
-    //     this.$store.state.websocket.webSocket.onmessage = async function (event) {
-    //       if (!event || !event.data) {
-    //         return
-    //       }
-    //       let json = JSON.parse(event.data)
-    //       console.log('json = ' + JSON.stringify(json))
-    //       if (json) {
-    //         that.$emit('noticeAdded', json.length)
-    //         json.forEach((item) => {
-    //           that.$notify({
-    //             title: item.title,
-    //             // dangerouslyUseHTMLString: true,
-    //             // message: h('i', {style: 'color: teal'}, item.content),
-    //             message: h('div', {}, [
-    //               h('p', {}, '消息类别：' + that.getMsgType(item.type)),
-    //               h('p', {}, '消息内容：' + item.content)
-    //             ]),
-    //             duration: 0
-    //           })
-    //         })
-    //       }
-    //     }
-    //   })
-    // },
     methods: {
       getMsgType (type) {
         if (!type) return '未知消息类型'

src/views/main-navbar.vue

@@ -112,7 +112,7 @@
       },
       // 通知数量变化
       noticeAdded (num) {
-        this.cnt += num
+        this.cnt = num
       }
     }
   }

src/views/modules/msg-center/notice.vue

@@ -19,6 +19,9 @@
         <el-button @click="queryData()">查询</el-button>
       </el-form-item>
     </el-form>
+    <div>
+      <p style="color: red">未读消息数量：{{dataList.length}}</p>
+    </div>
     <el-table
       :data="dataList"
       border
@@ -77,7 +80,8 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="checkNotice(scope.row.noticeId)">查看</el-button>
+          <el-button type="text" size="small" @click="detailHandle(scope.row.noticeId)">查看</el-button>
+          <el-button type="text" size="small" @click="checkHandle(scope.row.noticeId)">设为已读</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -118,8 +122,7 @@
       },
       // 获取数据列表
       getNoticeList () {
-        console.log('msg = ' + JSON.stringify(this.$store.state.common.msgCollection))
-        let msg = this.$store.state.common.msgCollection
+        let msg = Object.assign([], this.$store.state.common.msgCollection)
         if (!msg) return
         this.dataList = msg
         if (this.dataForm.title) {
@@ -133,15 +136,19 @@
       selectionChangeHandle (val) {
         this.dataListSelections = val
       },
-      // 查看消息
-      checkNotice (id) {
+      // 设为已读
+      checkHandle (id) {
         // 获取记录
-        let notice = this.dataList.find(item => item.noticeId === id)
-        console.log('notice = ' + JSON.stringify(notice))
-        // this.checkedVisible = true
-        // this.$nextTick(() => {
-        //   this.$refs.check.init(id)
-        // })
+        let index = this.$store.state.common.msgCollection.findIndex(item => item.noticeId === id)
+        this.$store.state.common.msgCollection.splice(index, 1)
+        let arr = []
+        arr.push(id)
+        this.$store.dispatch('websocket/WEBSOCKET_SEND', JSON.stringify({'noticeIds': arr}))
+        this.getNoticeList()
+      },
+      // 查看消息
+      detailHandle (id) {
+        // todo
       }
     }
   }