站内信模块：vue3 站内信弹板

YunaiV
1 parent 8cdae12b
Showing 4 changed files with 87 additions and 56 deletions
yudao-ui-admin-vue3/src/api/system/notify/message/index.ts
yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
yudao-ui-admin/src/api/system/notify/message.js
yudao-ui-admin/src/layout/components/Message/index.vue
@@ -31,3 +31,38 @@ export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) =&gt;
 export const getNotifyMessageApi = async (id: number) => {
   return await request.get({ url: '/system/notify-message/get?id=' + id })
 }
+
+// 获得我的站内信分页
+// export function getMyNotifyMessagePage(query) {
+//   return request({
+//     url: '/system/notify-message/my-page',
+//     method: 'get',
+//     params: query
+//   })
+// }
+
+// 批量标记已读
+// export function updateNotifyMessageRead(ids) {
+//   return request({
+//     url: '/system/notify-message/update-read?' + qs.stringify({ids: ids}, { indices: false }),
+//     method: 'put'
+//   })
+// }
+
+// 标记所有站内信为已读
+// export function updateAllNotifyMessageRead() {
+//   return request({
+//     url: '/system/notify-message/update-all-read',
+//     method: 'put'
+//   })
+// }
+
+// 获取当前用户的最新站内信列表
+export const getUnreadNotifyMessageListApi = async () => {
+  return await request.get({ url: '/system/notify-message/get-unread-list' })
+}
+
+// 获得当前用户的未读站内信数量
+export const getUnreadNotifyMessageCountApi = async () => {
+  return await request.get({ url: '/system/notify-message/get-unread-count' })
+}
 <script setup lang="ts">
+import dayjs from 'dayjs'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+
+const { push } = useRouter()
 const activeName = ref('notice')
+const count = ref(0) // 未读消息数量
+const list = ref([]) // 消息列表
+
+// 获得消息列表
+const getList = async () => {
+  list.value = await NotifyMessageApi.getUnreadNotifyMessageListApi()
+}
+
+// 获得未读消息数
+const getUnreadCount = async () => {
+  NotifyMessageApi.getUnreadNotifyMessageCountApi().then((data) => {
+    count.value = data
+  })
+}
+
+// 跳转我的站内信
+const goMyList = () => {
+  push({
+    name: 'MyNotifyMessage'
+  })
+}
-const noticeList = ref([
-  { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
-  { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
-  { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
-  { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
-  { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
-])
-const messageList = ref([
-  { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
-  { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
-  { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
-  { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
-  { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
-])
-const needList = ref([
-  { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
-  { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
-  { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
-  { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
-  { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
-])
+// ========== 初始化 =========
+onMounted(() => {
+  // 首次加载小红点
+  getUnreadCount()
+  // 轮询刷新小红点
+  setInterval(() => {
+    getUnreadCount()
+  }, 1000 * 60 * 2)
+})
 </script>
 <template>
   <div class="message">
-    <ElPopover placement="bottom" :width="310" trigger="click">
+    <ElPopover placement="bottom" :width="400" trigger="click">
       <template #reference>
-        <ElBadge :value="noticeList.length" class="item">
-          <Icon icon="ep:bell" :size="18" class="cursor-pointer" />
+        <ElBadge :is-dot="count > 0" class="item">
+          <Icon icon="ep:bell" :size="18" class="cursor-pointer" @click="getList" />
         </ElBadge>
       </template>
       <ElTabs v-model="activeName">
-        <ElTabPane label="通知(5)" name="notice">
-          <div class="message-list">
-            <template v-for="item in noticeList" :key="item.id">
-              <div class="message-item">
-                <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
-                <div class="message-content">
-                  <span class="message-title">{{ item.title }}</span>
-                  <span class="message-date">{{ item.date }}</span>
-                </div>
-              </div>
-            </template>
-          </div>
-        </ElTabPane>
-        <ElTabPane label="消息(0)" name="message">
-          <div class="message-list">
-            <template v-for="item in messageList" :key="item.id">
-              <div class="message-item">
-                <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
-                <div class="message-content">
-                  <span class="message-title">{{ item.title }}</span>
-                  <span class="message-date">{{ item.date }}</span>
-                </div>
-              </div>
-            </template>
-          </div>
-        </ElTabPane>
-        <ElTabPane label="代办(0)" name="need">
+        <ElTabPane label="我的站内信" name="notice">
           <div class="message-list">
-            <template v-for="item in needList" :key="item.id">
+            <template v-for="item in list" :key="item.id">
               <div class="message-item">
                 <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
                 <div class="message-content">
-                  <span class="message-title">{{ item.title }}</span>
-                  <span class="message-date">{{ item.date }}</span>
+                  <span class="message-title">
+                    {{ item.templateNickname }}：{{ item.templateContent }}
+                  </span>
+                  <span class="message-date">
+                    {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+                  </span>
                 </div>
               </div>
             </template>
           </div>
         </ElTabPane>
       </ElTabs>
+      <!-- 更多 -->
+      <div style="text-align: right; margin-top: 10px">
+        <XButton type="primary" preIcon="ep:view" title="查看全部" @click="goMyList" />
+      </div>
     </ElPopover>
   </div>
 </template>
@@ -43,6 +43,7 @@ export function getUnreadNotifyMessageList() {
   })
 }
+// 获得当前用户的未读站内信数量
 export function getUnreadNotifyMessageCount() {
   return request({
     url: '/system/notify-message/get-unread-count',
@@ -9,7 +9,7 @@
       <!-- 弹出列表 -->
       <el-table v-loading="loading" :data="list">
         <el-table-column width="120" property="templateNickname" label="发送人" />
-        <el-table-column width="180" property="title" label="发送时间">
+        <el-table-column width="180" property="createTime" label="发送时间">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
@@ -49,7 +49,7 @@ export default {
     // 首次加载小红点
     this.getUnreadCount()
     // 轮询刷新小红点
-    window.timer = setInterval(()=>{
+    setInterval(() => {
       this.getUnreadCount()
     },1000 * 60 * 2)
   },