提交

src/api/business/message.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+// 查询项目成员列表
+export function listMessage(query) {
+  return request({
+    url: baseUrl + '/business/message/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询项目成员详细
+export function getMessage(id) {
+  return request({
+    url: baseUrl + '/business/message/' + id,
+    method: 'get'
+  })
+}
+
+// 新增项目成员
+export function addMessage(data) {
+  return request({
+    url: baseUrl + '/business/message',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改项目成员
+export function updateMessage(data) {
+  return request({
+    url: baseUrl + '/business/message',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除项目成员
+export function delMessage(id) {
+  return request({
+    url: baseUrl + '/business/message/' + id,
+    method: 'delete'
+  })
+}

src/components/Pagination/index.vue

@@ -2,7 +2,7 @@
   <div :class="{ 'hidden': hidden }" class="pagination-container">
     <el-pagination :background="background" v-model:current-page="currentPage" v-model:page-size="pageSize"
       :layout="layout" :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
-      @current-change="handleCurrentChange" />
+      @current-change="handleCurrentChange" :size="size" />
   </div>
 </template>
 
@@ -48,6 +48,10 @@ const props = defineProps({
   hidden: {
     type: Boolean,
     default: false
+  },
+  size: {
+    type: String,
+    default: 'default'
   }
 })
 

src/layout/components/Navbar.vue

@@ -46,7 +46,10 @@
                 <span>布局设置</span>
               </el-dropdown-item>
               <el-dropdown-item command="message">
-                <span>站内信</span>
+                <el-badge :value="messageCount" :max="99" class="item" :hidden="messageCount == 0">
+                  <span>站内信</span>
+                </el-badge>
+
               </el-dropdown-item>
               <el-dropdown-item divided command="logout">
                 <span>退出登录</span>
@@ -68,6 +71,23 @@
         </el-table-column>
       </el-table>
     </el-dialog>
+    <el-dialog title="站内信" v-model="showMessageDialog" width="450" center @close="showMessageDialog = false">
+      <div class="page-container column-container">
+        <el-table ref="dialogTable" :data="messageList" height="460px" row-key="id" align="center">
+          <el-table-column label="行号" type="index" width="50" align="center" />
+          <el-table-column label="消息来源" prop="fromNickName" align="center" />
+          <el-table-column label="消息内容" prop="message" align="center" />
+          <el-table-column label="查看" width="120" align="center">
+            <template #default="scope">
+              <el-button type="success" icon="view" circle @click="handleView(scope.row)" />
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize" @pagination="getMessages" size="small"
+          layout="total, prev, pager, next" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -86,17 +106,28 @@ import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
 import { setTenant, getTenant } from '@/utils/auth'
 import { listTenant } from '@/api/business/tenant.js'
+import { listMessage } from '@/api/business/message.js'
 import router from '@/router'
+import useMessageStore from '@/store/modules/message'
+import { nextTick, onBeforeUnmount, onMounted } from 'vue'
 
 const { proxy } = getCurrentInstance()
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
-
+const messageCount = ref(0)
+const showMessageDialog = ref(false)
 const tenantLoading = ref(false)
 const showDialog = ref(false)
 const tenantList = ref([])
+const messageList = ref([])
 const currentTenantName = ref(getTenant().tenantName)
+const total = ref(0)
+const queryParams = ref({
+  toUserId: useUserStore().userId,
+  pageSize: 10,
+  pageNum: 1
+})
 
 function toggleSideBar() {
   appStore.toggleSideBar()
@@ -110,6 +141,9 @@ function handleCommand(command) {
     case 'logout':
       logout()
       break
+    case 'message':
+      showMessageDialog.value = true
+      getMessages()
     default:
       break
   }
@@ -171,6 +205,36 @@ const loadTenant = () => {
     tenantLoading.value = false
   })
 }
+
+const messageCountChanged = (count) => {
+
+}
+const getMessages = () => {
+  console.log(queryParams.value)
+  listMessage(queryParams.value).then(res => {
+    if (res.code === 200) {
+      messageList.value = res.rows
+      total.value = res.total
+    } else {
+      messageList.value = []
+      total.value = 0
+    }
+
+  })
+}
+
+onMounted(() => {
+  window.addEventListener('messageChange', (target) => {
+    const count = target.detail
+    if (count != messageCount.value) {
+      messageCount.value = count
+    }
+    // console.log(messageCount)
+  })
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('messageChange')
+})
 </script>
 
 <style lang="scss" scoped>

src/store/modules/message.js

@@ -1,5 +1,6 @@
 // const webSocket = require('ws')
 const wsUrl = 'ws://localhost:8080/ws/'
+
 const useMessageStore = defineStore('message', {
   status: () => ({
     // 未读消息数量
@@ -19,17 +20,23 @@ const useMessageStore = defineStore('message', {
       this.messageNum++
       this.latestMessage = message
       // console.log(this.messageNum)
-      console.log(this.latestMessage)
+      // console.log(this.latestMessage)
       this.messageCount = this.latestMessage.data
+      const value = this.messageCount != null ? Number(this.messageCount) : 0
+      this.broadcastMessage(value)
+    },
+    broadcastMessage(count) {
+      const event = new CustomEvent('messageChange', { detail: count });
+      window.dispatchEvent(event);
     },
     acceptWs: () => {
     },
     async createWebSocket(id, token) {
-      console.log(id, wsUrl, token)
+      // console.log(id, wsUrl, token)
       try {
         this.ws = new WebSocket(wsUrl + id, [token])
       } catch (e) {
-        console.log(e)
+        // console.log(e)
         this.reconnection()
       }
     },
@@ -91,7 +98,7 @@ const useMessageStore = defineStore('message', {
         clearTimeout(this.timerHeart)
       }
       this.timerHeart = setTimeout(() => {
-        console.log("ping")
+        // console.log("ping")
         this.ws.send("ping")
         this.lockReconnect = false
       }, this.heartTimeOut)
@@ -107,6 +114,9 @@ const useMessageStore = defineStore('message', {
       this.handClose = true
       this.clearTimer()
       this.ws.close()
+    },
+    initMessageCount() {
+
     }
   }
 })