首页红点提醒

src/views/main/api.js

@@ -105,4 +105,7 @@ export const getMusicGroupEduTeacher = data => request2({
 })
 
 // 获取统计数据
-// export const
+export const hasIndexErrData = () => request2({
+  url: '/api-web/hasIndexErrData',
+  method: 'get'
+})

src/views/main/index.vue

@@ -8,10 +8,12 @@
         <el-tab-pane v-permission="'newIndex'" lazy label="基本信息" name="baseinfo">
           <baseinfo v-if="activeKey === 'baseinfo'"/>
         </el-tab-pane>
-        <el-tab-pane v-permission="'getIndexErrData'" lazy label="异常处理" name="abnormal">
+        <el-tab-pane v-permission="'getIndexErrData'" lazy name="abnormal">
+          <el-badge slot="label" class="badge" is-dot :hidden="!status.indexErrData">异常处理</el-badge>
           <abnormal v-if="activeKey === 'abnormal'"/>
         </el-tab-pane>
-        <el-tab-pane v-permission="'getRemindMatterData'" label="事项提醒" name="reminders">
+        <el-tab-pane v-permission="'getRemindMatterData'" name="reminders">
+          <el-badge slot="label" class="badge" is-dot :hidden="!status.remindMatterData">事项提醒</el-badge>
           <reminders v-if="activeKey === 'reminders'"/>
         </el-tab-pane>
         <el-tab-pane v-permission="'inspectionItemPlan/queryPage'" lazy label="【乐团主管】日程安排" name="teamSchedule">
@@ -30,6 +32,7 @@ import abnormal from './abnormal'
 import teamSchedule from './teamSchedule'
 import ScheduleBranch from './schedule-branch'
 import reminders from './reminders'
+import { hasIndexErrData } from './api'
 export default {
   name: 'Main',
   components: {
@@ -41,20 +44,51 @@ export default {
   },
   data() {
     return {
-      activeKey: ''
+      activeKey: '',
+      status: {
+        indexErrData: false,
+        remindMatterData: false,
+      }
+    }
+  },
+  computed: {
+    hasError() {
+      const { indexErrData, remindMatterData } = this.status
+      return indexErrData || remindMatterData
     }
   },
   watch: {
     '$route.query'(newValue, oldValue) {
       if (newValue.tabrouter !== oldValue.tabrouter) {
         this.$forceUpdate()
+        this.FetchDot()
       }
     }
   },
+  mounted() {
+    this.FetchDot()
+  },
   methods: {
     changeKey(val) {
       this.activeKey = val
     },
+    async FetchDot() {
+      try {
+        const res = await hasIndexErrData()
+        this.status = res.data
+        this.toggleDot()
+      } catch (error) {}
+    },
+    toggleDot() {
+      const el = document.querySelector('.menu-wrapper a[href="#/main/main"] span')
+      if (el) {
+        if (this.hasError) {
+          el.classList.add('main-dot')
+        } else {
+          el.classList.remove('main-dot')
+        }
+      }
+    },
     __init () {
       getIndex().then(res => {
         if (res.code == 200) {
@@ -126,4 +160,25 @@ export default {
     }
   }
 }
+.badge{
+  .el-badge__content.is-fixed.is-dot{
+    top: 5px;
+  }
+}
+</style>
+<style lang="less">
+.main-dot {
+  position: relative;
+  &::after{
+    content: '';
+    display: block;
+    position: absolute;
+    height: 8px;
+    width: 8px;
+    background-color: #F56C6C;
+    border-radius: 50%;
+    right: -10px;
+    top: 15px;
+  }
+}
 </style>