AlRead and ToRead function have been compeled,another add rightClick menu

Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeController.java

@@ -66,6 +66,19 @@ public class NoticeController {
         return ResponseResult.build(code, msg, noticesByUserId);
     }
 
+    //修改登录用户所接收公告的阅读状态
+    @GetMapping("/modifyNoticeIsRead")
+    public ResponseResult modifyNoticeIsRead(String noticeId,Integer readStatus){
+        Long nid=null;
+        if (StringUtils.hasText(noticeId)){
+            nid = Long.parseLong(noticeId);
+        }
+        boolean updateById = noticeReceiveService.modifyNoticeIsRead(nid,readStatus);
+        String msg = updateById ? "" : "服务器出错，请重试！";
+        return ResponseResult.build(updateById ? ResponseCode.DATABASE_UPDATE_OK : ResponseCode.DATABASE_UPDATE_ERROR, msg, updateById);
+
+    }
+
     //更新公告
     @PutMapping
     public ResponseResult updateNotice(@RequestBody Notice notice) {

Pinnacle/src/main/java/com/cfive/pinnacle/service/INoticeReceiveService.java

@@ -16,4 +16,6 @@ import java.util.List;
  */
 public interface INoticeReceiveService extends IService<NoticeReceive> {
     List<Notice> selectByUserId(Integer readStatus);
+
+    Boolean modifyNoticeIsRead(Long noticeId,Integer readStatus);
 }

Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeReceiveServiceImpl.java

@@ -1,5 +1,6 @@
 package com.cfive.pinnacle.service.impl;
 
+import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
 import com.cfive.pinnacle.entity.Notice;
 import com.cfive.pinnacle.entity.NoticeReceive;
 import com.cfive.pinnacle.mapper.NoticeReceiveMapper;
@@ -28,4 +29,12 @@ public class NoticeReceiveServiceImpl extends ServiceImpl<NoticeReceiveMapper, N
         Long userId = WebUtil.getLoginUser().getUser().getId();
         return noticeReceiveMapper.selectByUserId(userId,readStatus);
     }
+
+    @Override
+    public Boolean modifyNoticeIsRead(Long noticeId,Integer readStatus) {
+        LambdaUpdateWrapper<NoticeReceive> luw = new LambdaUpdateWrapper<>();
+        Long userId = WebUtil.getLoginUser().getUser().getId();
+        luw.eq(NoticeReceive::getNoticeId, noticeId).eq(NoticeReceive::getUserId, userId).set(null!=readStatus,NoticeReceive::getAlreadyRead, readStatus);
+        return noticeReceiveMapper.update(null,luw)>0;
+    }
 }

Pinnacle/src/main/resources/mapper/NoticeMapper.xml

@@ -42,7 +42,7 @@
                  left join t_user u on n.sender_id = u.id
         where n.deleted = 0
           and n.old = 0
-        order by create_time desc
+        order by n.top desc, n.create_time desc
     </select>
 
     <!--  分页查询所有公告  -->
@@ -69,7 +69,7 @@
                  left join t_user u on n.sender_id = u.id
         where n.deleted = 0
           and n.old = 0
-        order by create_time desc
+        order by n.top desc, n.create_time desc
     </select>
     <resultMap id="NoticeAllResultMap" type="notice" autoMapping="true">
         <id property="id" column="nid"/>
@@ -118,9 +118,10 @@
             and n.deleted = 0
             and n.old = 0
         </where>
+        order by n.top desc, n.create_time desc
     </select>
 
-    <!--   模糊查询公告-->
+    <!--   分页模糊查询公告-->
     <select id="selectPageByCond" resultMap="NoticeAllResultMap" resultType="notice">
         select u.id uid,
         u.username,
@@ -158,5 +159,6 @@
             and n.deleted = 0
             and n.old = 0
         </where>
+        order by n.top desc, n.create_time desc
     </select>
 </mapper>

Pinnacle/src/main/resources/mapper/NoticeReceiveMapper.xml

@@ -33,7 +33,7 @@
             and notice_receive.user_id=#{userId}
             and notice_receive.deleted=0
         </where>
-        order by n.send_time desc
+        order by n.top desc, n.create_time desc
     </select>
     <resultMap id="selectAllMap" type="notice" autoMapping="true">
         <id property="id" column="nid"/>

ui/src/assets/svg/flag.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684406169989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3427" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M890.326108 88.982621H514.599492L138.772896 0.599883c-0.09998 0-0.199961 0-0.299941-0.099981-0.199961 0-0.399922-0.09998-0.699864-0.09998-0.09998 0-0.299941-0.09998-0.399922-0.099981-0.299941 0-0.599883-0.09998-0.899824-0.09998h-0.299941c-0.399922 0-0.699863-0.09998-1.099786-0.099981H133.673892c-1.599688 0-3.299356 0.199961-4.799063 0.499903h-0.09998c-0.299941 0.09998-0.699863 0.199961-0.999805 0.299941-0.09998 0-0.199961 0.09998-0.299941 0.099981-0.299941 0.09998-0.499902 0.199961-0.799844 0.199961-0.199961 0.09998-0.299941 0.09998-0.499903 0.199961s-0.299941 0.09998-0.499902 0.199961-0.499902 0.199961-0.699863 0.299941h-0.099981c-1.799649 0.799844-3.499317 1.799649-5.099004 2.999414-3.199375 2.599492-5.698887 5.898848-7.098613 9.698106v0.09998c-0.09998 0.199961-0.199961 0.499902-0.199961 0.699864-0.09998 0.199961-0.09998 0.299941-0.099981 0.499902-0.09998 0.199961-0.09998 0.399922-0.199961 0.599883-0.09998 0.199961-0.09998 0.399922-0.199961 0.599883 0 0.199961-0.09998 0.299941-0.09998 0.499902-0.09998 0.299941-0.09998 0.499902-0.199961 0.799844 0 0.09998 0 0.199961-0.099981 0.399922 0 0.299941-0.09998 0.599883-0.09998 0.899824v0.299942c0 0.399922-0.09998 0.699863-0.099981 1.099785v980.608475c0 12.197618 9.998047 22.295645 22.295646 22.295645s22.295645-9.998047 22.295645-22.295645V517.698887L507.000976 600.282757c1.699668 0.399922 3.399336 0.599883 5.099004 0.599883h378.326109c12.297598 0 22.295645-9.998047 22.295645-22.295645V111.278266C912.621754 98.980668 902.623706 88.982621 890.326108 88.982621z m-22.195665 467.408709H514.599492l-358.729935-84.383519V50.390158L506.900996 132.974029c1.699668 0.399922 3.399336 0.599883 5.099004 0.599882h356.130443v422.817419z" p-id="3428"></path></svg>

ui/src/assets/svg/label.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684406493863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8814" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M467.2 1024c-25.6 0-44.8-6.4-57.6-25.6l-384-384c-32-32-32-89.6 0-121.6L512 6.4C518.4 0 531.2 0 537.6 0l377.6 83.2c12.8 0 19.2 12.8 25.6 25.6L1024 486.4c0 12.8 0 19.2-6.4 32l-486.4 486.4C512 1017.6 492.8 1024 467.2 1024zM544 64 70.4 537.6C64 550.4 64 563.2 70.4 569.6l384 384c6.4 6.4 19.2 6.4 32 0L960 480l-76.8-339.2L544 64z" p-id="8815"></path><path d="M652.8 531.2c-44.8 0-83.2-19.2-115.2-44.8-64-64-64-166.4 0-230.4 32-32 70.4-44.8 115.2-44.8 44.8 0 83.2 19.2 115.2 44.8 32 32 44.8 70.4 44.8 115.2S800 454.4 768 486.4C736 518.4 697.6 531.2 652.8 531.2zM652.8 275.2c-25.6 0-51.2 12.8-70.4 25.6-38.4 38.4-38.4 102.4 0 140.8 38.4 38.4 102.4 38.4 140.8 0 19.2-19.2 25.6-44.8 25.6-70.4 0-25.6-12.8-51.2-25.6-70.4C704 281.6 678.4 275.2 652.8 275.2z" p-id="8816"></path></svg>

ui/src/assets/svg/noticeItem.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684349581765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7538" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M859.354 255.953H717.847L534.921 73.026c-0.409-0.41-0.829-0.802-1.255-1.184a30.918 30.918 0 0 0-3.474-2.694c-0.177-0.119-0.357-0.231-0.536-0.345a31.2 31.2 0 0 0-2.24-1.31c-0.03-0.016-0.063-0.03-0.093-0.046-0.462-0.241-0.93-0.469-1.4-0.685-9.147-4.192-19.913-3.702-28.678 1.478a31.073 31.073 0 0 0-6.167 4.787l-0.009 0.01-182.917 182.916H163.887c-55.781 0-101 45.219-101 101v501.341c0 55.78 45.219 101 101 101h695.468c55.78 0 101-45.22 101-101V356.953c-0.001-55.781-45.22-101-101.001-101zM513 138.79l117.163 117.163H395.837L513 138.79z m383.174 710.432c0 24.301-19.699 44-44 44H172c-24.301 0-44-19.699-44-44V363c0-24.301 19.699-44 44-44h73.105l-43.714 43.714c-12.107 12.107-12.107 31.735 0 43.842s31.736 12.107 43.843 0L332.79 319h360.419l87.557 87.557c12.106 12.106 31.735 12.106 43.842 0 12.107-12.107 12.107-31.736 0.001-43.842L780.895 319h71.279c24.301 0 44 19.699 44 44v486.222z" p-id="7539"></path><path d="M737.072 512h-449c-17.686 0-32.023 14.337-32.023 32.023 0 17.686 14.337 32.022 32.023 32.022h449c17.687 0 32.023-14.337 32.023-32.022 0.001-17.686-14.336-32.023-32.023-32.023zM737.072 703.754h-449c-17.686 0-32.023 14.337-32.023 32.023 0 17.686 14.337 32.022 32.023 32.022h449c17.687 0 32.023-14.337 32.023-32.022 0.001-17.686-14.336-32.023-32.023-32.023z" p-id="7540"></path></svg>

ui/src/assets/svg/top.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684405851913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2389" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M907.2 136.7h-789c-11.5 0-20.7-9.3-20.7-20.7s9.3-20.7 20.7-20.7h789.1c11.5 0 20.7 9.3 20.7 20.7s-9.3 20.7-20.8 20.7z" p-id="2390"></path><path d="M888.7 512.6c-5.3 0-10.6-2-14.7-6.1L512.7 145.3 151.4 506.6c-8.1 8.1-21.2 8.1-29.3 0-8.1-8.1-8.1-21.2 0-29.3l376-376c3.9-3.9 9.2-6.1 14.7-6.1s10.8 2.2 14.7 6.1l376 376c8.1 8.1 8.1 21.2 0 29.3-4.2 4-9.5 6-14.8 6z" p-id="2391"></path><path d="M514.2 930.6c-11.4 0-20.7-9.2-20.7-20.7l-2.9-788.4c0-11.5 9.2-20.8 20.7-20.8h0.1c11.4 0 20.7 9.2 20.7 20.7l2.9 788.4c0 11.5-9.3 20.8-20.8 20.8 0.1 0 0 0 0 0z" p-id="2392"></path></svg>

ui/src/components/notice/CommitForm.vue

@@ -99,6 +99,7 @@ export default {
     data() {
         return {
             visible:false,
+            rightClickVisible:false,
             addData: {
                 title: '',
                 typeId: '',
@@ -125,10 +126,10 @@ export default {
                 ],
                 content: [
                     { required: true, message: '请填写公告内容', trigger: 'blur' }
+                ],
+                receivers: [
+                    { type:'array',required: true, message: '请选择公告接收者', trigger: 'change' }
                 ]
-                // receivers: [
-                //     { type:'array',required: true, message: '请选择公告接收者', trigger: 'change' }
-                // ]
             }
         }
 

ui/src/components/notice/NoticeManageTable.vue

@@ -113,6 +113,7 @@
         v-model="dialogEditVisible"
         center
         v-if="hackReset"
+        :close-on-click-modal="false"
         :before-close="handleDialogClose"
     >
         <template #header>
@@ -121,7 +122,12 @@
         <commitForm />
     </el-dialog>
     <!--        查看会话框-->
-    <el-dialog v-model="dialogShowVisible" center>
+    <el-dialog
+        v-model="dialogShowVisible"
+        center
+        :close-on-click-modal="false"
+        :before-close="handleDialogClose"
+    >
         <template #header>
             <h2 style="color: red">查看公告</h2>
         </template>
@@ -188,6 +194,8 @@ export default {
         handleDialogClose() {
             noticeStore.$patch((state) => {
                 state.dialogEditVisible = false
+                state.dialogAddVisible = false
+                state.dialogShowVisible = false
                 state.editFlag = false
                 state.hackReset = false
             })

ui/src/components/notice/NoticeShowDialog.vue

@@ -1,30 +1,33 @@
 <template>
     <el-descriptions direction="vertical" :column="3" border>
-        <template #title>{{ this.noticeShowData.title }}</template>
+        <template #title
-        <el-descriptions-item label="发布人" width="120"
+            ><h2>{{ noticeShowData.title }}</h2></template
+        >
+        <el-descriptions-item label="发布者" width="120"
             ><el-tag size="large" type="success">{{
-                this.noticeShowData.sender.username
+                noticeShowData.sender.username
             }}</el-tag></el-descriptions-item
         >
         <el-descriptions-item label="生效时间" width="180">{{
-            formatDate(this.noticeShowData.sendTime)
+            formatDate(noticeShowData.sendTime)
         }}</el-descriptions-item>
         <el-descriptions-item label="公告类型"
             ><el-tag size="large">{{
-                this.noticeShowData.noticeType.name
+                noticeShowData.noticeType.name
             }}</el-tag></el-descriptions-item
         >
-        <el-descriptions-item label="优先级"
+        <el-descriptions-item label="优先级">{{ noticeShowData.priority }} </el-descriptions-item>
-            >{{ this.noticeShowData.priority }}
-        </el-descriptions-item>
         <el-descriptions-item label="失效时间">{{
-            formatDate(this.noticeShowData.endTime)
+            formatDate(noticeShowData.endTime)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="公告内容">{{
-            this.noticeShowData.content
         }}</el-descriptions-item>
+        <el-descriptions-item label="公告内容">{{ noticeShowData.content }}</el-descriptions-item>
     </el-descriptions>
-    <el-button type="primary" @click="handleShowDialog" style="margin: 50px 400px">确 定</el-button>
+    <el-button
+        type="primary"
+        @click="handleShowDialog(noticeShowData.id, noticeShowData.isRead)"
+        style="margin: 50px 400px"
+        >确 定</el-button
+    >
 </template>
 <script lang="ts">
 import { mapState } from 'pinia'
@@ -34,16 +37,30 @@ const noticeStore = useNoticeStore()
 export default {
     name: 'NoticeShowDialog',
     computed: {
-        ...mapState(useNoticeStore, ['noticeShowData', 'dialogShowVisible'])
+        ...mapState(useNoticeStore, ['noticeShowData', 'dialogShowVisible', 'currentViewPage'])
     },
     data() {
         return {}
     },
     methods: {
-        handleShowDialog() {
+        handleShowDialog(nid, isRead) {
             noticeStore.$patch((state) => {
                 state.dialogShowVisible = false
             })
+            if (isRead === 0) {
+                noticeStore.modifyNoticeIsRead(nid, 1)
+                let flag = 0
+                if (this.currentViewPage === 'All') {
+                    flag = -1
+                } else if (this.currentViewPage === 'ToRead') {
+                    flag = 0
+                } else if (this.currentViewPage === 'AlRead') {
+                    flag = 1
+                }
+                setTimeout(() => {
+                    noticeStore.selectAllNoticeByUserId(flag)
+                }, 100)
+            }
         },
         formatDate(date) {
             if (date == null) return null
@@ -52,4 +69,11 @@ export default {
     }
 }
 </script>
-<style scoped></style>
+<style scoped>
+h2 {
+    margin-left: 20px;
+    margin-bottom: 10px;
+    font-size: 22px;
+    font-weight: bold;
+}
+</style>

ui/src/components/notice/NoticeViewTable.vue

@@ -10,213 +10,178 @@
                 <template #dot v-if="notice.isRead === 0">
                     <el-badge is-dot class="item" />
                 </template>
-                <el-card @click="showNoticeDetail(notice)">
+                <el-card
-                    <h4></h4>
+                    @click="showNoticeDetail(notice)"
-                    <p>Tom committed 2018/4/12 20:46</p>
+                    @contextmenu.prevent="openMenu($event, notice)"
+                >
+                    <template #header>
+                        <el-tooltip content="鼠标右击进行更多操作" placement="top" effect="light">
+                            <div class="top">
+                                <el-icon :size="SIZE_ICON_MD()">
+                                    <icon-pinnacle-noticeItem />
+                                </el-icon>
+                                <el-tag
+                                    size="small"
+                                    :type="
+                                        notice.noticeType.name === '通知公告'
+                                            ? 'warning'
+                                            : notice.noticeType.name === '紧急公告'
+                                            ? 'danger'
+                                            : 'success'
+                                    "
+                                    disable-transitions
+                                    style="margin-right: 20px; margin-left: 10px"
+                                >
+                                    {{ notice.noticeType.name }}
+                                </el-tag>
+                                <h4>{{ notice.title }}</h4>
+                                <el-icon class="senderIcon">
+                                    <icon-pinnacle-user />
+                                </el-icon>
+                                发布者：
+                                <span class="sender">{{ notice.sender.username }}</span>
+                                <!--                            <div class="check">-->
+                                <!--                                <el-button-->
+                                <!--                                    type="info"-->
+                                <!--                                    v-if="notice.isRead === 1"-->
+                                <!--                                    @click.stop="changeIsRead"-->
+                                <!--                                >-->
+                                <!--                                    <template #icon>-->
+                                <!--                                        <input type="checkbox" :checked="isCheck" />-->
+                                <!--                                    </template>-->
+                                <!--                                    标为未读-->
+                                <!--                                </el-button>-->
+                                <!--                            </div>-->
+                            </div>
+                        </el-tooltip>
+                    </template>
+                    <p class="content">{{ contentSubstr(notice.content) }}</p>
                 </el-card>
+                <!-- 鼠标右击下拉菜单-->
+                <ul
+                    v-show="rightClickVisible"
+                    :style="{ left: left + 'px', top: top + 'px' }"
+                    class="contextmenu"
+                >
+                    <li>
+                        <el-icon :size="SIZE_ICON_MD()">
+                            <icon-pinnacle-top />
+                        </el-icon>
+                        置顶
+                    </li>
+                    <li v-if="this.isRead" @click.stop="modifyStatus(this.rightClickNid, 1)">
+                        <el-icon :size="SIZE_ICON_SM()">
+                            <icon-pinnacle-flag />
+                        </el-icon>
+                        标为已读
+                    </li>
+                    <li v-if="!this.isRead" @click.stop="modifyStatus(this.rightClickNid, 0)">
+                        <el-icon :size="SIZE_ICON_SM()">
+                            <icon-pinnacle-flag />
+                        </el-icon>
+                        标为未读
+                    </li>
+                    <li>
+                        <el-icon :size="SIZE_ICON_SM()">
+                            <icon-pinnacle-label />
+                        </el-icon>
+                        新建标签
+                    </li>
+                </ul>
             </el-timeline-item>
         </el-timeline>
         <!--        查看会话框-->
-        <el-dialog v-model="dialogShowVisible" center>
+        <el-dialog
+            v-model="dialogShowVisible"
+            center
+            :close-on-click-modal="false"
+            :before-close="handleDialogClose"
+        >
             <template #header>
                 <h2 style="color: red">公告详情</h2>
             </template>
             <notice-show-dialog />
         </el-dialog>
-        <!--        <el-collapse-->
+        <!--        空状态-->
-        <!--            @change="handleChange"-->
+        <el-empty v-if="selectData.length === 0" :image-size="200" />
-        <!--            v-loading="this.loading"-->
-        <!--            element-loading-text="加载中..."-->
-        <!--        >-->
-        <!--            <el-collapse-item v-for="notice in selectData" :key="notice.id" :name="notice.id">-->
-        <!--                <template #title>-->
-        <!--                    <el-tag-->
-        <!--                        size="small"-->
-        <!--                        :type="-->
-        <!--                            notice.noticeType.name === '通知公告'-->
-        <!--                                ? 'warning'-->
-        <!--                                : notice.noticeType.name === '紧急公告'-->
-        <!--                                ? 'danger'-->
-        <!--                                : 'success'-->
-        <!--                        "-->
-        <!--                        disable-transitions-->
-        <!--                        style="margin-right: 30px"-->
-        <!--                    >-->
-        <!--                        {{ notice.noticeType.name }}-->
-        <!--                    </el-tag>-->
-        <!--                    <h3>{{ notice.title }}</h3>-->
-        <!--                </template>-->
-        <!--                <div>-->
-        <!--                    <el-card class="box-card" shadow="always">-->
-        <!--                        <template #header>-->
-        <!--                            <div class="card-header">-->
-        <!--                                <h4>优先级：</h4>-->
-        <!--                                <el-tag effect="light" size="large">{{ notice.priority }}</el-tag>-->
-        <!--                            </div>-->
-        <!--                            <div class="card-header">-->
-        <!--                                <h4>发布者：</h4>-->
-        <!--                                <el-tag effect="light" size="large">{{-->
-        <!--                                    notice.sender.username-->
-        <!--                                }}</el-tag>-->
-        <!--                            </div>-->
-        <!--                        </template>-->
-        <!--                        <h2 class="contentTitle">公告内容：</h2>-->
-        <!--                        <div class="content">-->
-        <!--                            {{ notice.content }}-->
-        <!--                        </div>-->
-        <!--                        <div class="date">-->
-        <!--                            <div class="sendTime">-->
-        <!--                                <h4>生效日期：</h4>-->
-        <!--                                <el-tag effect="plain" size="large" type="success">{{-->
-        <!--                                    formatDate(notice.sendTime)-->
-        <!--                                }}</el-tag>-->
-        <!--                            </div>-->
-        <!--                            <div class="endTime">-->
-        <!--                                <h4>失效日期：</h4>-->
-        <!--                                <el-tag effect="plain" size="large" type="info">{{-->
-        <!--                                    formatDate(notice.endTime)-->
-        <!--                                }}</el-tag>-->
-        <!--                            </div>-->
-        <!--                        </div>-->
-        <!--                    </el-card>-->
-        <!--                </div>-->
-        <!--            </el-collapse-item>-->
-        <!--        </el-collapse>-->
     </div>
-    <!--    <el-table-->
-    <!--        v-loading="this.loading"-->
-    <!--        element-loading-text="加载中..."-->
-    <!--        ref="tableRef"-->
-    <!--        :data="this.selectData"-->
-    <!--        style="font-size: 18px"-->
-    <!--        border-->
-    <!--        highlight-current-row-->
-    <!--        :header-cell-style="{-->
-    <!--            background: 'darksalmon',-->
-    <!--            'text-align': 'center',-->
-    <!--            color: '#fff',-->
-    <!--            'font-size': '20px'-->
-    <!--        }"-->
-    <!--    >-->
-    <!--        <el-table-column-->
-    <!--            prop="title"-->
-    <!--            label="公告标题"-->
-    <!--            width="230"-->
-    <!--            :formatter="formatter"-->
-    <!--            show-overflow-tooltip-->
-    <!--            align="center"-->
-    <!--        />-->
-    <!--        <el-table-column prop="noticeType.name" label="公告类别" width="180" align="center">-->
-    <!--            <template #default="scope">-->
-    <!--                <el-tag-->
-    <!--                    size="default"-->
-    <!--                    :type="scope.row.noticeType.name === '通知公告' ? 'warning' : 'success'"-->
-    <!--                    disable-transitions-->
-    <!--                >-->
-    <!--                    {{ scope.row.noticeType.name }}-->
-    <!--                </el-tag>-->
-    <!--            </template>-->
-    <!--        </el-table-column>-->
-    <!--        <el-table-column prop="priority" label="优先级" width="100" align="center" />-->
-    <!--        <el-table-column prop="isRead" label="公告状态" width="180" align="center">-->
-    <!--            <template #default="scope">-->
-    <!--                <el-tag-->
-    <!--                    size="large"-->
-    <!--                    :type="scope.row.isRead === 0 ? 'danger' : 'success'"-->
-    <!--                    disable-transitions-->
-    <!--                >-->
-    <!--                    {{ scope.row.isRead === 0 ? '未读' : '已读' }}-->
-    <!--                </el-tag>-->
-    <!--            </template>-->
-    <!--        </el-table-column>-->
-    <!--        <el-table-column-->
-    <!--            prop="sendTime"-->
-    <!--            label="生效时间"-->
-    <!--            sortable-->
-    <!--            width="250"-->
-    <!--            :formatter="formatDate"-->
-    <!--            align="center"-->
-    <!--        />-->
-    <!--        <el-table-column-->
-    <!--            prop="endTime"-->
-    <!--            label="失效时间"-->
-    <!--            sortable-->
-    <!--            width="250"-->
-    <!--            :formatter="formatDate"-->
-    <!--            align="center"-->
-    <!--        />-->
-    <!--        <el-table-column-->
-    <!--            prop="sender.username"-->
-    <!--            label="发布人"-->
-    <!--            width="130"-->
-    <!--            column-key="senderName"-->
-    <!--            :filters="filterSenderName"-->
-    <!--            :filter-method="filterTag"-->
-    <!--            filter-placement="bottom-end"-->
-    <!--            align="center"-->
-    <!--        >-->
-    <!--            <template #default="scope">-->
-    <!--                <el-tag-->
-    <!--                    :type="scope.row.sender.username === 'cyb' ? '' : 'success'"-->
-    <!--                    disable-transitions-->
-    <!--                    >{{ scope.row.sender.username }}-->
-    <!--                </el-tag>-->
-    <!--            </template>-->
-    <!--        </el-table-column>-->
-    <!--        <el-table-column label="操作" align="center">-->
-    <!--            <template #default="scope">-->
-    <!--                <el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"-->
-    <!--                    >查看-->
-    <!--                </el-button>-->
-    <!--                <el-button size="small" type="danger" @click="modifyStatus(scope.row)"-->
-    <!--                    >标记为{{ scope.row.isRead === 0 ? '已读' : '未读' }}-->
-    <!--                </el-button>-->
-    <!--            </template>-->
-    <!--        </el-table-column>-->
-    <!--    </el-table>-->
-    <!--    &lt;!&ndash;        查看会话框&ndash;&gt;-->
-    <!--    <el-dialog v-model="dialogShowVisible" center>-->
-    <!--        <template #header>-->
-    <!--            <h2 style="color: red">查看公告</h2>-->
-    <!--        </template>-->
-    <!--        <notice-show-dialog />-->
-    <!--    </el-dialog>-->
 </template>
 
 <script lang="ts">
 import { mapState } from 'pinia'
 import { useNoticeStore } from '@/store/notice'
+import { SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
+
 const noticeStore = useNoticeStore()
 
 export default {
     data() {
         return {
-            filterSenderName: []
+            isRead: true,
+            rightClickNid: '',
+            rightClickVisible: false,
+            top: 0,
+            left: 0
         }
     },
     props: [],
     methods: {
+        SIZE_ICON_MD() {
+            return SIZE_ICON_MD
+        },
+        SIZE_ICON_SM() {
+            return SIZE_ICON_SM
+        },
         showNoticeDetail(data) {
             noticeStore.$patch((state) => {
                 state.dialogShowVisible = true
                 state.noticeShowData = data
             })
         },
+        contentSubstr(title) {
+            if (title.length > 20) {
+                return title.substring(0, 20) + ' ...'
+            } else {
+                return title
+            }
+        },
         formatDate(date) {
             if (date == null) return null
             return new Date(date).toLocaleString()
         },
-        filterTag(value, row) {
+        async modifyStatus(nid, status) {
-            return row.sender.username === value
+            await noticeStore.modifyNoticeIsRead(nid, status)
+            this.closeMenu()
+            let flag = 0
+            if (this.currentViewPage === 'All') {
+                flag = -1
+            } else if (this.currentViewPage === 'ToRead') {
+                flag = 0
+            } else if (this.currentViewPage === 'AlRead') {
+                flag = 1
+            }
+            await noticeStore.selectAllNoticeByUserId(flag)
         },
-        modifyStatus(row) {
+        handleDialogClose() {
-            console.log(row)
-        },
-        handleShow(index, row) {
             noticeStore.$patch((state) => {
-                state.dialogShowVisible = true
+                state.dialogEditVisible = false
-                state.noticeShowData = row
+                state.dialogAddVisible = false
+                state.dialogShowVisible = false
+                state.editFlag = false
+                state.hackReset = false
             })
+        },
+        // 鼠标右击事件
+        openMenu(e, notice) {
+            this.left = e.pageX
+            this.top = e.pageY
+            this.isRead = notice.isRead === 0
+            this.rightClickNid = notice.id
+            this.rightClickVisible = true
+        },
+        // 关闭菜单
+        closeMenu() {
+            this.rightClickVisible = false
         }
     },
     mounted() {},
@@ -226,8 +191,23 @@ export default {
             'selectData',
             'loading',
             'dialogShowVisible',
-            'noticeShowData'
+            'noticeShowData',
+            'currentViewPage'
         ])
+    },
+    watch: {
+        //   监听属性对象，newValue为新的值，也就是改变后的值
+        rightClickVisible(newValue, oldValue) {
+            if (newValue) {
+                // 菜单显示的时候
+                // 在body上添加事件处理程序
+                document.body.addEventListener('click', this.closeMenu)
+            } else {
+                // 菜单隐藏的时候
+                // 移除body上添加的事件处理程序
+                document.body.removeEventListener('click', this.closeMenu)
+            }
+        }
     }
 }
 </script>
@@ -236,64 +216,106 @@ export default {
 .myTimeline {
     margin-top: 20px;
 }
+
 .el-timeline {
+    font-size: 18px;
     --el-timeline-node-size-normal: 16px;
     --el-timeline-node-size-large: 16px;
 }
-/deep/ .el-badge__content.is-dot {
+
+:deep(.el-badge__content.is-dot) {
     height: 16px;
     width: 16px;
 }
-/deep/ .el-timeline-item__timestamp.is-top {
+
+:deep(.el-timeline-item__timestamp.is-top) {
     font-size: 16px;
     font-weight: 600;
 }
-.el-collapse {
+
-    --el-collapse-header-height: 68px;
+.el-card {
+    --el-card-padding: 10px;
 }
-/deep/ .el-collapse-item__header {
+
-    padding-left: 25px;
+:deep(.el-card__header) {
-    font-weight: 400;
+    border-bottom: 2px solid #e4e7ed;
-    border-bottom: 2px solid #dcdfe6;
-}
-.box-card {
-    font-size: 16px;
-}
-/deep/ .el-card__header {
-    border-bottom: 1px dashed #6bd4ff;
-}
-.card-header {
-    display: inline-block;
-    margin-right: 40px;
 }
+
 .el-tag {
-    font-size: 15px;
+    font-size: 13px;
 }
+
 .contentTitle {
     font-size: 20px;
     font-weight: bold;
 }
+
 .content {
-    margin-top: 20px;
+    margin-top: 10px;
     margin-left: 20px;
     height: fit-content;
 }
-.date {
+
-    margin-top: 50px;
-}
-.sendTime {
-    display: inline-block;
-    margin-right: 25px;
-}
-.endTime {
-    display: inline-block;
-}
-h3 {
-    font-weight: 550;
-    font-size: 18px;
-}
 h4 {
-    font-weight: 500;
+    font-weight: 600;
     display: inline-block;
 }
+
+.senderIcon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #cdd0d6;
+    margin-left: 40px;
+    margin-top: 2px;
+}
+
+.sender {
+    display: inline-block;
+    margin-top: -6px;
+    width: fit-content;
+    padding: 8px;
+    height: fit-content;
+    line-height: 14px;
+    border-radius: 5px;
+    border: 1px solid cadetblue;
+    font-weight: 500;
+    text-align: center;
+}
+
+.top {
+    display: flex;
+    align-items: center;
+}
+
+.check {
+    margin-left: auto;
+    margin-right: 20px;
+}
+
+.contextmenu {
+    background: #fff;
+    z-index: 3000;
+    position: fixed;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    border: 1px solid #dadadc;
+    //box-shadow: 1px 1px 1px 1px rgba(21, 21, 21, 0.3);
+}
+
+.contextmenu li {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    padding: 7px 16px;
+    cursor: pointer;
+}
+
+.contextmenu li:hover {
+    background: #eee;
+}
 </style>

ui/src/pages/notice/AlReadView.vue

@@ -11,9 +11,9 @@ export default {
     methods: {},
     mounted() {
         noticeStore.selectAllNoticeByUserId(1)
-    },
+        noticeStore.$patch((state) => {
-    unmounted() {
+            state.currentViewPage = 'AlRead'
-        console.log('alRead:unmounted')
+        })
     }
 }
 </script>

ui/src/pages/notice/AllReceiveNoticeView.vue

@@ -11,9 +11,9 @@ export default {
     methods: {},
     mounted() {
         noticeStore.selectAllNoticeByUserId(-1)
-    },
+        noticeStore.$patch((state) => {
-    unmounted() {
+            state.currentViewPage = 'All'
-        console.log('all:unmounted')
+        })
     }
 }
 </script>

ui/src/pages/notice/NoticeManage.vue

@@ -14,7 +14,12 @@
                 >发布公告</el-button
             >
             <!-- 添加公告对话框-->
-            <el-dialog v-model="dialogAddVisible" center>
+            <el-dialog
+                v-model="dialogAddVisible"
+                center
+                :close-on-click-modal="false"
+                :before-close="handleDialogClose"
+            >
                 <template #header>
                     <h2 style="color: red">发布公告</h2>
                 </template>
@@ -73,6 +78,15 @@ export default {
                     }
                 })
         },
+        handleDialogClose() {
+            noticeStore.$patch((state) => {
+                state.dialogEditVisible = false
+                state.dialogAddVisible = false
+                state.dialogShowVisible = false
+                state.editFlag = false
+                state.hackReset = false
+            })
+        },
         handleDeleteById(deleteID) {
             ElMessageBox.confirm('确定是否要删除？该操作将无法回退', '警告', {
                 confirmButtonText: '确定',

ui/src/pages/notice/NoticeView.vue

@@ -12,8 +12,8 @@
                 router
             >
                 <el-menu-item index="/notice/noticeView/all">所有公告</el-menu-item>
-                <el-menu-item index="/notice/noticeView/alRead">已读</el-menu-item>
                 <el-menu-item index="/notice/noticeView/toRead">未读</el-menu-item>
+                <el-menu-item index="/notice/noticeView/alRead">已读</el-menu-item>
             </el-menu>
             <router-view />
         </el-main>

ui/src/pages/notice/ToReadView.vue

@@ -11,9 +11,9 @@ export default {
     methods: {},
     mounted() {
         noticeStore.selectAllNoticeByUserId(0)
-    },
+        noticeStore.$patch((state) => {
-    unmounted() {
+            state.currentViewPage = 'ToRead'
-        console.log('toRead:unmounted')
+        })
     }
 }
 </script>

ui/src/router/notice.ts

@@ -2,7 +2,7 @@ const noticeRouter = {
     path: '/notice',
     name: 'noticeHome',
     meta: {
-        title: '公告管理',
+        title: '公告',
         icon: shallowRef(IconPinnacleNotice),
         requiresScrollbar: false,
         requiresPadding: true

ui/src/store/notice.ts

@@ -48,6 +48,7 @@ export const useNoticeStore = defineStore('notice', {
             dialogAddVisible: false,
             dialogEditVisible: false,
             editFlag: false,
+            currentViewPage: 'All',
             hackReset: true,
             EnableNoticeTypeList: [],
             noticeTypeList: [
@@ -69,6 +70,7 @@ export const useNoticeStore = defineStore('notice', {
                 sendTime: '',
                 title: '',
                 top: 0,
+                isRead: 0,
                 noticeType: {
                     id: '',
                     name: '',
@@ -86,14 +88,6 @@ export const useNoticeStore = defineStore('notice', {
     },
     getters: {},
     actions: {
-        // selectAllNotice() {
-        //     void request.get('/notice/page').then((response) => {
-        //         this.selectData = response.data.data
-        //         if (this.selectData.length !== 0) {
-        //             this.loading = false
-        //         }
-        //     })
-        // },
         selectAllNotice(currentPage: number, pageSize: number) {
             void request
                 .get('/notice/page', {
@@ -195,6 +189,21 @@ export const useNoticeStore = defineStore('notice', {
                         })
                     }
                 })
+        },
+        async modifyNoticeIsRead(noticeId: string, readStatus: number) {
+            await request
+                .get('/notice/modifyNoticeIsRead', {
+                    noticeId,
+                    readStatus
+                })
+                .then((response) => {
+                    if (response.data.code === 20033) {
+                        ElMessage({
+                            message: response.data.msg,
+                            type: 'error'
+                        })
+                    }
+                })
         }
     }
 })