From 30405f3fdb2af669658d0447c5bc36ebfe644a84 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Thu, 6 Aug 2020 13:57:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E5=88=86=E9=A1=B5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E4=BD=BF=E7=94=A8=E6=A8=A1=E6=9D=BF=E5=AD=97?=
 =?UTF-8?q?=E7=AC=A6=E4=B8=B2=E8=BF=9B=E8=A1=8C=E6=8B=BC=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/api/message/manage.js                 |  2 +-
 .../component/AbstractPagination/index.vue    | 29 +++++++++++++
 vue/src/component/biz/doc/DocHistory.vue      | 13 ++----
 vue/src/mixin/tablePageMixin.js               |  5 ++-
 vue/src/router/index.js                       | 42 +++++--------------
 vue/src/router/util.js                        | 33 ++++++++++++++-
 vue/src/view/message/manage/EditDialog.vue    | 20 ++++-----
 vue/src/view/message/manage/index.vue         | 36 +++++-----------
 vue/src/view/message/user/MessageStream.vue   | 10 +----
 vue/src/view/purchase/inbound/index.vue       |  9 +---
 .../order/component/SupplierSelector.vue      | 21 +++++-----
 vue/src/view/purchase/order/index.vue         |  9 +---
 .../sell/order/component/CustomerSelector.vue | 11 +----
 .../sell/order/component/StockSelector.vue    | 11 +----
 vue/src/view/sell/order/index.vue             |  9 +---
 vue/src/view/sell/outbound/index.vue          |  9 +---
 vue/src/view/stock/current/index.vue          | 13 ++----
 vue/src/view/system/customer/index.vue        | 31 +++++---------
 vue/src/view/system/resource/index.vue        | 14 +++----
 vue/src/view/system/role/index.vue            |  9 +---
 vue/src/view/system/supplier/index.vue        | 31 +++++---------
 vue/src/view/system/user/index.vue            |  9 +---
 .../userCenter/component/LoginHistory.vue     |  9 +---
 .../view/userCenter/component/UserAction.vue  |  9 +---
 24 files changed, 149 insertions(+), 245 deletions(-)
 create mode 100644 vue/src/component/AbstractPagination/index.vue

diff --git a/vue/src/api/message/manage.js b/vue/src/api/message/manage.js
index f83268e..544243e 100644
--- a/vue/src/api/message/manage.js
+++ b/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)
diff --git a/vue/src/component/AbstractPagination/index.vue b/vue/src/component/AbstractPagination/index.vue
new file mode 100644
index 0000000..265ef8c
--- /dev/null
+++ b/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>
diff --git a/vue/src/component/biz/doc/DocHistory.vue b/vue/src/component/biz/doc/DocHistory.vue
index f2aee5d..77373ee 100644
--- a/vue/src/component/biz/doc/DocHistory.vue
+++ b/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},
 
diff --git a/vue/src/mixin/tablePageMixin.js b/vue/src/mixin/tablePageMixin.js
index e223a7a..d7fd4b4 100644
--- a/vue/src/mixin/tablePageMixin.js
+++ b/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
diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index a3db970..c1eca4b 100644
--- a/vue/src/router/index.js
+++ b/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
diff --git a/vue/src/router/util.js b/vue/src/router/util.js
index 70b2a3c..9de3c21 100644
--- a/vue/src/router/util.js
+++ b/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)
+}
diff --git a/vue/src/view/message/manage/EditDialog.vue b/vue/src/view/message/manage/EditDialog.vue
index 79c923b..1fc40ad 100644
--- a/vue/src/view/message/manage/EditDialog.vue
+++ b/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
         },
diff --git a/vue/src/view/message/manage/index.vue b/vue/src/view/message/manage/index.vue
index a6fbdda..6fffbc9 100644
--- a/vue/src/view/message/manage/index.vue
+++ b/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`)
         }
     },
 
diff --git a/vue/src/view/message/user/MessageStream.vue b/vue/src/view/message/user/MessageStream.vue
index 978d5f9..5b09994 100644
--- a/vue/src/view/message/user/MessageStream.vue
+++ b/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>
diff --git a/vue/src/view/purchase/inbound/index.vue b/vue/src/view/purchase/inbound/index.vue
index 98e2c7f..e1675da 100644
--- a/vue/src/view/purchase/inbound/index.vue
+++ b/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>
diff --git a/vue/src/view/purchase/order/component/SupplierSelector.vue b/vue/src/view/purchase/order/component/SupplierSelector.vue
index bbc85be..83ae1ce 100644
--- a/vue/src/view/purchase/order/component/SupplierSelector.vue
+++ b/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
diff --git a/vue/src/view/purchase/order/index.vue b/vue/src/view/purchase/order/index.vue
index 9d7d789..901c757 100644
--- a/vue/src/view/purchase/order/index.vue
+++ b/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>
diff --git a/vue/src/view/sell/order/component/CustomerSelector.vue b/vue/src/view/sell/order/component/CustomerSelector.vue
index cc0c9e5..e18c463 100644
--- a/vue/src/view/sell/order/component/CustomerSelector.vue
+++ b/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"
 
diff --git a/vue/src/view/sell/order/component/StockSelector.vue b/vue/src/view/sell/order/component/StockSelector.vue
index 646eb9f..218599d 100644
--- a/vue/src/view/sell/order/component/StockSelector.vue
+++ b/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"
 
diff --git a/vue/src/view/sell/order/index.vue b/vue/src/view/sell/order/index.vue
index 1200fd4..34c5870 100644
--- a/vue/src/view/sell/order/index.vue
+++ b/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>
diff --git a/vue/src/view/sell/outbound/index.vue b/vue/src/view/sell/outbound/index.vue
index a04bce7..a6af18c 100644
--- a/vue/src/view/sell/outbound/index.vue
+++ b/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>
diff --git a/vue/src/view/stock/current/index.vue b/vue/src/view/stock/current/index.vue
index 5b35402..f603e55 100644
--- a/vue/src/view/stock/current/index.vue
+++ b/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",
diff --git a/vue/src/view/system/customer/index.vue b/vue/src/view/system/customer/index.vue
index a27a3a7..b07b5c3 100644
--- a/vue/src/view/system/customer/index.vue
+++ b/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`)
         }
     },
 
diff --git a/vue/src/view/system/resource/index.vue b/vue/src/view/system/resource/index.vue
index 4c5993d..cf2e195 100644
--- a/vue/src/view/system/resource/index.vue
+++ b/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`)
         }
     },
 
diff --git a/vue/src/view/system/role/index.vue b/vue/src/view/system/role/index.vue
index 856f90f..47084ec 100644
--- a/vue/src/view/system/role/index.vue
+++ b/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"/>
diff --git a/vue/src/view/system/supplier/index.vue b/vue/src/view/system/supplier/index.vue
index a8c620b..c60efa3 100644
--- a/vue/src/view/system/supplier/index.vue
+++ b/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`)
         }
     },
 
diff --git a/vue/src/view/system/user/index.vue b/vue/src/view/system/user/index.vue
index fab69d1..1caedec 100644
--- a/vue/src/view/system/user/index.vue
+++ b/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"/>
diff --git a/vue/src/view/userCenter/component/LoginHistory.vue b/vue/src/view/userCenter/component/LoginHistory.vue
index 557561e..2f65a8c 100644
--- a/vue/src/view/userCenter/component/LoginHistory.vue
+++ b/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>
 
diff --git a/vue/src/view/userCenter/component/UserAction.vue b/vue/src/view/userCenter/component/UserAction.vue
index 7260d45..e424831 100644
--- a/vue/src/view/userCenter/component/UserAction.vue
+++ b/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>