消息模块。

src/api/messages/index.js

@@ -7,3 +7,18 @@ export function onPageRefresh(data) {
     data,
   })
 }
+
+export function fetchAllSenders() {
+  return request({
+    url: '/socketMessage/fetchAllSenders',
+    method: 'get',
+  })
+}
+
+export function fetchAllMessages(sender) {
+  return request({
+    url: '/socketMessage/fetchAllMessages',
+    method: 'get',
+    params: { sender },
+  })
+}

src/layout/Header/functionList/message.vue

@@ -7,41 +7,66 @@
   <div v-if="messageLayerVisible" class="message-layer">
     <div style="position: absolute; top: 8px; left: 520px"><el-button circle type="info" plain icon="el-icon-close" @click="messageLayerVisible = false"></el-button></div>
     <div class="sender">
-      <div v-for="(itm, index) in senders" :key="index" :style="activated(itm.sender)" @click="handleClickSender(itm)">
-        <el-badge :value="itm.count" :max="99" type="danger" :hidden="itm.count === 0">
-          <div class="sender-info">{{ itm.deptName }}-{{ itm.name }}</div>
+      <div v-for="(item, index) in allSenders" :key="index" :style="activated(item.sender)" @click="handleClickSender(item)">
+        <el-badge :value="item.unreadCount" :max="99" type="danger" :hidden="item.unreadCount === 0">
+          <div class="sender-info">{{ item.senderName }}</div>
         </el-badge>
       </div>
     </div>
     <div class="content">
-      <p v-show="currentSender.name">{{ currentSender.deptName }} - {{ currentSender.name }}</p>
-      <div v-for="(itm, index) in contents" :key="index">
+      <p v-show="currentSender.senderName">{{ currentSender.senderName }}</p>
+      <div v-for="(itm, index) in allMessages" :key="index">
         <div class="content-title-box">
           <div class="content-title">{{ itm.title }}</div>
-          <div class="content-time">{{ itm.date }}</div>
+          <div class="content-time">{{ itm.sendDatetime }}</div>
         </div>
         <div class="content-box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ itm.content }}</div>
       </div>
     </div>
   </div>
-  <el-dialog title="重要系统通知" v-model="systemMessages.show" :append-to-body="true" :destroy-on-close="true" center> sdfs </el-dialog>
+  <el-dialog title="重要系统通知" v-model="systemMessages.show" :append-to-body="true" :destroy-on-close="true" center>
+    <div class="system-message-time">{{ systemMessages.list[systemMessages.current].sendDatetime }}</div>
+    <div class="system-message-content">{{ systemMessages.list[systemMessages.current].content }}</div>
+    <div class="system-message-footer">
+      <el-button type="primary" icon="el-icon-arrow-left" :disabled="systemMessages.current === 0" circle title="上一条" @click="messageIndexIncrease(-1)"></el-button>
+      <span class="system-message-count">{{ systemMessages.current + 1 }} / {{ systemMessages.list.length }}</span>
+      <el-button
+        type="primary"
+        icon="el-icon-arrow-right"
+        :disabled="systemMessages.current === systemMessages.list.length - 1"
+        circle
+        title="下一条"
+        @click="messageIndexIncrease(1)"
+      ></el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-import { ElMessageBox } from 'element-plus'
 import { defineComponent, onMounted, reactive, ref } from 'vue'
-import { onPageRefresh } from '../../../api/messages/index'
+import { onPageRefresh, fetchAllSenders, fetchAllMessages } from '../../../api/messages/index'
+import store from '@/store'
+import { clone } from '../../../utils/clone'
 
 export default defineComponent({
   name: 'message',
   setup() {
-    const messageLayerVisible = ref(false)
     const unreadCount = ref(0)
     const systemMessages = reactive({
       show: false,
       list: [],
-      current: 1,
+      current: 0,
     })
+    const messageIndexIncrease = (val) => {
+      systemMessages.current += val
+      if (val === 1) {
+        if (pushedMessageIds.value.indexOf(systemMessages.list[systemMessages.current].id) === -1) {
+          store.commit('app/setSystemMessages', systemMessages.list[systemMessages.current].id)
+        }
+      }
+    }
+    const pushedMessageIds = ref([])
+
     const currentSender = ref({})
     const activated = (sender) => {
       return {
@@ -50,39 +75,56 @@ export default defineComponent({
         fontWeight: currentSender.value.sender === sender ? 'bold' : '',
       }
     }
-    const senders = ref([])
-    const contents = ref([])
+    const allSenders = ref([])
+    const allMessages = ref([])
+    const messageLayerVisible = ref(false)
     const showMessageLayer = () => {
-      messageLayerVisible.value = !messageLayerVisible.value
+      if (!messageLayerVisible.value) {
+        fetchAllSenders().then((res) => {
+          allSenders.value = res
+          messageLayerVisible.value = true
+          handleClickSender(res[0])
+        })
+      } else {
+        messageLayerVisible.value = false
+      }
     }
 
-    const handleClickSender = (sender) => {
-      currentSender.value = sender
+    const handleClickSender = (messageIndex) => {
+      currentSender.value = messageIndex
+      fetchAllMessages(messageIndex.sender).then((res) => {
+        allMessages.value = res
+        messageIndex.unreadCount = 0
+      })
     }
 
     onMounted(() => {
-      onPageRefresh([]).then((res) => {
-        console.log(res)
+      pushedMessageIds.value = clone(store.state.app.systemMessages)
+      onPageRefresh(pushedMessageIds.value).then((res) => {
         unreadCount.value = res.unreadCount
         if (res.systemMessage.length > 0) {
           systemMessages.list = res.systemMessage
-          systemMessages.current = 1
+          systemMessages.current = 0
           systemMessages.show = true
-          console.log(systemMessages)
+          if (pushedMessageIds.value.indexOf(systemMessages.list[0].id) === -1) {
+            pushedMessageIds.value.push(systemMessages.list[0].id)
+            store.commit('app/setSystemMessages', systemMessages.list[0].id)
+          }
         }
       })
     })
 
     return {
-      senders,
+      allSenders,
+      allMessages,
       unreadCount,
       currentSender,
-      contents,
       messageLayerVisible,
       systemMessages,
       activated,
       showMessageLayer,
       handleClickSender,
+      messageIndexIncrease,
     }
   },
 })
@@ -172,4 +214,23 @@ i {
   background: rgba(198, 231, 148, 0.452);
   padding: 4px;
 }
+.system-message-time {
+  font-size: 13px;
+  color: gray;
+}
+.system-message-content {
+  margin-top: 16px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.system-message-footer {
+  margin-top: 20px;
+  width: 100%;
+  text-align: right;
+  > span {
+    font-size: 12px;
+    color: gray;
+    margin: 0 8px;
+  }
+}
 </style>

src/layout/Header/index.vue

@@ -10,9 +10,9 @@
     <div class="right-box">
       <!-- 快捷功能按钮 -->
       <div class="function-list">
-        <!-- <div class="function-list-item hidden-sm-and-down" style="margin-right: 10px">
+        <div class="function-list-item hidden-sm-and-down" style="margin-right: 10px">
           <Message />
-        </div> -->
+        </div>
         <div class="function-list-item hidden-sm-and-down">
           <Full-screen />
         </div>
@@ -46,7 +46,7 @@
 <script>
 import { computed, defineComponent, reactive } from 'vue'
 import { useStore } from 'vuex'
-// import Message from './functionList/message.vue'
+import Message from './functionList/message.vue'
 import FullScreen from './functionList/fullscreen.vue'
 import SizeChange from './functionList/sizeChange.vue'
 import Theme from './functionList/theme.vue'
@@ -55,7 +55,7 @@ import PasswordLayer from './passwordLayer.vue'
 
 export default defineComponent({
   components: {
-    // Message,
+    Message,
     FullScreen,
     Breadcrumb,
     SizeChange,

src/store/modules/app.js

@@ -1,82 +1,89 @@
-import Cookies from "js-cookie";
+import Cookies from 'js-cookie'
 
 const state = () => ({
-    isCollapse: true, // 侧边栏是否收缩展示
-    contentFullScreen: false, // 内容是否可全屏展示
-    showLogo: true, // 是否显示Logo
-    fixedTop: false, // 是否固定顶部, todo，暂未使用
-    showTabs: true, // 是否显示导航历史
-    expandOneMenu: true, // 一次是否只能展开一个菜单
-    elementSize: 'mini', // element默认尺寸，支持官网四个大小参数
-    loading: false,
-    windowSize: {},
-    currentPageName: null,
-    jdt: {
-        title: null,
-        isOpen: false,
-        closeButton: false,
-    },
-    theme: {
-        state: {
-            style: 'default',
-            primaryColor: '#409eff',
-            menuType: 'side',
-        },
-    },
-    yiZhuLuRu: {
-        jianRongMoShi: true,
-        elTabgName: '',
+  isCollapse: true, // 侧边栏是否收缩展示
+  contentFullScreen: false, // 内容是否可全屏展示
+  showLogo: true, // 是否显示Logo
+  fixedTop: false, // 是否固定顶部, todo，暂未使用
+  showTabs: true, // 是否显示导航历史
+  expandOneMenu: true, // 一次是否只能展开一个菜单
+  elementSize: 'mini', // element默认尺寸，支持官网四个大小参数
+  loading: false,
+  windowSize: {},
+  currentPageName: null,
+  jdt: {
+    title: null,
+    isOpen: false,
+    closeButton: false,
+  },
+  theme: {
+    state: {
+      style: 'default',
+      primaryColor: '#409eff',
+      menuType: 'side',
     },
+  },
+  yiZhuLuRu: {
+    jianRongMoShi: true,
+    elTabgName: '',
+  },
+  systemMessages: [], // 已经看过的系统通知id
 })
 
 // mutations
 const mutations = {
-    isCollapseChange(state, type) {
-        state.isCollapse = type
-    },
-    contentFullScreenChange(state, type) {
-        state.contentFullScreen = type
-    },
-    menuListChange(state, arr) {
-        state.menuList = arr
-    },
-    stateChange(state, option) {
-        state[option.name] = option.value
-    },
-    setLoading(state, val) {
-        //state.loading = val
-    },
-    setWindowSize(state, windowSize) {
-        state.windowSize = windowSize
-    },
-    setCurrentPageName(state, val) {
-        state.currentPageName = val
-    },
-    setJdt(state, val) {
-        Cookies.set('jdtTitle', val.title)
-        state.jdt = val
-    },
-    closeButton(state, val) {
-        state.jdt.closeButton = val
-    },
-    closeJdt(state) {
-        state.jdt.isOpen = false
-    },
-    titleJdt(state, val) {
-        state.jdt.title = val
-    },
-    setJianRongMuShi(state, val) {
-        state.yiZhuLuRu.jianRongMoShi = val
+  isCollapseChange(state, type) {
+    state.isCollapse = type
+  },
+  contentFullScreenChange(state, type) {
+    state.contentFullScreen = type
+  },
+  menuListChange(state, arr) {
+    state.menuList = arr
+  },
+  stateChange(state, option) {
+    state[option.name] = option.value
+  },
+  setLoading(state, val) {
+    //state.loading = val
+  },
+  setWindowSize(state, windowSize) {
+    state.windowSize = windowSize
+  },
+  setCurrentPageName(state, val) {
+    state.currentPageName = val
+  },
+  setJdt(state, val) {
+    Cookies.set('jdtTitle', val.title)
+    state.jdt = val
+  },
+  closeButton(state, val) {
+    state.jdt.closeButton = val
+  },
+  closeJdt(state) {
+    state.jdt.isOpen = false
+  },
+  titleJdt(state, val) {
+    state.jdt.title = val
+  },
+  setJianRongMuShi(state, val) {
+    state.yiZhuLuRu.jianRongMoShi = val
+  },
+  setSystemMessages(state, val) {
+    if (val === null) {
+      state.systemMessages = []
+    } else {
+      state.systemMessages.push(val)
     }
-
+  },
 }
 
 // actions
 const actions = {}
 
 export default {
-    namespaced: true,
-    state,
-    actions,
-    mutations,
+  namespaced: true,
+  state,
+  actions,
+  mutations,
 }