站内信

src/layout/components/LayoutNotification.vue

@@ -8,11 +8,28 @@
     <div>
       <div class="top">
         通知 ( {{ total }} )
-      <div class="tool">
-        <m-button type="primary" size="mini" text class="pa-0" @click="onOpen">刷新</m-button>
-        <m-button type="primary" size="mini" text class="pa-0" @click="onSetAllRead">全部标记为已读</m-button>
-        <m-button type="primary" size="mini" text class="pa-0" @click="onDeleteRead">删除已读</m-button>
+        <div class="tool">
+          <m-button type="primary" size="mini" text class="pa-0" @click="onOpen">刷新</m-button>
+          <m-button type="primary" size="mini" text class="pa-0" @click="onSetAllRead">全部标记为已读</m-button>
+          <m-button type="primary" size="mini" text class="pa-0" @click="onDeleteRead">删除已读</m-button>
+        </div>
+
       </div>
+      <div class="top justify-end">
+        <el-dropdown trigger="click" @command="onCommand">
+          <span class="el-dropdown-link">
+            {{ menuList[menuActive].text }}<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item
+              v-for="(menu, index) in menuList"
+              :key="menu.text"
+              :icon="menu.icon"
+              :command="index"
+              :disabled="menuActive === index"
+            >{{ menu.text }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
       </div>
       <div
         class="message"
@@ -22,7 +39,7 @@
       >
         <div>
           <div v-for="(item, index) in items" :key="item.id" class="message-box" @click="onTo(item)">
-            <div class="message-box-title" :class="{ op5: item.readState === 1}">{{ index }}{{ item.title }}</div>
+            <div class="message-box-title" :class="{ op5: item.readState === 1}">{{ item.title }}</div>
             <div class="message-box-content" :class="{ op5: item.readState === 1}">{{ item.content }}</div>
             <div class="message-box-footer">
               <div class="message-box-footer-time" :class="{ op5: item.readState === 1}">{{ item.createTime }}</div>
@@ -33,7 +50,9 @@
             </div>
           </div>
         </div>
-        <div class="loading" v-loading="true" v-if="items.length < total"></div>
+        <div v-if="items.length < total">
+          <span class="el-icon-loading"></span>
+        </div>
         <m-divider v-if="items.length > 0 && items.length >= total">没有更多了</m-divider>
         <el-empty v-if="items.length === 0" description="暂无通知"></el-empty>
       </div>
@@ -57,6 +76,12 @@ export default {
   name: 'LayoutNotification',
   data () {
     return {
+      menuActive: 0,
+      menuList: [
+        { text: '全部消息', icon: 'mdi mdi-email-outline', readState: null },
+        { text: '已读消息', icon: 'mdi mdi-email-check-outline', readState: 1 },
+        { text: '未读消息', icon: 'mdi mdi-email-alert-outline', readState: 0 }
+      ],
       activeName: 'inform',
       total: 0,
       pageInfo: {
@@ -66,6 +91,7 @@ export default {
       loading: false,
       items: [],
       timer: null,
+      readState: null,
       unreadTotal: 0
     }
   },
@@ -87,6 +113,11 @@ export default {
     }
   },
   methods: {
+    onCommand (index) {
+      this.menuActive = index
+      this.readState = this.menuList[index].readState
+      this.onOpen()
+    },
     onLoadMessage () {
       this.pageInfo.current++
       this.onInit()
@@ -120,7 +151,8 @@ export default {
           userId: this.userInfo.id,
           page: {
             ...this.pageInfo
-          }
+          },
+          readState: this.readState
         })
         this.items.push(...data.records)
         this.total = data.total
@@ -253,5 +285,10 @@ export default {
     }
   }
 }
-
+.el-dropdown-link {
+  cursor: pointer;
+}
+::v-deep .mdi {
+  font-size: 16px;
+}
 </style>

src/styles/index.scss

@@ -84,39 +84,43 @@ $max-classes: 10;
 }
 
 .d-flex {
-  display: flex;
+  display: flex !important;
 }
 
 .justify-center {
-  justify-content: center;
+  justify-content: center !important;
 }
 
 .justify-between {
-  justify-content: space-between;
+  justify-content: space-between !important;
 }
 
 .justify-around {
-  justify-content: space-around;
+  justify-content: space-around !important;
+}
+
+.justify-end {
+  justify-content: flex-end !important;
 }
 
 .align-center {
-  align-items: center;
+  align-items: center !important;
 }
 
 .align-start {
-  align-items: flex-start;
+  align-items: flex-start !important;
 }
 
 .align-end {
-  align-items: flex-end;
+  align-items: flex-end !important;
 }
 
 .flex-column {
-  flex-direction: column;
+  flex-direction: column !important;
 }
 
 .flex-wrap {
-  flex-wrap: wrap;
+  flex-wrap: wrap !important;
 }
 
 .fullscreen {