fix: 新增消息中心模块

src/api/message/index.js

+import request from "@/utils/httpRequest";
+
+export default class Message {
+  // 消息列表
+  getMessagePage(data) {
+    return request({
+      url: `/message/pageList`,
+      method: "post",
+      data,
+    });
+  }
+  // 阅读
+  seeRead(id) {
+    return request({
+      url: `/message/read`,
+      method: "post",
+      params: { id: id },
+    });
+  }
+  // 全部已读
+  setReadAll(data) {
+    return request({
+      url: `/message/readAll`,
+      method: "post",
+      data,
+    });
+  }
+  // 获取消息类型未读数量
+  getMessageTypeCount(id) {
+    return request({
+      url: `/message/typeCount`,
+      method: "post",
+      params: { userId: id },
+    });
+  }
+  // 消息总未读数量
+  getMessageCount(id) {
+    return request({
+      url: `/message/count`,
+      method: "post",
+      params: { userId: id },
+    });
+  }
+}

src/store/modules/user.js

 export default {
   namespaced: true,
   state: {
-    id: '',
-    name: '',
-    loginName: '',
-    no: '',
+    id: "",
+    name: "",
+    loginName: "",
+    no: "",
     office: {
-      id: '',
-      name: ''
+      id: "",
+      name: "",
     },
     company: {
-      id: '',
-      name: ''
+      id: "",
+      name: "",
     },
-    photo: ''
+    photo: "",
+    messageCount: {},
   },
   mutations: {
-    updateId (state, id) {
-      state.id = id
-    },
-    updateName (state, name) {
-      state.name = name
-    },
-    updateLoginName (state, loginName) {
-      state.loginName = loginName
-    },
-    updatePhoto (state, photo) {
-      state.photo = photo
-    },
-    updateUser (state, user) {
-      state.id = user.id
-      state.name = user.name
-      state.loginName = user.loginName
-      state.company = user.companyDTO
-      state.office = user.officeDTO
-      state.no = user.no
-      state.photo = user.photo
-      localStorage.setItem('user', JSON.stringify(user))
-    }
-  }
-}
+    updateId(state, id) {
+      state.id = id;
+    },
+    updateName(state, name) {
+      state.name = name;
+    },
+    updateLoginName(state, loginName) {
+      state.loginName = loginName;
+    },
+    updatePhoto(state, photo) {
+      state.photo = photo;
+    },
+    updateUser(state, user) {
+      state.id = user.id;
+      state.name = user.name;
+      state.loginName = user.loginName;
+      state.company = user.companyDTO;
+      state.office = user.officeDTO;
+      state.no = user.no;
+      state.photo = user.photo;
+      localStorage.setItem("user", JSON.stringify(user));
+    },
+    updateMessageCount(state, messageCount) {
+      state.messageCount = messageCount;
+    },
+  },
+};

src/views/layout/_common_top.vue

@@ -60,6 +60,12 @@
         </el-menu-item>
         <el-menu-item class="hide-sm">
           <template slot="title">
+            <div class="noticeButton" @click="goMessage">
+              <el-badge v-if="messageCount.total != 0" :value="messageCount.total" class="badge">
+                <i class="fa fa-bell-o"></i>
+              </el-badge>
+              <i class="fa fa-bell-o" v-else></i>
+            </div>
             <!-- <notice-icon class="action notice" :tabs="noticeTabs">
             </notice-icon> -->
           </template>
@@ -96,6 +102,8 @@ import ColorPicker from '@/components/colors/ColorPicker'
 import NotifyService from '@/api/notify/NotifyService'
 import MailBoxService from '@/api/mail/MailBoxService'
 import LoginService from '@/api/auth/LoginService'
+import Message from '@/api/message/index'
+
 export default {
   data () {
     return {
@@ -123,7 +131,8 @@ export default {
           emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg'
         }
       ],
-      breadcrumbs: []
+      breadcrumbs: [],
+      user: JSON.parse(localStorage.getItem('user')),
     }
   },
   components: {
@@ -140,6 +149,11 @@ export default {
     this.loginService = new LoginService()
   },
   computed: {
+    messageCount: {
+      get () {
+        return this.$store.state.user.messageCount
+      },
+    },
     navbarLayoutType () {
       return this.$store.state.common.navbarLayoutType
     },
@@ -228,6 +242,7 @@ export default {
     })
   },
   mounted () {
+    this.getMessageCount()
     if (this.defaultLayout === 'top') {
       this.fixTopMenu()
     }
@@ -291,6 +306,9 @@ export default {
     }
   },
   methods: {
+    goMessage () {
+      this.$router.push({ name: "message" })
+    },
     // 获取路由名字
     getTitle (menus, id, obj) {
       menus.forEach((menu) => {
@@ -349,3 +367,16 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.noticeButton {
+  width: 100%;
+  height: 100%;
+  padding: 0 12px;
+
+  display: flex;
+  align-items: center;
+
+  transition: all 0.3s;
+}
+</style>
+  

src/views/modules/message/index.vue

+<template>
+  <div class="jp-common-layout page">
+    <div class="jp-common-layout-left">
+      <el-row class="rowTabs">
+        <div v-for="item in tabs" :class="{ rowItem: true, rowActive: item.value == tabsActive }" :key="item.value"
+          @click="clickTabsItem(item)">
+          <div class="name">{{item.label}}</div>
+          <div class="number">{{item.total}}</div>
+        </div>
+      </el-row>
+    </div>
+    <div class="jp-common-layout-center jp-flex-main">
+      <div class="bg-white" style="height: 100%;">
+        <div style="height: calc(100% - 30px);" v-if="tableData.length">
+          <div class="list">
+            <div class="list-item" v-for="item in tableData">
+              <div class="item-left">
+                <div class="title" :title="item.title">{{item.title}}</div>
+                <div class="subTitle" :title="item.subTitle">{{item.subTitle}},</div>
+                <div class="content" :title="item.content">异常内容：{{item.content}}</div>
+                <div class="date">{{item.createDate}} - 系统发送</div>
+              </div>
+              <div class="item-right">
+                <div v-if="item.readFlag=='0'" @click="setRead(item)"><i class="el-icon-check"
+                    style="margin-right: 2px;"></i>设置已读</div>
+                <div v-else style="color: #00AFAB;">已读</div>
+              </div>
+            </div>
+          </div>
+          <div class="footer">
+            <el-button type="primary" size="small" icon="el-icon-view" @click="seeReadAll">全部设置为已读</el-button>
+            <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
+              :total="tablePage.total" :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
+              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+              @page-change="currentChangeHandle">
+            </vxe-pager>
+          </div>
+        </div>
+        <div v-else style="height: 100%;display: flex; align-items: center;justify-content: center;">
+          <el-empty :image-size="200"></el-empty>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Message from '@/api/message/index'
+
+export default {
+  Message: null,
+  name: '',
+  data () {
+    return {
+      searchForm: {
+        name: '',
+      },
+      tableData: [],
+      loading: false,
+      tablePage: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+      },
+      tabsActive: '-1',
+      user: JSON.parse(localStorage.getItem('user')),
+      tabs: []
+    }
+  },
+  watch: {},
+  computed: {
+
+  },
+  methods: {
+    // 切换点击
+    clickTabsItem (item) {
+      this.tabsActive = item.value
+      this.getMessagePage()
+    },
+    // 获取列表
+    getMessagePage () {
+      this.loading = true
+      const can = {
+        userId: this.user.loginName,
+        type: this.tabsActive,
+        current: this.tablePage.currentPage,
+        size: this.tablePage.pageSize
+      }
+      this.Message.getMessagePage(can).then(({ data }) => {
+        this.tableData = data.records
+        this.tablePage.total = data.total
+        this.loading = false
+      })
+    },
+    // 分页
+    currentChangeHandle ({ currentPage, pageSize }) {
+      this.tablePage.currentPage = currentPage
+      this.tablePage.pageSize = pageSize
+      this.getMessagePage()
+    },
+    // 获取tabs列表
+    getMessageTypeCount () {
+      this.Message.getMessageTypeCount(this.user.loginName).then(({ data }) => {
+        this.tabs = data.body
+        this.$store.commit('user/updateMessageCount', data.body[0])
+      })
+    },
+    // 设置已读
+    setRead (item) {
+      this.Message.seeRead(item.id).then(({ data }) => {
+        this.$set(item, 'readFlag', '1')
+      })
+    },
+    // 设置全部已读
+    seeReadAll () {
+      const can = {
+        type: this.tabsActive,
+        userId: this.user.loginName,
+      }
+      this.Message.setReadAll(can).then(({ data }) => {
+        this.getMessageTypeCount()
+        this.getMessagePage()
+      })
+    }
+  },
+  created () {
+    this.Message = new Message()
+  },
+  mounted () {
+    this.getMessageTypeCount()
+    this.getMessagePage()
+  }
+}
+</script>
+<style lang="less" scoped>
+.rowTabs {
+  padding: 10px 0 10px 0;
+
+  .rowItem {
+    padding: 10px 15px 10px 15px;
+    background: #fff;
+    letter-spacing: 2px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .rowActive {
+    color: #fff;
+    background: #00AFAB;
+  }
+
+  .number {
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    padding: 0 6px;
+    background-color: #F56C6C;
+    color: #fff;
+    border-radius: 10px;
+    font-size: 12px;
+  }
+}
+
+.list {
+  height: 100%;
+  overflow: auto;
+
+  .list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+    padding: 10px 20px 10px 20px;
+
+
+    .item-left {
+      width: 80%;
+
+      .title {
+        font-weight: bold;
+        margin-bottom: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .subTitle {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+
+      }
+
+      .date {
+        margin-top: 10px;
+        color: #ccc;
+        font-size: 15px;
+      }
+    }
+
+    .item-right {
+      div {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
\ No newline at end of file