Przeglądaj źródła

fix(首页通知): 修复通知加载更多功能并优化显示逻辑

liujt 2 miesięcy temu
rodzic
commit
3e96c29d3a

+ 1 - 1
src/views/bpm/documents/noticeIssuance/components/addOrEdit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="ele-body">
+    <div>
         <el-card shadow="never">
             <el-tabs v-model="tabValue" type="card" @tab-click="handleTabClick">
                 <el-tab-pane label="稿纸信息" name="1">

+ 37 - 23
src/views/home/index.vue

@@ -171,7 +171,7 @@
                 </div>
                 <div class="notification-date">{{ item.createTime }}</div>
               </div>
-              <div class="notification-more" @click="loadMoreNotifications">
+              <div v-if="hasMore" class="notification-more" @click="loadMoreNotifications">
                 更多......
               </div>
             </div>
@@ -269,6 +269,7 @@ export default {
       notifications: [],
       currentPage: 1,
       pageSize: 4,
+      hasMore: true,
       portals: [],
       calendarShowMore: false,
       isDelFlag: false,
@@ -462,13 +463,15 @@ export default {
     },
     async getMessageList() {
       let list = [];
+      let total = 0;
       if(this.activeTab === 'notice') {
         const res = await noticeDocumentPageV1API({
-          pageNum: 1,
+          pageNum: this.currentPage,
           size: 5,
           approvalStatus: 2
         })
         console.log('noticeDocumentPageV1API~~~', res);
+        total = res.count || 0;
         list = (res.list || []).map((item) => {
           // 提取 HTML 中的图片地址
           const images = [];
@@ -480,7 +483,7 @@ export default {
           }
           // 提取纯文本内容(去除 HTML 标签和空格)
           const textContent = content.replace(/<[^>]+>/g, '').replace(/\s+/g, '').trim();
-          
+
           return {
             id: item.id,
             title: item.title,
@@ -495,11 +498,12 @@ export default {
         list = []
       } else if(this.activeTab === 'system') {
         const res = await notifyMessagePageAPI({
-          pageNum: 1,
+          pageNum: this.currentPage,
           size: 5,
           // userId: this.user.info.userId,
-          
+
         });
+        total = res.count || 0;
         list = (res.list || []).map((item) => {
           return {
             title: item.templateName,
@@ -510,9 +514,16 @@ export default {
           }
         });
       }
-      
-      this.notifications = list;
-      console.log('notifications~~~', this.notifications);
+
+      // 如果是第一页,直接赋值;否则拼接到后面
+      if (this.currentPage === 1) {
+        this.notifications = list;
+      } else {
+        this.notifications = [...this.notifications, ...list];
+      }
+      // 判断是否还有更多数据
+      this.hasMore = this.notifications.length < total;
+      console.log('notifications~~~', this.notifications, 'hasMore:', this.hasMore);
     },
     async getMyProjectTotal() {
       this.myProjectList = await getMyProjectTotal({});
@@ -583,24 +594,27 @@ export default {
       this.getMyWorkCalendar();
     },
     handleTabClick() {
-      // 切换标签页时重置页码
-      // this.currentPage = 1;
+      // 切换标签页时重置页码和hasMore
+      this.currentPage = 1;
+      this.hasMore = true;
+      this.notifications = [];
       this.getMessageList();
     },
     loadMoreNotifications() {
       // 加载更多通知(增加页码)
-      // this.currentPage++;
-      switch(this.activeTab) {
-        case 'notice':
-          this.handelRouterTo('/page-wt/documents/noticeIssuance');
-          break;
-        case 'industry':
-          this.handelRouterTo('/industry');
-          break;
-        case 'system':
-          this.handelRouterTo('/page-wt/message');
-          break;
-      }
+      this.currentPage++;
+      this.getMessageList();
+      // switch(this.activeTab) {
+      //   case 'notice':
+      //     this.handelRouterTo('/page-wt/documents/noticeIssuance');
+      //     break;
+      //   case 'industry':
+      //     this.handelRouterTo('/industry');
+      //     break;
+      //   case 'system':
+      //     this.handelRouterTo('/page-wt/message');
+      //     break;
+      // }
     },
     // 获取当天所在周的范围,周一开头
     getWeekRange() {
@@ -1128,7 +1142,7 @@ export default {
 .notification-more {
   text-align: right;
   margin-top: 12px;
-  font-size: 12px;
+  font-size: 15px;
   color: #1890ff;
   cursor: pointer;
   &:hover {