'更新'

src/router/routers.ts

@@ -226,10 +226,9 @@ export const constantRoute: any = [
       },
 
       {
-        path: '/news/newsContentDetails',
+        path: '/news/newsContent',
-        component: () =>
+        component: () => import('@/views/news/index.vue'),
-            import('@/views/news/components/newsContentDetails.vue'),
+        name: 'NewsContent',
-        name: 'NewsContentDetails',
         meta: {
           title: '栏目',
           hidden: false,
@@ -237,9 +236,10 @@ export const constantRoute: any = [
         },
       },
       {
-        path: '/news/newsContent',
+        path: '/news/newsContentDetails',
-        component: () => import('@/views/news/index.vue'),
+        component: () =>
-        name: 'NewsContent',
+            import('@/views/news/components/newsContentDetails.vue'),
+        name: 'NewsContentDetails',
         meta: {
           title: '文章',
           hidden: false,

src/views/message/components/messageContent.vue

@@ -16,40 +16,57 @@
             </div>
           </template>
 <!--          输入框内容-->
-            <el-input
+          <el-form>
+            <el-form-item label="收件人id：">
+              <el-input
                 :model-value="inputPerson"
                 size="large"
-                placeholder="收件人id："
+                readonly
             >
-            <template #append>
+              <template #append>
-              <el-button @click="addPerson = true">
+                <el-button @click="addPerson = true">
-                <el-icon><CirclePlus /></el-icon>
+                  <el-icon><CirclePlus /></el-icon>
-              </el-button>
+                </el-button>
-            </template>
+              </template>
-            </el-input>
+            </el-input></el-form-item>
-          <el-input
+            <el-form-item label="课程id：">
-              :model-value="inputCourseId"
+              <el-input
-              size="large"
+                  :model-value="inputCourseId"
-              placeholder="课程id："
+                  size="large"
-          >
+                  placeholder=""
-          </el-input>
+                  readonly
-            <el-input
+              >
-              v-model="inputText"
+              </el-input>
-              size="large"
+            </el-form-item>
-              placeholder="标题："
+            <el-form-item label="标题：">
-          >
+              <el-input
-          </el-input>
+                  v-model="inputText"
-            <el-input
+                  size="large"
-              v-model="textarea"
+                  placeholder=""
-              :rows="15"
+              >
-              type="textarea"
+              </el-input>
-              placeholder="内容："
+            </el-form-item>
-          />
+            <el-form-item label="内容：">
-          <el-input
+              <el-input
-              v-model="userStore.data.id"
+                  v-model="textarea"
-              disabled
+                  :rows="15"
-              style="margin-top: 20px"
+                  type="textarea"
-          />
+                  placeholder=""
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-input
+                  v-model="userStore.data.id"
+                  disabled
+                  style="margin-top: 20px"
+              />
+            </el-form-item>
+          </el-form>
+
+
+
+
+
           <!--添加收件人信息-->
           <el-dialog class="dialogType" v-model="addPerson" title="选择收件人">
             <el-divider/>
@@ -58,7 +75,7 @@
                 <div>
                   <p>组织框架</p><br/>
                   <el-cascader
-                      v-model="abc"
+                      v-model="selectStudent"
                       :options="formattedData"
                       :props="props"
                       clearable
@@ -96,17 +113,19 @@ import { getUserInfByCourse } from '@/api/user/send.js'
 import useUserStore from '@/store/modules/user'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import {SendMessageApi} from "@/api/user/messag";
-const abc = ref([])
+const selectStudent = ref([])
+
 const inputPerson =computed(()=>{
   if(props.multiple){
-    return abc.value.map(item=>item[1])
+    return selectStudent.value.map(item=>item[1])
   }else {
-    return abc.value[1]
+    return selectStudent.value[1]
   }
 })
+
 const inputCourseId = computed(()=>{
-  if(props.multiple) return abc.value.map(item=>item[0])
+  if(props.multiple) return selectStudent.value.map(item=>item[0])
-  else  return abc.value[0]
+  else  return selectStudent.value[0]
 })
 
 //======
@@ -120,7 +139,6 @@ const props = {
 const router = useRouter()
 //获取当前用户下的学生姓名
 const userStore = useUserStore()
-// console.log(userStore.userInfo.id,userStore.data.id,'dddddddd')
 const stuList = ref([])
 const formattedData = ref([])
 //获取学生数据
@@ -148,15 +166,9 @@ function formatData(data) {
     })),
   }));
 }
-// 监听 selectedStudents 的变化
-// watch(inputPerson, (newVal, oldVal) => {
-//   inputPerson.value = newVal;
-//   // 更新 formattedData 以反映最新的选择状态
-//   formattedData.value = formatData(stuList.value);
-// }, { deep: true });
 //返回
 const back= ()=>{
-  router.push('/messageManagement/message')
+  router.go(-1)
 }
 //选择收件人
 const confirm = ()=>{

src/views/message/components/receiveContentList.vue

@@ -38,7 +38,7 @@ if(!Object.keys(route.query).length){
 }
 //返回按钮
 const back = ()=>{
-  router.push('/messageManagement/message')
+  router.go(-1)
 }
 import {ref} from "vue";
 //获取参数

src/views/message/components/sendMessage.vue

@@ -74,14 +74,14 @@ const total = ref(0)
 const sendMessage = ref([])
 const loading = ref(false)
 // const hoveringOver = ref(null)
-// 获取课程列表
+// 获取发送的消息列表
 const getSendMessageList = async () => {
   loading.value = true
   const res = await getSendMessagesListApi(params.value)
   sendMessage.value = res.data.list
   total.value = res.data.total
   loading.value = false
-  console.log(sendMessage.value,'消息消息消息消息')
+  // console.log(sendMessage.value,'消息消息消息消息')
 }
 // 渲染
 onMounted(() => {
@@ -144,7 +144,7 @@ const userId = userStore.userInfo.id
 const router = useRouter()
 //返回
 const back =()=>{
-  router.push('/messageManagement/message')
+  router.go(-1)
 }
 //写栈内信函
 const sendContent = ()=>{
@@ -152,9 +152,12 @@ const sendContent = ()=>{
 }
 
 // 消息事件点击
-const handleClick = (item)=> {
+function handleClick(item) {
-  //带查询参数
+  // 传递整个消息对象
-  router.push({ path: '/sendMessageList', query: item })
+  router.push({
+    path: '/sendMessageList',
+    query: item
+  });
 }
 </script>
 <style scoped>

src/views/message/components/sendMessageList.vue

@@ -13,7 +13,7 @@
           </template>
           <div class="container">
             <div class="header_content">
-              <span class="sender">收件人：{{ sendMessage.receiveUsers}}</span>
+              <span class="sender">收件人：{{ receiverNames }}</span>
               <span class="time">发送时间：{{ sendMessage.sendTime }}</span>
 <!--              <span class="read-status">是否阅读：{{sendMessage.isRead}}</span>-->
             </div>
@@ -30,10 +30,9 @@
 </template>
 <script setup lang="ts">
 import {useRouter,useRoute} from "vue-router";
-import {ref} from "vue";
+import {ref,computed,onMounted} from "vue";
 const router = useRouter()
 const route = useRoute()
-const receiveName = ref([])
 // console.log(route.query.id,'id')
 //获取数据，如果失败返回上一级
 if(!Object.keys(route.query).length){
@@ -41,11 +40,33 @@ if(!Object.keys(route.query).length){
 }
 //返回按钮
 const back = ()=>{
-  router.push('/messageManagement/sendMessage')
+  router.go(-1)
 }
 //获取参数
 const sendMessage = ref(route.query)
-console.log(route.query.receiveUsers,'内容')
+
+onMounted(() => {
+  console.log('Received message:', sendMessage.value);
+  // 尝试解析 receiveUsers
+  if (sendMessage.value.receiveUsers && typeof sendMessage.value.receiveUsers[0] === 'string') {
+    sendMessage.value.receiveUsers = sendMessage.value.receiveUsers.map(user => {
+      try {
+        return JSON.parse(user);
+      } catch (error) {
+        console.error('Error parsing user:', user, error);
+        return null; // 或者返回默认值
+      }
+    });
+  }
+});
+
+// 提取收件人的姓名
+const receiverNames = computed(() => {
+  if (sendMessage.value && sendMessage.value.receiveUsers) {
+    return sendMessage.value.receiveUsers.map(user => user?.receiverName).join(', ');
+  }
+  return '';
+});
 </script>
 
 <style scoped>

src/views/myMessage/index.vue

@@ -1,14 +1,296 @@
 <template>
-    <div>
+  <el-card>
-        我的消息
+    <template #header>
+      <div class="card-header">
+        <el-button type="primary" @click="editContent" round>写栈内信函</el-button>
+        <el-button type="primary" @click="sendContent" round>个人发出</el-button>
+      </div>
+    </template>
+    <div class="container">
+      <div class="checkboxHeader">
+        <input type="checkbox" class="custom-checkbox" @change="toggleAll" :checked="allSelected" />
+        <p class="selected-count">已选 {{ selectedCount }} 条记录</p>
+      </div>
+      <li v-for="item in Message"
+          :key="item.title"
+          class="message-list-item"
+      >
+        <!--添加悬浮删除按钮-->
+        <div class="message-list" @mouseover="hoveringOver = item.id" @mouseleave="hoveringOver = null">
+          <!-- 添加勾选框 -->
+          <div class="messageCheck">
+            <input type="checkbox" class="custom-checkbox" :value="item.id"  @change="toggleSelection(item.id)" :checked="isSelected(item.id)"/>
+          </div>
+          <!-- 图标 -->
+          <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.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时显示 -->
+          <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>
     </div>
+    <template #footer>
+      <el-pagination
+          v-model:current-page="params.pageNo"
+          v-model:page-size="params.pageSize"
+          :page-sizes="[ 5, 7, 10]"
+          :background="true"
+          layout="jumper,total, sizes, prev, pager, next "
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          style="margin-top: 10px; justify-content: center"
+      />
+    </template>
+  </el-card>
 </template>
+<script setup lang="ts">
+import { ref,computed,onMounted} from 'vue';
+import { useRouter } from 'vue-router';
+import useUserStore from "@/store/modules/user";
+import {getMessagesListApi,deleteSendMessageApi,readMessagesBatch} from "@/api/user/messag";
+import { ElMessageBox, ElMessage } from 'element-plus'
+const userStore = useUserStore()
+const params = ref({
+  userId: userStore.data.id,
+  // userId: 4,
+  isAsc:true,
+  isDelete:0,
+  isRead:'',
+  isSend:1,
+  // messageId:false,
+  pageNo:1,
+  pageSize:5,
+  sortBy:false,//排序字段
+})
+const total = ref(0)
+const Message = ref([])
+const loading = ref(false)
+const hoveringOver = ref(null)
+//复选框
+const selectedIds = ref([]); // 存储已选中的消息ID
+const allSelected = computed(() => {
+  // 如果所有消息都被选中，则返回true
+  return Message.value.length > 0 && Message.value.every(item => selectedIds.value.includes(item.id));
+});
 
-<script lang='ts' setup>
+const selectedCount = computed(() => {
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+  // 返回已选中的消息数量
+  return selectedIds.value.length;
+});
+
+function toggleAll(event) {
+  // 切换所有消息的选中状态
+  const target = event.target;
+  if (target.checked) {
+    // 如果全选框被选中，则将所有消息的ID添加到selectedIds中
+    selectedIds.value = Message.value.map(item => item.id);
+  } else {
+    // 如果全选框未被选中，则清空selectedIds
+    selectedIds.value = [];
+  }
+}
+
+function toggleSelection(id: number) {
+  // 切换单个消息的选中状态
+  const index = selectedIds.value.indexOf(id);
+  if (index > -1) {
+    selectedIds.value.splice(index, 1);
+  } else {
+    selectedIds.value.push(id);
+  }
+}
+
+function isSelected(id) {
+  return selectedIds.value.includes(id);
+}
+
+// 获取课程列表
+const getMessageList = async () => {
+  loading.value = true
+  const res = await getMessagesListApi(params.value)
+  Message.value = res.data.list
+  total.value = res.data.total
+  loading.value = false
+}
+// 渲染
+onMounted(() => {
+  getMessageList()
+})
+//删除当前记录
+const deleteMessage = async (id: any) => {
+  await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+  await deleteSendMessageApi({
+    messageIds:id,
+    userId:userStore.data.id
+  })
+      .then(() => {
+        console.log(id, '删除id')
+        getMessageList() // 删除成功后重新获取列表数据以更新页面
+        ElMessage.success('删除成功')
+        // console.log(res)
+      })
+      .catch((err: any) => {
+        console.log(id, 'id')
+        ElMessage.error(err.response.data.message)
+      })
+
+  await getMessageList()
+}
+//一键已读
+const readMessage = async (id:any) =>{
+  console.log(id,userStore.data.id,'dddddd')
+  await readMessagesBatch({
+    messageIds:id,
+    userId:userStore.data.id
+  })
+  await getMessageList()
+}
+// 分页
+const handleSizeChange = (size: any) => {
+  // loading.value = true
+  // console.log(size)
+  params.value.pageNo = 1
+  params.value.pageSize = size
+  // 基于每页条数重新渲染
+  getMessageList()
+}
+const handleCurrentChange = (page: any) => {
+  console.log(page)
+  params.value.pageNo = page
+  // 基于当前页渲染数据
+  getMessageList()
+}
+const router = useRouter()
+//写站内信函跳转
+const editContent =()=>{
+  router.push('/messageContent')
+}
+//个人发出跳转
+const sendContent = ()=>{
+  router.push('/messageManagement/sendMessage')
+}
+
+// 消息事件点击
+const handleClick = (item)=> {
+  // console.log(item)
+  //带查询参数
+  router.push({ path: '/messageContentList', query: item })
+}
 
 </script>
+<style scoped>
+.container{
+  /*background: darkgray;*/
+  margin: auto;
+  width: 95%;
+  padding: 15px;
+}
+.checkboxHeader {
+  /*background: lightgrey;*/
+  width: 100%;
+  padding: 10px;
+  height: 50px;
+  display: flex; /* 使用Flex布局使子元素在同一行显示 */
+  align-items: center; /* 垂直居中对齐子元素 */
+  gap: 10px; /* 设置子元素之间的间距 */
+}
+
+.custom-checkbox {
+  transform: scale(1.5); /* 将勾选框放大1.5倍 */
+}
+
+.selected-count {
+
+}
+.messageCheck{
+  margin-right: 20px;
+}
+.message-list {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  height: 80px;
+  /*background-color: #f2f2f2;*/
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.message-icon {
+  margin-right: 30px; /* 图标右侧间距 */
+  font-size: 34px; /* 图标大小 */
+  position: relative;
+}
+li{
+  list-style: none;
+}
+.message-content {
+  display: flex;
+  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;
+}
+
+.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; /* 发送时间颜色 */
+}
 
-<style lang='scss' scoped>
+.message-list-item {
+  cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */
+}
 
+.message-list-item:hover{
+  background-image: linear-gradient(60deg,powderblue,darkgrey,snow);
+}
 </style>

src/views/news/index.vue

@@ -22,6 +22,7 @@
                   <el-dropdown-item>
                     <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-tag>
@@ -29,6 +30,7 @@
                           <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>
@@ -202,15 +204,10 @@ const addFormVisible = ref(false)
 const column  =ref([])
 //存取文章列表信息
 const essay = ref([])
-//存放获取当前添加栏目的id
-const columnId = ref()
-const addNewsDialogFormVisible = ref(false)
 const editNewsDialogFormVisible = ref(false)
 //添加当前新闻栏目按钮
 const addNewsDialogFormVisibleButton = (id)=>{
-  // addNewsDialogFormVisible.value = true
   router.push(`/news/newsContentDetails?id=${id}`)
-  // columnId.value = id
 }
 const nowTimeNewsData = ref({})
 //新闻详细信息获取
@@ -286,7 +283,7 @@ const EssayList = async (id)=>{
   if (essay.value.length > 0) {
     newViews(essay.value[0]); // 显示第一条新闻
   }
-  // console.log(essay.value,'essay')
+  console.log(essay.value,'essay')
 }
 
 //新闻删除