Feat: 添加消息模块功能

template/src/App.vue

@@ -6,7 +6,147 @@
 </template>
 
 <script>
+import { baseUrl } from '@config/http.config';
 export default {
-  name: 'App'
+  name: 'App',
+
+  computed: {
+    userInfo() {
+      return this.$store.state.userInfo;
+    }
+  },
+
+  data() {
+    return {
+      userLogin: false,
+      websocket: null,
+      messageType: [{
+        id: 'doingWork',
+        name: '在办工作',
+        status: [100, 101, 102, 103, 104, 105, 106, 109, 113, 112]
+      },
+      {
+        id: 'returnBox',
+        name: '退件箱',
+        status: [108]
+      },
+      {
+        id: 'suspendWork',
+        name: '已挂工作',
+        status: [110, 111]
+      },
+      {
+        id: 'finishedWork',
+        name: '办结工作',
+        status: [107]
+      }] // 消息类型
+    };
+  },
+
+  watch: {
+    userInfo(val) {
+      if (val) {
+        this.init();
+      } else {
+        window.WebSocket && this.websocket && this.websocket.close();
+      }
+    }
+  },
+
+  mounted() {
+    this.init();
+  },
+
+  beforeDestroy() {
+    window.WebSocket && this.websocket && this.websocket.close();
+    this.websocket = null;
+  },
+
+  methods: {
+    init() {
+      if (this.websocket) return false;
+      if (this.userInfo && this.userInfo.userId && window.WebSocket) {
+        const that = this;
+        this.websocket = new WebSocket(`ws:${baseUrl}/MessageWebsocket?userId=${this.userInfo.userId}`);
+        this.websocket.onopen = function(event) {
+          // console.log(event)
+        };
+        this.websocket.onclose = function(event) {
+          // console.log(event)
+        };
+        this.websocket.onmessage = (event) => {
+          if (event.data) that.handleReceiveMessage(event.data);
+        };
+        this.websocket.onerror = function(event) {
+          this.websocket = null;
+        };
+      }
+    },
+    /**
+     * 接受消息后的处理
+     */
+    handleReceiveMessage(data) {
+      data = JSON.parse(data);
+      this.$store.dispatch('setUnreadMessage', data.count);
+      const type = data.content ? this.handleMessageType(data.content.businessType) : 9999;
+      const h = this.$createElement;
+      if (parseInt(data.count, 10) === 0) return false;
+      this.$notify({
+        title: data.content ? data.content.title : this.convertTypeToObjectInfo(type).name,
+        position: 'bottom-right',
+        type: 'info',
+        dangerouslyUseHTMLString: true,
+        duration: 5000,
+        message: h('div', {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          }
+        }, [
+          h('span', null
+            , data.content ? data.content.content : '您有新的处理任务，请及时处理!'),
+          h('el-button', {
+            style: {
+              marginLeft: '5px'
+            },
+            attrs: {
+              size: 'small',
+              type: 'text'
+            },
+            on: {
+              click: () => { this.handleLinkToTargetTab(type);}
+            }
+          }, '查看')
+        ])
+      });
+    },
+    /**
+     *  跳转链接
+     */
+    handleLinkToTargetTab(type) {
+      this.$router.push('/' + this.convertTypeToObjectInfo(type).id);
+    },
+    /**
+     * 数据类型转换
+     */
+    convertTypeToObjectInfo(type) {
+      return this.messageType[type] || { id: 'appMessage', name: '我的消息'};
+    },
+    /**
+     * 处理消息类型
+     */
+    handleMessageType(type) {
+      type = parseInt(type, 10) || 9999;
+      let flag = false;
+      for (let i = 0; i < this.messageType.length; i++) {
+        if (this.messageType[i].status.indexOf(type) >= 0) {
+          type = i;
+          flag = true;
+        }
+        if (flag) break;
+      }
+      return type;
+    },
+  }
 };
 </script>

template/src/router/index.js

@@ -67,7 +67,6 @@ router.beforeEach((to, from, next) => {
     next();
     return;
   }
-
   if (store.state.platformInfo &&
     store.state.platformInfo.systemId &&
     to.query.sysCode === from.query.sysCode) {

template/src/views/common/Header.vue

@@ -35,10 +35,6 @@
           <span v-if="userInfo.RealName" @click="handleUserClick">{{ userInfo.RealName }}</span>
           <span v-else @click="handleRelogin">登录</span>
         </a>
-        <!-- <a href="javascript:;" class="quit-user gutter" @click="logout">
-          <i class="iconfont icon-tuichu"></i>
-          <span>退出</span>
-        </a> -->
         <el-button v-if="userInfo.RealName" class="quit-user gutter" type="text"
           size="small" icon="iconfont icon-tuichu" :loading="isLoadingout" @click="logout">
           退出
@@ -50,7 +46,7 @@
 
 <script>
 import Api from '@/api';
-import { baseUrl, serviceUrl } from '@config/http.config';
+import { serviceUrl } from '@config/http.config';
 import Logo from './Logo.vue';
 import AppBreadcrumb from './Breadcrumb';
 
@@ -83,49 +79,11 @@ export default {
   data() {
     return {
       serviceUrl,
-      isLoadingout: false,
-      websocket: null
+      isLoadingout: false
     };
   },
 
-  watch: {
-    userInfo(val) {
-      if (val) {
-        this.init();
-      } else {
-        window.WebSocket && this.websocket && this.websocket.close();
-      }
-    }
-  },
-
-  mounted() {
-    this.init();
-  },
-
-  beforeDestroy() {
-    window.WebSocket && this.websocket && this.websocket.close();
-  },
-
   methods: {
-    init() {
-      if (this.userInfo && this.userInfo.userId && window.WebSocket) {
-        this.websocket = new WebSocket(`ws:${baseUrl}/MessageWebsocket?userId=${this.userInfo.userId}`);
-        this.websocket.onopen = function(event) {
-          // console.log(event)
-        };
-        this.websocket.onclose = function(event) {
-          // console.log(event)
-        };
-        this.websocket.onmessage = (event) => {
-          // state.unreadMessage = event.data
-          // this.unreadMessage = event.data;
-          this.$store.dispatch('setUnreadMessage', event.data);
-        };
-        this.websocket.onerror = function(event) {
-          // console.log(event)
-        };
-      }
-    },
     /**
      * 查看消息
      */