消息模块。

src/api/messages/index.js

@@ -8,10 +8,11 @@ export function selectSystemMessages(date) {
   })
 }
 
-export function fetchUnreadCount() {
+export function onPageRefresh(data) {
   return request({
-    url: '/socketMessage/fetchUnreadCount',
-    method: 'get',
+    url: '/socketMessage/onPageRefresh',
+    method: 'post',
+    data,
   })
 }
 

src/layout/Header/functionList/message.vue

@@ -16,7 +16,7 @@
     <div class="content">
       <p v-show="currentSender.senderName">{{ currentSender.senderName }}</p>
       <div style="height: 400px; overflow-y: auto">
-        <div v-for="(itm, index) in allMessages" :key="index">
+        <div v-for="(itm, index) in allMessages" :key="index" class="message-body" :style="borderColor(itm.status)">
           <div class="content-title-box" :style="readStatus(itm.status)">
             <div class="content-title">
               {{ itm.title }}
@@ -28,12 +28,41 @@
       </div>
     </div>
   </div>
+  <el-dialog
+    title="重要系统通知"
+    v-model="systemMessages.show"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+  >
+    <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>
+    <div style="width: 100%; text-align: right; margin-top: -30px">
+      <el-button icon="el-icon-close" type="danger" :disabled="systemMessages.current !== systemMessages.list.length - 1" @click="systemMessages.show = false">关闭</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { fetchUnreadCount, fetchAllSenders, fetchAllMessages } from '../../../api/messages/index'
+import { computed, defineComponent, onMounted, ref, reactive } from 'vue'
+import { onPageRefresh, fetchAllSenders, fetchAllMessages } from '../../../api/messages/index'
 import store from '../../../store'
+import { clone } from '../../../utils/clone'
 
 export default defineComponent({
   name: 'message',
@@ -41,6 +70,20 @@ export default defineComponent({
     const unreadCount = computed(() => {
       return store.state.app.unreadMessageCount
     })
+    const systemMessages = reactive({
+      show: false,
+      list: [],
+      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) => {
@@ -48,6 +91,7 @@ export default defineComponent({
         background: currentSender.value.sender === sender ? '#0b85ff' : '',
         color: currentSender.value.sender === sender ? 'white' : '',
         fontWeight: currentSender.value.sender === sender ? 'bold' : '',
+        borderRadius: '4px',
       }
     }
     const readStatus = (status) => {
@@ -55,6 +99,12 @@ export default defineComponent({
         background: status === 0 ? 'rgba(233, 158, 158, 0.548)' : 'rgba(198, 231, 148, 0.452)',
       }
     }
+    const borderColor = (status) => {
+      return {
+        borderColor: status === 0 ? 'red' : 'green',
+      }
+    }
+
     const allSenders = ref([])
     const allMessages = ref([])
     const messageLayerVisible = ref(false)
@@ -81,8 +131,18 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      fetchUnreadCount().then((res) => {
-        store.commit('app/setUnreadMessageCount', res)
+      pushedMessageIds.value = clone(store.state.app.systemMessages)
+      onPageRefresh(pushedMessageIds.value).then((res) => {
+        store.commit('app/setUnreadMessageCount', res.unreadCount)
+        if (res.systemMessage.length > 0) {
+          systemMessages.list = res.systemMessage
+          systemMessages.current = 0
+          systemMessages.show = true
+          if (pushedMessageIds.value.indexOf(systemMessages.list[0].id) === -1) {
+            pushedMessageIds.value.push(systemMessages.list[0].id)
+            store.commit('app/setSystemMessages', systemMessages.list[0].id)
+          }
+        }
       })
     })
 
@@ -91,9 +151,12 @@ export default defineComponent({
       allMessages,
       unreadCount,
       currentSender,
+      systemMessages,
       messageLayerVisible,
       activated,
       readStatus,
+      borderColor,
+      messageIndexIncrease,
       showMessageLayer,
       handleClickSender,
     }
@@ -152,7 +215,7 @@ i {
     > div {
       margin-bottom: 16px;
       border-radius: 4px;
-      border: 2px solid rgb(31, 177, 31);
+      border: 2px solid rgb(53, 131, 221);
     }
   }
 }
@@ -162,6 +225,11 @@ i {
   white-space: nowrap;
   overflow: hidden;
 }
+.message-body {
+  margin: 8px;
+  border: 1px dashed;
+  border-radius: 4px;
+}
 .content-title-box {
   display: flex;
   height: 26px;
@@ -198,7 +266,7 @@ i {
 .system-message-footer {
   margin-top: 20px;
   width: 100%;
-  text-align: right;
+  text-align: center;
   > span {
     font-size: 12px;
     color: gray;

src/store/modules/app.js

@@ -28,6 +28,7 @@ const state = () => ({
     elTabgName: '',
   },
   unreadMessageCount: 0, // 未查看的消息数量
+  systemMessages: [], // 已经看过的系统通知id
 })
 
 // mutations
@@ -72,6 +73,13 @@ const mutations = {
   setUnreadMessageCount(state, val) {
     state.unreadMessageCount = val
   },
+  setSystemMessages(state, val) {
+    if (val === null) {
+      state.systemMessages = []
+    } else {
+      state.systemMessages.push(val)
+    }
+  },
 }
 
 // actions

src/store/modules/ptnt.js

@@ -1,5 +1,5 @@
 const state = () => ({
-  currentMedType: '00',
+  currentMedType: '',
   overview: {},
   baseinfo: {},
   searchMethod: 'alpha',

src/views/system/login.vue

@@ -33,7 +33,7 @@
 
 <script>
 import { systemTitle } from '@/config'
-import { defineComponent, onActivated, onMounted, reactive, ref } from 'vue'
+import { defineComponent, onActivated, reactive, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import { addRoutes } from '@/router'