From 0b72c3bf0b8cc7f3cf35f004b0b92f01027f814f Mon Sep 17 00:00:00 2001
From: cccccyb <995134776@qq.com>
Date: Tue, 23 May 2023 03:26:40 +0800
Subject: [PATCH] add the function of addNoticeType

---
 .../controller/DepartmentController.java      |   1 +
 .../pinnacle/controller/NoticeController.java |   8 +-
 .../controller/NoticeTypeController.java      |  13 +-
 .../pinnacle/service/INoticeTypeService.java  |   2 +
 .../service/impl/NoticeTypeServiceImpl.java   |   5 +
 .../{CommitForm.vue => NoticeCommitForm.vue}  |  19 +-
 ui/src/components/notice/NoticeHead.vue       |   8 +-
 .../components/notice/NoticeManageTable.vue   |  46 +++--
 ui/src/components/notice/NoticeShowDialog.vue |  50 +++---
 .../notice/NoticeTypeCommitForm.vue           |  39 +++++
 ui/src/components/notice/NoticeTypeTable.vue  |  19 +-
 ui/src/components/notice/NoticeViewCard.vue   |  23 ++-
 ui/src/constants/Common.constants.ts          |   2 +
 ui/src/pages/notice/AlReadView.vue            |   2 +-
 ui/src/pages/notice/AllReceiveNoticeView.vue  |   2 +-
 ui/src/pages/notice/NoticeManage.vue          |   7 +-
 ui/src/pages/notice/NoticeTypeManage.vue      |  57 +++++-
 ui/src/pages/notice/NoticeView.vue            |   6 +-
 ui/src/pages/notice/ToReadView.vue            |   2 +-
 ui/src/store/notice.ts                        | 165 +++++++++++++-----
 20 files changed, 339 insertions(+), 137 deletions(-)
 rename ui/src/components/notice/{CommitForm.vue => NoticeCommitForm.vue} (92%)
 create mode 100644 ui/src/components/notice/NoticeTypeCommitForm.vue

diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/DepartmentController.java b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/DepartmentController.java
index 483a67b..ad50b9b 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/DepartmentController.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/DepartmentController.java
@@ -27,6 +27,7 @@ public class DepartmentController {
     @Autowired
     IDepartmentService departmentService;
 
+    //获取所有部门及其各部门所属成员
     @GetMapping
     public ResponseResult getDepartAndUser(){
         List<Department> getDepartAndUser = departmentService.getDepartAndUser();
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeController.java b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeController.java
index 1e551ab..6bd74d7 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeController.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeController.java
@@ -58,7 +58,7 @@ public class NoticeController {
     }
 
     //根据登录用户id查询所接收的公告
-    @GetMapping("/ByUserId")
+    @GetMapping("/self")
     public ResponseResult selectByUserId(Integer readStatus) {
         List<Notice> noticesByUserId = noticeReceiveService.selectByUserId(readStatus);
         Integer code = noticesByUserId != null ? ResponseCode.DATABASE_SELECT_OK : ResponseCode.DATABASE_SELECT_ERROR;
@@ -67,7 +67,7 @@ public class NoticeController {
     }
 
     //修改登录用户所接收公告的阅读状态
-    @PutMapping("/modifyNoticeIsRead")
+    @PutMapping("/modify_notice_read")
     public ResponseResult modifyNoticeIsRead(@RequestBody Notice notice) {
         boolean updateById = false;
         if (null != notice) {
@@ -86,8 +86,8 @@ public class NoticeController {
         return ResponseResult.build(updateById ? ResponseCode.DATABASE_UPDATE_OK : ResponseCode.DATABASE_UPDATE_ERROR, msg, updateById);
     }
 
-    //更新公告置顶
-    @PutMapping("/updateNoticeTop")
+    //修改公告置顶状态
+    @PutMapping("/update_notice_top")
     public ResponseResult updateNoticeTop(@RequestBody Notice notice) {
         String operationMessage = notice.getTop() == 1 ? "取消置顶" : "置顶";
         boolean updateResult = noticeService.updateNoticeTop(notice);
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 4073988..d63703f 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeTypeController.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/NoticeTypeController.java
@@ -21,7 +21,7 @@ import java.util.List;
  * @since 2023-04-30
  */
 @RestController
-@RequestMapping("/noticeType")
+@RequestMapping("/notice_type")
 @CrossOrigin
 public class NoticeTypeController {
     private final Logger LOGGER = LoggerFactory.getLogger(getClass());
@@ -29,6 +29,7 @@ public class NoticeTypeController {
     @Autowired
     INoticeTypeService noticeTypeService;
 
+    //查询已启用的公告类型
     @GetMapping("/enable")
     public ResponseResult selectEnableTypeList(){
         List<NoticeType> selectTypeName = noticeTypeService.selectEnableTypeList();
@@ -37,6 +38,7 @@ public class NoticeTypeController {
         return ResponseResult.build(code, msg, selectTypeName);
     }
 
+    //查询所有公告类型
     @GetMapping
     public ResponseResult selectTypeList(){
         List<NoticeType> selectTypeList = noticeTypeService.selectTypeList();
@@ -45,6 +47,7 @@ public class NoticeTypeController {
         return ResponseResult.build(code, msg, selectTypeList);
     }
 
+    //修改公告类型启用或禁用
     @GetMapping("/update")
     public ResponseResult updateTypeEnableById(String typeId,Boolean enable){
         Long tid=null;
@@ -57,4 +60,12 @@ public class NoticeTypeController {
         String msg = updateEnableById ? "" : "修改失败，请重试！";
         return ResponseResult.build(updateEnableById ? ResponseCode.DATABASE_UPDATE_OK : ResponseCode.DATABASE_UPDATE_ERROR, msg, updateEnableById);
     }
+
+    //添加公告类型
+    @PostMapping
+    public ResponseResult addNoticeType(NoticeType noticeType){
+        Boolean insertNotice = noticeTypeService.addNoticeType(noticeType);
+        String msg = insertNotice ? "" : "数据添加失败，请重试！";
+        return ResponseResult.build(insertNotice ? ResponseCode.DATABASE_SAVE_OK : ResponseCode.DATABASE_SAVE_ERROR, msg, insertNotice);
+    }
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/INoticeTypeService.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/INoticeTypeService.java
index 86766bb..69f265a 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/INoticeTypeService.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/INoticeTypeService.java
@@ -19,4 +19,6 @@ public interface INoticeTypeService extends IService<NoticeType> {
 
     Boolean updateTypeEnableById(Long typeId, Integer enable);
 
+    Boolean addNoticeType(NoticeType noticeType);
+
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeTypeServiceImpl.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeTypeServiceImpl.java
index 172c29d..e4a6f51 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeTypeServiceImpl.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeTypeServiceImpl.java
@@ -47,4 +47,9 @@ public class NoticeTypeServiceImpl extends ServiceImpl<NoticeTypeMapper, NoticeT
         luw.eq(null!=typeId,NoticeType::getId, typeId).set(null!=enable,NoticeType::getEnable,enable);
         return noticeTypeMapper.update(null, luw)>0;
     }
+
+    @Override
+    public Boolean addNoticeType(NoticeType noticeType) {
+        return noticeTypeMapper.insert(noticeType)>0;
+    }
 }
diff --git a/ui/src/components/notice/CommitForm.vue b/ui/src/components/notice/NoticeCommitForm.vue
similarity index 92%
rename from ui/src/components/notice/CommitForm.vue
rename to ui/src/components/notice/NoticeCommitForm.vue
index 85961d8..5492363 100644
--- a/ui/src/components/notice/CommitForm.vue
+++ b/ui/src/components/notice/NoticeCommitForm.vue
@@ -6,7 +6,7 @@
         <el-form-item label="公告类型" prop="typeId">
             <el-select v-model="addData.typeId" filterable placeholder="请选择公告类型">
                 <el-option
-                    v-for="item in EnableNoticeTypeList"
+                    v-for="item in enableNoticeTypeList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
@@ -44,7 +44,14 @@
             </el-form-item>
         </el-row>
         <el-form-item label="是否置顶" prop="top">
-            <el-switch v-model="addData.top" inline-prompt active-text="是" inactive-text="否" />
+            <el-switch
+                v-model="addData.top"
+                inline-prompt
+                active-text="是"
+                inactive-text="否"
+                :active-value="1"
+                :inactive-value="0"
+            />
         </el-form-item>
         <el-form-item label="公告优先级" prop="priority">
             <el-slider v-model="addData.priority" show-input show-stops :max="15" size="large" />
@@ -89,12 +96,13 @@
 </template>
 
 <script lang="js">
-import { useNoticeStore } from '@/store/notice'
+import { useNoticeStore, useNoticeTypeStore } from '@/store/notice'
 import { mapState } from 'pinia'
 const noticeStore = useNoticeStore()
 export default {
     computed:{
-        ...mapState(useNoticeStore,['EnableNoticeTypeList','departmentList','noticeShowData'])
+        ...mapState(useNoticeStore,['departmentList','noticeShowData']),
+        ...mapState(useNoticeTypeStore,['enableNoticeTypeList'])
     },
     data() {
         return {
@@ -105,7 +113,7 @@ export default {
                 typeId: '',
                 sendTime: '',
                 endTime: '',
-                top: false,
+                top: 0,
                 priority: 1,
                 content: '',
                 receivers:[]
@@ -136,7 +144,6 @@ export default {
     },
     methods: {
         submitForm() {
-            this.addData.top=this.addData.top?1:0;
             const receiveId=[]
             if (this.addData.receivers.length!=null){
                 for (let i = 0; i < this.addData.receivers.length; i++) {
diff --git a/ui/src/components/notice/NoticeHead.vue b/ui/src/components/notice/NoticeHead.vue
index 4718bfd..1cac631 100644
--- a/ui/src/components/notice/NoticeHead.vue
+++ b/ui/src/components/notice/NoticeHead.vue
@@ -17,7 +17,7 @@
                 <el-form-item label="公告类型：" prop="type">
                     <el-select v-model="search_info.type" placeholder="请选择公告类型">
                         <el-option
-                            v-for="item in EnableNoticeTypeList"
+                            v-for="item in enableNoticeTypeList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.name"
@@ -59,10 +59,8 @@
 <script lang="ts">
 import { COLOR_PRODUCTION, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
 import _ from 'lodash'
-import { useNoticeStore } from '@/store/notice'
+import { useNoticeTypeStore } from '@/store/notice'
 import { mapState } from 'pinia'
-// const noticeStore = useNoticeStore()
-
 export default {
     name: 'NoticeHead',
     data() {
@@ -111,7 +109,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(useNoticeStore, ['EnableNoticeTypeList'])
+        ...mapState(useNoticeTypeStore, ['enableNoticeTypeList'])
     }
 }
 </script>
diff --git a/ui/src/components/notice/NoticeManageTable.vue b/ui/src/components/notice/NoticeManageTable.vue
index 33c8f35..d7bf98c 100644
--- a/ui/src/components/notice/NoticeManageTable.vue
+++ b/ui/src/components/notice/NoticeManageTable.vue
@@ -17,13 +17,14 @@
         }"
     >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column
-            type="index"
-            label="序号"
-            width="70"
-            align="center"
-            :index="computeIndex"
-        />
+        <el-table-column type="index" label="序号" width="75" align="center">
+            <template #default="scope">
+                <el-icon :size="SIZE_ICON_SM()" :color="COLOR_TOP()" v-if="scope.row.top === 1">
+                    <icon-pinnacle-top />
+                </el-icon>
+                {{ (this.currentPage - 1) * this.pageSize + scope.$index + 1 }}
+            </template>
+        </el-table-column>
         <el-table-column
             prop="title"
             label="公告标题"
@@ -36,7 +37,13 @@
             <template #default="scope">
                 <el-tag
                     size="default"
-                    :type="scope.row.noticeType.name === '通知公告' ? 'warning' : 'success'"
+                    :type="
+                        scope.row.noticeType.name === '通知公告'
+                            ? 'warning'
+                            : scope.row.noticeType.name === '紧急公告'
+                            ? 'danger'
+                            : 'success'
+                    "
                     disable-transitions
                 >
                     {{ scope.row.noticeType.name }}
@@ -88,10 +95,10 @@
         </el-table-column>
         <el-table-column label="操作" min-width="200px" align="center">
             <template #default="scope">
-                <el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"
+                <el-button size="small" color="#626aef" @click="handleShow(scope.row)"
                     >查看
                 </el-button>
-                <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
+                <el-button size="small" type="primary" @click="handleEdit(scope.row)"
                     >编辑
                 </el-button>
                 <el-button size="small" type="danger" @click="handleDeleteById(scope.row.id)"
@@ -126,7 +133,7 @@
         <template #header>
             <h2 style="color: red">编辑公告</h2>
         </template>
-        <commitForm />
+        <notice-commit-form />
     </el-dialog>
     <!--        查看会话框-->
     <el-dialog
@@ -146,6 +153,7 @@
 import _ from 'lodash'
 import { mapState } from 'pinia'
 import { useNoticeStore } from '@/store/notice'
+import { COLOR_TOP, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
 
 const noticeStore = useNoticeStore()
 
@@ -172,8 +180,14 @@ export default {
     },
     props: [],
     methods: {
-        computeIndex(index) {
-            return (this.currentPage - 1) * this.pageSize + index + 1
+        SIZE_ICON_SM() {
+            return SIZE_ICON_SM
+        },
+        COLOR_TOP() {
+            return COLOR_TOP
+        },
+        SIZE_ICON_MD() {
+            return SIZE_ICON_MD
         },
         handleSelectionChange(val) {
             // val的值为所勾选行的数组对象
@@ -195,7 +209,8 @@ export default {
             if (data == null) return '暂无数据'
             return new Date(data).toLocaleString()
         },
-        handleEdit(index, row) {
+        handleEdit(row) {
+            console.log(row)
             noticeStore.$patch((state) => {
                 state.hackReset = true
                 state.noticeShowData = row
@@ -212,7 +227,8 @@ export default {
                 state.hackReset = false
             })
         },
-        handleShow(index, row) {
+        handleShow(row) {
+            console.log(row)
             noticeStore.$patch((state) => {
                 state.dialogShowVisible = true
                 state.noticeShowData = row
diff --git a/ui/src/components/notice/NoticeShowDialog.vue b/ui/src/components/notice/NoticeShowDialog.vue
index 3d5fc75..edd38bf 100644
--- a/ui/src/components/notice/NoticeShowDialog.vue
+++ b/ui/src/components/notice/NoticeShowDialog.vue
@@ -3,35 +3,29 @@
         <template #title
             ><h2>{{ noticeShowData.title }}</h2></template
         >
-        <el-descriptions-item label="发布者" width="120"
-            ><el-tag size="large" type="success">{{
-                noticeShowData.sender.username
-            }}</el-tag></el-descriptions-item
-        >
-        <el-descriptions-item label="生效时间" width="180">{{
-            formatDate(noticeShowData.sendTime)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="公告类型"
-            ><el-tag size="large">{{
-                noticeShowData.noticeType.name
-            }}</el-tag></el-descriptions-item
-        >
-        <el-descriptions-item label="优先级">{{ noticeShowData.priority }} </el-descriptions-item>
-        <el-descriptions-item label="失效时间">{{
-            formatDate(noticeShowData.endTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="发布者" width="120">
+            <el-tag size="large" type="success">{{ noticeShowData.sender.username }} </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="生效时间" width="180"
+            >{{ formatDate(noticeShowData.sendTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="公告类型">
+            <el-tag size="large">{{ noticeShowData.noticeType.name }} </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="优先级">{{ noticeShowData.priority }}</el-descriptions-item>
+        <el-descriptions-item label="失效时间"
+            >{{ formatDate(noticeShowData.endTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="公告内容">{{ noticeShowData.content }}</el-descriptions-item>
     </el-descriptions>
-    <el-button
-        type="primary"
-        @click="handleShowDialog(noticeShowData.id, noticeShowData.isRead)"
-        style="margin: 50px 400px"
-        >确 定</el-button
-    >
+    <el-button type="primary" @click="handleShowDialog(noticeShowData)" style="margin: 50px 400px"
+        >确 定
+    </el-button>
 </template>
 <script lang="ts">
 import { mapState } from 'pinia'
 import { useNoticeStore } from '@/store/notice'
+
 const noticeStore = useNoticeStore()
 
 export default {
@@ -43,12 +37,12 @@ export default {
         return {}
     },
     methods: {
-        handleShowDialog(nid, isRead) {
+        async handleShowDialog(notice) {
             noticeStore.$patch((state) => {
                 state.dialogShowVisible = false
             })
-            if (isRead === 0) {
-                noticeStore.modifyNoticeIsRead(nid, 1)
+            if (notice.isRead === 0) {
+                await noticeStore.modifyNoticeIsRead(notice)
                 let flag = 0
                 if (this.currentViewPage === 'All') {
                     flag = -1
@@ -57,9 +51,7 @@ export default {
                 } else if (this.currentViewPage === 'AlRead') {
                     flag = 1
                 }
-                setTimeout(() => {
-                    noticeStore.selectAllNoticeByUserId(flag)
-                }, 100)
+                await noticeStore.selectAllNoticeSelf(flag)
             }
         },
         formatDate(date) {
diff --git a/ui/src/components/notice/NoticeTypeCommitForm.vue b/ui/src/components/notice/NoticeTypeCommitForm.vue
new file mode 100644
index 0000000..eb226e1
--- /dev/null
+++ b/ui/src/components/notice/NoticeTypeCommitForm.vue
@@ -0,0 +1,39 @@
+<template>
+    <el-form :model="addTypeData" :rules="typeRule" ref="addTypeData" label-width="150px">
+        <el-form-item label="类型名称" prop="name">
+            <el-input v-model="addTypeData.name" autocomplete="off" clearable />
+        </el-form-item>
+        <el-form-item label="是否启用" prop="enable">
+            <el-switch
+                v-model="addTypeData.enable"
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #afb2b8"
+                active-text="启用"
+                :active-value="1"
+                inactive-text="禁用"
+                :inactive-value="0"
+            />
+        </el-form-item>
+    </el-form>
+</template>
+<script lang="ts">
+export default {
+    name: 'NoticeTypeCommitForm',
+    data() {
+        return {
+            addTypeData: {
+                name: '',
+                enable: 1
+            },
+            typeRule: {
+                name: [
+                    { required: true, message: '请输入类型名称', trigger: 'blur' },
+                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/components/notice/NoticeTypeTable.vue b/ui/src/components/notice/NoticeTypeTable.vue
index 901c0eb..20b2e5d 100644
--- a/ui/src/components/notice/NoticeTypeTable.vue
+++ b/ui/src/components/notice/NoticeTypeTable.vue
@@ -1,10 +1,10 @@
 <template>
     <el-table
-        v-loading="loading"
+        v-loading="dataLoading"
         element-loading-text="加载中..."
         ref="tableRef"
         :data="noticeTypeList.filter((data) => !search || data.name.includes(search))"
-        style="font-size: 20px"
+        style="font-size: 18px"
         stripe
         border
         highlight-current-row
@@ -17,7 +17,7 @@
         }"
         ><el-table-column type="selection" width="65" align="center" />
         <el-table-column type="index" label="序号" width="80" align="center" />
-        <el-table-column label="类型名" prop="name" width="500" align="center" />
+        <el-table-column label="类型名称" prop="name" width="500" align="center" />
         <el-table-column label="是否启用" prop="enable" width="350" align="center">
             <template #default="scope">
                 <el-switch
@@ -77,12 +77,14 @@
 
 <script lang="ts">
 import { mapState } from 'pinia'
-import { useNoticeStore } from '@/store/notice'
+import { useNoticeStore, useNoticeTypeStore } from '@/store/notice'
 const noticeStore = useNoticeStore()
+const noticeTypeStore = useNoticeTypeStore()
 
 export default {
     computed: {
-        ...mapState(useNoticeStore, ['total', 'noticeTypeList', 'loading', 'dialogEditVisible'])
+        ...mapState(useNoticeStore, ['total', 'dialogEditVisible']),
+        ...mapState(useNoticeTypeStore, ['noticeTypeList', 'dataLoading'])
     },
     data() {
         return {
@@ -100,9 +102,9 @@ export default {
             this.multipleSelection = val
         },
         switchChang(id, value) {
-            noticeStore.updateNoticeTypeEnable(id, value)
+            noticeTypeStore.updateNoticeTypeEnable(id, value)
             setTimeout(() => {
-                noticeStore.selectNoticeType()
+                noticeTypeStore.selectNoticeType()
             }, 800)
         },
         handleEdit(index, row) {},
@@ -126,7 +128,8 @@ export default {
         }
     },
     mounted() {
-        noticeStore.selectNoticeType()
+        noticeTypeStore.dataLoading = true
+        noticeTypeStore.selectNoticeType()
     },
     updated() {}
 }
diff --git a/ui/src/components/notice/NoticeViewCard.vue b/ui/src/components/notice/NoticeViewCard.vue
index c96f19f..16caf0f 100644
--- a/ui/src/components/notice/NoticeViewCard.vue
+++ b/ui/src/components/notice/NoticeViewCard.vue
@@ -17,7 +17,14 @@
                 >
                     <template #header>
                         <div class="top">
-                            <el-icon :size="SIZE_ICON_MD()">
+                            <el-icon
+                                :size="SIZE_ICON_MD()"
+                                :color="COLOR_TOP()"
+                                v-if="notice.top === 1"
+                            >
+                                <icon-pinnacle-top />
+                            </el-icon>
+                            <el-icon :size="SIZE_ICON_MD()" v-if="notice.top === 0">
                                 <icon-pinnacle-noticeItem />
                             </el-icon>
                             <el-tag
@@ -109,7 +116,7 @@
 <script lang="ts">
 import { mapState } from 'pinia'
 import { useNoticeStore } from '@/store/notice'
-import { SIZE_ICON_LG, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
+import { COLOR_TOP, SIZE_ICON_LG, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
 
 const noticeStore = useNoticeStore()
 
@@ -128,6 +135,9 @@ export default {
     },
     props: [],
     methods: {
+        COLOR_TOP() {
+            return COLOR_TOP
+        },
         SIZE_ICON_LG() {
             return SIZE_ICON_LG
         },
@@ -165,7 +175,7 @@ export default {
             } else if (this.currentViewPage === 'AlRead') {
                 flag = 1
             }
-            await noticeStore.selectAllNoticeByUserId(flag)
+            await noticeStore.selectAllNoticeSelf(flag)
         },
         handleDialogClose() {
             noticeStore.$patch((state) => {
@@ -198,7 +208,7 @@ export default {
             } else if (this.currentViewPage === 'AlRead') {
                 flag = 1
             }
-            await noticeStore.selectAllNoticeByUserId(flag)
+            await noticeStore.selectAllNoticeSelf(flag)
         }
     },
     mounted() {},
@@ -251,7 +261,7 @@ export default {
 }
 
 .noticeCard {
-    --el-card-padding: 10px;
+    --el-card-padding: 15px;
     height: 120px;
 }
 
@@ -269,8 +279,7 @@ export default {
 }
 
 .content {
-    margin-top: 10px;
-    margin-left: 20px;
+    margin-left: 15px;
     height: fit-content;
 }
 
diff --git a/ui/src/constants/Common.constants.ts b/ui/src/constants/Common.constants.ts
index 19666d1..49c4f95 100644
--- a/ui/src/constants/Common.constants.ts
+++ b/ui/src/constants/Common.constants.ts
@@ -2,6 +2,7 @@ const PRODUCTION_NAME = 'Pinnacle OA'
 const TOKEN_NAME = 'JWT_TOKEN'
 const COLOR_PRODUCTION = '#00D4FF'
 const COLOR_BACKGROUND = '#D8D8D8'
+const COLOR_TOP = 'rgba(234,46,13,0.85)'
 const COLOR_FONT_MAIN = '#4D4D4D'
 const COLOR_FONT_SECONDARY = '#9E9E9E'
 const SIZE_ICON_XS = '16px'
@@ -43,6 +44,7 @@ export {
     COLOR_BACKGROUND,
     COLOR_FONT_MAIN,
     COLOR_FONT_SECONDARY,
+    COLOR_TOP,
     SIZE_ICON_XS,
     SIZE_ICON_SM,
     SIZE_ICON_MD,
diff --git a/ui/src/pages/notice/AlReadView.vue b/ui/src/pages/notice/AlReadView.vue
index d7d4dc4..543fc1a 100644
--- a/ui/src/pages/notice/AlReadView.vue
+++ b/ui/src/pages/notice/AlReadView.vue
@@ -10,7 +10,7 @@ export default {
     },
     methods: {},
     mounted() {
-        noticeStore.selectAllNoticeByUserId(1)
+        noticeStore.selectAllNoticeSelf(1)
         noticeStore.$patch((state) => {
             state.currentViewPage = 'AlRead'
         })
diff --git a/ui/src/pages/notice/AllReceiveNoticeView.vue b/ui/src/pages/notice/AllReceiveNoticeView.vue
index ad561a7..f83b9fc 100644
--- a/ui/src/pages/notice/AllReceiveNoticeView.vue
+++ b/ui/src/pages/notice/AllReceiveNoticeView.vue
@@ -10,7 +10,7 @@ export default {
     },
     methods: {},
     mounted() {
-        noticeStore.selectAllNoticeByUserId(-1)
+        noticeStore.selectAllNoticeSelf(-1)
         noticeStore.$patch((state) => {
             state.currentViewPage = 'All'
         })
diff --git a/ui/src/pages/notice/NoticeManage.vue b/ui/src/pages/notice/NoticeManage.vue
index a4eecff..3bbb5ea 100644
--- a/ui/src/pages/notice/NoticeManage.vue
+++ b/ui/src/pages/notice/NoticeManage.vue
@@ -23,7 +23,7 @@
                 <template #header>
                     <h2 style="color: red">发布公告</h2>
                 </template>
-                <commitForm />
+                <notice-commit-form />
             </el-dialog>
             <notice-manage-table
                 @handleDeleteById="handleDeleteById"
@@ -38,10 +38,11 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/el-message.css'
 import 'element-plus/theme-chalk/el-message-box.css'
 import request from '@/services'
-import { useNoticeStore } from '@/store/notice'
+import { useNoticeStore, useNoticeTypeStore } from '@/store/notice'
 import { mapState } from 'pinia'
 import { SIZE_ICON_MD } from '@/constants/Common.constants'
 const noticeStore = useNoticeStore()
+const noticeTypeStore = useNoticeTypeStore()
 
 export default {
     name: 'NoticeHome',
@@ -124,7 +125,7 @@ export default {
         }
     },
     mounted() {
-        noticeStore.selectEnableNoticeType()
+        noticeTypeStore.selectEnableNoticeType()
     },
     computed: {
         ...mapState(useNoticeStore, ['dialogAddVisible'])
diff --git a/ui/src/pages/notice/NoticeTypeManage.vue b/ui/src/pages/notice/NoticeTypeManage.vue
index 0b88dfd..148421c 100644
--- a/ui/src/pages/notice/NoticeTypeManage.vue
+++ b/ui/src/pages/notice/NoticeTypeManage.vue
@@ -1,7 +1,7 @@
 <template>
     <el-container>
         <el-header>
-            <el-button type="primary" :size="'large'"
+            <el-button type="primary" :size="'large'" @click="handleOpenAddDialog"
                 ><el-icon :size="SIZE_ICON_MD()" style="color: white; margin-right: 3px">
                     <icon-pinnacle-add /> </el-icon
                 >添加类型</el-button
@@ -11,11 +11,29 @@
                     <icon-pinnacle-delete /> </el-icon
                 >批量删除</el-button
             >
-            <el-button type="primary" :size="'large'"
+            <el-button type="primary" :size="'large'" @click="getLoadData"
                 ><el-icon :size="SIZE_ICON_MD()" style="color: white; margin-right: 3px">
                     <icon-pinnacle-reset /> </el-icon
-                >刷新页面</el-button
+                >刷新数据</el-button
             >
+            <!-- 添加公告类型对话框-->
+            <el-dialog
+                v-model="dialogAddTypeVisible"
+                center
+                :close-on-click-modal="false"
+                destroy-on-close
+            >
+                <template #header>
+                    <h2 style="color: red">添加公告类型</h2>
+                </template>
+                <notice-type-commit-form />
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button>取消</el-button>
+                        <el-button type="primary" @click="submitForm"> 确定 </el-button>
+                    </span>
+                </template>
+            </el-dialog>
         </el-header>
         <el-main>
             <notice-type-table />
@@ -23,10 +41,17 @@
     </el-container>
 </template>
 <script lang="ts">
-import { SIZE_ICON_LG, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
+import { SIZE_ICON_MD } from '@/constants/Common.constants'
+import { useNoticeTypeStore } from '@/store/notice'
+import { mapState } from 'pinia'
+
+const noticeTypeStore = useNoticeTypeStore()
 
 export default {
     name: 'NoticeTypeManage',
+    computed: {
+        ...mapState(useNoticeTypeStore, ['dialogAddTypeVisible', 'editFlag'])
+    },
     data() {
         return {}
     },
@@ -34,11 +59,27 @@ export default {
         SIZE_ICON_MD() {
             return SIZE_ICON_MD
         },
-        SIZE_ICON_LG() {
-            return SIZE_ICON_LG
+        getLoadData() {
+            noticeTypeStore.dataLoading = true
+            noticeTypeStore.selectNoticeType()
         },
-        SIZE_ICON_SM() {
-            return SIZE_ICON_SM
+        handleOpenAddDialog() {
+            noticeTypeStore.dialogAddTypeVisible = true
+        },
+        submitForm() {
+            this.$refs.addTypeData.validate((valid) => {
+                if (valid) {
+                    if (this.editFlag) {
+                        // 编辑操作
+                        // noticeTypeStore.handleUpdateNoticeType(this.addTypeData)
+                    } else {
+                        // 添加操作
+                        // noticeTypeStore.handleAddNoticeType(this.addTypeData)
+                    }
+                } else {
+                    return false
+                }
+            })
         }
     },
     mounted() {}
diff --git a/ui/src/pages/notice/NoticeView.vue b/ui/src/pages/notice/NoticeView.vue
index 9141442..c082481 100644
--- a/ui/src/pages/notice/NoticeView.vue
+++ b/ui/src/pages/notice/NoticeView.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script lang="ts">
-import { useNoticeStore } from '@/store/notice'
-const noticeStore = useNoticeStore()
+import { useNoticeTypeStore } from '@/store/notice'
+const noticeTypeStore = useNoticeTypeStore()
 export default {
     name: 'NoticeView',
     data() {
@@ -24,7 +24,7 @@ export default {
     },
     methods: {},
     mounted() {
-        noticeStore.selectEnableNoticeType()
+        noticeTypeStore.selectEnableNoticeType()
     }
 }
 </script>
diff --git a/ui/src/pages/notice/ToReadView.vue b/ui/src/pages/notice/ToReadView.vue
index a4b7885..77d6823 100644
--- a/ui/src/pages/notice/ToReadView.vue
+++ b/ui/src/pages/notice/ToReadView.vue
@@ -10,7 +10,7 @@ export default {
     },
     methods: {},
     mounted() {
-        noticeStore.selectAllNoticeByUserId(0)
+        noticeStore.selectAllNoticeSelf(0)
         noticeStore.$patch((state) => {
             state.currentViewPage = 'ToRead'
         })
diff --git a/ui/src/store/notice.ts b/ui/src/store/notice.ts
index 7bc41d2..91e19af 100644
--- a/ui/src/store/notice.ts
+++ b/ui/src/store/notice.ts
@@ -2,16 +2,20 @@ import { defineStore } from 'pinia'
 import request from '@/services'
 import { ElMessage } from 'element-plus'
 
-export interface IAddFormData {
+export interface IAddNoticeData {
     title: string
     typeId: string
     sendTime: string
     endTime: string
-    top: boolean
+    top: number
     priority: number
     content: string
     receivers: []
 }
+export interface IAddNoticeTypeData {
+    name: string
+    enable: number
+}
 export interface INotice {
     content: string
     createTime: string
@@ -75,14 +79,6 @@ export const useNoticeStore = defineStore('notice', {
             editFlag: false,
             currentViewPage: 'All',
             hackReset: true,
-            EnableNoticeTypeList: [],
-            noticeTypeList: [
-                {
-                    id: '',
-                    name: '',
-                    enable: true
-                }
-            ],
             departmentList: [],
             noticeShowData: {
                 content: '',
@@ -113,54 +109,54 @@ export const useNoticeStore = defineStore('notice', {
     },
     getters: {},
     actions: {
-        selectAllNotice(currentPage: number, pageSize: number) {
+        async selectAllNotice(currentPage: number, pageSize: number) {
             void request
                 .get('/notice/page', {
                     currentPage,
                     pageSize
                 })
                 .then((response) => {
-                    this.selectData = response.data.data
-                    this.total = parseInt(response.data.msg)
-                    if (this.selectData.length !== 0) {
+                    if (response.data.code === 20021) {
+                        this.selectData = response.data.data
+                        this.total = parseInt(response.data.msg)
+                        if (this.selectData.length !== 0) {
+                            this.loading = false
+                        }
+                    } else {
                         this.loading = false
+                        ElMessage({
+                            message: response.data.msg,
+                            type: 'error'
+                        })
                     }
                 })
         },
-        async selectAllNoticeByUserId(readStatus: number) {
+        async selectAllNoticeSelf(readStatus: number) {
             await request
-                .get('/notice/ByUserId', {
+                .get('/notice/self', {
                     readStatus
                 })
                 .then((response) => {
-                    this.selectData = response.data.data
-                    if (this.selectData.length !== 0) {
+                    if (response.data.code === 20021) {
+                        this.selectData = response.data.data
+                        if (this.selectData.length !== 0) {
+                            this.loading = false
+                        }
+                    } else {
                         this.loading = false
+                        ElMessage({
+                            message: response.data.msg,
+                            type: 'error'
+                        })
                     }
                 })
         },
-        async selectEnableNoticeType() {
-            await request.get('/noticeType/enable').then((response) => {
-                this.EnableNoticeTypeList = response.data.data
-            })
-        },
-        async selectNoticeType() {
-            await request.get('/noticeType').then((response) => {
-                this.noticeTypeList = response.data.data
-                if (response.data.data.length >= 0) {
-                    for (let i = 0; i < this.noticeTypeList.length; i++) {
-                        this.noticeTypeList[i].enable = response.data.data[i].enable === 1
-                    }
-                    this.loading = false
-                }
-            })
-        },
         async selectDepartment() {
             await request.get('/department').then((response) => {
                 this.departmentList = response.data.data
             })
         },
-        async handleAddNotice(addFormData: IAddFormData) {
+        async handleAddNotice(addFormData: IAddNoticeData) {
             await request.post('/notice', addFormData).then((response) => {
                 if (response.data.code === 20022) {
                     this.dialogAddVisible = false
@@ -175,9 +171,9 @@ export const useNoticeStore = defineStore('notice', {
                     })
                 }
             })
-            this.selectAllNotice(1, 5)
+            await this.selectAllNotice(1, 5)
         },
-        async handleUpdateNotice(updateNotice: IAddFormData) {
+        async handleUpdateNotice(updateNotice: IAddNoticeData) {
             await request.put('/notice', updateNotice).then((response) => {
                 if (response.data.code === 20023) {
                     this.dialogEditVisible = false
@@ -192,12 +188,82 @@ export const useNoticeStore = defineStore('notice', {
                     })
                 }
             })
-            this.selectAllNotice(1, 5)
+            await this.selectAllNotice(1, 5)
             this.hackReset = false
         },
+        async modifyNoticeIsRead(notice: INotice) {
+            await request.put('/notice/modify_notice_read', notice).then((response) => {
+                if (response.data.code === 20033) {
+                    ElMessage({
+                        message: response.data.msg,
+                        type: 'error'
+                    })
+                }
+            })
+        },
+        async modifyTop(notice: INotice) {
+            await request.put('/notice/update_notice_top', notice).then((response) => {
+                if (response.data.code === 20023) {
+                    ElMessage({
+                        message: response.data.msg,
+                        type: 'success'
+                    })
+                } else if (response.data.code === 20033) {
+                    ElMessage({
+                        message: response.data.msg,
+                        type: 'error'
+                    })
+                }
+            })
+        }
+    }
+})
+
+export const useNoticeTypeStore = defineStore('notice_type', {
+    state: () => {
+        return {
+            dataLoading: true,
+            dialogAddTypeVisible: false,
+            dialogEditTypeVisible: false,
+            editFlag: false,
+            enableNoticeTypeList: [],
+            noticeTypeList: [
+                {
+                    id: '',
+                    name: '',
+                    enable: true
+                }
+            ]
+        }
+    },
+    actions: {
+        async selectEnableNoticeType() {
+            await request.get('/notice_type/enable').then((response) => {
+                this.enableNoticeTypeList = response.data.data
+            })
+        },
+        async selectNoticeType() {
+            await request.get('/notice_type').then((response) => {
+                if (response.data.code === 20021) {
+                    this.noticeTypeList = response.data.data
+                    if (response.data.data.length >= 0) {
+                        for (let i = 0; i < this.noticeTypeList.length; i++) {
+                            this.noticeTypeList[i].enable = response.data.data[i].enable === 1
+                        }
+                        this.dataLoading = false
+                    }
+                } else {
+                    this.dataLoading = false
+                    ElMessage({
+                        message: response.data.msg,
+                        type: 'error'
+                    })
+                }
+            })
+        },
         async updateNoticeTypeEnable(typeId: string, enable: boolean) {
             await request
-                .get('/noticeType/update', {
+                .get('/notice_type/update', {
                     typeId,
                     enable
                 })
@@ -215,21 +281,29 @@ export const useNoticeStore = defineStore('notice', {
                     }
                 })
         },
-        async modifyNoticeIsRead(notice: INotice) {
-            await request.put('/notice/modifyNoticeIsRead', notice).then((response) => {
-                if (response.data.code === 20033) {
+        async handleAddNoticeType(addFormData: IAddNoticeTypeData) {
+            await request.post('/notice_type', addFormData).then((response) => {
+                if (response.data.code === 20022) {
+                    this.dialogAddTypeVisible = false
+                    ElMessage({
+                        message: '添加成功.',
+                        type: 'success'
+                    })
+                } else if (response.data.code === 20032) {
                     ElMessage({
                         message: response.data.msg,
                         type: 'error'
                     })
                 }
             })
+            await this.selectNoticeType()
         },
-        async modifyTop(notice: INotice) {
-            await request.put('/notice/updateNoticeTop', notice).then((response) => {
+        async handleUpdateNoticeType(updateNotice: IAddNoticeTypeData) {
+            await request.put('/notice_type', updateNotice).then((response) => {
                 if (response.data.code === 20023) {
+                    this.dialogEditTypeVisible = false
                     ElMessage({
-                        message: response.data.msg,
+                        message: '修改成功.',
                         type: 'success'
                     })
                 } else if (response.data.code === 20033) {
@@ -239,6 +313,7 @@ export const useNoticeStore = defineStore('notice', {
                     })
                 }
             })
+            await this.selectNoticeType()
         }
     }
 })