消息提醒

src/api/base/message.js

@@ -45,6 +45,10 @@ function batchRemove(idList){
   });
 }
 
+function getMessageCount(){
+  return request.post(constant.serverUrl + "/message/getMessageCount");
+}
+
 export default {
-  list,create,edit,add,update,remove,batchRemove,pageList
+  list,create,edit,add,update,remove,batchRemove,pageList,getMessageCount
 }

src/components/MenuTreeItem/index.vue

@@ -1,11 +1,14 @@
 <template>
   <!--这里由于包裹了一层div所以原生collpase样式无法起作用-->
-  <div class='menu-wrapper'>
+  <div class="menu-wrapper">
     <template v-for="item in routes">
-      <template v-if="item.children==null || item.children.length==0">     
+      <template v-if="item.children==null || item.children.length==0">
         <el-menu-item :index="item.menuUrl" :key="item.id">
-            <i :class="item.icon"></i>
-          <span>{{item.menuName}}</span>
+          <i :class="item.icon"></i>
+          <span>
+            {{item.menuName}}
+            <el-badge v-if="item.msgNum" :value="item.msgNum" :max="99" class="item"></el-badge>
+          </span>
         </el-menu-item>
       </template>
       <template v-else>
@@ -15,7 +18,7 @@
             <i :class="item.icon"></i>
             <span>{{item.menuName}}</span>
           </template>
-          <menu-tree-item class='nest-menu' :routes='item.children' :key="item.id"></menu-tree-item>
+          <menu-tree-item class="nest-menu" :routes="item.children" :key="item.id"></menu-tree-item>
         </el-submenu>
       </template>
     </template>
@@ -24,15 +27,14 @@
 
 <script>
 export default {
-  name: 'MenuTreeItem',
+  name: "MenuTreeItem",
   props: {
     routes: {
       type: Array
     }
   }
-}
+};
 </script>
 
 <style>
-
 </style>

src/views/base/message-list.vue

@@ -13,8 +13,7 @@
     <!--
       要resetFields起作用，必须配置:model和prop
     -->
-    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
-    </el-form>
+    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline"></el-form>
     <el-divider></el-divider>
     <el-row class="button-group">
       <el-button
@@ -25,6 +24,7 @@
         :disabled="multipleSelection.length==0"
         @click="handleBatchDelete"
       >删除选中项</el-button>
+      <el-button type="primary" size="small" plain @click="allRead">全部已读</el-button>
     </el-row>
     <el-table
       :data="tableData"
@@ -35,12 +35,26 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column prop="title" label="标题" width="180"></el-table-column>
+      <!-- <el-table-column type="expand">
+        <template slot-scope="props">
+							<el-form label-position="left" inline class="demo-table-expand">
+								<el-form-item>
+									<span>{{ props.row.content}}</span>
+								</el-form-item>
+							</el-form>
+						</template>
+      </el-table-column>-->
+      <el-table-column prop="title" label="消息标题" width="180"></el-table-column>
       <el-table-column prop="content" label="内容" width="180"></el-table-column>
-      <el-table-column prop="senderId" label="发送人" width="180"></el-table-column>
+      <el-table-column prop="status" label="状态" width="180">
+        <template slot-scope="{row}">{{row.status == 0 ? "未读" : "已读"}}</template>
+      </el-table-column>
       <el-table-column prop="createTime" label="发送时间" width="180"></el-table-column>
       <el-table-column label="操作">
         <template slot-scope="{row}">
+          <span v-if="row.status=='0'">
+            <el-button size="mini" type="primary" @click="toRead(row)">已读</el-button>&#12288;&#12288;
+          </span>
           <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
@@ -66,8 +80,7 @@ export default {
     var self = this;
 
     return {
-      queryModel: {
-      },
+      queryModel: {},
       loading: false,
       tableData: [],
       pageIndex: 1,
@@ -121,8 +134,8 @@ export default {
     },
     pageSizeChange(pageSize) {
       this.pageSize = pageSize;
-      
-      this.$nextTick(()=>{
+
+      this.$nextTick(() => {
         this.changePage(this.pageIndex);
       });
     },
@@ -197,6 +210,27 @@ export default {
       if (refreshed) {
         this.changePage(this.pageIndex);
       }
+    },
+    //全部变为已读
+    allRead() {
+      var self = this;
+      // messageApi.allRead().then(resp => {
+      //   if (resp.data.result) {
+      //     this.$message.success("操作成功");
+      //     self.changePage(self.pageIndex);
+      //   }
+      // });
+    },
+    toRead(record) {
+      var self = this;
+      var formData = new FormData();
+      formData.append("messageId", record.id);
+      // messageApi.allRead().then(resp => {
+      //   if (resp.data.result) {
+      //     this.$message.success("操作成功");
+      //     self.changePage(self.pageIndex);
+      //   }
+      // });
     }
   },
   mounted: function() {

src/views/layout/index.vue

@@ -1,7 +1,9 @@
 <template>
   <el-container class="outter-container">
     <el-header>
-      <h3><img src="../../assets/logo.png" height="38"/></h3>
+      <h3>
+        <img src="../../assets/logo.png" height="38" />
+      </h3>
       <div class="user-info">
         <i class="el-icon-s-custom"></i>
         <span v-html="user.realName" style="margin-right:10px;"></span>
@@ -20,24 +22,30 @@
         </el-menu>
       </el-aside>
       <el-main>
-        <router-view/>
+        <router-view />
       </el-main>
     </el-container>
   </el-container>
 </template>
 <script>
-import MenuTreeItem from "@/components/MenuTreeItem"
-import menuApi from "@/api/sys/menu"
-import userApi from "@/api/sys/user"
+import MenuTreeItem from "@/components/MenuTreeItem";
+import menuApi from "@/api/sys/menu";
+import userApi from "@/api/sys/user";
+import messageApi from "@/api/base/message";
 
 export default {
   data() {
     return {
       menuList: [],
       loading: false,
-      user: {}
+      user: {},
+      messageNum: 0
     };
   },
+  // created() {
+  //   //获取未读消息数
+  //   this.getUnReadMessageNum();
+  // },
   methods: {
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
@@ -53,32 +61,56 @@ export default {
       this.$store.dispatch("user/logout").then(() => {
         this.$router.push({ path: "/login" });
       });
+    }, //获取未读消息数
+    getUnReadMessageNum() {
+      messageApi.getMessageCount().then(resp => {
+        if (resp.data.result) {
+          this.messageNum = resp.data.data;
+          this.resetMenu();
+        }
+      });
+    },
+    //定义菜单的未读消息数
+    resetMenu() {
+      //定义菜单的未读消息数
+      var menuList = this.menuList;
+      console.log(menuList);
+      for (var key in menuList) {
+        if (menuList[key]["menuName"] == "我的消息") {
+          menuList[key]["msgNum"] = this.messageNum; //this.messageNum;
+        }
+      }
+      this.menuList = menuList;
     }
   },
   components: {
-    "menu-tree-item" : MenuTreeItem
+    "menu-tree-item": MenuTreeItem
   },
+
   mounted() {
     this.loading = true;
 
-    userApi.userInfo().then(resp=>{
-      if(resp.data.result){
+    userApi.userInfo().then(resp => {
+      if (resp.data.result) {
         this.user = resp.data.data;
       }
     });
 
-    menuApi.getMenuTree().then(response=>{
-      console.log(response);
+    menuApi
+      .getMenuTree()
+      .then(response => {
+        console.log(response);
 
-      var jsonData = response.data;
+        var jsonData = response.data;
 
-      this.menuList = jsonData.data;
-    
-      this.loading = false;
-    }).catch(exception=>{
-      this.$message.error(exception + "");
-      this.loading = false;
-    });
+        this.menuList = jsonData.data;
+        this.getUnReadMessageNum();
+        this.loading = false;
+      })
+      .catch(exception => {
+        this.$message.error(exception + "");
+        this.loading = false;
+      });
   }
 };
 </script>
@@ -94,7 +126,7 @@ export default {
   color: #333;
   text-align: left;
   height: 70px !important;
-  line-height:70px;
+  line-height: 70px;
   border-bottom: 2px solid rgb(193, 32, 26);
 }
 
@@ -112,7 +144,7 @@ export default {
 
 .el-aside .el-menu {
   flex: 1;
-  background-color:rgb(238, 238, 238);
+  background-color: rgb(238, 238, 238);
 }
 
 .el-main {
@@ -126,20 +158,20 @@ export default {
   text-align: left;
 }
 
-.user-info{
+.user-info {
   position: absolute;
-  right:20px;
-  bottom:10px;
-  font-size:14px;
+  right: 20px;
+  bottom: 10px;
+  font-size: 14px;
   line-height: 30px;
 
-  a{
-    color:blue;
+  a {
+    color: blue;
     cursor: pointer;
     text-decoration: none;
   }
 
-  a:hover{
+  a:hover {
     text-decoration: underline;
   }
 }