医生消息

src/api/doctorMsg.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 查询 消息列表
+export function getMsg() {
+  return request({
+    url: '/doctor/msg/getMsg',
+    method: 'get'
+  })
+}
+
+export function getMsgList(query) {
+  return request({
+    url: '/doctor/msg/getMsgList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+export function getMsgCount() {
+  return request({
+    url: '/doctor/msg/getMsgCount',
+    method: 'get',
+  })
+}
+
+
+export function setRead(data) {
+  return request({
+    url: '/doctor/msg/setRead',
+    method: 'post',
+    data: data
+  })
+}
+export function setAllRead() {
+  return request({
+    url: '/doctor/msg/setAllRead',
+    method: 'post'
+  })
+}

src/layout/components/Navbar.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+      @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
 
     <div class="right-menu">
 
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
+        <div class="right-menu-item hover-effect">
+          <el-badge v-if="msgCount > 0" :value="msgCount" :max="99" class="dot">
+          </el-badge>
+
+          <div class="msg" @click="openMsg()"><i class="el-icon-message-solid"></i> </div>
+
+        </div>
+        <!--   <search id="header-search" class="right-menu-item" /> -->
+        <div class="right-menu-item">{{ doctor.doctorName }}</div>
+
 
-     <!--   <search id="header-search" class="right-menu-item" /> -->
-        <div class="right-menu-item" >{{doctor.doctorName}}</div>
-       
 
-      
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -40,8 +47,11 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-   
-    
+    <el-drawer :append-to-body="true" size="35%" title="消息中心" :with-header="false" :title="msg.title"
+      :visible.sync="msg.open">
+      <msg ref="msg" @update-count="getMsgCount" />
+    </el-drawer>
+
   </div>
 </template>
 
@@ -55,6 +65,9 @@ import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import { getDoctorDetails } from "@/api/doctor";
 
+import msg from "@/views/components/doctorMsg/msg";
+import { getMsg, getMsgList, getMsgCount, setRead } from "@/api/doctorMsg";
+
 export default {
   components: {
     Breadcrumb,
@@ -62,15 +75,30 @@ export default {
     Hamburger,
     Screenfull,
     SizeSelect,
-    Search
+    Search,
+    msg
   },
   data() {
     return {
       doctor: {},
+      msgCount: 0,
+      previousMsgCount: 0, // 保存上一次的消息计数
+      msg: {
+        open: false,
+        title: '通知消息'
+      },
+      msgPollingTimer: null, // 轮询定时器
     };
   },
   created() {
-   this.getDoctor();
+    this.getDoctor();
+    this.getMsgCount();
+    // 启动消息轮询，每30秒检查一次新消息
+    this.startMsgPolling();
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    this.stopMsgPolling();
   },
   computed: {
     ...mapGetters([
@@ -96,6 +124,60 @@ export default {
     }
   },
   methods: {
+    startMsgPolling() {
+      // 清除已存在的定时器
+      if (this.msgPollingTimer) {
+        clearInterval(this.msgPollingTimer);
+      }
+
+      // 设置定时器，每30秒获取一次消息计数
+      this.msgPollingTimer = setInterval(() => {
+        this.getMsgCount();
+      }, 30000); // 30秒轮询一次
+    },
+    stopMsgPolling() {
+      if (this.msgPollingTimer) {
+        clearInterval(this.msgPollingTimer);
+        this.msgPollingTimer = null;
+      }
+    },
+    getMsgCount() {
+      getMsg().then(response => {
+        // 计算所有未读消息总数
+        let totalCount = 0;
+        response.counts.forEach(item => {
+          totalCount += item.total;
+        });
+
+        // 保存旧的消息计数
+        this.previousMsgCount = this.msgCount;
+        // 更新消息计数
+        this.msgCount = totalCount;
+
+        // 如果消息计数增加了，显示通知弹框
+        if (this.msgCount > this.previousMsgCount && this.msgCount > 0) {
+          this.$notify({
+            title: '提示',
+            message: '您有' + this.msgCount + "条消息通知",
+            position: 'top-right',
+            type: 'info'
+          });
+        }
+
+      }).catch(error => {
+        console.error("获取消息计数失败:", error);
+      });
+    },
+    openMsg() {
+      console.log(11);
+      this.msg.open = true;
+      // 每次打开消息界面时刷新数据
+      if (this.$refs.msg) {
+        this.$refs.msg.getMsg();
+      }
+      // 打开消息后重新获取消息计数来更新角标
+      this.getMsgCount();
+    },
     getDoctor() {
       getDoctorDetails().then(response => {
         this.doctor = response.data;
@@ -116,7 +198,7 @@ export default {
           location.href = '/index';
 
         })
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }
 }
@@ -128,7 +210,7 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .hamburger-container {
     line-height: 46px;
@@ -136,7 +218,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
@@ -174,6 +256,18 @@ export default {
       color: #5a5e66;
       vertical-align: text-bottom;
 
+      .msg {
+        text-align: center;
+        width: 40px;
+      }
+
+      .dot {
+        position: absolute;
+        right: 195px;
+        top: 0px;
+
+      }
+
       &.hover-effect {
         cursor: pointer;
         transition: background .3s;
@@ -209,5 +303,4 @@ export default {
     }
   }
 }
-
 </style>

src/views/components/doctorMsg/msg.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="msg">
+      <div class="msg-title">通知消息
+        <el-button round size="small"  @click="setAllRead()">全部已读</el-button>
+      </div>
+      
+      <div class="msg-type">
+        <div class="msg-type-item" v-for="(item, index) in msgType" @click="getMsgList(item.msgType)">
+            <el-badge :value="item.total" :max="99" :hidden="item.total==0" class="item"  >
+              <el-button round size="small">{{item.msgTypeName}}</el-button>
+            </el-badge>
+        </div>
+          
+      </div>
+      <div class="mst-list">
+        <el-timeline   >
+          <el-timeline-item  :timestamp="item.createTime" placement="top" v-for="(item, index) in list">
+            <el-card>
+              <h4>{{item.title}}</h4>
+              <p>{{item.content}}</p>
+              <div><el-button type="text" v-if="item.isRead==0" @click="setRead(item)">标记为已读</el-button></div>
+            </el-card>
+          </el-timeline-item>
+         
+        </el-timeline>
+        <div v-if="isMore" class="more" @click="loadMore()"><el-button type="text">加载更多</el-button></div>
+      </div>
+         
+  </div>
+</template>
+
+<script>
+
+import { getMsg, getMsgList, getMsgCount, setRead } from "@/api/doctorMsg";
+
+export default {
+  name: "msg",
+  components: {  },
+  data() {
+    return {
+      isMore:false,
+      currentTypeId:undefined,
+      msgType:[],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 产品表格数据
+      list: [],
+       queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+      
+      this.getMsg();
+  },
+  mounted() {
+   
+  },
+  methods: {
+    loadMore () {
+        this.queryParams.pageNum += 1;
+        this.getList();
+    },
+    getMsg(){
+      getMsg().then(response => {
+          this.msgType = response.counts;
+          if(this.currentTypeId==undefined){
+            this.currentTypeId=this.msgType[0].msgType;
+          }
+          this.list =[];
+          this.getList();
+      });
+    },
+    setAllRead(){
+        setAllRead().then(response => {
+            this.getMsg();
+            //更新父组件的数量
+            this.$emit('update-count');
+        });
+        
+    },
+    setRead(row){
+        row.isRead=1;
+        setRead(row).then(response => {
+            this.getMsg();
+            //更新父组件的数量
+            this.$emit('update-count');
+        });
+        
+    },
+    getMsgList(typeId){
+        this.currentTypeId=typeId;
+        this.queryParams.pageNum=1;
+         this.list =[];
+        this.getList();
+    },
+    getList() {
+      
+      this.loading = true;
+      this.queryParams.type=this.currentTypeId;
+      getMsgList(this.queryParams).then(response => {
+        this.list=this.list.concat( response.data.list);
+        this.total = response.data.total;
+        this.loading = false;
+        this.isMore=response.data.hasNextPage;
+      });
+    },
+    getMsgType() {
+      getMsg().then(response => {
+        this.msgType = response.counts;
+      });
+    },
+    
+    
+  }
+};
+</script>
+<style  scoped>
+.msg{
+  padding:15px;
+}
+ .dialog-footer{
+   margin-top: 30px;
+   float: right;
+ }
+ .msg-type{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+
+ }
+ .msg-type-item {
+   margin: 10px;
+ }
+.mst-list{
+  margin: 10px 0px;
+}
+
+</style>
+<style >
+ 
+ .el-drawer__header{
+   margin-bottom: 10px;
+ }
+ .more{
+   text-align: center;
+   font-size: 14px;
+   color: #909399;
+ }
+ .msg-title{
+   margin: 10px 10px 20px 10px;
+   font-size: 16px;
+ }
+</style>
+