modify the function of paging the noticeType

2026-04-05 23:11:24 +08:00 · 2023-05-28 18:21:46 +08:00
parent e6e9ce9965
commit 10d3d0e4e8
12 changed files with 194 additions and 86 deletions
--- a/ui/src/components/notice/NoticeManageTable.vue
+++ b/ui/src/components/notice/NoticeManageTable.vue
@@ -1,5 +1,4 @@
 <template>
-    <el-button size="large" @click="clearFilter" type="primary">清除筛选条件</el-button>
    <el-table
        v-loading="loading"
        element-loading-text="加载中..."
@@ -29,10 +28,11 @@
            prop="title"
            label="公告标题"
            width="200"
-            :formatter="formatter"
            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">
            <template #default="scope">
                <el-tag
@@ -166,16 +166,16 @@ export default {
            'dialogShowVisible',
            'noticeShowData',
            'dialogEditVisible',
-            'hackReset'
+            'hackReset',
+            'currentPage',
+            'pageSize',
+            'multiDeleteSelection'
        ])
    },
    emits: ['clearFilter', 'handleDeleteById'],
    data() {
        return {
-            filterSenderName: [],
-            multipleSelection: [],
-            currentPage: 1,
-            pageSize: 5
+            filterSenderName: []
        }
    },
    props: [],
@@ -191,14 +191,20 @@ export default {
        },
        handleSelectionChange(val) {
            // val的值为所勾选行的数组对象
-            this.multipleSelection = val
+            noticeStore.$patch((state) => {
+                state.multiDeleteSelection = val
+            })
        },
        clearFilter() {
            this.$refs.tableRef.clearFilter(['senderName'])
            this.$emit('clearFilter')
        },
-        formatter(row) {
-            return row.title
+        formatterTitle(title) {
+            if (title.length > 10) {
+                return title.substring(0, 10) + ' ...'
+            } else {
+                return title
+            }
        },
        filterTag(value, row) {
            return row.sender.username === value
@@ -237,10 +243,16 @@ export default {
        },
        handleSizeChange(pageSize) {
            // pageSize：每页多少条数据
+            noticeStore.$patch((state) => {
+                state.pageSize = pageSize
+            })
            noticeStore.selectAllNotice(this.currentPage, parseInt(pageSize))
        },
        handleCurrentChange(currentPage) {
            // currentPage：当前第几页
+            noticeStore.$patch((state) => {
+                state.currentPage = currentPage
+            })
            noticeStore.selectAllNotice(parseInt(currentPage), this.pageSize)
        }
    },
--- a/ui/src/components/notice/NoticeTypeTable.vue
+++ b/ui/src/components/notice/NoticeTypeTable.vue
@@ -15,7 +15,7 @@
            color: '#fff'
        }"
        ><el-table-column type="selection" width="65" align="center" />
-        <el-table-column type="index" label="序号" width="80" 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="enable" width="350" align="center">
            <template #default="scope">
@@ -84,8 +84,7 @@

 <script lang="ts">
 import { mapState } from 'pinia'
-import { useNoticeStore, useNoticeTypeStore } from '@/store/notice'
-const noticeStore = useNoticeStore()
+import { useNoticeTypeStore } from '@/store/notice'
 const noticeTypeStore = useNoticeTypeStore()

 export default {
@@ -93,6 +92,8 @@ export default {
    computed: {
        ...mapState(useNoticeTypeStore, [
            'total',
+            'currentPage',
+            'pageSize',
            'dialogEditTypeVisible',
            'noticeTypeList',
            'dataLoading',
@@ -105,8 +106,6 @@ export default {
        return {
            filterSenderName: [],
            multipleSelection: [],
-            currentPage: 1,
-            pageSize: 5,
            search: ''
        }
    },
@@ -116,10 +115,13 @@ export default {
            // val的值为所勾选行的数组对象
            this.multipleSelection = val
        },
+        indexFormat(index) {
+            return (this.currentPage - 1) * this.pageSize + index + 1
+        },
        switchChang(id, value) {
            noticeTypeStore.updateNoticeTypeEnable(id, value)
            setTimeout(() => {
-                noticeTypeStore.selectNoticeType()
+                noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
            }, 800)
        },
        handleOpenEditDialog(row) {
@@ -137,11 +139,17 @@ export default {
        },
        handleSizeChange(pageSize) {
            // pageSize：每页多少条数据
-            noticeStore.selectAllNotice(this.currentPage, parseInt(pageSize))
+            noticeTypeStore.$patch((state) => {
+                state.pageSize = pageSize
+            })
+            noticeTypeStore.selectNoticeType(this.currentPage, parseInt(pageSize))
        },
        handleCurrentChange(currentPage) {
            // currentPage：当前第几页
-            noticeStore.selectAllNotice(parseInt(currentPage), this.pageSize)
+            noticeTypeStore.$patch((state) => {
+                state.currentPage = currentPage
+            })
+            noticeTypeStore.selectNoticeType(parseInt(currentPage), this.pageSize)
        },
        submitEditForm() {
            this.$refs.editForm.$refs.addTypeData.validate((valid) => {
@@ -163,7 +171,7 @@ export default {
    },
    mounted() {
        noticeTypeStore.dataLoading = true
-        noticeTypeStore.selectNoticeType()
+        noticeTypeStore.selectNoticeType(1, 5)
    },
    updated() {}
 }
--- a/ui/src/pages/notice/NoticeManage.vue
+++ b/ui/src/pages/notice/NoticeManage.vue
@@ -13,6 +13,16 @@
                    <icon-pinnacle-add /> </el-icon
                >发布公告</el-button
            >
+            <el-button type="primary" :size="'large'" @click="deleteBatchByIds"
+                ><el-icon :size="SIZE_ICON_MD()" style="color: white; margin-right: 3px">
+                    <icon-pinnacle-delete /> </el-icon
+                >批量删除</el-button
+            >
+            <el-button type="primary" :size="'large'" @click="getLoading"
+                ><el-icon :size="SIZE_ICON_MD()" style="color: white; margin-right: 3px">
+                    <icon-pinnacle-reset /> </el-icon
+                >刷新数据</el-button
+            >
            <!-- 添加公告对话框-->
            <el-dialog
                v-model="dialogAddVisible"
@@ -27,7 +37,7 @@
            </el-dialog>
            <notice-manage-table
                @handleDeleteById="handleDeleteById"
-                @clearFilter="clearFilter"
+                ref="manageTable"
            ></notice-manage-table>
        </el-main>
    </el-container>
@@ -118,17 +128,51 @@ export default {
                state.editFlag = false
            })
        },
-        clearFilter() {
-            // this.selectAllNotice()
-            // location.reload()
-            this.$router.go(0)
+        getLoading() {
+            noticeStore.loading = true
+            noticeStore.selectAllNotice(this.currentPage, this.pageSize)
+        },
+        deleteBatchByIds() {
+            const multiDeleteIds = []
+            if (this.multiDeleteSelection.length > 0) {
+                for (let i = 0; i < this.multiDeleteSelection.length; i++) {
+                    multiDeleteIds.push(this.multiDeleteSelection[i].id)
+                }
+                ElMessageBox.confirm('确定是否要批量删除？该操作将无法回退', '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '我再想想',
+                    type: 'warning'
+                })
+                    .then(() => {
+                        request.post('/notice/batch', multiDeleteIds).then((response) => {
+                            if (response.data.code === 20024) {
+                                ElMessage({
+                                    message: '删除成功.',
+                                    type: 'success'
+                                })
+                                noticeStore.selectAllNotice(this.currentPage, this.pageSize)
+                            } else if (response.data.code === 20034) {
+                                ElMessage({
+                                    message: response.data.msg,
+                                    type: 'error'
+                                })
+                            }
+                        })
+                    })
+                    .catch(() => {})
+            }
        }
    },
    mounted() {
        noticeTypeStore.selectEnableNoticeType()
    },
    computed: {
-        ...mapState(useNoticeStore, ['dialogAddVisible'])
+        ...mapState(useNoticeStore, [
+            'dialogAddVisible',
+            'currentPage',
+            'pageSize',
+            'multiDeleteSelection'
+        ])
    }
 }
 </script>
--- a/ui/src/pages/notice/NoticeTypeManage.vue
+++ b/ui/src/pages/notice/NoticeTypeManage.vue
@@ -61,7 +61,9 @@ export default {
            'dialogEditTypeVisible',
            'editFlag',
            'hackReset',
-            'addTypeData'
+            'addTypeData',
+            'currentPage',
+            'pageSize'
        ])
    },
    data() {
@@ -73,7 +75,7 @@ export default {
        },
        getLoadData() {
            noticeTypeStore.dataLoading = true
-            noticeTypeStore.selectNoticeType()
+            noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
        },
        handleOpenAddDialog() {
            noticeTypeStore.$patch((state) => {
@@ -115,7 +117,7 @@ export default {
                                message: '删除成功.',
                                type: 'success'
                            })
-                            noticeTypeStore.selectNoticeType()
+                            noticeTypeStore.selectNoticeType(this.currentPage, this.pageSize)
                        } else if (response.data.code === 20034) {
                            ElMessage({
                                message: response.data.msg,
--- a/ui/src/router/notice.ts
+++ b/ui/src/router/notice.ts
@@ -4,6 +4,7 @@ const noticeRouter = {
    meta: {
        title: '公告',
        icon: shallowRef(IconPinnacleNotice),
+        requiresMenu: true,
        requiresScrollbar: false,
        requiresPadding: true
    },
@@ -16,6 +17,7 @@ const noticeRouter = {
            meta: {
                title: '公告查看',
                requiresScrollbar: false,
+                requiresMenu: true,
                requiresPadding: true
            },
            children: [
@@ -42,6 +44,7 @@ const noticeRouter = {
            name: 'noticeManage',
            meta: {
                title: '公告管理',
+                requiresMenu: true,
                requiresScrollbar: false,
                requiresPadding: true
            }
@@ -52,6 +55,7 @@ const noticeRouter = {
            name: 'noticeTypeManage',
            meta: {
                title: '公告类型管理',
+                requiresMenu: true,
                requiresScrollbar: false,
                requiresPadding: true
            }
--- a/ui/src/store/notice.ts
+++ b/ui/src/store/notice.ts
@@ -46,6 +46,8 @@ export const useNoticeStore = defineStore('notice', {
    state: () => {
        return {
            total: 0,
+            pageSize: 5,
+            currentPage: 1,
            selectData: [
                {
                    content: '',
@@ -81,6 +83,7 @@ export const useNoticeStore = defineStore('notice', {
            currentViewPage: 'All',
            hackReset: true,
            departmentList: [],
+            multiDeleteSelection: [],
            noticeShowData: {
                content: '',
                createTime: '',
@@ -225,6 +228,8 @@ export const useNoticeTypeStore = defineStore('notice_type', {
    state: () => {
        return {
            total: 0,
+            pageSize: 5,
+            currentPage: 1,
            dataLoading: true,
            dialogAddTypeVisible: false,
            dialogEditTypeVisible: false,
@@ -256,11 +261,14 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                this.enableNoticeTypeList = response.data.data
            })
        },
-        async selectNoticeType() {
-            await request.get('/notice_type').then((response) => {
+        async selectNoticeType(currentPage: number, pageSize: number) {
+            await request.get('/notice_type/page', { currentPage, pageSize }).then((response) => {
                if (response.data.code === 20021) {
                    this.noticeTypeList = response.data.data
-                    this.dataLoading = false
+                    this.total = parseInt(response.data.msg)
+                    if (this.noticeTypeList.length !== 0) {
+                        this.dataLoading = false
+                    }
                } else {
                    this.dataLoading = false
                    ElMessage({
@@ -305,7 +313,7 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                    })
                }
            })
-            await this.selectNoticeType()
+            await this.selectNoticeType(1, 5)
        },
        async handleUpdateNoticeType(updateNotice: IAddNoticeTypeData) {
            await request.put('/notice_type', updateNotice).then((response) => {
@@ -329,7 +337,7 @@ export const useNoticeTypeStore = defineStore('notice_type', {
                    })
                }
            })
-            await this.selectNoticeType()
+            await this.selectNoticeType(this.currentPage, this.pageSize)
        }
    }
 })