优化

src/layout/components/Sidebar/SidebarItem.vue

@@ -6,6 +6,7 @@
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
           <template #title>
             <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+            <span class="bage" v-if="onlyOneChild.meta?.title == '我的待办' && total > 0">{{ total }}</span>
           </template>
         </el-menu-item>
       </app-link>
@@ -34,7 +35,11 @@ import { isExternal } from '@/utils/validate';
 import AppLink from './Link.vue';
 import { getNormalPath } from '@/utils/ruoyi';
 import { RouteRecordRaw } from 'vue-router';
-
+import { pageByTaskWait } from '@/api/workflow/task';
+import useUserStore from '@/store/modules/user';
+import useNoticeStore from '@/store/modules/notice';
+const userStore = useUserStore();
+const noticeStore = storeToRefs(useNoticeStore());
 const props = defineProps({
   item: {
     type: Object as PropType<RouteRecordRaw>,
@@ -49,7 +54,21 @@ const props = defineProps({
     default: ''
   }
 });
+const total = ref(0);
+onMounted(() => {
+  if (onlyOneChild.value.meta?.title == '我的待办') {
+    getWaitingList();
+  }
+});
+// 获取我的待办
+//分页
+const getWaitingList = () => {
+  pageByTaskWait({ pageNum: 1, pageSize: 10 }).then((resp) => {
+    console.log(resp);
 
+    total.value = resp.total;
+  });
+};
 const onlyOneChild = ref<any>({});
 
 const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
@@ -64,12 +83,12 @@ const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[])
     return true;
   });
 
-  // When there is only one child router, the child router is displayed by default
+  // 只有一个子路由时默认显示子路由
   if (showingChildren.length === 1) {
     return true;
   }
 
-  // Show parent if there are no child router to display
+  // 没有子路由可显示时显示父路由
   if (showingChildren.length === 0) {
     onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
     return true;
@@ -98,4 +117,48 @@ const hasTitle = (title: string | undefined): string => {
   }
   return title;
 };
+//用深度监听 消息
+watch(
+  () => noticeStore.state.value.notices,
+  (newVal) => {
+    if (onlyOneChild.value.meta?.title == '我的待办') {
+      // 延迟1秒
+      let time = setTimeout(() => {
+        getWaitingList();
+        clearTimeout(time);
+      }, 500);
+    }
+  },
+  { deep: true }
+);
 </script>
+
+<style lang="scss" scoped>
+.bage {
+  position: absolute;
+  top: 6px;
+  right: 36px;
+  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>