封装分页组件

使用模板字符串进行拼接

vue/src/api/message/manage.js

@@ -1,7 +1,7 @@
 import request from "@/config/request"
 import BASE from './baseUrl'
 
-const baseUrl = `${BASE}/manage`
+export const baseUrl = `${BASE}/manage`
 
 export function search(data) {
     return request.post(`${baseUrl}/search`, data).then(({data}) => data.data)

vue/src/component/AbstractPagination/index.vue

@@ -0,0 +1,29 @@
+<script type="jsx">
+export default {
+    name: "AbstractPagination",
+
+    functional: true,
+
+    props: {
+        model: {
+            type: Object,
+            default: () => ({total: 0, page: 1, pageSize: 15})
+        }
+    },
+
+    render(h, context) {
+        const {model: {total, page, pageSize}} = context.props
+        return (
+            <el-pagination
+                background
+                current-page={page}
+                page-size={pageSize}
+                total={total}
+                hide-on-single-page
+                layout="total, prev, pager, next, jumper"
+                {...context.data}
+            />
+        )
+    }
+}
+</script>

vue/src/component/biz/doc/DocHistory.vue

@@ -8,19 +8,12 @@
             <el-table-column align="center" label="备注" prop="info"/>
         </abstract-table>
 
-        <el-pagination
-            background
-            :current-page="searchForm.page"
-            :page-size="searchForm.pageSize"
-            :total="searchForm.total"
-            hide-on-single-page
-            layout="total, prev, pager, next, jumper"
-            @current-change="pageChange"
-        />
+        <abstract-pagination :model="searchForm" @current-change="pageChange"/>
     </div>
 </template>
 
 <script>
+import AbstractPagination from '@/component/AbstractPagination'
 import AbstractTable from "@/component/AbstractTable"
 import {searchHistory} from "@/api/doc/history"
 import {isEmpty, timeFormat} from "@/util"
@@ -28,7 +21,7 @@ import {isEmpty, timeFormat} from "@/util"
 export default {
     name: "DocHistory",
 
-    components: {AbstractTable},
+    components: {AbstractPagination, AbstractTable},
 
     props: {id: String},
 

vue/src/mixin/tablePageMixin.js

@@ -2,9 +2,12 @@
 * 列表页通用混入
 * 引用者必须要有search方法
 * */
+import AbstractPagination from '@/component/AbstractPagination'
 import AbstractTable from '@/component/AbstractTable'
 
 const mixin = {
+    components: {AbstractPagination, AbstractTable},
+
     data() {
         return {
             searchForm: {
@@ -22,8 +25,6 @@ const mixin = {
         }
     },
 
-    components: {AbstractTable},
-
     computed: {
         tablePageNeedSearchMap() {
             return this.$store.state.needSearch.map

vue/src/router/index.js

@@ -14,14 +14,21 @@
 * */
 import Vue from 'vue'
 import Router from 'vue-router'
-import store from "@/store"
 import NProgress from 'nprogress'
-import {isUserExist} from "@/util/storage"
-import {auth, needAuth} from "@/util/auth"
-import {setPageTitle, specifyRouteTitle, transformWhiteList, metaExtend} from './util'
 import {contextPath, routerMode} from '@/config'
 import constantRoutes from '@/router/constant'
 import authorityRoutes from '@/router/authority'
+import {auth, needAuth} from "@/util/auth"
+import {isUserExist} from "@/util/storage"
+import {
+    setPageTitle,
+    specifyRouteTitle,
+    transformWhiteList,
+    metaExtend,
+    needExtraRedirect,
+    initMenuAndResource,
+    iframeControl
+} from './util'
 
 Vue.use(Router)
 
@@ -74,31 +81,4 @@ router.beforeEach(async (to, from, next) => {
 
 router.afterEach(() => NProgress.done())
 
-//判断是否需要一次额外的redirect跳转
-function needExtraRedirect(to, from) {
-    //若是详情页之间的跳转，借助redirect避免组件复用
-    const isToDetailPage = to.meta.isDetailPage,
-        isFromDetailPage = from.meta.isDetailPage
-
-    return isToDetailPage !== undefined && isToDetailPage === isFromDetailPage
-}
-
-//初始化菜单和权限
-function initMenuAndResource() {
-    if (!store.state.resource.hasInitRoutes) {
-        return store.dispatch('resource/init', store.state.user)
-    }
-    return Promise.resolve()
-}
-
-//判断是否需要打开iframe
-function iframeControl(to, from) {
-    let iframe = to.meta.iframe
-    const operate = iframe ? 'open' : 'close'
-    if (to.path === `/redirect${from.path}`) {
-        iframe = from.meta.iframe
-    }
-    return store.dispatch(`iframe/${operate}`, iframe)
-}
-
 export default router

vue/src/router/util.js

@@ -1,7 +1,8 @@
 import {pathToRegexp} from 'path-to-regexp'
-import {isEmpty} from "@/util"
-import {title} from "@/config"
 import PageSkeleton from "@/component/Skeleton/PageSkeleton"
+import {title} from "@/config"
+import store from "@/store"
+import {isEmpty} from "@/util"
 
 //拼接页面标题
 export function setPageTitle(route) {
@@ -38,6 +39,7 @@ export function metaExtend(routes, meta) {
     })
 }
 
+//路由页面懒加载
 export function lazyLoadView(component) {
     const AsyncHandler = () => ({component, loading: PageSkeleton})
     return () => Promise.resolve({
@@ -47,3 +49,30 @@ export function lazyLoadView(component) {
         }
     })
 }
+
+//判断是否需要一次额外的redirect跳转
+export function needExtraRedirect(to, from) {
+    //若是详情页之间的跳转，借助redirect避免组件复用
+    const isToDetailPage = to.meta.isDetailPage,
+        isFromDetailPage = from.meta.isDetailPage
+
+    return isToDetailPage !== undefined && isToDetailPage === isFromDetailPage
+}
+
+//初始化菜单和权限
+export function initMenuAndResource() {
+    if (!store.state.resource.hasInitRoutes) {
+        return store.dispatch('resource/init', store.state.user)
+    }
+    return Promise.resolve()
+}
+
+//判断是否需要打开iframe
+export function iframeControl(to, from) {
+    let iframe = to.meta.iframe
+    const operate = iframe ? 'open' : 'close'
+    if (to.path === `/redirect${from.path}`) {
+        iframe = from.meta.iframe
+    }
+    return store.dispatch(`iframe/${operate}`, iframe)
+}

vue/src/view/message/manage/EditDialog.vue

@@ -52,16 +52,16 @@
 </template>
 
 <script>
+import dialogMixin from "@/mixin/dialogMixin"
 import AbstractForm from "@/component/AbstractForm"
 import AbstractFormItem from "@/component/AbstractForm/AbstractFormItem"
 import FormDialog from '@/component/FormDialog'
 import TinymceEditor from "@/component/TinymceEditor"
 import {SimpleMultipleUserSelector as UserSelector} from '@/component/biz/UserSelector'
-import dialogMixin from "@/mixin/dialogMixin"
-import {add, update, publish, withdraw} from "@/api/message/manage"
+import {baseUrl, add, update, publish, withdraw} from "@/api/message/manage"
 import {isEmpty, mergeObj, resetObj} from '@/util'
-import {elAlert, elConfirm, elSuccess} from "@/util/message"
 import {auth} from "@/util/auth"
+import {elAlert, elConfirm, elSuccess} from "@/util/message"
 
 export default {
     name: "EditDialog",
@@ -73,11 +73,7 @@ export default {
     props: {
         value: {type: Boolean, default: false},
         type: {type: String, default: 'see'},
-        data: {
-            type: Object,
-            default: () => ({})
-        },
-        baseUrl: String
+        data: {type: Object, default: () => ({})}
     },
 
     data() {
@@ -123,18 +119,18 @@ export default {
 
         canSave() {
             //add模式有添加权限、edit模式有编辑权限且status=0
-            return this.type === 'add' && auth(this.baseUrl + '/add')
-                || this.form.status === 0 && this.type === 'edit' && auth(this.baseUrl + '/update')
+            return this.type === 'add' && auth(`${baseUrl}/add`)
+                || this.form.status === 0 && this.type === 'edit' && auth(`${baseUrl}/update`)
         },
 
         canPublish() {
             //有发布权限、add模式或edit模式且status=0
-            return auth(this.baseUrl + '/publish') && (this.type === 'add' || this.type === 'edit' && this.form.status === 0)
+            return auth(`${baseUrl}/publish`) && (this.type === 'add' || this.type === 'edit' && this.form.status === 0)
         },
 
         canWithdraw() {
             //有撤回权限、edit模式且status=1
-            return auth(this.baseUrl + '/withdraw')
+            return auth(`${baseUrl}/withdraw`)
                 && this.type === 'edit'
                 && this.form.status === 1
         },

vue/src/view/message/manage/index.vue

@@ -46,46 +46,32 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
 
-        <edit-dialog
-            v-model="editDialog"
-            :base-url="baseUrl"
-            :data="row"
-            :type.sync="type"
-            @search="search"
-        />
+        <edit-dialog v-model="editDialog" :data="row" :type.sync="type" @search="search"/>
     </el-card>
 </template>
 
 <script>
+import tableMixin from '@/mixin/tablePageMixin'
+import EditDialog from './EditDialog'
 import SearchForm from "@/component/SearchForm"
 import SearchFormItem from "@/component/SearchForm/SearchFormItem"
-import EditDialog from './EditDialog'
-import {search, del} from "@/api/message/manage"
+import {baseUrl, search, del} from "@/api/message/manage"
 import {isEmpty} from '@/util'
-import {elConfirm, elError, elSuccess} from "@/util/message"
 import {auth} from "@/util/auth"
-import tableMixin from '@/mixin/tablePageMixin'
+import {elConfirm, elError, elSuccess} from "@/util/message"
 
 export default {
     name: "messageManagement",
 
     mixins: [tableMixin],
 
-    components: {SearchForm, SearchFormItem, EditDialog},
+    components: {EditDialog, SearchForm, SearchFormItem},
 
     data() {
         return {
-            baseUrl: '/message/manage',
             searchForm: {
                 title: null,
                 type: null,
@@ -99,15 +85,13 @@ export default {
 
     computed: {
         canAdd() {
-            return auth(this.baseUrl + '/add')
+            return auth(`${baseUrl}/add`)
         },
-
         canUpdate() {
-            return auth(this.baseUrl + '/update')
+            return auth(`${baseUrl}/update`)
         },
-
         canDel() {
-            return auth(this.baseUrl + '/del')
+            return auth(`${baseUrl}/del`)
         }
     },
 

vue/src/view/message/user/MessageStream.vue

@@ -35,15 +35,7 @@
                 </el-timeline-item>
             </el-timeline>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                hide-on-single-page
-                layout="prev, pager, next"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </template>
     </div>
 </template>

vue/src/view/purchase/inbound/index.vue

@@ -84,14 +84,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
     </el-card>
 </template>

vue/src/view/purchase/order/component/SupplierSelector.vue

@@ -23,6 +23,7 @@
                 添加供应商
             </el-button>
         </el-row>
+
         <el-scrollbar>
             <el-row class="table-container">
                 <liner-progress :show="config.loading"/>
@@ -51,32 +52,30 @@
                         </template>
                     </el-table-column>
                 </el-table>
-                <el-pagination
-                    background
-                    :current-page="searchForm.page"
-                    :page-size="searchForm.pageSize"
-                    :total="searchForm.total"
-                    layout="total, prev, pager, next, jumper"
-                    @current-change="pageChange"
-                />
+
+                <abstract-pagination :model="searchForm" @current-change="pageChange"/>
             </el-row>
         </el-scrollbar>
     </el-dialog>
 </template>
 
 <script>
-import LinerProgress from '@/component/LinerProgress'
 import dialogMixin from "@/mixin/dialogMixin"
 import tableMixin from '@/mixin/tablePageMixin'
+import LinerProgress from '@/component/LinerProgress'
 import {getSuppliers} from "@/api/system/supplier"
-import {elError} from "@/util/message"
 import {auth} from "@/util/auth"
+import {elError} from "@/util/message"
 
 export default {
     name: "SupplierSelector",
+
     mixins: [dialogMixin, tableMixin],
+
     components: {LinerProgress},
+
     props: {value: Boolean},
+
     data() {
         return {
             searchForm: {
@@ -84,11 +83,13 @@ export default {
             }
         }
     },
+
     computed: {
         canGoToSysSupplierPage() {
             return auth('/system/supplier')
         }
     },
+
     methods: {
         search() {
             if (!this.value || this.config.loading) return

vue/src/view/purchase/order/index.vue

@@ -112,14 +112,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
     </el-card>
 </template>

vue/src/view/sell/order/component/CustomerSelector.vue

@@ -37,23 +37,16 @@
                     </el-table-column>
                 </abstract-table>
 
-                <el-pagination
-                    background
-                    :current-page="searchForm.page"
-                    :page-size="searchForm.pageSize"
-                    :total="searchForm.total"
-                    layout="total, prev, pager, next, jumper"
-                    @current-change="pageChange"
-                />
+                <abstract-pagination :model="searchForm" @current-change="pageChange"/>
             </el-row>
         </el-scrollbar>
     </el-dialog>
 </template>
 
 <script>
-import LinerProgress from '@/component/LinerProgress'
 import dialogMixin from "@/mixin/dialogMixin"
 import tableMixin from '@/mixin/tablePageMixin'
+import LinerProgress from '@/component/LinerProgress'
 import {getCustomers} from "@/api/system/customer"
 import {elError} from "@/util/message"
 

vue/src/view/sell/order/component/StockSelector.vue

@@ -31,23 +31,16 @@
                     <el-table-column align="center" label="库存数量" prop="totalNum" show-overflow-tooltip/>
                 </el-table>
 
-                <el-pagination
-                    background
-                    :current-page="searchForm.page"
-                    :page-size="searchForm.pageSize"
-                    :total="searchForm.total"
-                    layout="total, prev, pager, next, jumper"
-                    @current-change="pageChange"
-                />
+                <abstract-pagination :model="searchForm" @current-change="pageChange"/>
             </el-row>
         </el-scrollbar>
     </el-dialog>
 </template>
 
 <script>
-import LinerProgress from '@/component/LinerProgress'
 import dialogMixin from "@/mixin/dialogMixin"
 import tableMixin from '@/mixin/tablePageMixin'
+import LinerProgress from '@/component/LinerProgress'
 import {search} from "@/api/stock/current"
 import {elError} from "@/util/message"
 

vue/src/view/sell/order/index.vue

@@ -115,14 +115,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
     </el-card>
 </template>

vue/src/view/sell/outbound/index.vue

@@ -87,14 +87,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
     </el-card>
 </template>

vue/src/view/stock/current/index.vue

@@ -51,14 +51,7 @@
                     <el-table-column align="center" label="总 值" prop="totalPrice" show-overflow-tooltip/>
                 </abstract-table>
 
-                <el-pagination
-                    background
-                    :current-page="searchForm.page"
-                    :page-size="searchForm.pageSize"
-                    :total="searchForm.total"
-                    layout="total, prev, pager, next, jumper"
-                    @current-change="pageChange"
-                />
+                <abstract-pagination :model="searchForm" @current-change="pageChange"/>
             </el-row>
         </extra-area>
 
@@ -67,6 +60,7 @@
 </template>
 
 <script>
+import tableMixin from '@/mixin/tablePageMixin'
 import CategoryTree from '@/component/biz/CategoryTree'
 import DetailDialog from "./DetailDialog"
 import ExtraArea from '@/component/ExtraArea'
@@ -74,10 +68,9 @@ import SearchForm from "@/component/SearchForm"
 import SearchFormItem from "@/component/SearchForm/SearchFormItem"
 import {baseUrl, search} from "@/api/stock/current"
 import {isEmpty, debounce} from "@/util"
-import {plus} from "@/util/math"
 import {exportExcel} from "@/util/excel"
+import {plus} from "@/util/math"
 import {getNodeId} from "@/util/tree"
-import tableMixin from '@/mixin/tablePageMixin'
 
 export default {
     name: "currentStock",

vue/src/view/system/customer/index.vue

@@ -66,14 +66,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
@@ -81,24 +74,22 @@
 </template>
 
 <script>
+import tableMixin from '@/mixin/tablePageMixin'
+import EditDialog from './EditDialog'
+import RegionSelector from "@/component/RegionSelector"
 import SearchForm from "@/component/SearchForm"
 import SearchFormItem from "@/component/SearchForm/SearchFormItem"
-import RegionSelector from "@/component/RegionSelector"
-import EditDialog from './EditDialog'
-import {delCustomer, getCustomers, getLimitRegion} from "@/api/system/customer"
+import {baseUrl, delCustomer, getCustomers, getLimitRegion} from "@/api/system/customer"
 import {isEmpty} from '@/util'
-import {elConfirm, elError, elSuccess} from "@/util/message"
 import {auth} from "@/util/auth"
-import tableMixin from '@/mixin/tablePageMixin'
-
-const baseUrl = '/system/customer'
+import {elConfirm, elError, elSuccess} from "@/util/message"
 
 export default {
     name: "customerManagement",
 
     mixins: [tableMixin],
 
-    components: {SearchForm, SearchFormItem, EditDialog, RegionSelector},
+    components: {EditDialog, RegionSelector, SearchForm, SearchFormItem},
 
     data() {
         return {
@@ -120,15 +111,13 @@ export default {
 
     computed: {
         canAdd() {
-            return auth(baseUrl + '/add')
+            return auth(`${baseUrl}/add`)
         },
-
         canUpdate() {
-            return auth(baseUrl + '/update')
+            return auth(`${baseUrl}/update`)
         },
-
         canDel() {
-            return auth(baseUrl + '/del')
+            return auth(`${baseUrl}/del`)
         }
     },
 

vue/src/view/system/resource/index.vue

@@ -19,23 +19,21 @@
 </template>
 
 <script>
+import tableMixin from '@/mixin/tablePageMixin'
+import EditDialog from './EditDialog'
 import SearchForm from "@/component/SearchForm"
 import SearchFormItem from "@/component/SearchForm/SearchFormItem"
-import EditDialog from './EditDialog'
-import {getAllResources} from "@/api/system/resource"
-import {elError, elSuccess} from "@/util/message"
+import {baseUrl, getAllResources} from "@/api/system/resource"
 import {auth} from "@/util/auth"
+import {elError, elSuccess} from "@/util/message"
 import {createTreeByWorker} from "@/util/tree"
-import tableMixin from '@/mixin/tablePageMixin'
-
-const baseUrl = '/system/resource'
 
 export default {
     name: "resourceManagement",
 
     mixins: [tableMixin],
 
-    components: {SearchForm, SearchFormItem, EditDialog},
+    components: {EditDialog, SearchForm, SearchFormItem},
 
     data() {
         return {
@@ -45,7 +43,7 @@ export default {
 
     computed: {
         canUpdate() {
-            return auth(baseUrl + '/update')
+            return auth(`${baseUrl}/update`)
         }
     },
 

vue/src/view/system/role/index.vue

@@ -50,14 +50,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>

vue/src/view/system/supplier/index.vue

@@ -66,14 +66,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
@@ -81,24 +74,22 @@
 </template>
 
 <script>
+import tableMixin from '@/mixin/tablePageMixin'
+import EditDialog from './EditDialog'
+import RegionSelector from "@/component/RegionSelector"
 import SearchForm from "@/component/SearchForm"
 import SearchFormItem from "@/component/SearchForm/SearchFormItem"
-import RegionSelector from "@/component/RegionSelector"
-import EditDialog from './EditDialog'
-import {delSupplier, getLimitRegion, getSuppliers} from "@/api/system/supplier"
+import {baseUrl, delSupplier, getLimitRegion, getSuppliers} from "@/api/system/supplier"
 import {isEmpty} from '@/util'
-import {elConfirm, elError, elSuccess} from "@/util/message"
 import {auth} from "@/util/auth"
-import tableMixin from '@/mixin/tablePageMixin'
-
-const baseUrl = '/system/supplier'
+import {elConfirm, elError, elSuccess} from "@/util/message"
 
 export default {
     name: "supplierManagement",
 
     mixins: [tableMixin],
 
-    components: {SearchForm, SearchFormItem, EditDialog, RegionSelector},
+    components: {EditDialog, RegionSelector, SearchForm, SearchFormItem},
 
     data() {
         return {
@@ -120,15 +111,13 @@ export default {
 
     computed: {
         canAdd() {
-            return auth(baseUrl + '/add')
+            return auth(`${baseUrl}/add`)
         },
-
         canUpdate() {
-            return auth(baseUrl + '/update')
+            return auth(`${baseUrl}/update`)
         },
-
         canDel() {
-            return auth(baseUrl + '/del')
+            return auth(`${baseUrl}/del`)
         }
     },
 

vue/src/view/system/user/index.vue

@@ -71,14 +71,7 @@
                 </el-table-column>
             </abstract-table>
 
-            <el-pagination
-                background
-                :current-page="searchForm.page"
-                :page-size="searchForm.pageSize"
-                :total="searchForm.total"
-                layout="total, prev, pager, next, jumper"
-                @current-change="pageChange"
-            />
+            <abstract-pagination :model="searchForm" @current-change="pageChange"/>
         </el-row>
 
         <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>

vue/src/view/userCenter/component/LoginHistory.vue

@@ -18,14 +18,7 @@
             </el-table-column>
         </abstract-table>
 
-        <el-pagination
-            background
-            :current-page="searchForm.page"
-            :page-size="searchForm.pageSize"
-            :total="searchForm.total"
-            layout="total, prev, pager, next, jumper"
-            @current-change="pageChange"
-        />
+        <abstract-pagination :model="searchForm" @current-change="pageChange"/>
     </div>
 </template>
 

vue/src/view/userCenter/component/UserAction.vue

@@ -25,14 +25,7 @@
             </el-table-column>
         </abstract-table>
 
-        <el-pagination
-            background
-            :current-page="searchForm.page"
-            :page-size="searchForm.pageSize"
-            :total="searchForm.total"
-            layout="total, prev, pager, next, jumper"
-            @current-change="pageChange"
-        />
+        <abstract-pagination :model="searchForm" @current-change="pageChange"/>
     </div>
 </template>