消息模块

src/layout/Header/functionList/message.vue

@@ -1,6 +1,6 @@
 <template>
   <div title="消息" @click="showMessageLayer">
-    <el-badge :value="122" :max="99" type="danger">
+    <el-badge :hidden="unreadCount === 0" :value="unreadCount" :max="99" type="danger">
       <i class="sfont el-icon-message"></i>
     </el-badge>
   </div>
@@ -14,7 +14,7 @@
       </div>
     </div>
     <div class="content">
-      <p>{{ currentSender.deptName }} - {{ currentSender.name }}</p>
+      <p v-show="currentSender.name">{{ currentSender.deptName }} - {{ currentSender.name }}</p>
       <div v-for="(itm, index) in contents" :key="index">
         <div class="content-title-box">
           <div class="content-title">{{ itm.title }}</div>
@@ -24,15 +24,24 @@
       </div>
     </div>
   </div>
+  <el-dialog title="重要系统通知" v-model="systemMessages.show" :append-to-body="true" :destroy-on-close="true" center> sdfs </el-dialog>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { onPageRefresh } from '../../../api/messages/index'
 
 export default defineComponent({
   name: 'message',
   setup() {
     const messageLayerVisible = ref(false)
+    const unreadCount = ref(0)
+    const systemMessages = reactive({
+      show: false,
+      list: [],
+      current: 1,
+    })
     const currentSender = ref({})
     const activated = (sender) => {
       return {
@@ -41,25 +50,8 @@ export default defineComponent({
         fontWeight: currentSender.value.sender === sender ? 'bold' : '',
       }
     }
-    const senders = ref([
-      { deptName: '普外科', name: '张三', sender: '01897', count: 12 },
-      { deptName: '普外科', name: '李四', sender: '32322', count: 0 },
-      { deptName: '很长的科室名字', name: '喝水塞牙', sender: '02010', count: 100 },
-    ])
-    const contents = ref([
-      {
-        title: '标题一',
-        content:
-          '内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一',
-        date: '2022-03-08 14:23:12',
-      },
-      {
-        title: '标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二',
-        content: '内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二',
-        date: '2022-03-08 14:43:06',
-      },
-      { title: '标题三', content: '内容三', date: '2022-03-08 15:13:02' },
-    ])
+    const senders = ref([])
+    const contents = ref([])
     const showMessageLayer = () => {
       messageLayerVisible.value = !messageLayerVisible.value
     }
@@ -68,11 +60,26 @@ export default defineComponent({
       currentSender.value = sender
     }
 
+    onMounted(() => {
+      onPageRefresh([]).then((res) => {
+        console.log(res)
+        unreadCount.value = res.unreadCount
+        if (res.systemMessage.length > 0) {
+          systemMessages.list = res.systemMessage
+          systemMessages.current = 1
+          systemMessages.show = true
+          console.log(systemMessages)
+        }
+      })
+    })
+
     return {
       senders,
+      unreadCount,
       currentSender,
       contents,
       messageLayerVisible,
+      systemMessages,
       activated,
       showMessageLayer,
       handleClickSender,