From 12f25f1689d9545efd09027881143457bbb3110c Mon Sep 17 00:00:00 2001
From: fwb <fwb>
Date: Mon, 26 Aug 2024 12:11:52 +0800
Subject: [PATCH] 'newschance'

---
 src/api/user/messag.js                        |  19 +-
 src/router/routers.ts                         |   2 +-
 .../message/components/messageContent.vue     |  23 +-
 src/views/message/components/sendMessage.vue  |  14 +-
 src/views/message/index.vue                   |  37 +++-
 src/views/news/index.vue                      | 206 +++++++++---------
 src/views/student/index.vue                   |   4 +-
 7 files changed, 173 insertions(+), 132 deletions(-)

diff --git a/src/api/user/messag.js b/src/api/user/messag.js
index efae69e..c239716 100644
--- a/src/api/user/messag.js
+++ b/src/api/user/messag.js
@@ -17,9 +17,22 @@ export const deleteSendMessageApi = (params) => {
         params,
     })
 }
+//一键已读
+function parseParams(params){
+    let str = '?'
+    try{
+        for (const paramsKey in params) {
+            str+=`${paramsKey}=${params[paramsKey]}&`
+        }
+        return str.slice(0,-1)
+    }catch (e) {
+        return ''
+    }
+}
+export const readMessagesBatch = (params) => {
+    return request.put(`/user-inbox/readmessagesbatch${parseParams(params)}`)
+}
 //发送邮件
 export const SendMessageApi = (params) => {
-    return request.post('/messages/addmessage', {
-        params,
-    })
+    return request.post(`/messages/addmessage${parseParams(params)}`)
 }
diff --git a/src/router/routers.ts b/src/router/routers.ts
index a7d8844..b05318e 100644
--- a/src/router/routers.ts
+++ b/src/router/routers.ts
@@ -234,7 +234,7 @@ export const constantRoute: any = [
     name:'NewsManagement',
     meta: {
       title: '资讯',
-      hidden: false,
+      hidden: true,
       icon: 'BellFilled'
     },
     children: [
diff --git a/src/views/message/components/messageContent.vue b/src/views/message/components/messageContent.vue
index 18c565f..350e78b 100644
--- a/src/views/message/components/messageContent.vue
+++ b/src/views/message/components/messageContent.vue
@@ -130,27 +130,28 @@ getStuList()
 const back= ()=>{
   router.push('/messageManagement/message')
 }
+//选择收件人
+const confirm = ()=>{
+  addPerson.value = false
+}
+//取消
+const disappoint = ()=>{
+  addPerson.value = false
+}
 //发送信息
-const send = async (id: any) => {
+const send = async () => {
   await ElMessageBox.confirm('您确定发送这条信息吗', '温馨提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
     type: 'warning',
   })
   await SendMessageApi({
-    messageIds:id,
+    receiverId:inputPerson.id,
+    title:inputText,
     content:textarea,
-    userId:userStore.userInfo.id
+    senderId:userStore.userInfo.id
   })
 }
-//选择收件人
-const confirm = ()=>{
-  addPerson.value = false
-}
-//取消
-const disappoint = ()=>{
-  addPerson.value = false
-}
 </script>
 <style scoped>
 
diff --git a/src/views/message/components/sendMessage.vue b/src/views/message/components/sendMessage.vue
index f8547ee..0689c6c 100644
--- a/src/views/message/components/sendMessage.vue
+++ b/src/views/message/components/sendMessage.vue
@@ -31,7 +31,7 @@
               <span class="sender">收件人:{{item.receiverName}}</span>
               <span class="read-status">阅读人数：{{item.readUserNum}}</span>
             </div>
-            <div class="message-time">{{item.sendTime}}</div>
+            <div class="message-time">发送时间：{{item.sendTime}}</div>
           </div>
           <!-- 删除按钮，默认不显示，hover时显示 -->
 <!--      <el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteSendMessage(item.id)" type="danger" round >删除</el-button>-->
@@ -183,7 +183,6 @@ const handleClick = (item)=> {
   //带查询参数
   router.push({ path: '/sendMessageList', query: item })
 }
-
 </script>
 <style scoped>
 .container{
@@ -199,13 +198,10 @@ const handleClick = (item)=> {
   align-items: center; /* 垂直居中对齐子元素 */
   gap: 10px; /* 设置子元素之间的间距 */
 }
-
 .custom-checkbox {
   transform: scale(1.5); /* 将勾选框放大1.5倍 */
 }
-
 .selected-count {
-
 }
 .message-check{
   margin-right: 20px;
@@ -218,7 +214,6 @@ const handleClick = (item)=> {
   padding: 0 10px;
   box-sizing: border-box;
 }
-
 .message-icon {
   margin-right: 30px; /* 图标右侧间距 */
   font-size: 34px; /* 图标大小 */
@@ -232,32 +227,27 @@ li{
   justify-content: center; /* 标题和详情内容垂直居中 */
   flex: 1; /* 填充剩余空间 */
 }
-
 .message-title {
   line-height: 30px;
   font-size: 20px;
 }
-
 .message-details {
   display: flex;
   align-items: center; /* 细节内容水平居中 */
   margin-top: 10px; /* 与标题的间距 */
 }
-
 .sender {
   margin-right: 88px; /* 发件人和已读状态的间距 */
 }
-
 .read-status {
   color: #888; /* 已读状态的颜色 */
 }
-
 .message-time {
   margin-left: auto; /* 发送时间靠右显示 */
   font-size: 15px; /* 发送时间字体大小 */
   color: #666; /* 发送时间颜色 */
+  position: absolute;
 }
-
 .message-list-item {
   cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */
 }
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index db38970..240f09b 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -24,17 +24,23 @@
           <!-- 图标 -->
           <div class="message-icon">
             <el-icon><Comment /></el-icon>
+            <!-- 添加红色提示符 -->
+            <span v-if="!item.isRead" class="message-unread-indicator"></span>
           </div>
           <div class="message-content" @click="handleClick(item)">
             <h2 class="message-title">{{item.title}}</h2>
             <div class="message-details">
-              <span class="sender">发件人：{{item.sendPerson}}</span>
-              <span class="read-status">已读状态：{{item.isRead}}</span>
+              <span class="sender">发件人：{{item.senderName}}</span>
+              <span class="read-status" style="margin-right: 40px">是否已读：{{ item.isRead ? '已读' : '未读' }}</span>
+              <span class="read-status">已读人数：{{item.readUserNum}} / {{item.userNum}}</span>
             </div>
             <div class="message-time">发送时间：{{item.sendTime}}</div>
           </div>
           <!-- 删除按钮，默认不显示，hover时显示 -->
-          <el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteMessage(item.id)" type="danger" round>删除</el-button>
+          <div v-if="!item.isRead" style="margin-right: 10px">
+            <el-button v-if="hoveringOver === item.id"  @click="readMessage(item.id)" type="warning" round>点击已读</el-button>
+          </div>
+          <el-button v-if="hoveringOver === item.id"  @click="deleteMessage(item.id)" type="danger" round>删除</el-button>
         </div>
         <el-divider/>
       </li>
@@ -58,7 +64,7 @@
 import { ref,computed,onMounted} from 'vue';
 import { useRouter } from 'vue-router';
 import useUserStore from "@/store/modules/user";
-import {getMessagesListApi,deleteSendMessageApi} from "@/api/user/messag";
+import {getMessagesListApi,deleteSendMessageApi,readMessagesBatch} from "@/api/user/messag";
 import { ElMessageBox, ElMessage } from 'element-plus'
 const userStore = useUserStore()
 const params = ref({
@@ -151,6 +157,15 @@ const deleteMessage = async (id: any) => {
 
   await getMessageList()
 }
+//一键已读
+const readMessage = async (id:any) =>{
+  console.log(id,userStore.userInfo.id,'dddddd')
+  await readMessagesBatch({
+    messageIds:id,
+    userId:userStore.userInfo.id
+  })
+  await getMessageList()
+}
 // 分页
 const handleSizeChange = (size: any) => {
   // loading.value = true
@@ -223,6 +238,7 @@ const handleClick = (item)=> {
 .message-icon {
   margin-right: 30px; /* 图标右侧间距 */
   font-size: 34px; /* 图标大小 */
+  position: relative;
 }
 li{
   list-style: none;
@@ -232,8 +248,19 @@ li{
   flex-direction: column;
   justify-content: center; /* 标题和详情内容垂直居中 */
   flex: 1; /* 填充剩余空间 */
+  position: relative;
+}
+/*未读消息加小红点*/
+.message-unread-indicator {
+  position: absolute;
+  top: -4px; /* 调整位置 */
+  right: -4px; /* 调整位置 */
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: red;
+  z-index: 1; /* 确保它在其他元素之上 */
 }
-
 .message-title {
   line-height: 30px;
   font-size: 20px;
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index d006122..9c88b04 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -2,26 +2,34 @@
   <div class="header_title">
     <span>资讯</span>
   </div>
-  <div>
-    <el-card shadow="always">
-      <div class="header-flex-container">
+  <div class="common-layout">
+    <el-container>
+      <el-aside>
+        <div class="header-flex-container">
         <ul class="header-list">
           <li v-for="item in column">
-            <el-dropdown placement="bottom">
-              <span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p -->
+            <el-dropdown placement="right">
+              <div class="header-column" type="primary">
+                <span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p -->
+              </div>
+<!--              当前栏目新闻管理-->
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item>
-                      <ul>
-                        <li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px">
+                    <ul>
+                      <li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px">
+                        <el-tag type="info" size="large" style="height: 30px;font-size: 15px">
                           <p >{{listObject.title}}</p>
-                          <el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round>删除</el-button>
-                          <el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round>编辑</el-button>
-                        </li>
-                      </ul>
+                        </el-tag>
+                        <div class="button-container">
+                          <el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round plain>删除</el-button>
+                          <el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round plain>编辑</el-button>
+                        </div>
+                      </li>
+                    </ul>
                   </el-dropdown-item>
                   <div class="add-news-button">
-                    <el-button @click="addNewsDialogFormVisibleButton(item.id)" type="primary" plain round>添加当前栏目新闻</el-button>
+                    <el-button @click="addNewsDialogFormVisibleButton(item.id)" type="success" style="margin-bottom: 10px" plain round>添加当前栏目新闻</el-button>
                   </div>
                 </el-dropdown-menu>
               </template>
@@ -29,10 +37,43 @@
           </li>
         </ul>
         <div>
-          <el-button name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
+          <el-button class="button-container_column" name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
         </div>
       </div>
-    </el-card>
+      </el-aside>
+<!--      右侧-->
+      <el-main>
+        <div class="mainContainer">
+          <div class="card-header">
+            <el-card shadow="hover">
+              <div style="height:33px">
+                <span class="contentTitle">{{nowTimeNewsData.title}}</span>
+              </div>
+            </el-card>
+            <el-card shadow="hover">
+              <div class="news-flex-container">
+                <p>发布人：{{ nowTimeNewsData.userId }}</p>
+                <p>阅读数量：{{ nowTimeNewsData.readingNumber }}</p>
+                <p>发布日期：{{ nowTimeNewsData.publishTime }}</p>
+                <p>更新时间：{{nowTimeNewsData.updateTime}}</p>
+              </div>
+            </el-card>
+          </div>
+          <div style="text-align: center">
+            <el-input
+                v-model="nowTimeNewsData.content"
+                style="font-size: 20px"
+                :rows="18"
+                type="textarea"
+                readonly
+            />
+          </div>
+          <el-card style="text-align: center">
+            <el-link href="https://element-plus.org" target="_blank"  style="margin-right: 30px;font-size: 19px">关于我们</el-link>
+          </el-card>
+        </div>
+      </el-main>
+    </el-container>
   </div>
 <!--  栏目编辑弹框-->
   <el-drawer v-model="drawer" title="title" :with-header="false">
@@ -91,72 +132,8 @@
     </template>
   </el-dialog>
 <!--  新闻内容-->
-  <el-card class="container">
-    <template #header>
-      <div class="card-header">
-        <span class="contentTitle">{{nowTimeNewsData.title}}</span>
-        <el-card shadow="hover">
-          <div class="news-flex-container">
-            <p>发布人：{{ nowTimeNewsData.userId }}</p>
-            <p>阅读数量：{{ nowTimeNewsData.readingNumber }}</p>
-            <p>发布日期：{{ nowTimeNewsData.publishTime }}</p>
-            <p>更新时间：{{nowTimeNewsData.updateTime}}</p>
-          </div>
-        </el-card>
-      </div>
-    </template>
-    <div style="text-align: center">
-      <el-input
-          v-model="nowTimeNewsData.content"
-          style="width: 80%;font-size: 20px"
-          :rows="15"
-          type="textarea"
-          placeholder="Please input"
-      />
-    </div>
-    <template #footer>
-      <div style="text-align: center">
-        <el-link href="https://element-plus.org" target="_blank"  style="margin-right: 30px;font-size: 19px">关于我们</el-link>
-      </div>
-    </template>
-  </el-card>
 <!--  栏目内添加新闻-->
   <el-dialog v-model="addNewsDialogFormVisible" title="添加新闻" width="500px">
-    <el-form v-model="newsForm">
-      <el-form-item label="所属栏目id" label-width="140px">
-        <el-input v-model="newsForm.categoryId" autocomplete="off" readonly disabled/>
-      </el-form-item>
-      <el-form-item label="文章内容" label-width="140px">
-        <el-input v-model="newsForm.content" autocomplete="off" />
-      </el-form-item>
-<!--      <el-form-item label="文章文件" label-width="140px">-->
-<!--        <el-input v-model="newsForm.file" autocomplete="off" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="文章id" label-width="140px">-->
-<!--        <el-input v-model="newsForm.id" autocomplete="off" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="标题图片" label-width="140px">-->
-<!--        <el-input v-model="newsForm.pic" autocomplete="off" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="发布时间" label-width="140px">-->
-<!--        <el-input v-model="newsForm.publishTime" autocomplete="off"  type="date"/>-->
-<!--      </el-form-item>-->
-      <el-form-item label="浏览次数" label-width="140px">
-        <el-input v-model="newsForm.readingNumber" autocomplete="off" />
-      </el-form-item>
-      <el-form-item label="发布状态" label-width="140px">
-        <el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" />
-      </el-form-item>
-      <el-form-item label="文章标题" label-width="140px">
-        <el-input v-model="newsForm.title" autocomplete="off" />
-      </el-form-item>
-<!--      <el-form-item label="更新时间" label-width="140px">-->
-<!--        <el-input v-model="newsForm.updateTime" autocomplete="off"  type="date"/>-->
-<!--      </el-form-item>-->
-      <el-form-item label="发布文章的用户id" label-width="140px">
-        <el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/>
-      </el-form-item>
-    </el-form>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="addNewsDialogFormVisible = false">取消</el-button>
@@ -205,7 +182,7 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="addNewsDialogFormVisible = false">取消</el-button>
+        <el-button @click="editNewsDialogFormVisible = false">取消</el-button>
         <el-button type="primary" @click="editNewsContentConfirm">
           提交
         </el-button>
@@ -224,9 +201,11 @@ import {
   deleteEssay,
   editEssay
 } from "@/api/user/news.js"
-import {ref,reactive,onMounted} from 'vue';
+import {ref,reactive,onMounted,mounted} from 'vue';
 import {ElButton,ElDrawer, ElMessageBox, ElMessage} from 'element-plus'
 import useUserStore from "@/store/modules/user";
+import {useRouter} from "vue-router";
+const router = useRouter();
 const userStore = useUserStore()
 const drawer = ref(false)
 const addFormVisible = ref(false)
@@ -240,15 +219,15 @@ const addNewsDialogFormVisible = ref(false)
 const editNewsDialogFormVisible = ref(false)
 //添加当前新闻栏目按钮
 const addNewsDialogFormVisibleButton = (id)=>{
-  addNewsDialogFormVisible.value = true
+  // addNewsDialogFormVisible.value = true
+  router.push(`/news/newsContentDetails?id=${id}`)
   columnId.value = id
 }
 const nowTimeNewsData = ref({})
 //新闻详细信息获取
 const newViews = (listObject)=> {
-  nowTimeNewsData.value = listObject
+  nowTimeNewsData.value = { ...listObject }
 }
-
 //栏目
 const form = ref({
       categoryName:'',
@@ -260,7 +239,6 @@ const form = ref({
       status:'',
       updateTime:''
     })
-
 //新闻
 const newsForm = ref({
       categoryId:columnId,
@@ -326,13 +304,16 @@ const deleteHandle = async (id)=>{
 }
 //新闻文章查询
 const EssayList = async (id)=>{
-  const ress = await queryEssay(id)
-  // console.log(ress.data,'ress')
-  essay.value = ress.data
+  const response = await queryEssay(id)
+  // console.log(response.data,'response')
+  essay.value = response.data
+  if (essay.value.length > 0) {
+    newViews(essay.value[0]); // 显示第一条新闻
+  }
   // console.log(essay.value,'essay')
 }
 //新闻文章添加
-const addNewsContentConfirm = async ()=>{
+const addNewsContentConfirm = async (id)=>{
   addNewsDialogFormVisible.value = false
   await addEssay({
     categoryId:newsForm.value.categoryId,
@@ -346,8 +327,17 @@ const addNewsContentConfirm = async ()=>{
     title:newsForm.value.title,
     updateTime:newsForm.value.updateTime,
     userId:newsForm.value.userId
+  }).then(()=>{
+    EssayList(id);
+    ElMessage({
+      message:'添加成功',
+      type:'success'
+    })
   })
 }
+// mounted((id)=>{
+//   EssayList(id);
+// })
 //新闻删除
 const deleteNewsList = async (id)=>{
 // console.log(id)
@@ -390,17 +380,23 @@ const editNewsContentConfirm = async ()=>{
   margin: auto;
   background-image: linear-gradient(60deg,honeydew,powderblue,honeydew);
 }
+.el-aside {
+  height: 100vh; /* 设置高度为视窗高度 */
+  overflow-y: auto; /* 当内容超出时显示滚动条 */
+}
 .header-flex-container {
   display: flex;
-  align-items: center; /* 垂直居中 */
+  /*align-items: center; !* 垂直居中 *!*/
   padding: 20px;
-  background: #4b81d7;
-  justify-content: space-between; /* 左边对齐和右边对齐 */
+  gap: 10px;
+  background: white;
+  margin-top: 20px;
+  height: 81vh;
 }
 .header-list {
-  display: flex; /* 使li元素水平排列 */
+  /*display: flex; !* 使li元素水平排列 *!*/
   flex-wrap: wrap; /* 如果需要换行 */
-  align-items: center; /* 如果需要，也可以使li元素垂直居中 */
+  /*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/
   margin: 0; /* 移除默认外边距 */
   padding: 0; /* 移除默认内边距 */
 }
@@ -412,8 +408,16 @@ const editNewsContentConfirm = async ()=>{
   list-style: none;
   margin-right: 10px;
 }
-.el-dropdown {
-  margin-right: 30px;
+.header-column{
+  height:30px;
+  margin-top: 20px;
+  margin-right: 80px;
+  padding: 5px;
+  margin-bottom: 20px;
+  cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */
+}
+.header-column span{
+  color: #222222;
 }
 .add-news-button {
   margin-top: auto; /* 将按钮推到底部 */
@@ -426,8 +430,6 @@ const editNewsContentConfirm = async ()=>{
   text-align: center;
   display: block;
   width: 100%; /* 或者设置一个具体的宽度 */
-  line-height: 40px;
-  margin-bottom: 20px;
 }
 .flex-container {
   display: flex;
@@ -435,7 +437,15 @@ const editNewsContentConfirm = async ()=>{
   align-items: center;
   flex-direction: row;
 }
-
+/* 添加新的类来控制按钮的位置 */
+.button-container {
+  display: flex;
+  justify-content: flex-end; /* 按钮靠右 */
+  align-items: center; /* 垂直居中 */
+}
+.button-container_column{
+  position:absolute;
+}
 .news-flex-container {
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: space-between; /* 平均分配空间 */
diff --git a/src/views/student/index.vue b/src/views/student/index.vue
index 4db07fb..cf1e546 100644
--- a/src/views/student/index.vue
+++ b/src/views/student/index.vue
@@ -11,8 +11,8 @@ import {
 } from '@/api/user/stud'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
-import editStu from './components/editStu.vue'
-import { tryOnMounted } from '@vueuse/core'
+// import editStu from './components/editStu.vue'
+// import { tryOnMounted } from '@vueuse/core'
 const userStore = useUserStore()
 // console.log(userStore.data.id, 'icon') //用户信息
 const formLabelWidth = '60px'