feat: [消息通知] 加入已读功能

src/api/business/home/home.js

@@ -14,3 +14,17 @@ export function home_noticeList(query) {
     params: query
   })
 }
+export function home_noticeRead(data) {
+  return request({
+    url: '/system/business/home/noticeRead',
+    method: 'post',
+    data
+  })
+}
+export function home_noticeCount(query) {
+  return request({
+    url: '/system/business/home/noticeCount',
+    method: 'get',
+    params: query
+  })
+}

src/lang/en/business/home/home.js

@@ -5,5 +5,6 @@ export default {
   bzxzsy: 'Weekly New Study',
   ywcsy: 'Completed Study',
 
-  xttz: 'Notification'
+  xttz: 'Notification',
+  xx: 'Message'
 }

src/lang/zh/business/home/home.js

@@ -5,5 +5,6 @@ export default {
   bzxzsy: '本周新增试验',
   ywcsy: '已完成试验',
 
-  xttz: '系统通知'
+  xttz: '系统通知',
+  xx: '消息'
 }

src/layout/components/Navbar.vue

@@ -20,6 +20,8 @@
         </el-tooltip> -->
 
           </template>
+          
+          <div class="notice-count" @click="gotoNotice"><span>{{$t('page.business.home.xx')}}</span><el-badge :value="menuCount.noticeCount" class="item"></el-badge></div>
           <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
             <div class="avatar-wrapper">
               <img src="@/assets/images/profile.jpg" class="user-avatar">
@@ -35,6 +37,7 @@
             </el-dropdown-menu>
           </el-dropdown>
           <lang-select class="set-language" style="margin-left: 10px;"/>
+          
         </div>
       </div>
     </div>
@@ -42,7 +45,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters,mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -71,8 +74,9 @@ export default {
       'sidebar',
       'avatar',
       'device',
-      'nickName'
+      'nickName',
     ]),
+    ...mapState(["menuCount"]),
     setting: {
       get() {
         return this.$store.state.settings.showSettings
@@ -101,6 +105,9 @@ export default {
           location.href = '/user/work'
         })
       }).catch(() => { })
+    },
+    gotoNotice(){
+      this.$router.push('/user/work')
     }
   }
 }
@@ -165,10 +172,18 @@ export default {
     line-height: 50px;
     padding-right: 20px;
 
+    display: flex;
+    align-items: center;
+
     &:focus {
       outline: none;
     }
 
+    .notice-count{
+      margin-right: 10px;
+      cursor: pointer;
+    }
+
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;

src/permission.js

@@ -12,7 +12,7 @@ NProgress.configure({ showSpinner: false })
 const whiteList = ['/login', '/lblh']
 
 const isWhiteList = (path) => {
-  return whiteList.some(pattern => isPathMatch(pattern, path))
+  return whiteList.some((pattern) => isPathMatch(pattern, path))
 }
 
 router.beforeEach((to, from, next) => {
@@ -28,21 +28,41 @@ router.beforeEach((to, from, next) => {
     } else {
       if (store.getters.roles.length === 0) {
         isRelogin.show = true
+
+        //业务菜单角标
+        store
+          .dispatch('GetMenuCount')
+          .then(() => {})
+          .catch((error) => {
+            console.log('GetMenuCount出错：' + (error.msg || ''))
+          })
+
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+        store
+          .dispatch('GetInfo')
+          .then(() => {
+            isRelogin.show = false
+            store.dispatch('GenerateRoutes').then((accessRoutes) => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(accessRoutes) // 动态添加可访问路由表
+              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            })
           })
-        }).catch(err => {
+          .catch((err) => {
             store.dispatch('LogOut').then(() => {
               Message.error(err)
               next({ path: '/' })
             })
           })
       } else {
+        //业务菜单角标
+        store
+          .dispatch('GetMenuCount')
+          .then(() => {})
+          .catch((error) => {
+            console.log('GetMenuCount出错：' + (error.msg || ''))
+          })
+
         next()
       }
     }

src/store/index.js

@@ -8,6 +8,7 @@ import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
 import template from './modules/template'
+import menuCount from './modules/business/menuCount'
 
 Vue.use(Vuex)
 
@@ -19,7 +20,8 @@ const store = new Vuex.Store({
     tagsView,
     permission,
     settings,
-    template
+    template,
+    menuCount
   },
   getters
 })

src/store/modules/business/menuCount.js

@@ -0,0 +1,30 @@
+import { home_noticeCount } from '@/api/business/home/home'
+
+const menuCount = {
+  state: {
+    //未读通知数量
+    noticeCount: 0
+  },
+
+  mutations: {
+    SET_MENU_COUNT: (state, d) => {
+      state.noticeCount = d.noticeCount
+    }
+  },
+  actions: {
+    GetMenuCount({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        home_noticeCount()
+          .then((res) => {
+            commit('SET_MENU_COUNT', res.data)
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+}
+
+export default menuCount

src/views/index.vue

@@ -56,7 +56,7 @@
       </div>
       <div class="notice-list" v-loading="loading">
         <div class="notice-item" v-for="(item,index) in noticeList" :key="index" @click="gotoPage(item)">
-          <div class="notice-title"><el-badge is-dot class="notice-dot"></el-badge>{{item.title}}</div>
+          <div class="notice-title"><el-badge is-dot class="notice-dot" v-if="item.status===1"></el-badge>{{item.title}}</div>
           <div class="notice-date">{{item.createTime}}</div>
         </div>
 
@@ -74,7 +74,7 @@
 </template>
 
 <script>
-import { home_count,home_noticeList} from "@/api/business/home/home";
+import { home_count,home_noticeList,home_noticeRead} from "@/api/business/home/home";
 export default {
   name: "Index",
   data() {
@@ -118,18 +118,30 @@ export default {
     },
     getNoticeList(){
       this.loading = true;
-      this.searchForm.startDate = this.daterange && this.daterange.length > 0 ? this.daterange[0] : ''
-      this.searchForm.endDate = this.daterange && this.daterange.length > 1 ? this.daterange[1] : ''
       home_noticeList(this.searchForm).then(response => {
         this.noticeList = response.rows;
         this.noticeTotal = response.total;
       }).finally(()=>{
         this.loading = false;
+        this.refreshNoticeCount()
       })
     },
     gotoPage(item){
+      this.read(item)
       this.$tab.openPage(" ",item.url)
-    }
+    },
+    refreshNoticeCount(){
+      this.$store.dispatch('GetMenuCount').then(() => {
+      }).catch(error => {
+        console.log('GetMenuCount出错：' + (error.msg || ''))
+      })
+    },
+    read(item){
+      home_noticeRead({id:item.id}).then(response => {
+      }).finally(()=>{
+        this.refreshNoticeCount()
+      })
+    },
   }
 }
 </script>