update: 消息中心

src/components/layout/components/change-store.vue

@@ -116,7 +116,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 15px;
+  margin-right: 48px;
   padding: 9px;
   font-size: 16px;
   font-weight: 500;
@@ -128,6 +128,16 @@ export default {
     margin-left: 5px;
     transition: 0.3s;
   }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 24px;
+    z-index: 1;
+    transform: translateY(-50%);
+    height: 24px;
+    border-left: 1px solid #dcdfe6;
+  }
   &:hover {
     background: #f2f3f5;
     .change-store-icon {

src/components/layout/components/message-center.vue

+<template>
+  <el-popover ref="popover" placement="bottom-end" width="400" trigger="click" :visible-arrow="false" popper-class="popover-msg">
+    <el-badge class="dm-layout-badge" slot="reference" :value="total" :max="99" :hidden="!total">
+      <i class="iconfont-components3 icon-cp-BellOutlined message-icon"></i>
+    </el-badge>
+    <div slot="default">
+      <h2 class="message-title">系统消息 <el-button class="read-all" type="text">全部已读</el-button></h2>
+      <ul class="list" v-if="messageData.length > 0" v-infinite-scroll="loadMoreMessage" style="overflow:auto" :infinite-scroll-distance="5">
+        <li v-for="item in messageData" :key="item.auditId">
+          <h3>任务通知</h3>
+          <p>{{ item.detail }}</p>
+          <div class="bottom">
+            <span class="tips">{{ item.createTime | formatTimeYmdHms }}</span>
+            <el-button type="text" @click="toDetail(item)">查看详情</el-button>
+          </div>
+        </li>
+        <div v-show="loading" class="loading">
+          <i class="el-icon-loading" />
+        </div>
+      </ul>
+      <div v-else class="empty">
+        <img src="../images/no-data.png" />
+        <p class="tips">暂无未读消息</p>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import { getRequest } from '@/api/api.js';
+import errorMsg from '@/common/js/error.js';
+
+export default {
+  name: 'MessageCenter',
+  data() {
+    return {
+      params: {
+        wxEnterpriseId: '',
+        auditFlag: 0,
+        pageNum: 1, // 当前页
+        pageSize: 20, // 一页显示个数
+        totalPage: 1
+      },
+      messageData: [],
+      total: 0,
+      loading: false
+    };
+  },
+  created() {
+    this.params.wxEnterpriseId = JSON.parse(localStorage.getItem('userInfos') || '{}').wxEnterpriseId;
+    this.getMessage();
+  },
+  methods: {
+    getMessage() {
+      if (this.params.pageNum == 1) {
+        this.messageData = [];
+      }
+      const { wxEnterpriseId, auditFlag, pageNum, pageSize } = this.params;
+      this.loading = true;
+      getRequest('/haoban-manage3-web/audit/find-page', { wxEnterpriseId, auditFlag, pageNum, pageSize })
+        .then(resp => {
+          const { errorCode, result } = resp.data || {};
+          if (errorCode != 1) {
+            errorMsg.errorMsg(resp.data);
+            return;
+          }
+          this.params.totalPage = result.totalPage;
+          this.total = result.totalCount;
+          if (Array.isArray(result.result)) {
+            this.messageData = [...this.messageData, ...result.result];
+          }
+        })
+        .finally(() => (this.loading = false));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.message-icon {
+  color: #606266;
+  font-size: 24px;
+  cursor: pointer;
+  &:hover {
+    background: #f2f3f5;
+  }
+}
+.popover-msg {
+  .message-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: bottom;
+    padding: 15px 20px;
+    color: #303133;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    margin-bottom: 0;
+    font-size: 16px;
+    line-height: 22px;
+    border-bottom: 1px solid #e4e7ed;
+    .read-all {
+      line-height: normal;
+    }
+  }
+  .list {
+    max-height: 480px;
+    color: #303133;
+    padding-bottom: 14px;
+    box-sizing: border-box;
+    li {
+      padding: 14px 20px;
+      border-bottom: 1px solid #e4e7ed;
+      &:hover {
+        background: #f7f8fa;
+      }
+      h3 {
+        margin-bottom: 7px;
+        font-weight: bold;
+      }
+      p {
+        font-size: 13px;
+        line-height: 18px;
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        height: 17px;
+        margin-top: 3px;
+      }
+    }
+  }
+  .loading {
+    text-align: center;
+    padding-top: 5px;
+  }
+  .empty {
+    height: 149px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 30px;
+      height: 30px;
+      margin-bottom: 13px;
+    }
+  }
+  .tips {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+</style>
+
+<style lang="scss">
+.dm-layout-badge .el-badge__content {
+  background-color: #ff4d4f;
+}
+</style>

src/components/layout/index.vue

 <template>
   <div class="hb-layout" v-loading="fullLoading.visible">
-    <main-menu :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''" @showLoading="onShowLoading"></main-menu>
+    <main-menu ref="mainMenu" :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''" @showLoading="onShowLoading"></main-menu>
     <aside-menu :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
     <div class="hb-layout-content">
       <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
@@ -20,9 +20,11 @@ import errorMsg from '@/common/js/error.js';
 import MainMenu from './main-menu.vue';
 import AsideMenu from './aside-menu.vue';
 import BreadMenu from './bread-menu.vue';
+let provideData = { layoutVm: {} };
 export default {
   name: 'DmHbLayout',
   components: { MainMenu, AsideMenu, BreadMenu },
+  provide: () => provideData,
   data() {
     return {
       breadShow: true,
@@ -46,6 +48,8 @@ export default {
       next();
     });
     this.getMenuList();
+    provideData.layoutVm = this;
+    this.$on('command', this.onCommand);
   },
   methods: {
     getMenuList() {
@@ -116,6 +120,14 @@ export default {
           this.fullLoading.visible = false;
         }, 500);
       }
+    },
+    onCommand(command) {
+      const methods = {
+        updateApplyCount: () => this.$refs.mainMenu.updateAplyCount()
+      };
+      if (typeof methods[command] == 'function') {
+        methods[command]();
+      }
     }
   }
 };

src/components/layout/main-menu.vue

@@ -8,7 +8,9 @@
     </div>
     <div class="main-info">
       <change-store @showLoading="loading => $emit('showLoading', loading)"></change-store>
-      <message-center></message-center>
+      <div class="apply-info" @click="$router.push('/unreview')">
+        待审核 <span v-if="applyCount > 0">({{ applyCount > 99 ? '99+' : applyCount }})</span>
+      </div>
       <user-info @showLoading="loading => $emit('showLoading', loading)"></user-info>
     </div>
   </div>
@@ -16,11 +18,10 @@
 
 <script>
 import ChangeStore from './components/change-store.vue';
-import MessageCenter from './components/message-center.vue';
 import UserInfo from './components/user-info.vue';
 export default {
   name: 'main-menu',
-  components: { ChangeStore, MessageCenter, UserInfo },
+  components: { ChangeStore, UserInfo },
   provide: {
     projectName: 'haoban-manage-web'
   },
@@ -36,6 +37,11 @@ export default {
       return this.menuList.filter(el => el.hasRight && el.isShow);
     }
   },
+  data() {
+    return {
+      applyCount: 0
+    };
+  },
   methods: {
     toIndex() {
       this.$router.push('/');
@@ -57,6 +63,9 @@ export default {
       if (path) {
         this.$router.push('/' + path);
       }
+    },
+    updateAplyCount() {
+      console.log('获取待审批数量');
     }
   }
 };
@@ -123,6 +132,18 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    .apply-info {
+      padding: 9px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #303133;
+      border-radius: 4px;
+      cursor: pointer;
+      box-sizing: border-box;
+      &:hover {
+        background: #f2f3f5;
+      }
+    }
   }
 }
 </style>