From 5afd8ff4e31e0c953a953e747cea3e726415da58 Mon Sep 17 00:00:00 2001
From: cccccyb <995134776@qq.com>
Date: Wed, 17 May 2023 03:47:51 +0800
Subject: [PATCH] Redesign the page of NoticeView.vue

---
 .../controller/NoticeTypeController.java      |   9 +-
 .../service/impl/NoticeServiceImpl.java       |   5 +-
 .../resources/mapper/NoticeReceiveMapper.xml  |   2 +
 ui/src/components/notice/CommitForm.vue       |   4 +-
 .../components/notice/NoticeManageTable.vue   |  34 +-
 ui/src/components/notice/NoticeShowDialog.vue |  16 +-
 ui/src/components/notice/NoticeTypeTable.vue  |   7 +-
 ui/src/components/notice/NoticeViewTable.vue  | 380 ++++++++++++------
 ui/src/pages/notice/NoticeManage.vue          |   9 +-
 ui/src/pages/notice/NoticeView.vue            |   6 +-
 ui/src/store/notice.ts                        |  32 +-
 11 files changed, 341 insertions(+), 163 deletions(-)

diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeTypeController.java b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeTypeController.java
index 9074946..4073988 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeTypeController.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeTypeController.java
@@ -4,6 +4,8 @@ import com.cfive.pinnacle.entity.NoticeType;
 import com.cfive.pinnacle.entity.common.ResponseCode;
 import com.cfive.pinnacle.entity.common.ResponseResult;
 import com.cfive.pinnacle.service.INoticeTypeService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.util.StringUtils;
 import org.springframework.web.bind.annotation.*;
@@ -22,6 +24,8 @@ import java.util.List;
 @RequestMapping("/noticeType")
 @CrossOrigin
 public class NoticeTypeController {
+    private final Logger LOGGER = LoggerFactory.getLogger(getClass());
+
     @Autowired
     INoticeTypeService noticeTypeService;
 
@@ -41,11 +45,10 @@ public class NoticeTypeController {
         return ResponseResult.build(code, msg, selectTypeList);
     }
 
-    @PutMapping
+    @GetMapping("/update")
     public ResponseResult updateTypeEnableById(String typeId,Boolean enable){
-        System.out.println(typeId+'\t'+enable);
         Long tid=null;
-        Integer isEnable=null;
+        Integer isEnable = null;
         if (StringUtils.hasText(typeId)&&null!=enable){
             tid = Long.parseLong(typeId);
             isEnable = (enable == true ? 1 : 0);
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeServiceImpl.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeServiceImpl.java
index a236d3e..022aa1e 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeServiceImpl.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeServiceImpl.java
@@ -99,11 +99,14 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
     @Override
     public Boolean updateNotice(Notice notice) {
         noticeMapper.update(null, new UpdateWrapper<Notice>().eq("id", notice.getId()).set("old", 1)); //修改原始数据
+        LambdaQueryWrapper<NoticeReceive> lqw = new LambdaQueryWrapper<>();
+        lqw.eq(NoticeReceive::getNoticeId, notice.getId());
+        noticeReceiveMapper.delete(lqw);
         notice.setOriginId(notice.getId());
         notice.setId(null); //清除id，使新插入的数据id重新生成
         notice.setModifyTime(null);
         notice.setOld(0);
-        return noticeMapper.insert(notice) > 0;
+        return this.addNotice(notice);
     }
 
     @Override
diff --git a/Pinnacle/src/main/resources/mapper/NoticeReceiveMapper.xml b/Pinnacle/src/main/resources/mapper/NoticeReceiveMapper.xml
index ff5bc4c..618b37a 100644
--- a/Pinnacle/src/main/resources/mapper/NoticeReceiveMapper.xml
+++ b/Pinnacle/src/main/resources/mapper/NoticeReceiveMapper.xml
@@ -31,7 +31,9 @@
                 and notice_receive.already_read=#{readStatus}
             </if>
             and notice_receive.user_id=#{userId}
+            and notice_receive.deleted=0
         </where>
+        order by n.send_time desc
     </select>
     <resultMap id="selectAllMap" type="notice" autoMapping="true">
         <id property="id" column="nid"/>
diff --git a/ui/src/components/notice/CommitForm.vue b/ui/src/components/notice/CommitForm.vue
index aa709a5..47e302e 100644
--- a/ui/src/components/notice/CommitForm.vue
+++ b/ui/src/components/notice/CommitForm.vue
@@ -112,7 +112,7 @@ export default {
             rules: {
                 title: [
                     { required: true, message: '请输入公告标题', trigger: 'blur' },
-                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                 ],
                 typeId: [
                     { required: true, message: '请选择公告类型', trigger: 'change' }
@@ -137,7 +137,7 @@ export default {
         submitForm() {
             this.addData.top=this.addData.top?1:0;
             const receiveId=[]
-            if (this.addData.receivers!==[]){
+            if (this.addData.receivers.length!=null){
                 for (let i = 0; i < this.addData.receivers.length; i++) {
                     receiveId.push(this.addData.receivers[i][1])
                 }
diff --git a/ui/src/components/notice/NoticeManageTable.vue b/ui/src/components/notice/NoticeManageTable.vue
index dd95fb3..4a363b3 100644
--- a/ui/src/components/notice/NoticeManageTable.vue
+++ b/ui/src/components/notice/NoticeManageTable.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-button
-        size="large"
-        @click="clearFilter"
-        style="background-color: rgba(71, 138, 173, 0.85); color: white"
-        >清除筛选条件
-    </el-button>
+    <el-button size="large" @click="clearFilter" type="primary">清除筛选条件 </el-button>
     <el-table
         v-loading="loading"
         element-loading-text="加载中..."
@@ -13,22 +8,24 @@
         border
         highlight-current-row
         @selection-change="handleSelectionChange"
+        style="font-size: 18px"
         :header-cell-style="{
             background: 'darksalmon',
             'text-align': 'center',
             color: '#fff',
             'font-size': '20px'
         }"
-        ><el-table-column type="selection" width="55" />
-        <el-table-column type="index" label="序号" width="70" />
+        ><el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="70" align="center" />
         <el-table-column
             prop="title"
             label="公告标题"
-            width="180"
+            width="200"
             :formatter="formatter"
             show-overflow-tooltip
+            align="center"
         />
-        <el-table-column prop="noticeType.name" label="公告类别" width="150">
+        <el-table-column prop="noticeType.name" label="公告类别" width="160" align="center">
             <template #default="scope">
                 <el-tag
                     size="default"
@@ -39,27 +36,30 @@
                 </el-tag>
             </template>
         </el-table-column>
-        <el-table-column prop="priority" label="优先级" width="100" />
+        <el-table-column prop="priority" label="优先级" width="100" align="center" />
         <el-table-column
             prop="createTime"
             label="创建时间"
             sortable
-            width="180"
+            width="220"
             :formatter="formatDate"
+            align="center"
         />
         <el-table-column
             prop="sendTime"
             label="生效时间"
             sortable
-            width="180"
+            width="220"
             :formatter="formatDate"
+            align="center"
         />
         <el-table-column
             prop="endTime"
             label="失效时间"
             sortable
-            width="180"
+            width="220"
             :formatter="formatDate"
+            align="center"
         />
         <el-table-column
             prop="sender.username"
@@ -69,6 +69,7 @@
             :filters="filterSenderName"
             :filter-method="filterTag"
             filter-placement="bottom-end"
+            align="center"
         >
             <template #default="scope">
                 <el-tag
@@ -78,7 +79,7 @@
                 </el-tag>
             </template>
         </el-table-column>
-        <el-table-column label="操作" width="200">
+        <el-table-column label="操作" min-width="200px" align="center">
             <template #default="scope">
                 <el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"
                     >查看
@@ -235,6 +236,9 @@ export default {
 </script>
 
 <style scoped>
+.el-table {
+    margin-top: 10px;
+}
 .pagination {
     margin: 30px 400px;
 }
diff --git a/ui/src/components/notice/NoticeShowDialog.vue b/ui/src/components/notice/NoticeShowDialog.vue
index 479032d..2fc4b58 100644
--- a/ui/src/components/notice/NoticeShowDialog.vue
+++ b/ui/src/components/notice/NoticeShowDialog.vue
@@ -1,19 +1,21 @@
 <template>
     <el-descriptions direction="vertical" :column="3" border>
         <template #title>{{ this.noticeShowData.title }}</template>
-        <el-descriptions-item label="发布人"
+        <el-descriptions-item label="发布人" width="120"
             ><el-tag size="large" type="success">{{
                 this.noticeShowData.sender.username
             }}</el-tag></el-descriptions-item
         >
-        <el-descriptions-item label="生效时间">{{
+        <el-descriptions-item label="生效时间" width="180">{{
             formatDate(this.noticeShowData.sendTime)
         }}</el-descriptions-item>
-        <el-descriptions-item label="优先级" :span="12">{{
-            this.noticeShowData.priority
-        }}</el-descriptions-item>
-        <el-descriptions-item label="公告类型">
-            <el-tag size="large">{{ this.noticeShowData.noticeType.name }}</el-tag>
+        <el-descriptions-item label="公告类型"
+            ><el-tag size="large">{{
+                this.noticeShowData.noticeType.name
+            }}</el-tag></el-descriptions-item
+        >
+        <el-descriptions-item label="优先级"
+            >{{ this.noticeShowData.priority }}
         </el-descriptions-item>
         <el-descriptions-item label="失效时间">{{
             formatDate(this.noticeShowData.endTime)
diff --git a/ui/src/components/notice/NoticeTypeTable.vue b/ui/src/components/notice/NoticeTypeTable.vue
index 4441649..0505663 100644
--- a/ui/src/components/notice/NoticeTypeTable.vue
+++ b/ui/src/components/notice/NoticeTypeTable.vue
@@ -22,7 +22,7 @@
             <template #default="scope">
                 <el-switch
                     v-model="scope.row.enable"
-                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #afb2b8"
                     active-text="启用"
                     inactive-text="禁用"
                     @change="switchChang(scope.row.id, scope.row.enable)"
@@ -100,9 +100,10 @@ export default {
             this.multipleSelection = val
         },
         switchChang(id, value) {
-            if (!noticeStore.updateNoticeTypeEnable(id, value)) {
+            noticeStore.updateNoticeTypeEnable(id, value)
+            setTimeout(() => {
                 noticeStore.selectNoticeType()
-            }
+            }, 800)
         },
         handleEdit(index, row) {
             noticeStore.$patch((state) => {
diff --git a/ui/src/components/notice/NoticeViewTable.vue b/ui/src/components/notice/NoticeViewTable.vue
index 6365b25..1308cc3 100644
--- a/ui/src/components/notice/NoticeViewTable.vue
+++ b/ui/src/components/notice/NoticeViewTable.vue
@@ -1,103 +1,189 @@
 <template>
-    <el-table
-        v-loading="this.loading"
-        element-loading-text="加载中..."
-        ref="tableRef"
-        :data="this.selectData"
-        style="width: 100%"
-        border
-        highlight-current-row
-        :header-cell-style="{
-            background: 'darksalmon',
-            'text-align': 'center',
-            color: '#fff',
-            'font-size': '20px'
-        }"
-    >
-        <el-table-column
-            prop="title"
-            label="公告标题"
-            width="180"
-            :formatter="formatter"
-            show-overflow-tooltip
-        />
-        <el-table-column prop="noticeType.name" label="公告类别" width="150">
-            <template #default="scope">
-                <el-tag
-                    size="default"
-                    :type="scope.row.noticeType.name === '通知公告' ? 'warning' : 'success'"
-                    disable-transitions
-                >
-                    {{ scope.row.noticeType.name }}
-                </el-tag>
+    <div class="myTimeline">
+        <el-timeline>
+            <el-timeline-item
+                v-for="notice in selectData"
+                :key="notice.id"
+                :timestamp="formatDate(notice.sendTime)"
+                placement="top"
+            >
+                <template #dot v-if="notice.isRead === 0">
+                    <el-badge is-dot class="item" />
+                </template>
+                <el-card @click="showNoticeDetail(notice)">
+                    <h4></h4>
+                    <p>Tom committed 2018/4/12 20:46</p>
+                </el-card>
+            </el-timeline-item>
+        </el-timeline>
+        <!--        查看会话框-->
+        <el-dialog v-model="dialogShowVisible" center>
+            <template #header>
+                <h2 style="color: red">公告详情</h2>
             </template>
-        </el-table-column>
-        <el-table-column prop="priority" label="优先级" width="100" />
-        <el-table-column prop="isRead" label="公告状态" width="180">
-            <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="180"
-            :formatter="formatDate"
-        />
-        <el-table-column
-            prop="endTime"
-            label="失效时间"
-            sortable
-            width="180"
-            :formatter="formatDate"
-        />
-        <el-table-column
-            prop="sender.username"
-            label="发布人"
-            width="100"
-            column-key="senderName"
-            :filters="filterSenderName"
-            :filter-method="filterTag"
-            filter-placement="bottom-end"
-        >
-            <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="操作" width="200">
-            <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>
-    <!--        查看会话框-->
-    <el-dialog v-model="dialogShowVisible" center>
-        <template #header>
-            <h2 style="color: red">查看公告</h2>
-        </template>
-        <notice-show-dialog />
-    </el-dialog>
+            <notice-show-dialog />
+        </el-dialog>
+        <!--        <el-collapse-->
+        <!--            @change="handleChange"-->
+        <!--            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 {  storeToRefs } from 'pinia'
-// const { selectData, getLoading } = storeToRefs(noticeViewStore)
 import { mapState } from 'pinia'
 import { useNoticeStore } from '@/store/notice'
 const noticeStore = useNoticeStore()
@@ -110,24 +196,22 @@ export default {
     },
     props: [],
     methods: {
-        // ...mapActions(useNoticeStore, ['selectAllNoticeByUserId']),
-        clearFilter() {
-            this.$refs.tableRef.clearFilter(['senderName'])
-            this.$emit('clearFilter')
+        showNoticeDetail(data) {
+            noticeStore.$patch((state) => {
+                state.dialogShowVisible = true
+                state.noticeShowData = data
+            })
         },
-        formatter(row, column) {
-            return row.title
+        formatDate(date) {
+            if (date == null) return null
+            return new Date(date).toLocaleString()
         },
         filterTag(value, row) {
             return row.sender.username === value
         },
-        formatDate(row, column) {
-            // 获取单元格数据
-            const data = row[column.property]
-            if (data == null) return '暂无数据'
-            return new Date(data).toLocaleString()
+        modifyStatus(row) {
+            console.log(row)
         },
-        modifyStatus(row) {},
         handleShow(index, row) {
             noticeStore.$patch((state) => {
                 state.dialogShowVisible = true
@@ -136,23 +220,7 @@ export default {
         }
     },
     mounted() {},
-    updated() {
-        this.$refs.tableRef.clearFilter(['senderName'])
-        this.filterSenderName = []
-        const nameArray = []
-        for (let i = 0; i < this.selectData.length; i++) {
-            nameArray.push(this.selectData[i].sender.username)
-        }
-        const newArr = nameArray.filter((item, i, arr) => {
-            return arr.indexOf(item) === i
-        })
-        for (let j = 0; j < newArr.length; j++) {
-            const senderName = { text: '', value: '' }
-            senderName.text = newArr[j]
-            senderName.value = newArr[j]
-            this.filterSenderName.push(senderName)
-        }
-    },
+    updated() {},
     computed: {
         ...mapState(useNoticeStore, [
             'selectData',
@@ -165,7 +233,67 @@ export default {
 </script>
 
 <style scoped>
-.el-table {
-    margin-top: 10px;
+.myTimeline {
+    margin-top: 20px;
+}
+.el-timeline {
+    --el-timeline-node-size-normal: 16px;
+    --el-timeline-node-size-large: 16px;
+}
+/deep/ .el-badge__content.is-dot {
+    height: 16px;
+    width: 16px;
+}
+/deep/ .el-timeline-item__timestamp.is-top {
+    font-size: 16px;
+    font-weight: 600;
+}
+.el-collapse {
+    --el-collapse-header-height: 68px;
+}
+/deep/ .el-collapse-item__header {
+    padding-left: 25px;
+    font-weight: 400;
+    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;
+}
+.contentTitle {
+    font-size: 20px;
+    font-weight: bold;
+}
+.content {
+    margin-top: 20px;
+    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;
+    display: inline-block;
 }
 </style>
diff --git a/ui/src/pages/notice/NoticeManage.vue b/ui/src/pages/notice/NoticeManage.vue
index 3189bdd..2993f18 100644
--- a/ui/src/pages/notice/NoticeManage.vue
+++ b/ui/src/pages/notice/NoticeManage.vue
@@ -6,8 +6,11 @@
         <el-main>
             <el-button
                 size="large"
-                style="background-color: rgba(71, 138, 173, 0.85); color: white"
+                type="primary"
                 @click="openAddNoticeDialog"
+                style="margin-right: 15px"
+                ><el-icon :size="SIZE_ICON_MD()" style="color: white; margin-right: 3px">
+                    <icon-pinnacle-add /> </el-icon
                 >发布公告</el-button
             >
             <!-- 添加公告对话框-->
@@ -32,6 +35,7 @@ import 'element-plus/theme-chalk/el-message-box.css'
 import request from '@/services'
 import { useNoticeStore } from '@/store/notice'
 import { mapState } from 'pinia'
+import { SIZE_ICON_MD } from '@/constants/Common.constants'
 const noticeStore = useNoticeStore()
 
 export default {
@@ -40,6 +44,9 @@ export default {
         return {}
     },
     methods: {
+        SIZE_ICON_MD() {
+            return SIZE_ICON_MD
+        },
         selectByCond(currentPage, pageSize, search) {
             request
                 .get('/notice/page', {
diff --git a/ui/src/pages/notice/NoticeView.vue b/ui/src/pages/notice/NoticeView.vue
index ce74a23..5540165 100644
--- a/ui/src/pages/notice/NoticeView.vue
+++ b/ui/src/pages/notice/NoticeView.vue
@@ -21,6 +21,8 @@
 </template>
 
 <script lang="ts">
+import { useNoticeStore } from '@/store/notice'
+const noticeStore = useNoticeStore()
 export default {
     name: 'NoticeView',
     data() {
@@ -31,7 +33,9 @@ export default {
             console.log(key, keyPath)
         }
     },
-    mounted() {}
+    mounted() {
+        noticeStore.selectEnableNoticeType()
+    }
 }
 </script>
 
diff --git a/ui/src/store/notice.ts b/ui/src/store/notice.ts
index 11be9e5..5a3910f 100644
--- a/ui/src/store/notice.ts
+++ b/ui/src/store/notice.ts
@@ -16,7 +16,33 @@ export const useNoticeStore = defineStore('notice', {
     state: () => {
         return {
             total: 0,
-            selectData: [],
+            selectData: [
+                {
+                    content: '',
+                    createTime: '',
+                    endTime: '',
+                    id: '',
+                    modifyTime: '',
+                    priority: 0,
+                    receivers: [],
+                    sendTime: '',
+                    title: '',
+                    top: 0,
+                    isRead: 0,
+                    noticeType: {
+                        id: '',
+                        name: '',
+                        enable: 0
+                    },
+                    sender: {
+                        id: '',
+                        username: '',
+                        enable: 0
+                    },
+                    senderId: '',
+                    typeId: ''
+                }
+            ],
             loading: true,
             dialogShowVisible: false,
             dialogAddVisible: false,
@@ -152,7 +178,7 @@ export const useNoticeStore = defineStore('notice', {
         },
         async updateNoticeTypeEnable(typeId: string, enable: boolean) {
             await request
-                .put('/noticeType', {
+                .get('/noticeType/update', {
                     typeId,
                     enable
                 })
@@ -162,13 +188,11 @@ export const useNoticeStore = defineStore('notice', {
                             message: '修改成功.',
                             type: 'success'
                         })
-                        return true
                     } else if (response.data.code === 20033) {
                         ElMessage({
                             message: response.data.msg,
                             type: 'error'
                         })
-                        return false
                     }
                 })
         }