消息中心

ys_vue/src/views/message.vue

@@ -14,12 +14,15 @@
       <el-tabs v-model="activePage" @tab-click="handleClick" type="card">
         <el-tab-pane name="0" label="审批">
           <div :style="heightString">
-            <div class="message-div" v-for="item in messages[0]">
+            <span v-if="messages[0].length == 0">目前暂无消息</span>
+            <div
+              class="message-div"
+              v-for="item in messages[0]"
+              @click="locationHerf(item.id, item.refId, item.noticeType)"
+            >
               <p>
-                <span
-                  class="message-title"
-                  @click="locationHerf(item.refId, item.noticeType)"
-                >{{item.projectName}}</span>
+                <span class="message-title isRead" v-if="item.isRead == 1">{{item.projectName}}</span>
+                <span class="message-title" v-else>{{item.projectName}}</span>
                 <span class="message-time">{{item.indate}}</span>
               </p>
               <p class="message-article">{{item.content}}</p>
@@ -40,12 +43,15 @@
         </el-tab-pane>
         <el-tab-pane name="1" label="警告">
           <div :style="heightString">
-            <div class="message-div" v-for="item in messages[1]">
+            <span v-if="messages[1].length == 0">目前暂无消息</span>
+            <div
+              class="message-div"
+              v-for="item in messages[1]"
+              @click="locationHerf(item.id, item.refId, item.noticeType)"
+            >
               <p>
-                <span
-                  class="message-title"
-                  @click="locationHerf(item.refId, item.noticeType)"
-                >{{item.projectName}}</span>
+                <span class="message-title isRead" v-if="item.isRead == 1">{{item.projectName}}</span>
+                <span class="message-title" v-else>{{item.projectName}}</span>
                 <span class="message-time">{{item.indate}}</span>
               </p>
               <p class="message-article">{{item.content}}</p>
@@ -66,12 +72,15 @@
         </el-tab-pane>
         <el-tab-pane name="2" label="保养">
           <div :style="heightString">
-            <div class="message-div" v-for="item in messages[2]">
+            <span v-if="messages[2].length == 0">目前暂无消息</span>
+            <div
+              class="message-div"
+              v-for="item in messages[2]"
+              @click="locationHerf(item.id, item.refId, item.noticeType)"
+            >
               <p>
-                <span
-                  class="message-title"
-                  @click="locationHerf(item.refId, item.noticeType)"
-                >{{item.projectName}}</span>
+                <span class="message-title isRead" v-if="item.isRead == 1">{{item.projectName}}</span>
+                <span class="message-title" v-else>{{item.projectName}}</span>
                 <span class="message-time">{{item.indate}}</span>
               </p>
               <p class="message-article">{{item.content}}</p>
@@ -100,7 +109,7 @@ import util from "../common/js/util";
 export default {
   data() {
     return {
-      messages: [],
+      messages: [[], [], []],
       page0: 1,
       page1: 1,
       page2: 1,
@@ -176,7 +185,7 @@ export default {
       );
     },
     //点击消息的跳转
-    locationHerf(id, type) {
+    locationHerf(id, refid, type) {
       this.http.post(
         this.port.notice.read,
         {
@@ -200,13 +209,13 @@ export default {
       );
       if (type == 0) {
         //审批 跳转到模具详情
-        this.$router.push("/moldList/" + id);
+        this.$router.push("/moldList/" + refid);
       } else if (type == 1) {
         //警告 跳转到运行监测
         this.$router.push("/detection");
       } else if (type == 2) {
         //保养 跳转到运行监测详情
-        this.$router.push("/detection/" + id);
+        this.$router.push("/detection/" + refid);
       }
     }
   },
@@ -223,6 +232,7 @@ export default {
 
 <style scoped>
 .message-div {
+  cursor: pointer;
   padding: 5px 0;
 }
 
@@ -241,11 +251,14 @@ export default {
 }
 
 .message-title {
-  cursor: pointer;
   color: #409eff;
 }
 
 .message-article {
   color: #555;
 }
+
+.isRead {
+  color: #999 !important;
+}
 </style>