邓洁 : 修改右上角铃铛通知详情弹窗

src/assets/styles/index.scss

@@ -86,8 +86,9 @@ html, body, #app, .el-container, .el-aside, .el-main {
   margin-left: 14px;
 
   .el-form-item {
-    display: flex;
-    align-items: center;
+    //display: flex;
+    //align-items: center;
+    margin-right: 18px;
   }
 
   .el-form-item__label {

src/layout/navbar/BellSocket.vue

@@ -29,15 +29,29 @@
         </div>
       </template>
     </el-popover>
+    <el-dialog width="1200px" title="通知公告详情" v-model="visible" @close="visible=false">
+      <el-form :model="viewForm" label-width="100px">
+        <el-row>
+          <el-col :span="24" class="title-block">
+            <el-text class="title">{{ viewForm.noticeTitle }}</el-text>
+          </el-col>
+          <el-col :span="24">
+            <el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
+            <span v-else v-html="viewForm.noticeContent"></span>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {getNotifyList,readAllNotify, readSingleNotify} from "@/api/notice/notify";
+import {getNotifyList,getNotifyDetail, readAllNotify, readSingleNotify} from "@/api/notice/notify";
 import {getToken} from '@/utils/auth'
 import {ElMessage} from "element-plus";
 import {useRouter} from "vue-router";
-import {defineExpose} from "vue";
+// import {defineExpose} from "vue";
+
 const router = useRouter()
 const pageInfo = reactive({
   pageNum: 1,
@@ -46,10 +60,18 @@ const pageInfo = reactive({
 let send = {
   type: "ping"
 }
-
+const viewForm = ref();
+const visible = ref(false);
 const showNotify = ref(false);
 const total = ref();
 const noticeList = ref();
+//查看详情
+const handleViewDetails = (noticeId) => {
+  getNotifyDetail(noticeId).then(res => {
+    visible.value = true
+    viewForm.value = res.data
+  })
+}
 const initWebSocket = () => {
   const socket = new WebSocket(import.meta.env.VITE_BASE_WSURL + '/notice-ws/notice')
   // 2. ws.send()给服务器发送信息
@@ -105,10 +127,15 @@ const searchNotifyList = () => {
 searchNotifyList()
 
 //点击名字跳转到详情页
-const handleToNotifyDetail = (notice,index) => {
-  noticeList.value.splice(index,1)
-  total.value-=1
-  router.push({path: `/system/notice/inform/index/${notice.noticeId}`})
+const handleToNotifyDetail = (notice, index) => {
+  noticeList.value.splice(index, 1)
+  total.value -= 1
+  viewForm.value={
+    noticeTitle:'',
+    noticeContent:''
+  }
+  // router.push({path: `/system/notice/inform/index/${notice.noticeId}`})
+  handleViewDetails(notice.noticeId)
 }
 
 //单个已读
@@ -167,6 +194,15 @@ const handleNext = () => {
 </script>
 
 <style lang="scss" scoped>
+.title-block {
+  text-align: center;
+  padding-bottom: 30px;
+
+  .title {
+    font-size: 28px;
+    font-weight: bold;
+  }
+}
 ul::-webkit-scrollbar {
   width: 6px;
 }

src/layout/tagsview/index.vue

@@ -36,6 +36,15 @@ const tagPath = ref()
 watch(route, () => {
   init()
 })
+onMounted(() => {
+  document.addEventListener('click', nullBlockClick)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('click', nullBlockClick)
+})
+const nullBlockClick = () => {
+  visible.value = false
+}
 const init = () => {
   tagsViewStore.addVisitedViews(route)
 }

src/views/system/notice/inform/index.vue

@@ -38,7 +38,6 @@
     </div>
     <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
             :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
-<!--    <bell-socket style="display: none" ref="bellSocket"/>-->
     <!--详情弹窗-->
     <el-dialog v-model="isViewVisited" title="通知公告详情" width="1200px" @close="handleCloseDialog">
       <el-form :model="viewForm" label-width="100px">
@@ -71,22 +70,16 @@ const queryParams = reactive({
   state: null
 })
 const router = useRouter()
-// const bellSocket = ref()
 const loading = ref(true)
 const list = ref([])
 const total = ref([]);
 const isViewVisited = ref(false);
 const viewForm = ref();
-const notifyId = reactive(router.currentRoute.value.params.queryId)
 const pageInfo = reactive({
   pageNum: 1,
   pageSize: 10
 });
-onMounted(()=>{
-  if(notifyId!==undefined){
-    handleViewDetails(notifyId)
-  }
-})
+
 //重置搜索
 const handleReset = () => {
   getList()
@@ -117,10 +110,7 @@ const handleViewDetails = (noticeId) => {
   })
 }
 //关闭详情弹窗
-const handleCloseDialog=()=>{
-  if(notifyId!==undefined){
-    router.push({path:'/system/notice/inform/index'})
-  }
+const handleCloseDialog = () => {
   isViewVisited.value = false
 }
 //删除单个消息