消息

src/router/index.js

@@ -35,7 +35,7 @@ const mainRoutes = {
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
     { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
     { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
-    { path: '/msg-center', component: _import('common/theme'), name: 'msgCenter', meta: { title: '我的消息中心' } }
+    { path: '/msg-center', component: _import('modules/msg-center/announcement'), name: 'msgCenter', meta: { title: '我的消息中心' } }
     // { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
     // { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
   ],

src/store/index.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import common from './modules/common'
 import user from './modules/user'
+import websocket from './modules/websocket'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     common,
-    user
+    user,
+    websocket
   },
   mutations: {
     // 重置vuex本地储存状态

src/store/modules/websocket.js

@@ -0,0 +1,13 @@
+const userId = localStorage.getItem('userId')
+const randomNum = localStorage.getItem('randomNum')
+export default {
+  namespaced: true,
+  state: {
+    webSocket: new WebSocket('ws://112.74.164.79:10088/web_socket/' + userId + '_' + randomNum)
+  },
+  mutations: {
+    setWebSocket (state, items) {
+      state.webSocket = items
+    }
+  }
+}

src/views/common/msg.vue

@@ -0,0 +1,56 @@
+<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>
+
+<script>
+  export default {
+    name: 'msg',
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {}
+      }
+    },
+    mounted () {
+      const that = this
+      this.$nextTick(() => {
+        this.$store.state.websocket.webSocket.onmessage = async function (event) {
+          if (!event || !event.data) {
+            return
+          }
+          that.dataForm = JSON.parse(event.data)
+          console.log('dataForm = ' + that.dataForm)
+          if (!that.visible) {
+            that.visible = true
+          }
+        }
+      })
+    },
+    methods: {
+      // todo
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/main-navbar.vue

@@ -45,21 +45,24 @@
       </el-menu>
     </div>
     <!-- 弹窗, 修改密码 -->
-    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
+    <update-password v-if="updatePasswordVisible" ref="updatePassowrd"></update-password>
+    <Msg ref="msgDialog"/>
   </nav>
 </template>
 
 <script>
   import UpdatePassword from './main-navbar-update-password'
+  import Msg from './common/msg'
   import { clearLoginInfo } from '@/utils'
   export default {
     data () {
       return {
-        updatePassowrdVisible: false
+        updatePasswordVisible: false
       }
     },
     components: {
-      UpdatePassword
+      UpdatePassword,
+      Msg
     },
     computed: {
       navbarLayoutType: {
@@ -80,7 +83,7 @@
     methods: {
       // 修改密码
       updatePasswordHandle () {
-        this.updatePassowrdVisible = true
+        this.updatePasswordVisible = true
         this.$nextTick(() => {
           this.$refs.updatePassowrd.init()
         })

src/views/main.vue

@@ -59,6 +59,10 @@
       orgId: {
         get () { return this.$store.state.user.orgId },
         set (val) { this.$store.commit('user/updateOrgId', val) }
+      },
+      webSocket: {
+        get () { return this.$store.state.webSocket },
+        set (val) { this.$store.commit('websocket/setWebSocket', val) }
       }
     },
     created () {
@@ -86,6 +90,10 @@
             this.userId = data.data.userId
             this.userName = data.data.username
             this.orgId = data.data.orgId
+
+            // websocket初始化
+            localStorage.setItem('userId', data.data.userId)
+            localStorage.setItem('randomNum', (Math.ceil(Math.random() * 100000000)).toString())
           }
         })
       }

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

@@ -112,7 +112,7 @@
   import { getAnnouncementList } from '@/api/msg'
   import { getCusList } from '@/api/cus'
   export default {
-    name: 'order',
+    name: 'announcement',
     components: {
       Detail
     },