消息中心

ys_vue/src/views/message.vue

@@ -4,23 +4,53 @@
     <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
       <el-form :inline="true">
         <el-col :span="2">
-          <el-form-item>全部消息</el-form-item>
+          <el-form-item>消息中心</el-form-item>
         </el-col>
       </el-form>
     </el-col>
-    <div class="message-div" v-for="item in messages">
-      <p>
-        <span class="message-type" v-if="item.noticeType == 0">【审批】</span>
-        <span class="message-type" v-else-if="item.noticeType == 1">【警告】</span>
-        <span class="message-type" v-else-if="item.noticeType == 2">【保养】</span>
-        <span
-          class="message-title"
-          @click="locationHerf(item.refId, item.noticeType)"
-        >{{item.projectName}}</span>
-        <span class="message-time">{{item.indate}}</span>
-      </p>
-      <p class="message-article">{{item.content}}</p>
-    </div>
+
+    <!--选项卡-->
+    <el-col :span="24">
+      <el-tabs v-model="activePage" @tab-click="handleClick" type="card">
+        <el-tab-pane name="0" label="审批">
+          <div class="message-div" v-for="item in messages[0]">
+            <p>
+              <span
+                class="message-title"
+                @click="locationHerf(item.refId, item.noticeType)"
+              >{{item.projectName}}</span>
+              <span class="message-time">{{item.indate}}</span>
+            </p>
+            <p class="message-article">{{item.content}}</p>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="1" label="警告">
+          <div class="message-div" v-for="item in messages[1]">
+            <p>
+              <span
+                class="message-title"
+                @click="locationHerf(item.refId, item.noticeType)"
+              >{{item.projectName}}</span>
+              <span class="message-time">{{item.indate}}</span>
+            </p>
+            <p class="message-article">{{item.content}}</p>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="2" label="保养">
+          <div class="message-div" v-for="item in messages[2]">
+            <p>
+              <span
+                class="message-title"
+                @click="locationHerf(item.refId, item.noticeType)"
+              >{{item.projectName}}</span>
+              <span class="message-time">{{item.indate}}</span>
+            </p>
+            <p class="message-article">{{item.content}}</p>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+
     <!--工具条-->
     <el-col :span="24" class="toolbar">
       <el-pagination
@@ -45,7 +75,8 @@ export default {
       page: 1,
       size: 20,
       total: 0,
-      tableHeight: 0
+      tableHeight: 0,
+      activePage: 0
     };
   },
   methods: {
@@ -58,6 +89,10 @@ export default {
       this.size = val;
       this.loadNotice();
     },
+    //标签页面切换时
+    handleClick(tab, event) {
+      this.activeTab = tab.name;
+    },
     //读取消息提示
     loadNotice() {
       this.http.post(
@@ -68,7 +103,10 @@ export default {
         },
         res => {
           if (res.code == "ok") {
-            this.messages = res.data.list.list;
+            this.messages = [];
+            this.messages.push(res.data[0].emergencyList.list);
+            this.messages.push(res.data[1].emergencyList.list);
+            this.messages.push(res.data[2].emergencyList.list);
           } else {
             this.$message({
               message: res.msg,