实现后台申诉未处理红点功能

sso-manage-console-web/src/App.vue

@@ -12,8 +12,20 @@
     name: 'app',
     components: {
       NavHeader
+    },
+    created () {
+      // 首次获取未处理申诉的数量
+      this.$store.dispatch('countUnHandleAppeals')
+      // 建立定时任务不断获取未处理申诉的数量
+      window.appealsCount = setInterval(() => {
+        this.$store.dispatch('countUnHandleAppeals')
+      }, 3000)
+    },
+    beforeRouteLeave () {
+      console.log('清除定时器')
+      clearInterval(window.appealsCount)
     }
-}
+  }
 </script>
 
 <!-- Global CSS for all vue components -->

sso-manage-console-web/src/components/accounts/AccountMenu.vue

@@ -8,7 +8,7 @@
         <a><img src="/static/images/data.png" alt="Data">用户管理</a>
       </router-link>
       <router-link tag="li" active-class="active" :to="{ name: 'AppealHome' }">
-        <a><img src="/static/images/data.png" alt="Data">申诉管理</a>
+        <a><img src="/static/images/data.png" alt="Data"><el-badge :is-dot="isNotification" class="item">申诉管理</el-badge></a>
       </router-link>
     </ul>
   </div>
@@ -16,7 +16,12 @@
 
 <script>
   export default {
-    name: 'account-menu'
+    name: 'account-menu',
+    computed: {
+      isNotification () {
+        return this.$store.getters.isNotification
+      }
+    }
   }
 </script>
 

sso-manage-console-web/src/components/common/NavHeader.vue

@@ -15,7 +15,7 @@
       <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav navbar-left">
           <router-link tag="li" active-class="active" to="/" exact><a>首页</a></router-link>
-          <router-link tag="li" active-class="active" to="/accounts"><a>账户管理</a></router-link>
+          <router-link tag="li" active-class="active" to="/accounts"><a><el-badge :is-dot="isNotification" class="item">账户管理</el-badge></a></router-link>
           <router-link tag="li" active-class="active" to="/system"><a>系统</a></router-link>
           <router-link tag="li" active-class="active" to="/content"><a>内容</a></router-link>
         </ul>
@@ -26,7 +26,12 @@
 
 <script>
   export default {
-    name: 'nav-header'
+    name: 'nav-header',
+    computed: {
+      isNotification () {
+        return this.$store.getters.isNotification
+      }
+    }
   }
 </script>
 
@@ -70,3 +75,11 @@
     background: none;
   }
 </style>
+
+<style>
+  #app .el-badge__content.is-fixed.is-dot {
+    right: 0;
+    background-color: #FF0000;
+    border-color: #FF0000;
+  }
+</style>

sso-manage-console-web/src/store/index.js

@@ -3,13 +3,14 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import createLogger from 'vuex/dist/logger'
 import * as actions from './actions'
-import enterprises from './modules/enterprises'
+import * as modules from './modules'
 
 Vue.use(Vuex)
 
 // Production environments
 const vuexSession = new VuexPersistence({
-  storage: window.sessionStorage
+  storage: window.sessionStorage,
+  modules: ['enterprises']
 })
 
 const plugins = [vuexSession.plugin]
@@ -22,9 +23,7 @@ if (debug) {
 
 const store = new Vuex.Store({
   actions,
-  modules: {
-    enterprises
-  },
+  modules: modules,
   strict: debug,
   plugins: plugins
 })

sso-manage-console-web/src/store/modules/accounts.js

@@ -0,0 +1,46 @@
+import axios from '@/assets/js/axios'
+import * as types from '../mutation-types'
+
+function countUnHandleAppeals () {
+  return axios.get('/api/appeal//countUnHandleAppeals')
+}
+
+// State
+const state = {
+  unHandleCount: 0
+}
+
+// Getters
+const getters = {
+  isNotification: state => {
+    return state.unHandleCount > 0
+  }
+}
+
+// Actions
+const actions = {
+  countUnHandleAppeals (context) {
+    return countUnHandleAppeals()
+      .then(count => {
+        console.log(count)
+        context.commit(types.COUNT_UN_HANDLE_APPEALS, count)
+      })
+      .catch(response => {
+        console.log(response)
+      })
+  }
+}
+
+// Mutations
+const mutations = {
+  [types.COUNT_UN_HANDLE_APPEALS] (state, count) {
+    state.unHandleCount = count || 0
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}

sso-manage-console-web/src/store/modules/index.js

@@ -0,0 +1,7 @@
+import accounts from './accounts'
+import enterprises from './enterprises'
+
+export {
+  accounts,
+  enterprises
+}

sso-manage-console-web/src/store/mutation-types.js

@@ -1,6 +1,7 @@
 export const CHOOSE_ENTERPRISE = 'CHOOSE_ENTERPRISE'
 export const CLEAR_ENTERPRISE = 'CLEAR_ENTERPRISE'
 export const ALL_APPS = 'ALL_APPS'
+export const COUNT_UN_HANDLE_APPEALS = 'COUNT_UN_HANDLE_APPEALS'
 export const ADD_TO_CART = 'ADD_TO_CART'
 export const SET_CART_ITEMS = 'SET_CART_ITEMS'
 export const SET_CHECKOUT_STATUS = 'SET_CHECKOUT_STATUS'

sso-manage-console/src/main/java/com/uas/sso/sso/backend/api/AppealBackendController.java

@@ -51,4 +51,11 @@ public class AppealBackendController {
         return new ResultBean<>(true);
     }
 
+    @RequestMapping(method = RequestMethod.GET, path = "//countUnHandleAppeals",
+            produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
+    public ResultBean<Long> countUnHandleAppeals() {
+
+        return new ResultBean<>(appealService.countUnHandleAppeals());
+    }
+
 }

sso-manage-console/src/main/java/com/uas/sso/sso/backend/service/AppealService.java

@@ -33,4 +33,11 @@ public interface AppealService {
      * @param isPass    是否审核通过
      */
     void approveAppealRequest(Long appealId, Boolean isPass);
+
+    /**
+     * 统计未处理的申诉信息的数量
+     *
+     * @return  未处理申诉信息数量
+     */
+    Long countUnHandleAppeals();
 }

sso-manage-console/src/main/java/com/uas/sso/sso/backend/service/impl/AppealServiceImpl.java

@@ -152,6 +152,22 @@ public class AppealServiceImpl implements AppealService {
         }
     }
 
+    @Override
+    public Long countUnHandleAppeals() {
+
+        return appealDao.count(new Specification<Appeal>() {
+            @Override
+            public Predicate toPredicate(Root<Appeal> root, CriteriaQuery<?> query,
+                    CriteriaBuilder builder) {
+                // 查询条件：status = 1
+                Predicate predicate = builder.equal(root.get("status"), 1);
+
+                query.where(predicate);
+                return null;
+            }
+        });
+    }
+
     private Appeal assertAppealExist(Long appealId) {
         Appeal appeal = appealDao.findOne(appealId);
         if (appeal == null) {