websocket

src/element-ui/index.js

@@ -141,7 +141,6 @@ Vue.use(Header)
 Vue.use(Aside)
 Vue.use(Main)
 Vue.use(Footer)
-
 Vue.use(Loading.directive)
 
 Vue.prototype.$loading = Loading.service

src/main.js

@@ -15,7 +15,6 @@ import cloneDeep from 'lodash/cloneDeep'
 import SuperFlow from './views/modules/common/vue-super-flow/index'
 import html2pdf from '@/api/pdf'
 import Print from 'vue-print-nb'
-// import { Notification } from 'element-ui'
 
 Vue.use(VueCookie)
 Vue.use(SuperFlow)
@@ -31,7 +30,6 @@ if (process.env.NODE_ENV !== 'production') {
 // 挂载全局
 Vue.prototype.$http = httpRequest // ajax请求方法
 Vue.prototype.isAuth = isAuth     // 权限方法
-// Vue.prototype.$notify = Notification
 
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG['storeState'] = cloneDeep(store.state)

src/views/common/msg.vue

@@ -1,22 +1,5 @@
 <template>
   <div>
-<!--    <el-dialog-->
-<!--      title="查看消息"-->
-<!--      width="70%"-->
-<!--      :close-on-click-modal="false"-->
-<!--      :visible.sync="visible">-->
-<!--      <el-form :model="dataForm" ref="dataForm" label-width="auto">-->
-<!--        <el-form-item label="消息类型" prop="type">-->
-<!--          <el-input v-model="dataForm.type"/>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="标题" prop="title">-->
-<!--          <el-input v-model="dataForm.title"/>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="内容" prop="content">-->
-<!--          <el-input v-model="dataForm.content"/>-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
-<!--    </el-dialog>-->
   </div>
 </template>
 
@@ -31,24 +14,44 @@
       }
     },
     mounted () {
-      // const that = this
+      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.stringify(event.data)
-          console.log('json = ' + json)
-          this.$notify({
-            title: event.data.title,
-            message: event.data.content,
-            duration: 0
-          })
+          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: {
-      // todo
+      getMsgType (type) {
+        if (!type) return '未知消息类型'
+        if (type === 1) {
+          return '公告消息'
+        } else if (type === 2) {
+          return '审批消息'
+        } else {
+          return '未知消息类型'
+        }
+      }
     }
   }
 </script>

src/views/main-navbar.vue

@@ -19,7 +19,7 @@
         mode="horizontal">
         <el-menu-item index="0" @click="$router.push({ name: 'msgCenter' })">
           <template slot="title">
-            <el-badge value="1">
+            <el-badge :value="cnt">
               <icon-svg name="lingdang" class="el-icon-lingdang"></icon-svg>
             </el-badge>
           </template>
@@ -46,7 +46,7 @@
     </div>
     <!-- 弹窗, 修改密码 -->
     <update-password v-if="updatePasswordVisible" ref="updatePassowrd"></update-password>
-    <Msg ref="msgDialog"/>
+    <Msg ref="msgDialog" @noticeAdded="noticeAdded"/>
   </nav>
 </template>
 
@@ -57,7 +57,8 @@
   export default {
     data () {
       return {
-        updatePasswordVisible: false
+        updatePasswordVisible: false,
+        cnt: 0
       }
     },
     components: {
@@ -108,6 +109,10 @@
           //   }
           // })
         }).catch(() => {})
+      },
+      // 通知数量变化
+      noticeAdded (num) {
+        this.cnt += num
       }
     }
   }