add the function of fuzzy query in the page of NoticeTypeManage

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

@@ -2,6 +2,7 @@ package com.cfive.pinnacle.controller;
 
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.baomidou.mybatisplus.extension.plugins.pagination.PageDTO;
 import com.cfive.pinnacle.entity.NoticeType;
 import com.cfive.pinnacle.entity.common.ResponseCode;
 import com.cfive.pinnacle.entity.common.ResponseResult;
@@ -55,17 +56,15 @@ public class NoticeTypeController {
     //分页查询所有公告类型
     @GetMapping("/page")
     @PreAuthorize("hasAuthority('notice:type:get')")
-    public ResponseResult<List<NoticeType>> selectPageTypeList(Integer currentPage, Integer pageSize){
+    public ResponseResult<List<NoticeType>> selectPageTypeList(Integer currentPage, Integer pageSize,String name,Integer enable){
-        Page<NoticeType> noticeTypePage=new Page<>();
+        Page<NoticeType> noticeTypePage;
         if (null != currentPage && null != pageSize) {
-            noticeTypePage.setCurrent(currentPage.intValue());
+            noticeTypePage = PageDTO.of(currentPage, pageSize);
-            noticeTypePage.setSize(pageSize.intValue());
         } else {
             // 不进行分页
-            noticeTypePage.setCurrent(1);
+            noticeTypePage = PageDTO.of(1, -1);
-            noticeTypePage.setSize(-1);
         }
-        IPage<NoticeType> selectPageTypeList = noticeTypeService.selectPageTypeList(noticeTypePage);
+        IPage<NoticeType> selectPageTypeList = noticeTypeService.selectPageTypeList(noticeTypePage,name.trim(),enable);
         Integer code = selectPageTypeList.getRecords() != null ? ResponseCode.DATABASE_SELECT_OK : ResponseCode.DATABASE_SELECT_ERROR;
         String msg = selectPageTypeList.getRecords() != null ? String.valueOf(selectPageTypeList.getTotal()) : "数据查询失败，请重试！";
         return ResponseResult.build(code, msg, selectPageTypeList.getRecords());

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

@@ -17,7 +17,7 @@ import java.util.List;
 public interface INoticeTypeService extends IService<NoticeType> {
     List<NoticeType> selectTypeList();
 
-    IPage<NoticeType> selectPageTypeList(IPage<NoticeType> page);
+    IPage<NoticeType> selectPageTypeList(IPage<NoticeType> page,String name,Integer enable);
     List<NoticeType> selectEnableTypeList();
 
     Boolean updateTypeEnableById(Long typeId, Integer enable);

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

@@ -14,6 +14,7 @@ import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.cfive.pinnacle.utils.WebUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import java.time.LocalDateTime;
 import java.time.format.DateTimeFormatter;
@@ -54,29 +55,28 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
     }
 
     @Override
+    @Transactional
     public Boolean deleteById(Long nid) {
         LambdaQueryWrapper<NoticeReceive> lqw = new LambdaQueryWrapper<>();
         lqw.eq(NoticeReceive::getNoticeId, nid);
-        boolean flag = noticeReceiveMapper.delete(lqw) > 0;
+        noticeReceiveMapper.delete(lqw);
-        return flag && noticeMapper.deleteById(nid) > 0;
+        return noticeMapper.deleteById(nid) > 0;
     }
 
     @Override
+    @Transactional
     public Boolean deleteBatchByIds(List<Long> noticeIds) {
-        boolean flag = false;
         for (Long nid :
                 noticeIds) {
             LambdaQueryWrapper<NoticeReceive> lqw = new LambdaQueryWrapper<>();
             lqw.eq(NoticeReceive::getNoticeId, nid);
-            flag = noticeReceiveMapper.delete(lqw) > 0;
+            noticeReceiveMapper.delete(lqw);
-            if (!flag) {
-                break;
         }
-        }
+        return noticeMapper.deleteBatchIds(noticeIds) > 0;
-        return flag && noticeMapper.deleteBatchIds(noticeIds) > 0;
     }
 
     @Override
+    @Transactional
     public Boolean updateNotice(Notice notice) {
         noticeMapper.update(null, new UpdateWrapper<Notice>().eq("id", notice.getId()).set("old", 1)); //修改原始数据
         LambdaQueryWrapper<NoticeReceive> lqw = new LambdaQueryWrapper<>();
@@ -96,8 +96,9 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
     }
 
     @Override
+    @Transactional
     public Boolean addNotice(Notice notice) {
-        boolean noticeFlag, noticeRecFlag = false;
+        boolean noticeFlag;
         notice.setSenderId(WebUtil.getLoginUser().getUser().getId());
 //        notice.setSenderId(1652714496280469506L);
         noticeFlag = noticeMapper.insert(notice) > 0;
@@ -108,15 +109,12 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
                 NoticeReceive noticeReceive = new NoticeReceive();
                 noticeReceive.setNoticeId(noticeId);
                 noticeReceive.setUserId(receiveId);
-                noticeRecFlag = noticeReceiveMapper.insert(noticeReceive) > 0;
+                noticeReceiveMapper.insert(noticeReceive);
-                if (!noticeRecFlag) {
-                    break;
-                }
             }
         } else {
             noticeFlag = false;
         }
-        return noticeFlag && noticeRecFlag;
+        return noticeFlag;
     }
 
 

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

@@ -9,6 +9,7 @@ import com.cfive.pinnacle.service.INoticeTypeService;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import java.util.List;
 
@@ -24,6 +25,7 @@ import java.util.List;
 public class NoticeTypeServiceImpl extends ServiceImpl<NoticeTypeMapper, NoticeType> implements INoticeTypeService {
     @Autowired
     NoticeTypeMapper noticeTypeMapper;
+
     @Override
     public List<NoticeType> selectTypeList() {
         LambdaQueryWrapper<NoticeType> lqw = new LambdaQueryWrapper<>();
@@ -32,8 +34,10 @@ public class NoticeTypeServiceImpl extends ServiceImpl<NoticeTypeMapper, NoticeT
     }
 
     @Override
-    public IPage<NoticeType> selectPageTypeList(IPage<NoticeType> page) {
+    public IPage<NoticeType> selectPageTypeList(IPage<NoticeType> page, String name, Integer enable) {
         LambdaQueryWrapper<NoticeType> lqw = new LambdaQueryWrapper<>();
+        lqw.like(null != name && name != "", NoticeType::getName, name);
+        lqw.eq(null != enable && enable != -1, NoticeType::getEnable, enable);
         lqw.orderByDesc(NoticeType::getId);
         return noticeTypeMapper.selectPage(page, lqw);
     }
@@ -72,6 +76,7 @@ public class NoticeTypeServiceImpl extends ServiceImpl<NoticeTypeMapper, NoticeT
     }
 
     @Override
+    @Transactional
     public Boolean deleteBatchByTypeIds(List<Long> typeIds) {
         return noticeTypeMapper.deleteBatchIds(typeIds) > 0;
     }

ui/src/components/notice/NoticeCommitForm.vue

@@ -98,7 +98,7 @@
             <el-form-item label="公告内容" prop="content">
                 <el-input type="textarea" v-model="addData.content"></el-input>
             </el-form-item>
-            <el-form-item>
+            <el-form-item class="formFooter">
                 <el-button type="primary" @click="submitForm">发布</el-button>
                 <el-button type="primary" @click="closeForm">取消</el-button>
                 <el-button @click="resetForm()">重置</el-button>
@@ -176,6 +176,7 @@ export default {
                     return false
                 }
             })
+            this.resetForm()
         },
         closeForm() {
             noticeStore.$patch((state) => {
@@ -184,6 +185,7 @@ export default {
                 state.hackReset = false
                 state.editFlag = false
             })
+            this.resetForm()
         },
         resetForm() {
             this.$refs.addData.resetFields()
@@ -220,4 +222,9 @@ export default {
 .el-slider {
     margin-left: 20px;
 }
+.formFooter {
+    display: flex;
+    margin: 20px 0;
+    justify-content: center;
+}
 </style>

ui/src/components/notice/NoticeManageHead.vue

@@ -1,18 +1,12 @@
 <template>
-    <el-form
+    <el-form :inline="true" :model="search" class="demo-form-inline">
-        :inline="true"
+        <el-row :span="24" :gutter="5">
-        :model="search"
+            <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="5">
-        class="demo-form-inline"
-        label-width="auto"
-        style="min-width: 1185px"
-    >
-        <el-row :span="24">
-            <el-col :span="5">
                 <el-form-item label="公告标题：" prop="title">
                     <el-input v-model="search.title" placeholder="请输入公告标题"></el-input>
                 </el-form-item>
             </el-col>
-            <el-col :span="5">
+            <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="5">
                 <el-form-item label="公告类型：" prop="type">
                     <el-select v-model="search.type" placeholder="请选择公告类型">
                         <el-option
@@ -24,7 +18,7 @@
                     </el-select>
                 </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :xs="6" :sm="6" :md="4" :lg="8" :xl="10">
                 <el-form-item label="日期：" prop="timeRang">
                     <el-date-picker
                         v-model="timeRang"
@@ -37,13 +31,17 @@
                     </el-date-picker>
                 </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :xs="3" :sm="3" :md="4" :lg="4" :xl="2">
                 <el-form-item>
                     <el-button type="primary" @click="selectByCondition"
                         ><el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">
                             <icon-pinnacle-notice_search /> </el-icon
                         >查询</el-button
                     >
+                </el-form-item>
+            </el-col>
+            <el-col :xs="3" :sm="3" :md="4" :lg="2" :xl="2">
+                <el-form-item>
                     <el-button type="primary" @click="resetForm"
                         ><el-icon :size="SIZE_ICON_SM()" style="color: white">
                             <icon-pinnacle-reset /> </el-icon

ui/src/components/notice/NoticeManageTable.vue

@@ -7,19 +7,18 @@
         border
         highlight-current-row
         @selection-change="handleSelectionChange"
-        style="font-size: 18px"
         :header-cell-style="{
             background: 'darksalmon',
             'text-align': 'center',
             color: '#fff',
-            'font-size': '20px'
+            'font-size': '16px'
         }"
         @filter-change="handleFilterChange"
     >
-        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="selection" align="center" />
-        <el-table-column type="index" label="序号" width="75" align="center">
+        <el-table-column type="index" width="80" label="序号" align="center">
             <template #default="scope">
-                <el-icon :size="SIZE_ICON_SM()" :color="COLOR_TOP()" v-if="scope.row.top === 1">
+                <el-icon :size="SIZE_ICON_XS()" :color="COLOR_TOP()" v-if="scope.row.top === 1">
                     <icon-pinnacle-top />
                 </el-icon>
                 {{ (this.currentPage - 1) * this.pageSize + scope.$index + 1 }}
@@ -28,13 +27,13 @@
         <el-table-column
             prop="title"
             label="公告标题"
-            width="200"
+            min-width="160"
             show-overflow-tooltip
             align="center"
         >
             <template #default="scope"> {{ formatterTitle(scope.row.title) }}</template>
         </el-table-column>
-        <el-table-column prop="noticeType.name" label="公告类别" width="160" align="center">
+        <el-table-column prop="noticeType.name" label="公告类别" width="100" align="center">
             <template #default="scope">
                 <el-tag
                     size="default"
@@ -51,12 +50,12 @@
                 </el-tag>
             </template>
         </el-table-column>
-        <el-table-column prop="priority" label="优先级" width="100" align="center" />
+        <el-table-column prop="priority" label="优先级" width="80" align="center" />
         <el-table-column
             prop="createTime"
             label="创建时间"
             sortable
-            width="220"
+            width="160"
             :formatter="formatDate"
             align="center"
         />
@@ -64,7 +63,7 @@
             prop="sendTime"
             label="生效时间"
             sortable
-            width="220"
+            width="160"
             :formatter="formatDate"
             align="center"
         />
@@ -72,7 +71,7 @@
             prop="endTime"
             label="失效时间"
             sortable
-            width="220"
+            width="160"
             :formatter="formatDate"
             align="center"
         />
@@ -93,7 +92,7 @@
                 </el-tag>
             </template>
         </el-table-column>
-        <el-table-column label="操作" min-width="200px" align="center">
+        <el-table-column label="操作" width="200px" align="center">
             <template #default="scope">
                 <el-button size="small" color="#626aef" @click="handleShow(scope.row)"
                     >查看
@@ -115,7 +114,7 @@
             @current-change="handleCurrentChange"
             layout="total, sizes, prev, pager, next, jumper"
             background
-            :page-sizes="[5, 10, 20, 40]"
+            :page-sizes="[10, 20, 50, 100]"
             :total="total"
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
@@ -133,7 +132,7 @@
         <template #header>
             <h2 style="color: red">编辑公告</h2>
         </template>
-        <notice-commit-form />
+        <notice-commit-form ref="editForm" />
     </el-dialog>
     <!--        查看会话框-->
     <el-dialog
@@ -152,7 +151,7 @@
 <script lang="ts">
 import { mapState } from 'pinia'
 import { useNoticeStore } from '@/store/notice'
-import { COLOR_TOP, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
+import { COLOR_TOP, SIZE_ICON_MD, SIZE_ICON_XS } from '@/constants/Common.constants'
 
 const noticeStore = useNoticeStore()
 
@@ -176,8 +175,8 @@ export default {
     emits: ['handleDeleteById', 'getNoticeSender', 'filterSender'],
     props: [],
     methods: {
-        SIZE_ICON_SM() {
+        SIZE_ICON_XS() {
-            return SIZE_ICON_SM
+            return SIZE_ICON_XS
         },
         COLOR_TOP() {
             return COLOR_TOP
@@ -220,6 +219,7 @@ export default {
                 state.editFlag = false
                 state.hackReset = false
             })
+            this.$refs.editForm.$refs.addData.resetFields()
         },
         handleShow(row) {
             noticeStore.$patch((state) => {
@@ -282,6 +282,8 @@ export default {
 }
 
 .pagination {
-    margin: 30px 400px;
+    display: flex;
+    margin: 20px 0;
+    justify-content: center;
 }
 </style>

ui/src/components/notice/NoticeTypeHead.vue

@@ -0,0 +1,87 @@
+<template>
+    <el-form :inline="true" :model="searchType" class="demo-form-inline">
+        <el-row :gutter="5">
+            <el-col :span="6">
+                <el-form-item label="类型名称：" prop="name" class="fill-with">
+                    <el-input v-model="searchType.name" placeholder="请输入类型名称"></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="1"></el-col>
+            <el-col :span="5">
+                <el-form-item label="公告类型：" prop="enable" class="fill-with">
+                    <el-select
+                        v-model="searchType.enable"
+                        placeholder="请选择公告类型"
+                        class="fill-with"
+                    >
+                        <el-option label="全部" :value="-1" />
+                        <el-option label="启用" :value="1" />
+                        <el-option label="禁用" :value="0" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="1"></el-col>
+            <el-col :span="-1">
+                <el-form-item>
+                    <el-button type="primary" @click="selectByCondition"
+                        ><el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">
+                            <icon-pinnacle-notice_search /> </el-icon
+                        >查询</el-button
+                    >
+                </el-form-item>
+            </el-col>
+            <el-col :span="-1">
+                <el-form-item>
+                    <el-button type="primary" @click="resetForm"
+                        ><el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">
+                            <icon-pinnacle-reset /> </el-icon
+                        >重置</el-button
+                    >
+                </el-form-item>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+
+<script lang="ts">
+import { SIZE_ICON_SM } from '@/constants/Common.constants'
+import { useNoticeTypeStore } from '@/store/notice'
+import { mapState } from 'pinia'
+
+const noticeTypeStore = useNoticeTypeStore()
+export default {
+    name: 'NoticeHead',
+    data() {
+        return {}
+    },
+    methods: {
+        SIZE_ICON_SM() {
+            return SIZE_ICON_SM
+        },
+        selectByCondition() {
+            this.$emit('selectTypeByCond')
+        },
+        resetForm() {
+            noticeTypeStore.$patch((state) => {
+                state.searchType = {
+                    name: '',
+                    enable: -1
+                }
+            })
+            this.$emit('selectTypeByCond')
+        }
+    },
+    computed: {
+        ...mapState(useNoticeTypeStore, ['enableNoticeTypeList', 'searchType'])
+    }
+}
+</script>
+
+<style scoped>
+.el-form {
+    margin-top: 15px;
+}
+.fill-with {
+    width: 100%;
+}
+</style>

ui/src/components/notice/NoticeTypeTable.vue

@@ -3,8 +3,7 @@
         v-loading="dataLoading"
         element-loading-text="加载中..."
         ref="tableRef"
-        :data="noticeTypeList.filter((data) => !search || data.name.includes(search))"
+        :data="noticeTypeList"
-        style="font-size: 18px"
         stripe
         border
         highlight-current-row
@@ -12,14 +11,22 @@
         :header-cell-style="{
             background: 'darksalmon',
             'text-align': 'center',
-            color: '#fff'
+            color: '#fff',
+            'font-size': '16px'
         }"
-        ><el-table-column type="selection" width="65" align="center" />
+        ><el-table-column type="selection" align="center" />
         <el-table-column type="index" label="序号" width="80" align="center" :index="indexFormat" />
-        <el-table-column label="类型名称" prop="name" width="500" align="center" />
+        <el-table-column
+            label="类型名称"
+            prop="name"
+            min-width="160"
+            show-overflow-tooltip
+            align="center"
+        />
         <el-table-column label="是否启用" prop="enable" width="350" align="center">
             <template #default="scope">
                 <el-switch
+                    :loading="switchLoading"
                     v-model="scope.row.enable"
                     style="--el-switch-on-color: #13ce66; --el-switch-off-color: #afb2b8"
                     active-text="启用"
@@ -30,15 +37,12 @@
                 />
             </template>
         </el-table-column>
-        <el-table-column align="center">
+        <el-table-column label="操作" align="center" width="200px">
-            <template #header>
-                <el-input v-model="search" size="default" placeholder="请输入关键字搜索" />
-            </template>
             <template #default="scope">
-                <el-button size="default" type="primary" @click="handleOpenEditDialog(scope.row)"
+                <el-button size="small" type="primary" @click="handleOpenEditDialog(scope.row)"
                     >编辑</el-button
                 >
-                <el-button size="default" type="danger" @click="deleteTypeById(scope.row.id)"
+                <el-button size="small" type="danger" @click="deleteTypeById(scope.row.id)"
                     >删除</el-button
                 >
             </template>
@@ -52,7 +56,7 @@
             @current-change="handleCurrentChange"
             layout="total, sizes, prev, pager, next, jumper"
             background
-            :page-sizes="[5, 10, 20, 40]"
+            :page-sizes="[10, 20, 50, 100]"
             :total="total"
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
@@ -66,6 +70,7 @@
         v-if="hackReset"
         :close-on-click-modal="false"
         :before-close="closeEditForm"
+        style="min-width: 320px; max-width: 700px"
     >
         <template #header>
             <h2 style="color: red">编辑公告类型</h2>
@@ -100,13 +105,14 @@ export default {
             'hackReset',
             'showTypeData',
             'addTypeData',
-            'multiDeleteSelection'
+            'multiDeleteSelection',
+            'searchType',
+            'switchLoading'
         ])
     },
     data() {
         return {
-            filterSenderName: [],
+            filterSenderName: []
-            search: ''
         }
     },
     props: [],
@@ -120,11 +126,16 @@ export default {
         indexFormat(index) {
             return (this.currentPage - 1) * this.pageSize + index + 1
         },
-        switchChang(id, value) {
+        async switchChang(id, value) {
-            noticeTypeStore.updateNoticeTypeEnable(id, value)
+            this.switchLoading = true
-            setTimeout(() => {
+            this.dataLoading = true
-                noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
+            await noticeTypeStore.updateNoticeTypeEnable(id, value)
-            }, 800)
+            await noticeTypeStore.selectNoticeType(
+                this.currentPage,
+                this.pageSize,
+                this.searchType.name,
+                this.searchType.enable
+            )
         },
         handleOpenEditDialog(row) {
             noticeTypeStore.$patch((state) => {
@@ -144,14 +155,24 @@ export default {
             noticeTypeStore.$patch((state) => {
                 state.pageSize = pageSize
             })
-            noticeTypeStore.selectNoticeType(this.currentPage, parseInt(pageSize))
+            noticeTypeStore.selectNoticeType(
+                this.currentPage,
+                parseInt(pageSize),
+                this.searchType.name,
+                this.searchType.enable
+            )
         },
         handleCurrentChange(currentPage) {
             // currentPage：当前第几页
             noticeTypeStore.$patch((state) => {
                 state.currentPage = currentPage
             })
-            noticeTypeStore.selectNoticeType(parseInt(currentPage), this.pageSize)
+            noticeTypeStore.selectNoticeType(
+                parseInt(currentPage),
+                this.pageSize,
+                this.searchType.name,
+                this.searchType.enable
+            )
         },
         submitEditForm() {
             this.$refs.editForm.$refs.addTypeData.validate((valid) => {
@@ -173,14 +194,19 @@ export default {
     },
     mounted() {
         noticeTypeStore.dataLoading = true
-        noticeTypeStore.selectNoticeType(1, 5)
+        noticeTypeStore.selectNoticeType(1, 10, '', -1)
     },
     updated() {}
 }
 </script>
 
 <style scoped>
+.el-table {
+    margin-top: 10px;
+}
 .pagination {
-    margin: 30px 400px;
+    display: flex;
+    margin: 20px 0;
+    justify-content: center;
 }
 </style>

ui/src/components/notice/NoticeViewHead.vue

@@ -1,18 +1,12 @@
 <template>
-    <el-form
+    <el-form :inline="true" :model="searchBySelf" class="demo-form-inline">
-        :inline="true"
+        <el-row :span="24" :gutter="5">
-        :model="searchBySelf"
+            <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="5">
-        class="demo-form-inline"
-        label-width="auto"
-        style="min-width: 1185px"
-    >
-        <el-row :span="24">
-            <el-col :span="5">
                 <el-form-item label="公告标题：" prop="title">
                     <el-input v-model="searchBySelf.title" placeholder="请输入公告标题"></el-input>
                 </el-form-item>
             </el-col>
-            <el-col :span="5">
+            <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="5">
                 <el-form-item label="公告类型：" prop="type">
                     <el-select v-model="searchBySelf.type" placeholder="请选择公告类型">
                         <el-option
@@ -24,7 +18,7 @@
                     </el-select>
                 </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :xs="6" :sm="6" :md="5" :lg="8" :xl="10">
                 <el-form-item label="日期：" prop="timeRang">
                     <el-date-picker
                         v-model="timeRang"
@@ -37,13 +31,17 @@
                     </el-date-picker>
                 </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="2">
                 <el-form-item>
                     <el-button type="primary" @click="selectByCondition"
                         ><el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">
                             <icon-pinnacle-notice_search /> </el-icon
                         >查询</el-button
                     >
+                </el-form-item>
+            </el-col>
+            <el-col :xs="3" :sm="3" :md="4" :lg="2" :xl="2">
+                <el-form-item>
                     <el-button type="primary" @click="resetForm"
                         ><el-icon :size="SIZE_ICON_SM()" style="color: white">
                             <icon-pinnacle-reset /> </el-icon

ui/src/pages/notice/NoticeManage.vue

@@ -1,6 +1,6 @@
 <template>
     <el-container>
-        <el-header>
+        <el-header style="width: 100%">
             <notice-manage-head @selectByCond="getLoading"></notice-manage-head>
         </el-header>
         <el-main>
@@ -29,11 +29,12 @@
                 center
                 :close-on-click-modal="false"
                 :before-close="handleDialogClose"
+                style="min-width: 450px; max-width: 900px"
             >
                 <template #header>
                     <h2 style="color: red">发布公告</h2>
                 </template>
-                <notice-commit-form />
+                <notice-commit-form ref="addForm" />
             </el-dialog>
             <notice-manage-table
                 @handleDeleteById="handleDeleteById"
@@ -77,6 +78,7 @@ export default {
                 state.editFlag = false
                 state.hackReset = false
             })
+            this.$refs.addForm.$refs.addData.resetFields()
         },
         handleDeleteById(deleteID) {
             ElMessageBox.confirm('确定是否要删除？该操作将无法回退', '警告', {

ui/src/pages/notice/NoticeTypeManage.vue

@@ -1,6 +1,9 @@
 <template>
     <el-container>
-        <el-header>
+        <el-header style="width: 100%">
+            <notice-type-head @selectTypeByCond="getLoadData"></notice-type-head>
+        </el-header>
+        <el-main>
             <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
@@ -23,6 +26,7 @@
                 :close-on-click-modal="false"
                 v-if="hackReset"
                 :before-close="closeForm"
+                style="min-width: 320px; max-width: 700px"
             >
                 <template #header>
                     <h2 style="color: red">添加公告类型</h2>
@@ -38,8 +42,6 @@
                     </span>
                 </template>
             </el-dialog>
-        </el-header>
-        <el-main>
             <notice-type-table @deleteTypeById="deleteTypeById" />
         </el-main>
     </el-container>
@@ -68,7 +70,8 @@ export default {
             'addTypeData',
             'currentPage',
             'pageSize',
-            'multiDeleteSelection'
+            'multiDeleteSelection',
+            'searchType'
         ])
     },
     data() {
@@ -80,7 +83,12 @@ export default {
         },
         getLoadData() {
             noticeTypeStore.dataLoading = true
-            noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
+            noticeTypeStore.selectNoticeType(
+                this.currentPage,
+                this.pageSize,
+                this.searchType.name,
+                this.searchType.enable
+            )
         },
         handleOpenAddDialog() {
             noticeTypeStore.$patch((state) => {
@@ -122,7 +130,12 @@ export default {
                                 message: '删除成功.',
                                 type: 'success'
                             })
-                            noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
+                            noticeTypeStore.selectNoticeType(
+                                this.currentPage,
+                                this.pageSize,
+                                '',
+                                -1
+                            )
                         } else if (response.data.code === DATABASE_DELETE_ERROR) {
                             ElMessage({
                                 message: response.data.msg,
@@ -151,7 +164,12 @@ export default {
                                     message: '删除成功.',
                                     type: 'success'
                                 })
-                                noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
+                                noticeTypeStore.selectNoticeType(
+                                    this.currentPage,
+                                    this.pageSize,
+                                    '',
+                                    -1
+                                )
                             } else if (response.data.code === DATABASE_DELETE_ERROR) {
                                 ElMessage({
                                     message: response.data.msg,
@@ -173,4 +191,12 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.el-header {
+    background-color: #fff;
+}
+.el-main {
+    padding: 0;
+    margin-top: 20px;
+}
+</style>

ui/src/pages/notice/NoticeView.vue

@@ -1,6 +1,6 @@
 <template>
     <el-container>
-        <el-header>
+        <el-header style="width: 100%">
             <notice-view-head @selectSelfByCond="getLoading" />
         </el-header>
         <el-main>

ui/src/store/notice.ts

@@ -53,7 +53,7 @@ export const useNoticeStore = defineStore('notice', {
     state: () => {
         return {
             total: 0,
-            pageSize: 5,
+            pageSize: 10,
             currentPage: 1,
             search: {
                 title: '',
@@ -216,7 +216,7 @@ export const useNoticeStore = defineStore('notice', {
                     })
                 }
             })
-            this.selectAllNotice(1, 5, '', '', '', '', [])
+            this.selectAllNotice(1, 10, '', '', '', '', [])
         },
         async handleUpdateNotice(updateNotice: IAddNoticeData) {
             await request.put('/notice', updateNotice).then((response) => {
@@ -234,7 +234,7 @@ export const useNoticeStore = defineStore('notice', {
                     })
                 }
             })
-            this.selectAllNotice(1, 5, '', '', '', '', [])
+            this.selectAllNotice(1, 10, '', '', '', '', [])
             this.hackReset = false
         },
         async modifyNoticeIsRead(notice: INotice) {
@@ -269,9 +269,10 @@ export const useNoticeTypeStore = defineStore('notice_type', {
     state: () => {
         return {
             total: 0,
-            pageSize: 5,
+            pageSize: 10,
             currentPage: 1,
             dataLoading: true,
+            switchLoading: false,
             dialogAddTypeVisible: false,
             dialogEditTypeVisible: false,
             hackReset: true,
@@ -294,6 +295,10 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                 id: '',
                 name: '',
                 enable: 1
+            },
+            searchType: {
+                name: '',
+                enable: -1
             }
         }
     },
@@ -303,14 +308,14 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                 this.enableNoticeTypeList = response.data.data
             })
         },
-        async selectNoticeType(currentPage: number, pageSize: number) {
+        selectNoticeType(currentPage: number, pageSize: number, name: string, enable: number) {
-            await request.get('/notice_type/page', { currentPage, pageSize }).then((response) => {
+            void request
+                .get('/notice_type/page', { currentPage, pageSize, name, enable })
+                .then((response) => {
                     if (response.data.code === DATABASE_SELECT_OK) {
                         this.noticeTypeList = response.data.data
                         this.total = parseInt(response.data.msg)
-                    if (this.noticeTypeList.length !== 0) {
                         this.dataLoading = false
-                    }
                     } else {
                         this.dataLoading = false
                         ElMessage({
@@ -328,11 +333,13 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                 })
                 .then((response) => {
                     if (response.data.code === DATABASE_UPDATE_OK) {
+                        this.switchLoading = false
                         ElMessage({
                             message: '修改成功.',
                             type: 'success'
                         })
                     } else if (response.data.code === DATABASE_UPDATE_ERROR) {
+                        this.switchLoading = false
                         ElMessage({
                             message: response.data.msg,
                             type: 'error'
@@ -355,7 +362,7 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                     })
                 }
             })
-            await this.selectNoticeType(1, 5)
+            this.selectNoticeType(1, 10, '', -1)
         },
         async handleUpdateNoticeType(updateNotice: IAddNoticeTypeData) {
             await request.put('/notice_type', updateNotice).then((response) => {
@@ -379,7 +386,7 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                     })
                 }
             })
-            await this.selectNoticeType(this.currentPage, this.pageSize)
+            this.selectNoticeType(this.currentPage, this.pageSize, '', -1)
         }
     }
 })