优化

src/components/TopNav/index.vue

@@ -4,6 +4,7 @@
       <el-menu-item v-if="index < visibleNumber" :key="index" :style="{ '--theme': theme }" :index="item.path">
         <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta ? item.meta.icon : ''" />
         {{ item.meta?.title }}
+        <!-- <span class="bage" v-if="item.meta?.title == '我的任务' && total > 0">{{ total }}</span> -->
       </el-menu-item>
     </template>
 
@@ -26,20 +27,27 @@ import useAppStore from '@/store/modules/app';
 import useSettingsStore from '@/store/modules/settings';
 import usePermissionStore from '@/store/modules/permission';
 import { RouteRecordRaw } from 'vue-router';
-
+import useUserStore from '@/store/modules/user';
+import useNoticeStore from '@/store/modules/notice';
+import { pageByTaskWait } from '@/api/workflow/task';
+const userStore = useUserStore();
+const noticeStore = storeToRefs(useNoticeStore());
 // 顶部栏初始数
 const visibleNumber = ref<number>(-1);
 // 当前激活菜单的 index
 const currentIndex = ref<string>();
 // 隐藏侧边栏路由
 const hideList = ['/index', '/user/profile'];
-
+const total = ref(1);
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 const route = useRoute();
 const router = useRouter();
-
+onMounted(() => {
+  console.log(33333);
+  getWaitingList();
+});
 // 主题颜色
 const theme = computed(() => settingsStore.theme);
 // 所有的路由信息
@@ -158,6 +166,26 @@ onBeforeUnmount(() => {
 onMounted(() => {
   setVisibleNumber();
 });
+// 获取我的待办
+//分页
+const getWaitingList = () => {
+  pageByTaskWait({ pageNum: 1, pageSize: 10 }).then((resp) => {
+    console.log(resp);
+
+    total.value = resp.total;
+  });
+};
+//用深度监听 消息
+watch(
+  () => noticeStore.state.value.notices,
+  (newVal) => {
+    let time = setTimeout(() => {
+      getWaitingList();
+      clearTimeout(time);
+    }, 500);
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss">
@@ -197,4 +225,31 @@ onMounted(() => {
 .topmenu-container .svg-icon {
   margin-right: 4px;
 }
+.bage {
+  position: absolute;
+  top: 6px;
+  right: -12px;
+  padding: 0 6px;
+  height: 16px;
+  line-height: 16px;
+  background: #ff7a7a;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #fff;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.el-menu-item .el-menu-item__content {
+  position: relative;
+  padding-right: 24px;
+}
+
+.menu-title {
+  display: inline-block;
+  max-width: calc(100% - 24px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>