1

src/components/common/Sidebar.vue

@@ -15,7 +15,13 @@
           <el-submenu class="second" :index="item.index" :key="item.index">
             <template slot="title">
               <i :class="item.icon"></i>
-              <span slot="title">{{ item.title }}</span>
+              <span slot="title">
+                <span>{{ item.title }}</span>
+                <span class="num" v-bind:style="{ color: getColor(item.num) }" v-if="item.num"
+                  >[<span>{{ getNum(item.num) }}</span
+                  >]</span
+                >
+              </span>
             </template>
             <template v-for="subItem in item.subs">
               <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
@@ -29,7 +35,13 @@
         <template v-else>
           <el-menu-item class="first" :index="item.index" :key="item.index">
             <i :class="item.icon"></i>
-            <span slot="title">{{ item.title }}</span>
+            <span slot="title">
+              <span>{{ item.title }}</span>
+              <span class="num" v-bind:style="{ color: getColor(item.num) }" v-if="item.num"
+                >[<span>{{ getNum(item.num) }}</span
+                >]</span
+              >
+            </span>
           </el-menu-item>
         </template>
       </template>
@@ -41,6 +53,8 @@
 import _ from 'lodash';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: menu } = createNamespacedHelpers('menu');
+const { mapActions: achieveApply } = createNamespacedHelpers('achieveApply');
+
 import bus from '../common/bus';
 export default {
   data() {
@@ -53,6 +67,7 @@ export default {
           title: '系统首页',
         },
       ],
+      num: {},
     };
   },
   computed: {
@@ -70,6 +85,7 @@ export default {
   },
   methods: {
     ...menu(['query']),
+    ...achieveApply(['queryNum']),
     // 分配用户彩带权限
     async getMenu() {
       // 客户信息
@@ -183,6 +199,7 @@ export default {
         // ];
         let data = [
           {
+            num: 'cs',
             icon: 'el-icon-eleme',
             index: '2',
             title: '我的申报',
@@ -199,14 +216,38 @@ export default {
               },
             ],
           },
-          { icon: 'el-icon-postcard', index: '/userExpertScore', title: '专家评分' },
-          { icon: 'el-icon-postcard', index: '/userExpertMeet', title: '专家会审' },
-          { icon: 'el-icon-postcard', index: '/userCert', title: '证书管理' },
+          { num: 'pf', icon: 'el-icon-postcard', index: '/userExpertScore', title: '专家评分' },
+          { num: 'hs', icon: 'el-icon-postcard', index: '/userExpertMeet', title: '专家会审' },
+          { num: 'zs', icon: 'el-icon-postcard', index: '/userCert', title: '证书管理' },
         ];
         list.push(...data);
         this.$set(this, `items`, _.uniqBy(list, 'index'));
       }
     },
+    // 查询成果数
+    async searchNum() {
+      let role = this.user.role;
+      if (role == undefined) {
+        let res = await this.queryNum(this.user.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `num`, res.data);
+        }
+      }
+    },
+    // 分菜单成果数
+    getNum(data) {
+      if (data == 'cs') return this.num.cs;
+      else if (data == 'pf') return this.num.pf;
+      else if (data == 'hs') return this.num.hs;
+      else if (data == 'zs') return this.num.zs;
+    },
+    // 显示颜色
+    getColor(data) {
+      if (data == 'cs' && this.num.cs > 0) return '#ff0000';
+      else if (data == 'pf' && this.num.pf > 0) return '#ff0000';
+      else if (data == 'hs' && this.num.hs > 0) return '#ff0000';
+      else if (data == 'zs' && this.num.zs > 0) return '#ff0000';
+    },
   },
   watch: {
     user: {
@@ -214,6 +255,7 @@ export default {
       immediate: true,
       handler(val) {
         this.getMenu();
+        this.searchNum();
       },
     },
   },
@@ -238,10 +280,11 @@ export default {
 .sidebar > ul {
   height: 100%;
 }
-// /deep/.first {
-//   padding-left: 0 !important;
-// }
-// /deep/.second .el-submenu__title {
-//   padding-left: 0 !important;
-// }
+.num {
+  font-size: 16px;
+  padding: 0 10px;
+  span {
+    padding: 0 5px;
+  }
+}
 </style>