信息提示页面修改

ys_vue/src/views/Home.vue

@@ -27,19 +27,52 @@
             popper-class="popover-self"
           >
             <div class="popover-main">消息盒子</div>
-            <div class="popover-item" v-if="popoverData.length == 0">暂无消息</div>
-            <div class="popover-item" v-for="item in popoverData">
-              <p class="popover-title">
-                <span
-                  style="cursor: pointer;"
-                  @click="locationHerf(item.refId, item.noticeType)"
-                >{{item.projectName}}</span>
-                <span class="popover-type" v-if="item.noticeType == 0">[审批]</span>
-                <span class="popover-type" v-else-if="item.noticeType == 1">[警告]</span>
-                <span class="popover-type" v-else-if="item.noticeType == 2">[保养]</span>
-              </p>
-              <p>{{item.content}}</p>
-            </div>
+            <!-- 消息盒子中间部分 -->
+            <el-tabs v-model="activePage" @tab-click="handleClick" type="card" stretch>
+              <!-- 审批的页面 -->
+              <el-tab-pane label="审批" name="0">
+                <div class="popover-item" v-if="popoverData.length == 0">暂无审批消息</div>
+                <div class="popover-item" v-for="item in popoverData">
+                  <p class="popover-title">
+                    <span
+                      style="cursor: pointer;"
+                      @click="locationHerf(item.refId, item.noticeType)"
+                    >{{item.projectName}}</span>
+                  </p>
+                  <p>{{item.content}}</p>
+                </div>
+              </el-tab-pane>
+
+              <!-- 警告的页面 -->
+              <el-tab-pane label="警告" name="1">
+                <div class="popover-item" v-if="popoverData.length == 0">暂无警告消息</div>
+                <div class="popover-item" v-for="item in popoverData">
+                  <p class="popover-title">
+                    <span
+                      style="cursor: pointer;"
+                      @click="locationHerf(item.refId, item.noticeType)"
+                    >{{item.projectName}}</span>
+                  </p>
+                  <p>{{item.content}}</p>
+                </div>
+              </el-tab-pane>
+
+              <!-- 保养的页面 -->
+              <el-tab-pane label="保养" name="2">
+                <div class="popover-item" v-if="popoverData.length == 0">暂无保养消息</div>
+                <div class="popover-item" v-for="item in popoverData">
+                  <p class="popover-title">
+                    <span
+                      style="cursor: pointer;"
+                      @click="locationHerf(item.refId, item.noticeType)"
+                    >{{item.projectName}}</span>
+                  </p>
+                  <p>{{item.content}}</p>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+
+            <!-- 查看全部的按钮 -->
             <router-link :to="'/message'" tag="div" class="popover-button">查看全部</router-link>
           </el-popover>
         </el-badge>
@@ -196,7 +229,8 @@ export default {
       },
       //消息数据
       popoverData: [],
-      tips: false
+      tips: false,
+      activePage: 0
     };
   },
   methods: {
@@ -394,6 +428,11 @@ export default {
         type: "warning",
         duration: 0
       });
+    },
+    //标签页面切换时
+    handleClick(tab, event) {
+      this.activeTab = tab.name;
+      //   this.getOperationRecord(this.activeTab);//应该是取得对应的消息
     }
   },
   mounted() {
@@ -573,7 +612,6 @@ export default {
 .popover-main {
   font-weight: 700;
   padding: 10px;
-  border-bottom: 1px #eee solid;
 }
 
 .popover-item {