From 6874f958a5bfc3a83be3909ce2148a5954286e98 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Tue, 15 Sep 2020 17:52:13 +0800
Subject: [PATCH] add data-list mixin

---
 vueJs/src/api/organizationunit.ts             |   2 +-
 vueJs/src/api/roles.ts                        |   2 +-
 vueJs/src/api/tenant-management.ts            |   1 -
 vueJs/src/mixins/DataListMiXin.ts             |  99 +++++++++++++++++
 .../views/admin/apigateway/aggregateRoute.vue |  84 +++++----------
 vueJs/src/views/admin/apigateway/global.vue   |  70 +++++-------
 vueJs/src/views/admin/apigateway/group.vue    |  77 +++++---------
 vueJs/src/views/admin/apigateway/route.vue    |  82 +++++---------
 .../identityServer/api-resources/index.vue    |  81 +++++---------
 .../admin/identityServer/client/index.vue     | 100 ++++++------------
 .../identity-resources/index.vue              |  74 ++++---------
 .../components/RoleOrganizationUint.vue       |  43 +++-----
 .../components/UserOrganizationUint.vue       |  29 +++--
 vueJs/src/views/admin/roles/index.vue         |  45 ++++----
 vueJs/src/views/admin/tenants/index.vue       |  71 ++++---------
 vueJs/src/views/admin/users/index.vue         |  72 ++++---------
 vueJs/src/views/file-management/index.vue     |  77 +++++---------
 17 files changed, 410 insertions(+), 599 deletions(-)
 create mode 100644 vueJs/src/mixins/DataListMiXin.ts

diff --git a/vueJs/src/api/organizationunit.ts b/vueJs/src/api/organizationunit.ts
index b48a0adb7..865ec9f17 100644
--- a/vueJs/src/api/organizationunit.ts
+++ b/vueJs/src/api/organizationunit.ts
@@ -204,7 +204,7 @@ export class OrganizationUnitGetRoleByPaged extends PagedAndSortedResultRequestD
   /** 主键标识 */
   id!: string
   /** 过滤字符 */
-  filter!: string
+  filter = ''
 }
 
 /** 组织机构创建对象 */
diff --git a/vueJs/src/api/roles.ts b/vueJs/src/api/roles.ts
index fc39f2a55..d365b1a95 100644
--- a/vueJs/src/api/roles.ts
+++ b/vueJs/src/api/roles.ts
@@ -66,7 +66,7 @@ export class RoleDto extends RoleBaseDto {
 }
 
 export class RoleGetPagedDto extends PagedAndSortedResultRequestDto {
-  filter?: string
+  filter = ''
 }
 
 export class CreateRoleDto extends RoleBaseDto {
diff --git a/vueJs/src/api/tenant-management.ts b/vueJs/src/api/tenant-management.ts
index b4a741982..65b9c9f3c 100644
--- a/vueJs/src/api/tenant-management.ts
+++ b/vueJs/src/api/tenant-management.ts
@@ -87,7 +87,6 @@ export class TenantGetByPaged extends PagedAndSortedResultRequestDto {
     this.filter = ''
     this.sorting = ''
     this.skipCount = 1
-    this.maxResultCount = 25
   }
 }
 
diff --git a/vueJs/src/mixins/DataListMiXin.ts b/vueJs/src/mixins/DataListMiXin.ts
new file mode 100644
index 000000000..01303f6bc
--- /dev/null
+++ b/vueJs/src/mixins/DataListMiXin.ts
@@ -0,0 +1,99 @@
+import { Component, Vue } from 'vue-property-decorator'
+import { PagedResultDto, ListResultDto, PagedAndSortedResultRequestDto } from '@/api/types'
+/**
+ * 数据列表mixin
+ * 复写大部分数据列表事件
+ */
+@Component
+export default class DataListMiXin extends Vue {
+  /** 数据列表 */
+  public dataList = new Array<any>()
+  /** 数据总数 */
+  public dataTotal = 0
+  /** 是否正在加载数据 */
+  public dataLoading = false
+  /** 查询过滤器
+   *如果继承自分页查询接口的其他过滤类型,需要重写初始化类型
+   */
+  public dataFilter = new PagedAndSortedResultRequestDto()
+
+  /**
+   * 刷新数据
+   */
+  protected refreshData() {
+    this.dataLoading = true
+    this.getList(this.dataFilter)
+      .then(res => {
+        this.dataList = res.items
+        this.dataTotal = res.items.length
+      })
+      .finally(() => {
+        this.dataLoading = false
+      })
+  }
+
+  /**
+   * 刷新分页数据
+   */
+  protected refreshPagedData() {
+    this.dataLoading = true
+    this.getPagedList(this.dataFilter)
+      .then(res => {
+        this.dataList = res.items
+        this.dataTotal = res.totalCount
+      })
+      .finally(() => {
+        this.dataLoading = false
+      })
+  }
+
+  /**
+   * 重写已执行具体查询数据逻辑
+   */
+  protected getList(filter: any): Promise<ListResultDto<any>> {
+    console.log(filter)
+    return new Promise<ListResultDto<any>>((resolve) => {
+      return resolve(new ListResultDto<any>())
+    })
+  }
+
+  /** 获取空数据 */
+  protected getEmptyList() {
+    return new Promise<ListResultDto<any>>((resolve) => {
+      return resolve(new ListResultDto<any>())
+    })
+  }
+
+  /**
+   * 重写以执行具体查询分页数据逻辑
+   * @param filter 查询过滤器
+   */
+  protected getPagedList(filter: any): Promise<PagedResultDto<any>> {
+    console.log(filter)
+    return this.getEmptyPagedList()
+  }
+
+  /** 获取空分页数据 */
+  protected getEmptyPagedList() {
+    return new Promise<PagedResultDto<any>>((resolve) => {
+      return resolve(new PagedResultDto<any>())
+    })
+  }
+
+  /**
+   * 排序变更事件
+   * @param column 事件列
+   */
+  protected handleSortChange(column: any) {
+    this.dataFilter.sorting = column.prop
+  }
+
+  /**
+   * 本地化接口
+   * @param name 本地化名称
+   * @param values 参数
+   */
+  protected l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
+}
diff --git a/vueJs/src/views/admin/apigateway/aggregateRoute.vue b/vueJs/src/views/admin/apigateway/aggregateRoute.vue
index 7d8ec5f21..4f34afba0 100644
--- a/vueJs/src/views/admin/apigateway/aggregateRoute.vue
+++ b/vueJs/src/views/admin/apigateway/aggregateRoute.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('apiGateWay.appId') }}</label>
       <el-select
-        v-model="aggregateRouteGetPagedFilter.appId"
+        v-model="dataFilter.appId"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
         :placeholder="$t('pleaseSelectBy', {name: $t('apiGateWay.appId')})"
@@ -23,7 +23,7 @@
         style="padding-left:10px;"
       >{{ $t('queryFilter') }}</label>
       <el-input
-        v-model="aggregateRouteGetPagedFilter.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -32,7 +32,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetAggregateRoutes"
+        @click="refreshPagedData"
       >
         {{ $t('searchList') }}
       </el-button>
@@ -47,9 +47,9 @@
     </div>
 
     <el-table
-      v-loading="aggregateRouteListLoading"
+      v-loading="dataLoading"
       row-key="reRouteId"
-      :data="aggregateRouteList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -172,11 +172,11 @@
     </el-table>
 
     <Pagination
-      v-show="routesCount>0"
-      :total="routesCount"
-      :page.sync="aggregateRouteGetPagedFilter.skipCount"
-      :limit.sync="aggregateRouteGetPagedFilter.maxResultCount"
-      @pagination="handleGetAggregateRoutes"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
       @sort-change="handleSortChange"
     />
 
@@ -215,7 +215,8 @@
 
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import AggregateRouteConfigEditForm from './components/AggregateRouteConfigEditForm.vue'
 import AggregateRouteCreateOrEditForm from './components/AggregateRouteCreateOrEditForm.vue'
@@ -244,31 +245,15 @@ import ApiGatewayService, { RouteGroupAppIdDto, AggregateReRoute, AggregateReRou
     }
   }
 })
-export default class extends Vue {
-  private editAggregateRouteId: string
-  private routesCount: number
-  private editRouteTitle: any
-  private aggregateRouteList: AggregateReRoute[]
-  private aggregateRouteListLoading: boolean
-  private aggregateRouteGetPagedFilter: AggregateReRouteGetByPaged
-  private routeGroupAppIdOptions: RouteGroupAppIdDto[]
+export default class extends mixins(DataListMiXin) {
+  private editAggregateRouteId = ''
+  private editRouteTitle = ''
+  private routeGroupAppIdOptions = new Array<RouteGroupAppIdDto>()
 
-  private showEditAggregateRouteDialog: boolean
-  private showEditAggregateRouteConfigDialog: boolean
+  private showEditAggregateRouteDialog = false
+  private showEditAggregateRouteConfigDialog = false
 
-  constructor() {
-    super()
-    this.editAggregateRouteId = ''
-    this.routesCount = 0
-    this.editRouteTitle = ''
-    this.aggregateRouteListLoading = false
-    this.aggregateRouteList = new Array<AggregateReRoute>()
-    this.aggregateRouteGetPagedFilter = new AggregateReRouteGetByPaged()
-    this.routeGroupAppIdOptions = new Array<RouteGroupAppIdDto>()
-
-    this.showEditAggregateRouteDialog = false
-    this.showEditAggregateRouteConfigDialog = false
-  }
+  public dataFilter = new AggregateReRouteGetByPaged()
 
   mounted() {
     ApiGatewayService.getRouteGroupAppIds().then(appKeys => {
@@ -276,23 +261,14 @@ export default class extends Vue {
     })
   }
 
-  private handleGetAggregateRoutes() {
-    if (this.aggregateRouteGetPagedFilter.appId) {
-      this.aggregateRouteListLoading = true
-      ApiGatewayService.getAggregateReRoutes(this.aggregateRouteGetPagedFilter).then(routes => {
-        this.aggregateRouteList = routes.items
-        this.routesCount = routes.totalCount
-      }).finally(() => {
-        this.aggregateRouteListLoading = false
-      })
+  protected getPagedList(filter: any) {
+    if (filter.appId) {
+      return ApiGatewayService.getAggregateReRoutes(filter)
     } else {
       const errorMessage = this.$t('apiGateWay.appIdHasRequired').toString()
       this.$message.warning(errorMessage)
     }
-  }
-
-  private handleSortChange(column: any) {
-    this.aggregateRouteGetPagedFilter.sorting = column.prop
+    return this.getEmptyPagedList()
   }
 
   private handleCommand(command: {key: string, row: AggregateReRoute }) {
@@ -314,7 +290,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             ApiGatewayService.deleteAggregateReRoute(reRouteId).then(() => {
               this.$message.success(this.l('apiGateWay.deleteAggregateRouteSuccess', { name: name }))
-              this.handleGetAggregateRoutes()
+              this.refreshPagedData()
             })
           }
         }
@@ -323,9 +299,9 @@ export default class extends Vue {
 
   private handleCreateOrEditAggregateRoute(reRouteId: string, name: string) {
     this.editAggregateRouteId = reRouteId
-    this.editRouteTitle = this.$t('apiGateWay.createAggregateRoute')
+    this.editRouteTitle = this.l('apiGateWay.createAggregateRoute')
     if (reRouteId) {
-      this.editRouteTitle = this.$t('apiGateWay.updateAggregateRouteByName', { name: name })
+      this.editRouteTitle = this.l('apiGateWay.updateAggregateRouteByName', { name: name })
     }
     this.showEditAggregateRouteDialog = true
   }
@@ -334,8 +310,8 @@ export default class extends Vue {
     this.editAggregateRouteId = ''
     this.editRouteTitle = ''
     this.showEditAggregateRouteDialog = false
-    if (changed && this.aggregateRouteGetPagedFilter.appId) {
-      this.handleGetAggregateRoutes()
+    if (changed && this.dataFilter.appId) {
+      this.refreshPagedData()
     }
   }
 
@@ -343,10 +319,6 @@ export default class extends Vue {
     this.editAggregateRouteId = ''
     this.showEditAggregateRouteConfigDialog = false
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/apigateway/global.vue b/vueJs/src/views/admin/apigateway/global.vue
index 5096e746a..d2fddd51c 100644
--- a/vueJs/src/views/admin/apigateway/global.vue
+++ b/vueJs/src/views/admin/apigateway/global.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('queryFilter') }}</label>
       <el-input
-        v-model="globalConfigurationGetQuery.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -15,7 +15,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handledGetGlobalConfigurations"
+        @click="refreshPagedData"
       >
         {{ $t('searchList') }}
       </el-button>
@@ -30,9 +30,9 @@
     </div>
 
     <el-table
-      v-loading="globalConfigurationsLoading"
+      v-loading="dataLoading"
       row-key="itemId"
-      :data="globalConfigurations"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -138,11 +138,11 @@
     </el-table>
 
     <Pagination
-      v-show="globalConfigurationsCount>0"
-      :total="globalConfigurationsCount"
-      :page.sync="globalConfigurationGetQuery.skipCount"
-      :limit.sync="globalConfigurationGetQuery.maxResultCount"
-      @pagination="handledGetGlobalConfigurations"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
     />
 
     <el-dialog
@@ -162,10 +162,11 @@
 
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import GlobalCreateOrEditForm from './components/GlobalCreateOrEditForm.vue'
-import ApiGatewayService, { GlobalGetByPagedDto, GlobalConfigurationDto } from '@/api/apigateway'
+import ApiGatewayService, { GlobalGetByPagedDto } from '@/api/apigateway'
 
 @Component({
   name: 'GlobalRoute',
@@ -177,44 +178,26 @@ import ApiGatewayService, { GlobalGetByPagedDto, GlobalConfigurationDto } from '
     checkPermission
   }
 })
-export default class extends Vue {
-  private editGlobalConfigurationTitle!: any
-  private globalConfigurationsCount!: number
-  private globalConfigurationsLoading!: boolean
-  private showEditGlobalConfiguration!: boolean
-  private editGlobalConfigurationAppId!: string
-  private globalConfigurations!: GlobalConfigurationDto[]
-  private globalConfigurationGetQuery!: GlobalGetByPagedDto
+export default class extends mixins(DataListMiXin) {
+  private editGlobalConfigurationTitle = ''
+  private showEditGlobalConfiguration = false
+  private editGlobalConfigurationAppId = ''
 
-  constructor() {
-    super()
-    this.globalConfigurationsCount = 0
-    this.editGlobalConfigurationTitle = ''
-    this.editGlobalConfigurationAppId = ''
-    this.globalConfigurationsLoading = false
-    this.showEditGlobalConfiguration = false
-    this.globalConfigurationGetQuery = new GlobalGetByPagedDto()
-    this.globalConfigurations = new Array<GlobalConfigurationDto>()
-  }
+  public dataFilter = new GlobalGetByPagedDto()
 
   mounted() {
-    this.handledGetGlobalConfigurations()
+    this.refreshPagedData()
   }
 
-  private handledGetGlobalConfigurations() {
-    this.globalConfigurationsLoading = true
-    ApiGatewayService.getGlobalConfigurations(this.globalConfigurationGetQuery).then(globals => {
-      this.globalConfigurations = globals.items
-      this.globalConfigurationsCount = globals.totalCount
-      this.globalConfigurationsLoading = false
-    })
+  protected getPagedList(filter: any) {
+    return ApiGatewayService.getGlobalConfigurations(filter)
   }
 
   private handleCreateOrEditGlobalConfiguration(appId: string) {
     this.editGlobalConfigurationAppId = appId
-    this.editGlobalConfigurationTitle = this.$t('apiGateWay.createGlobal')
+    this.editGlobalConfigurationTitle = this.l('apiGateWay.createGlobal')
     if (appId) {
-      this.editGlobalConfigurationTitle = this.$t('apiGateWay.updateGlobalByApp', { name: appId })
+      this.editGlobalConfigurationTitle = this.l('apiGateWay.updateGlobalByApp', { name: appId })
     }
     this.showEditGlobalConfiguration = true
   }
@@ -224,7 +207,7 @@ export default class extends Vue {
     this.editGlobalConfigurationTitle = ''
     this.showEditGlobalConfiguration = false
     if (changed) {
-      this.handledGetGlobalConfigurations()
+      this.refreshPagedData()
     }
   }
 
@@ -237,15 +220,10 @@ export default class extends Vue {
           await ApiGatewayService.deleteGlobalConfiguration(itemId)
           const successMessage = this.$t('dataHasBeenDeleted', { name: appId }).toString()
           this.$message.success(successMessage)
-          this.handledGetGlobalConfigurations()
+          this.refreshPagedData()
         }
       }
     })
   }
-
-  /** 响应表格排序事件 */
-  private handleSortChange(column: any) {
-    this.globalConfigurationGetQuery.sorting = column.prop
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/apigateway/group.vue b/vueJs/src/views/admin/apigateway/group.vue
index 3d5de6173..c121ab8e8 100644
--- a/vueJs/src/views/admin/apigateway/group.vue
+++ b/vueJs/src/views/admin/apigateway/group.vue
@@ -6,7 +6,7 @@
         style="padding-left:0;"
       >{{ $t('apiGateWay.appId') }}</label>
       <el-input
-        v-model="routeGroupQuery.appId"
+        v-model="dataFilter.appId"
         :placeholder="$t('apiGateWay.appId')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -16,7 +16,7 @@
         style="padding-left:10px;"
       >{{ $t('queryFilter') }}</label>
       <el-input
-        v-model="routeGroupQuery.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -25,7 +25,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetRouteGroups"
+        @click="refreshPagedData"
       >
         {{ $t('searchList') }}
       </el-button>
@@ -40,14 +40,13 @@
     </div>
 
     <el-table
-      v-loading="routeGroupListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="routeGroupList"
+      :data="dataList"
       border
       fit
       highlight-current-row
       style="width: 100%;"
-      :default-sort="sortRule"
       @sort-change="handleSortChange"
     >
       <el-table-column
@@ -155,11 +154,11 @@
     </el-table>
 
     <Pagination
-      v-show="routeGroupCount>0"
-      :total="routeGroupCount"
-      :page.sync="routeGroupQuery.skipCount"
-      :limit.sync="routeGroupQuery.maxResultCount"
-      @pagination="handleGetRouteGroups"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
     />
 
     <el-dialog
@@ -179,10 +178,11 @@
 <script lang="ts">
 import { dateFormat } from '@/utils'
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import RouteGroupCreateOrEditForm from './components/RouteGroupCreateOrEditForm.vue'
-import ApiGatewayService, { RouteGroupDto, RouteGroupGetByPagedDto } from '@/api/apigateway'
+import ApiGatewayService, { GlobalGetByPagedDto } from '@/api/apigateway'
 
 @Component({
   name: 'RouteGroup',
@@ -200,47 +200,26 @@ import ApiGatewayService, { RouteGroupDto, RouteGroupGetByPagedDto } from '@/api
     checkPermission
   }
 })
-export default class extends Vue {
-  private editRouteGroupAppId!: string
-  private editRouteGroupTitle!: any
-  private showEditRouteGroupDialog!: boolean
-  private routeGroupListLoading!: boolean
-  private routeGroupList?: RouteGroupDto[]
-  private routeGroupQuery!: RouteGroupGetByPagedDto
-  private routeGroupCount!: number
-  /** 排序组别 */
-  private sortRule!: { prop: string, sort: string }
+export default class extends mixins(DataListMiXin) {
+  private editRouteGroupAppId = ''
+  private editRouteGroupTitle = ''
+  private showEditRouteGroupDialog = false
 
-  constructor() {
-    super()
-    this.routeGroupCount = 0
-    this.editRouteGroupAppId = ''
-    this.editRouteGroupTitle = ''
-    this.routeGroupListLoading = false
-    this.showEditRouteGroupDialog = false
-    this.sortRule = { prop: '', sort: '' }
-    this.routeGroupList = new Array<RouteGroupDto>()
-    this.routeGroupQuery = new RouteGroupGetByPagedDto()
-  }
+  public dataFilter = new GlobalGetByPagedDto()
 
   mounted() {
-    this.handleGetRouteGroups()
+    this.refreshPagedData()
   }
 
-  private handleGetRouteGroups() {
-    this.routeGroupListLoading = true
-    ApiGatewayService.getRouteGroups(this.routeGroupQuery).then(groupData => {
-      this.routeGroupList = groupData.items
-      this.routeGroupCount = groupData.totalCount
-      this.routeGroupListLoading = false
-    })
+  protected getPagedList(filter: any) {
+    return ApiGatewayService.getRouteGroups(filter)
   }
 
   private handleCreateOrEditRouteGroup(appId: string, appName: string) {
     this.editRouteGroupAppId = appId
-    this.editRouteGroupTitle = this.$t('apiGateWay.createGroup')
+    this.editRouteGroupTitle = this.l('apiGateWay.createGroup')
     if (appName) {
-      this.editRouteGroupTitle = this.$t('apiGateWay.updateGroupByApp', { name: appName })
+      this.editRouteGroupTitle = this.l('apiGateWay.updateGroupByApp', { name: appName })
     }
     this.showEditRouteGroupDialog = true
   }
@@ -250,7 +229,7 @@ export default class extends Vue {
     this.editRouteGroupTitle = ''
     this.showEditRouteGroupDialog = false
     if (hasChanged) {
-      this.handleGetRouteGroups()
+      this.refreshPagedData()
     }
   }
 
@@ -263,16 +242,10 @@ export default class extends Vue {
           await ApiGatewayService.deleteRouteGroup(appId)
           const successMessage = this.$t('dataHasBeenDeleted', { name: appName }).toString()
           this.$message.success(successMessage)
-          this.handleGetRouteGroups()
+          this.refreshPagedData()
         }
       }
     })
   }
-
-  /** 响应表格排序事件 */
-  private handleSortChange(column: any) {
-    this.sortRule.prop = column.prop
-    this.sortRule.sort = column.sort
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/apigateway/route.vue b/vueJs/src/views/admin/apigateway/route.vue
index 3dadfe7af..9812a9230 100644
--- a/vueJs/src/views/admin/apigateway/route.vue
+++ b/vueJs/src/views/admin/apigateway/route.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('apiGateWay.appId') }}</label>
       <el-select
-        v-model="routeGetPagedFilter.appId"
+        v-model="dataFilter.appId"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
         :placeholder="$t('pleaseSelectBy', {name: $t('apiGateWay.appId')})"
@@ -23,7 +23,7 @@
         style="padding-left:10px;"
       >{{ $t('queryFilter') }}</label>
       <el-input
-        v-model="routeGetPagedFilter.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -32,7 +32,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetRoutes"
+        @click="refreshPagedData"
       >
         {{ $t('searchList') }}
       </el-button>
@@ -47,9 +47,9 @@
     </div>
 
     <el-table
-      v-loading="routeListLoading"
+      v-loading="dataLoading"
       row-key="itemId"
-      :data="routeList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -187,11 +187,11 @@
     </el-table>
 
     <Pagination
-      v-show="routesCount>0"
-      :total="routesCount"
-      :page.sync="routeGetPagedFilter.skipCount"
-      :limit.sync="routeGetPagedFilter.maxResultCount"
-      @pagination="handleGetRoutes"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
       @sort-change="handleSortChange"
     />
 
@@ -216,10 +216,11 @@
 
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import RouteCreateOrEditForm from './components/RouteCreateOrEditForm.vue'
-import ApiGatewayService, { RouteGroupAppIdDto, ReRouteGetByPagedDto, ReRouteDto } from '@/api/apigateway'
+import ApiGatewayService, { RouteGroupAppIdDto, ReRouteGetByPagedDto } from '@/api/apigateway'
 
 @Component({
   name: 'Route',
@@ -243,27 +244,13 @@ import ApiGatewayService, { RouteGroupAppIdDto, ReRouteGetByPagedDto, ReRouteDto
     }
   }
 })
-export default class extends Vue {
-  private editRouteId: number
-  private routesCount: number
-  private editRouteTitle: any
-  private routeList: ReRouteDto[]
-  private routeListLoading: boolean
-  private showEditRouteDialog: boolean
-  private routeGetPagedFilter: ReRouteGetByPagedDto
-  private routeGroupAppIdOptions: RouteGroupAppIdDto[]
+export default class extends mixins(DataListMiXin) {
+  private editRouteId = 0
+  private editRouteTitle = ''
+  private showEditRouteDialog = false
+  private routeGroupAppIdOptions = new Array<RouteGroupAppIdDto>()
 
-  constructor() {
-    super()
-    this.editRouteId = 0
-    this.routesCount = 0
-    this.editRouteTitle = ''
-    this.routeListLoading = false
-    this.showEditRouteDialog = false
-    this.routeList = new Array<ReRouteDto>()
-    this.routeGetPagedFilter = new ReRouteGetByPagedDto()
-    this.routeGroupAppIdOptions = new Array<RouteGroupAppIdDto>()
-  }
+  public dataFilter = new ReRouteGetByPagedDto()
 
   mounted() {
     ApiGatewayService.getRouteGroupAppIds().then(appKeys => {
@@ -271,23 +258,14 @@ export default class extends Vue {
     })
   }
 
-  private handleGetRoutes() {
-    if (this.routeGetPagedFilter.appId) {
-      this.routeListLoading = true
-      ApiGatewayService.getReRoutes(this.routeGetPagedFilter).then(routes => {
-        this.routeList = routes.items
-        this.routesCount = routes.totalCount
-      }).finally(() => {
-        this.routeListLoading = false
-      })
+  protected getPagedList(filter: any) {
+    if (filter.appId) {
+      return ApiGatewayService.getReRoutes(filter)
     } else {
       const errorMessage = this.$t('apiGateWay.appIdHasRequired').toString()
       this.$message.warning(errorMessage)
     }
-  }
-
-  private handleSortChange(column: any) {
-    this.routeGetPagedFilter.sorting = column.prop
+    return this.getEmptyPagedList()
   }
 
   private handleDeleteRoute(reRouteId: number, reRouteName: string) {
@@ -297,7 +275,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             ApiGatewayService.deleteReRoute(reRouteId).then(() => {
               this.$message.success(this.l('apiGateWay.deleteRouteSuccess', { name: reRouteName }))
-              this.handleGetRoutes()
+              this.refreshPagedData()
             })
           }
         }
@@ -306,9 +284,9 @@ export default class extends Vue {
 
   private handleCreateOrEditRoute(reRouteId: number, reRouteName: string) {
     this.editRouteId = reRouteId
-    this.editRouteTitle = this.$t('apiGateWay.createRoute')
+    this.editRouteTitle = this.l('apiGateWay.createRoute')
     if (reRouteId) {
-      this.editRouteTitle = this.$t('apiGateWay.updateRouteByApp', { name: reRouteName })
+      this.editRouteTitle = this.l('apiGateWay.updateRouteByApp', { name: reRouteName })
     }
     this.showEditRouteDialog = true
   }
@@ -317,13 +295,9 @@ export default class extends Vue {
     this.editRouteId = -1
     this.editRouteTitle = ''
     this.showEditRouteDialog = false
-    if (changed && this.routeGetPagedFilter.appId) {
-      this.handleGetRoutes()
+    if (changed && this.dataFilter.appId) {
+      this.refreshPagedData()
     }
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/identityServer/api-resources/index.vue b/vueJs/src/views/admin/identityServer/api-resources/index.vue
index 10ea16fa8..31cc0c5e8 100644
--- a/vueJs/src/views/admin/identityServer/api-resources/index.vue
+++ b/vueJs/src/views/admin/identityServer/api-resources/index.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('queryFilter') }}</label>
       <el-input
-        v-model="apiResourceGetPagedFilter.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -15,7 +15,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetApiResources"
+        @click="refreshPagedData"
       >
         {{ $t('searchList') }}
       </el-button>
@@ -30,9 +30,9 @@
     </div>
 
     <el-table
-      v-loading="apiResourceListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="apiResourceList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -165,11 +165,11 @@
     </el-table>
 
     <Pagination
-      v-show="apiResourceListCount>0"
-      :total="apiResourceListCount"
-      :page.sync="apiResourceGetPagedFilter.skipCount"
-      :limit.sync="apiResourceGetPagedFilter.maxResultCount"
-      @pagination="handleGetApiResources"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
       @sort-change="handleSortChange"
     />
 
@@ -202,7 +202,7 @@
         ref="formApiSecret"
         :api-resource-id="editApiResource.id"
         :api-secrets="editApiResource.secrets"
-        @apiSecretChanged="handleGetApiResources"
+        @apiSecretChanged="refreshPagedData"
       />
     </el-dialog>
 
@@ -219,16 +219,17 @@
         ref="formApiScope"
         :api-resource-id="editApiResource.id"
         :api-scopes="editApiResource.scopes"
-        @apiSecretChanged="handleGetApiResources"
+        @apiSecretChanged="refreshPagedData"
       />
     </el-dialog>
   </div>
 </template>
 
 <script lang="ts">
-import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
 import { dateFormat } from '@/utils/index'
+import { checkPermission } from '@/utils/permission'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import ApiScopeEditForm from './components/ApiResourceScopeEditForm.vue'
 import ApiSecretEditForm from './components/ApiResourceSecretEditForm.vue'
@@ -262,48 +263,22 @@ import ApiResourceService, { ApiResource, ApiResourceGetByPaged } from '@/api/ap
     }
   }
 })
-export default class extends Vue {
-  private editApiResource: ApiResource
-  private apiResourceListCount: number
-  private editApiResourceTitle: any
-  private apiResourceList: ApiResource[]
-  private apiResourceListLoading: boolean
-  private apiResourceGetPagedFilter: ApiResourceGetByPaged
-
-  private showEditApiScopeDialog: boolean
-  private showEditApiSecretDialog: boolean
-  private showEditApiResourceDialog: boolean
+export default class extends mixins(DataListMiXin) {
+  private editApiResource = new ApiResource()
+  private editApiResourceTitle = ''
 
-  constructor() {
-    super()
-    this.apiResourceListCount = 0
-    this.editApiResourceTitle = ''
-    this.apiResourceListLoading = false
-    this.editApiResource = new ApiResource()
-    this.apiResourceList = new Array<ApiResource>()
-    this.apiResourceGetPagedFilter = new ApiResourceGetByPaged()
+  private showEditApiScopeDialog = false
+  private showEditApiSecretDialog = false
+  private showEditApiResourceDialog = false
 
-    this.showEditApiScopeDialog = false
-    this.showEditApiSecretDialog = false
-    this.showEditApiResourceDialog = false
-  }
+  public dataFilter = new ApiResourceGetByPaged()
 
   mounted() {
-    this.handleGetApiResources()
-  }
-
-  private handleGetApiResources() {
-    this.apiResourceListLoading = true
-    ApiResourceService.getApiResources(this.apiResourceGetPagedFilter).then(resources => {
-      this.apiResourceList = resources.items
-      this.apiResourceListCount = resources.totalCount
-    }).finally(() => {
-      this.apiResourceListLoading = false
-    })
+    this.refreshPagedData()
   }
 
-  private handleSortChange(column: any) {
-    this.apiResourceGetPagedFilter.sorting = column.prop
+  protected getPagedList(filter: any) {
+    return ApiResourceService.getApiResources(filter)
   }
 
   private handleShowEditApiResourceForm(resource: ApiResource) {
@@ -322,7 +297,7 @@ export default class extends Vue {
     this.editApiResource = ApiResource.empty()
     this.showEditApiResourceDialog = false
     if (changed) {
-      this.handleGetApiResources()
+      this.refreshPagedData()
     }
   }
 
@@ -345,7 +320,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             ApiResourceService.deleteApiResource(id).then(() => {
               this.$message.success(this.l('identityServer.deleteApiResourceSuccess', { name: name }))
-              this.handleGetApiResources()
+              this.refreshPagedData()
             })
           }
         }
@@ -368,10 +343,6 @@ export default class extends Vue {
     }
   }
 
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
   private formatStatusText(status: boolean) {
     let statusText = ''
     if (status) {
diff --git a/vueJs/src/views/admin/identityServer/client/index.vue b/vueJs/src/views/admin/identityServer/client/index.vue
index 94a3ad7b1..9ef983408 100644
--- a/vueJs/src/views/admin/identityServer/client/index.vue
+++ b/vueJs/src/views/admin/identityServer/client/index.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('queryFilter') }}</label>
       <el-input
-        v-model="clientGetPagedFilter.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -15,7 +15,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetClients"
+        @click="refreshPagedData"
       >
         {{ $t('searchList') }}
       </el-button>
@@ -30,9 +30,9 @@
     </div>
 
     <el-table
-      v-loading="clientListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="clientList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -216,11 +216,11 @@
     </el-table>
 
     <Pagination
-      v-show="clientListCount>0"
-      :total="clientListCount"
-      :page.sync="clientGetPagedFilter.skipCount"
-      :limit.sync="clientGetPagedFilter.maxResultCount"
-      @pagination="handleGetClients"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
       @sort-change="handleSortChange"
     />
 
@@ -285,7 +285,7 @@
         ref="formClientSecret"
         :client-id="editClient.id"
         :client-secrets="editClient.clientSecrets"
-        @clientSecretChanged="handleGetClients"
+        @clientSecretChanged="refreshPagedData"
       />
     </el-dialog>
 
@@ -297,7 +297,7 @@
       custom-class="modal-form"
       :show-close="false"
       @closed="handleClientClaimEditFormClosed"
-      @clientClaimChanged="handleGetClients"
+      @clientClaimChanged="refreshPagedData"
     >
       <ClientClaimEditForm
         ref="formClientClaim"
@@ -314,7 +314,7 @@
       custom-class="modal-form"
       :show-close="false"
       @closed="handleClientPropertyEditFormClosed"
-      @clientPropertyChanged="handleGetClients"
+      @clientPropertyChanged="refreshPagedData"
     >
       <ClientPropertyEditForm
         ref="formClientProperty"
@@ -343,7 +343,8 @@
 
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import ClientEditForm from './components/ClientEditForm.vue'
 import ClientCloneForm from './components/ClientCloneForm.vue'
@@ -381,66 +382,37 @@ import ClientService, { Client, ClientGetByPaged } from '@/api/clients'
     }
   }
 })
-export default class extends Vue {
-  private editClient: Client
-  private clientListCount: number
-  private editClientTitle: any
-  private clientList: Client[]
-  private clientListLoading: boolean
-  private clientGetPagedFilter: ClientGetByPaged
+export default class extends mixins(DataListMiXin) {
+  private editClient = Client.empty()
+  private editClientTitle = ''
 
-  private showEditClientDialog: boolean
-  private showCloneClientDialog: boolean
-  private showCreateClientDialog: boolean
-  private showEditClientSecretDialog: boolean
-  private showEditClientClaimDialog: boolean
-  private showEditClientPropertyDialog: boolean
-  private showEditClientPermissionDialog: boolean
+  private showEditClientDialog = false
+  private showCloneClientDialog = false
+  private showCreateClientDialog = false
+  private showEditClientSecretDialog = false
+  private showEditClientClaimDialog = false
+  private showEditClientPropertyDialog = false
+  private showEditClientPermissionDialog = false
 
-  constructor() {
-    super()
-    this.clientListCount = 0
-    this.editClientTitle = ''
-    this.clientListLoading = false
-    this.showEditClientDialog = false
-    this.showCreateClientDialog = false
-    this.showEditClientPermissionDialog = false
-    this.editClient = Client.empty()
-    this.clientList = new Array<Client>()
-    this.showCloneClientDialog = false
-    this.showEditClientSecretDialog = false
-    this.showEditClientClaimDialog = false
-    this.showEditClientPropertyDialog = false
-    this.clientGetPagedFilter = new ClientGetByPaged()
-  }
+  public dataFilter = new ClientGetByPaged()
 
   mounted() {
-    this.handleGetClients()
+    this.refreshPagedData()
   }
 
-  private handleGetClients() {
-    this.clientListLoading = true
-    ClientService.getClients(this.clientGetPagedFilter).then(routes => {
-      this.clientList = routes.items
-      this.clientListCount = routes.totalCount
-    }).finally(() => {
-      this.clientListLoading = false
-    })
-  }
-
-  private handleSortChange(column: any) {
-    this.clientGetPagedFilter.sorting = column.prop
+  protected getPagedList(filter: any) {
+    return ClientService.getClients(filter)
   }
 
   private handleShowCreateClientForm() {
     this.editClient = Client.empty()
-    this.editClientTitle = this.$t('identityServer.createClient')
+    this.editClientTitle = this.l('identityServer.createClient')
     this.showCreateClientDialog = true
   }
 
   private handleShowEditClientForm(client: Client) {
     this.editClient = client
-    this.editClientTitle = this.$t('identityServer.updateClientByName', { name: this.editClient.clientName })
+    this.editClientTitle = this.l('identityServer.updateClientByName', { name: this.editClient.clientName })
     this.showEditClientDialog = true
   }
 
@@ -451,7 +423,7 @@ export default class extends Vue {
     const frmClient = this.$refs.formCreateClient as ClientCreateForm
     frmClient.resetFields()
     if (changed) {
-      this.handleGetClients()
+      this.refreshPagedData()
     }
   }
 
@@ -462,7 +434,7 @@ export default class extends Vue {
     const frmClient = this.$refs.formCloneClient as ClientCloneForm
     frmClient.resetFields()
     if (changed) {
-      this.handleGetClients()
+      this.refreshPagedData()
     }
   }
 
@@ -471,7 +443,7 @@ export default class extends Vue {
     this.editClient = Client.empty()
     this.showEditClientDialog = false
     if (changed) {
-      this.handleGetClients()
+      this.refreshPagedData()
     }
   }
 
@@ -505,7 +477,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             ClientService.deleteClient(id).then(() => {
               this.$message.success(this.l('identityServer.deleteClientSuccess', { id: clientId }))
-              this.handleGetClients()
+              this.refreshPagedData()
             })
           }
         }
@@ -537,10 +509,6 @@ export default class extends Vue {
     }
   }
 
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
   private formatStatusText(status: boolean) {
     let statusText = ''
     if (status) {
diff --git a/vueJs/src/views/admin/identityServer/identity-resources/index.vue b/vueJs/src/views/admin/identityServer/identity-resources/index.vue
index c16240ed5..22bc68443 100644
--- a/vueJs/src/views/admin/identityServer/identity-resources/index.vue
+++ b/vueJs/src/views/admin/identityServer/identity-resources/index.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('global.queryFilter') }}</label>
       <el-input
-        v-model="identityResourceGetPagedFilter.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -15,7 +15,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetIdentityResources"
+        @click="refreshPagedData"
       >
         {{ $t('global.searchList') }}
       </el-button>
@@ -30,9 +30,9 @@
     </div>
 
     <el-table
-      v-loading="identityResourceListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="identityResourceList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -159,11 +159,11 @@
     </el-table>
 
     <Pagination
-      v-show="identityResourceListCount>0"
-      :total="identityResourceListCount"
-      :page.sync="identityResourceGetPagedFilter.skipCount"
-      :limit.sync="identityResourceGetPagedFilter.maxResultCount"
-      @pagination="handleGetIdentityResources"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
       @sort-change="handleSortChange"
     />
 
@@ -204,9 +204,10 @@
 </template>
 
 <script lang="ts">
-import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
 import { dateFormat } from '@/utils/index'
+import { checkPermission } from '@/utils/permission'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import IdentityPropertyEditForm from './components/IdentityResourcePropertyEditForm.vue'
 import IdentityResourceCreateOrEditForm from './components/IdentityResourceCreateOrEditForm.vue'
@@ -235,46 +236,21 @@ import IdentityResourceService, { IdentityResource, IdentityResourceGetByPaged }
     }
   }
 })
-export default class extends Vue {
-  private editIdentityResource: IdentityResource
-  private identityResourceListCount: number
-  private editIdentityResourceTitle: any
-  private identityResourceList: IdentityResource[]
-  private identityResourceListLoading: boolean
-  private identityResourceGetPagedFilter: IdentityResourceGetByPaged
-
-  private showEditIdentityPropertyDialog: boolean
-  private showEditIdentityResourceDialog: boolean
+export default class extends mixins(DataListMiXin) {
+  private editIdentityResource = IdentityResource.empty()
+  private editIdentityResourceTitle = ''
 
-  constructor() {
-    super()
-    this.identityResourceListCount = 0
-    this.editIdentityResourceTitle = ''
-    this.identityResourceListLoading = false
-    this.editIdentityResource = IdentityResource.empty()
-    this.identityResourceList = new Array<IdentityResource>()
-    this.identityResourceGetPagedFilter = new IdentityResourceGetByPaged()
+  private showEditIdentityPropertyDialog = false
+  private showEditIdentityResourceDialog = false
 
-    this.showEditIdentityPropertyDialog = false
-    this.showEditIdentityResourceDialog = false
-  }
+  public dataFilter = new IdentityResourceGetByPaged()
 
   mounted() {
-    this.handleGetIdentityResources()
-  }
-
-  private handleGetIdentityResources() {
-    this.identityResourceListLoading = true
-    IdentityResourceService.getIdentityResources(this.identityResourceGetPagedFilter).then(resources => {
-      this.identityResourceList = resources.items
-      this.identityResourceListCount = resources.totalCount
-    }).finally(() => {
-      this.identityResourceListLoading = false
-    })
+    this.refreshPagedData()
   }
 
-  private handleSortChange(column: any) {
-    this.identityResourceGetPagedFilter.sorting = column.prop
+  protected getPagedList(filter: any) {
+    return IdentityResourceService.getIdentityResources(filter)
   }
 
   private handleShowEditIdentityResourceForm(resource: IdentityResource) {
@@ -303,7 +279,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             IdentityResourceService.deleteIdentityResource(id).then(() => {
               this.$message.success(this.l('identityServer.deleteIdentityResourceSuccess', { name: name }))
-              this.handleGetIdentityResources()
+              this.refreshPagedData()
             })
           }
         }
@@ -323,10 +299,6 @@ export default class extends Vue {
     }
   }
 
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
   private formatStatusText(status: boolean) {
     let statusText = ''
     if (status) {
@@ -343,7 +315,7 @@ export default class extends Vue {
     this.showEditIdentityResourceDialog = false
     this.showEditIdentityPropertyDialog = false
     if (changed) {
-      this.handleGetIdentityResources()
+      this.refreshPagedData()
     }
   }
 }
diff --git a/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
index 5c4e6501d..710fa2f62 100644
--- a/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
+++ b/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
@@ -6,7 +6,7 @@
       fit
       highlight-current-row
       style="width: 100%;"
-      :data="organizationUnitRoles"
+      :data="dataList"
     >
       <el-table-column
         :label="$t('roles.name')"
@@ -58,19 +58,20 @@
     </el-table>
 
     <pagination
-      v-show="organizationUnitRoleCount>0"
-      :total="organizationUnitRoleCount"
-      :page.sync="organizationUnitRoleFilter.skipCount"
-      :limit.sync="organizationUnitRoleFilter.maxResultCount"
-      @pagination="handleGetOrganizationUnitRoles"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import { Prop, Watch } from 'vue-property-decorator'
+import Component, { mixins } from 'vue-class-component'
 import OrganizationUnitService, { OrganizationUnitGetRoleByPaged } from '@/api/organizationunit'
-import { RoleDto } from '@/api/roles'
 import Pagination from '@/components/Pagination/index.vue'
 
 @Component({
@@ -79,36 +80,26 @@ import Pagination from '@/components/Pagination/index.vue'
     Pagination
   }
 })
-export default class extends Vue {
+export default class extends mixins(DataListMiXin) {
   @Prop({ default: '' })
   private organizationUnitId?: string
 
-  private organizationUnitRoleFilter: OrganizationUnitGetRoleByPaged
-  private organizationUnitRoleCount: number
-  private organizationUnitRoles: RoleDto[]
-
-  constructor() {
-    super()
-    this.organizationUnitRoleCount = 0
-    this.organizationUnitRoles = new Array<RoleDto>()
-    this.organizationUnitRoleFilter = new OrganizationUnitGetRoleByPaged()
-  }
+  public dataFilter = new OrganizationUnitGetRoleByPaged()
 
   @Watch('organizationUnitId', { immediate: true })
   private onOrganizationUnitIdChanged() {
-    this.organizationUnitRoles = new Array<RoleDto>()
+    this.dataList = new Array<any>()
     if (this.organizationUnitId) {
-      this.handleGetOrganizationUnitRoles()
+      this.dataFilter.id = this.organizationUnitId
+      this.refreshPagedData()
     }
   }
 
-  private handleGetOrganizationUnitRoles() {
+  protected getPagedList(filter: any) {
     if (this.organizationUnitId) {
-      this.organizationUnitRoleFilter.id = this.organizationUnitId
-      OrganizationUnitService.organizationUnitGetRoles(this.organizationUnitRoleFilter).then(res => {
-        this.organizationUnitRoles = res.items
-      })
+      return OrganizationUnitService.organizationUnitGetRoles(filter)
     }
+    return this.getEmptyPagedList()
   }
 }
 </script>
diff --git a/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
index 1453d9a46..d66bcb2d5 100644
--- a/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
+++ b/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
@@ -5,7 +5,7 @@
     fit
     highlight-current-row
     style="width: 100%;"
-    :data="organizationUnitUsers"
+    :data="dataList"
   >
     <el-table-column
       :label="$t('users.userName')"
@@ -75,8 +75,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
-import { UserDataDto } from '@/api/users'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
+import { Prop, Watch } from 'vue-property-decorator'
 import { dateFormat } from '@/utils'
 import OrganizationUnitService from '@/api/organizationunit'
 
@@ -89,25 +90,23 @@ import OrganizationUnitService from '@/api/organizationunit'
     }
   }
 })
-export default class extends Vue {
+export default class extends mixins(DataListMiXin) {
   @Prop({ default: '' })
   private organizationUnitId?: string
 
-  private organizationUnitUsers: UserDataDto[]
-
-  constructor() {
-    super()
-    this.organizationUnitUsers = new Array<UserDataDto>()
-  }
-
   @Watch('organizationUnitId', { immediate: true })
   private onOrganizationUnitIdChanged() {
-    this.organizationUnitUsers = new Array<UserDataDto>()
+    this.dataList = new Array<any>()
+    if (this.organizationUnitId) {
+      this.refreshData()
+    }
+  }
+
+  protected getList() {
     if (this.organizationUnitId) {
-      OrganizationUnitService.organizationUnitGetUsers(this.organizationUnitId).then(res => {
-        this.organizationUnitUsers = res.items
-      })
+      return OrganizationUnitService.organizationUnitGetUsers(this.organizationUnitId)
     }
+    return this.getEmptyList()
   }
 }
 </script>
diff --git a/vueJs/src/views/admin/roles/index.vue b/vueJs/src/views/admin/roles/index.vue
index 7e7dbe835..d55b10b52 100644
--- a/vueJs/src/views/admin/roles/index.vue
+++ b/vueJs/src/views/admin/roles/index.vue
@@ -5,7 +5,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetRoles"
+        @click="refreshPagedData"
       >
         {{ $t('roles.refreshList') }}
       </el-button>
@@ -20,9 +20,9 @@
     </div>
 
     <el-table
-      v-loading="roleListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="roleList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -134,11 +134,11 @@
     </el-table>
 
     <pagination
-      v-show="roleCount>0"
-      :total="roleCount"
-      :page.sync="roleQueryFilter.skipCount"
-      :limit.sync="roleQueryFilter.maxResultCount"
-      @pagination="handleGetRoles"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
     />
 
     <el-dialog
@@ -156,7 +156,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import RoleService, { CreateRoleDto, RoleDto, UpdateRoleDto, RoleGetPagedDto } from '@/api/roles'
 import { checkPermission } from '@/utils/permission'
 import Pagination from '@/components/Pagination/index.vue'
@@ -174,27 +175,19 @@ import RoleEditForm from './components/RoleEditForm.vue'
     checkPermission
   }
 })
-export default class extends Vue {
-  private roleCount = 0
-  private roleQueryFilter = new RoleGetPagedDto()
-  private roleList = new Array<RoleDto>()
-  private roleListLoading = false
-
+export default class extends mixins(DataListMiXin) {
   private showEditDialog = false
   private editRoleId = ''
 
+  public dataFilter = new RoleGetPagedDto()
+
   mounted() {
-    this.handleGetRoles()
+    this.refreshPagedData()
   }
 
   /** 获取角色权限列表 */
-  private handleGetRoles() {
-    this.roleListLoading = true
-    RoleService.getRoles(this.roleQueryFilter).then(res => {
-      this.roleList = res.items
-      this.roleCount = res.totalCount
-      this.roleListLoading = false
-    })
+  protected getPagedList(filter: any) {
+    return RoleService.getRoles(filter)
   }
 
   /** 响应角色行操作事件 */
@@ -232,7 +225,7 @@ export default class extends Vue {
       RoleService.createRole(createRoleDto).then(role => {
         const message = this.$t('roles.createRoleSuccess', { name: role.name }).toString()
         this.$message.success(message)
-        this.handleGetRoles()
+        this.refreshPagedData()
       })
     })
   }
@@ -251,7 +244,7 @@ export default class extends Vue {
     setDefaultRoleDto.concurrencyStamp = role.concurrencyStamp
     RoleService.updateRole(role.id, setDefaultRoleDto).then(role => {
       this.$message.success(this.$t('roles.roleHasBeenSetDefault', { name: role.name }).toString())
-      this.handleGetRoles()
+      this.refreshPagedData()
     })
   }
 
@@ -263,7 +256,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             RoleService.deleteRole(role.id).then(() => {
               this.$message.success(this.$t('roles.roleHasBeenDeleted', { name: role.name }).toString())
-              this.handleGetRoles()
+              this.refreshPagedData()
             })
           }
         }
diff --git a/vueJs/src/views/admin/tenants/index.vue b/vueJs/src/views/admin/tenants/index.vue
index 2b33eca31..4fee5155f 100644
--- a/vueJs/src/views/admin/tenants/index.vue
+++ b/vueJs/src/views/admin/tenants/index.vue
@@ -6,7 +6,7 @@
         style="padding-left:10px;"
       >{{ $t('global.queryFilter') }}</label>
       <el-input
-        v-model="tenantGetPagedFilter.filter"
+        v-model="dataFilter.filter"
         :placeholder="$t('filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -15,7 +15,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetTenants"
+        @click="refreshPagedData"
       >
         {{ $t('global.searchList') }}
       </el-button>
@@ -30,9 +30,9 @@
     </div>
 
     <el-table
-      v-loading="tenantListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="tenantList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -142,11 +142,11 @@
     </el-table>
 
     <Pagination
-      v-show="tenantListCount>0"
-      :total="tenantListCount"
-      :page.sync="tenantGetPagedFilter.skipCount"
-      :limit.sync="tenantGetPagedFilter.maxResultCount"
-      @pagination="handleGetTenants"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
       @sort-change="handleSortChange"
     />
 
@@ -191,7 +191,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import TenantService, { TenantDto, TenantGetByPaged } from '@/api/tenant-management'
 import { dateFormat } from '@/utils/index'
 import { checkPermission } from '@/utils/permission'
@@ -218,40 +219,20 @@ import TenantEditConnectionForm from './components/TenantEditConnectionForm.vue'
     }
   }
 })
-export default class extends Vue {
-  private editTenantId: string
-  private tenantList: TenantDto[]
-  private tenantListCount: number
-  private tenantListLoading: boolean
-  private tenantGetPagedFilter: TenantGetByPaged
-
-  private showEditTenantConnectionDialog: boolean
-  private showCreateOrEditTenantDialog: boolean
+export default class extends mixins(DataListMiXin) {
+  private editTenantId = ''
+  private showEditTenantConnectionDialog = false
+  private showCreateOrEditTenantDialog = false
   private showFeatureEditFormDialog = false
 
-  constructor() {
-    super()
-    this.editTenantId = ''
-    this.tenantListCount = 0
-    this.tenantListLoading = false
-    this.tenantList = new Array<TenantDto>()
-    this.tenantGetPagedFilter = new TenantGetByPaged()
-
-    this.showCreateOrEditTenantDialog = false
-    this.showEditTenantConnectionDialog = false
-  }
+  public dataFilter = new TenantGetByPaged()
 
   mounted() {
-    this.handleGetTenants()
+    this.refreshPagedData()
   }
 
-  private handleGetTenants() {
-    this.tenantListLoading = true
-    TenantService.getTenants(this.tenantGetPagedFilter).then(tenants => {
-      this.tenantList = tenants.items
-      this.tenantListCount = tenants.totalCount
-      this.tenantListLoading = false
-    })
+  protected getPagedList(filter: any) {
+    return TenantService.getTenants(filter)
   }
 
   private handleCommand(command: {key: string, row: TenantDto}) {
@@ -283,7 +264,7 @@ export default class extends Vue {
           if (action === 'confirm') {
             TenantService.deleteTenant(id).then(() => {
               this.$message.success(this.l('tenant.deleteTenantSuccess', { name: name }))
-              this.handleGetTenants()
+              this.refreshPagedData()
             })
           }
         }
@@ -294,7 +275,7 @@ export default class extends Vue {
     this.showEditTenantConnectionDialog = false
     this.editTenantId = ''
     if (changed) {
-      this.handleGetTenants()
+      this.refreshPagedData()
     }
   }
 
@@ -302,22 +283,14 @@ export default class extends Vue {
     this.showCreateOrEditTenantDialog = false
     this.editTenantId = ''
     if (changed) {
-      this.handleGetTenants()
+      this.refreshPagedData()
     }
   }
 
-  private handleSortChange(column: any) {
-    this.tenantGetPagedFilter.sorting = column.prop
-  }
-
   private onFeatureEditFormClosed() {
     this.showFeatureEditFormDialog = false
     this.editTenantId = ''
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/users/index.vue b/vueJs/src/views/admin/users/index.vue
index 9035bad44..6c48bb2da 100644
--- a/vueJs/src/views/admin/users/index.vue
+++ b/vueJs/src/views/admin/users/index.vue
@@ -6,6 +6,7 @@
         style="padding-left:0;"
       >{{ $t('users.queryFilter') }}</label>
       <el-input
+        v-model="dataFilter.filter"
         :placeholder="$t('users.filterString')"
         style="width: 250px;margin-left: 10px;"
         class="filter-item"
@@ -14,7 +15,7 @@
         class="filter-item"
         style="margin-left: 10px; text-alignt"
         type="primary"
-        @click="handleGetUsers"
+        @click="refreshPagedData"
       >
         {{ $t('users.searchList') }}
       </el-button>
@@ -29,14 +30,13 @@
     </div>
 
     <el-table
-      v-loading="userListLoading"
+      v-loading="dataLoading"
       row-key="id"
-      :data="userList"
+      :data="dataList"
       border
       fit
       highlight-current-row
       style="width: 100%;"
-      :default-sort="sortRule"
       @sort-change="handleSortChange"
     >
       <el-table-column
@@ -150,11 +150,11 @@
     </el-table>
 
     <Pagination
-      v-show="totalCount>0"
-      :total="totalCount"
-      :page.sync="getUserQuery.skipCount"
-      :limit.sync="getUserQuery.maxResultCount"
-      @pagination="handleGetUsers"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
     />
 
     <el-dialog
@@ -185,7 +185,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import Pagination from '@/components/Pagination/index.vue'
 import { dateFormat } from '@/utils'
 import UserApiService, { UserDataDto, UsersGetPagedDto } from '@/api/users'
@@ -210,48 +211,22 @@ import { checkPermission } from '@/utils/permission'
     checkPermission
   }
 })
-export default class extends Vue {
-  /** 用户列表加载中 */
-  private userListLoading: boolean
-  /** 用户列表 */
-  private userList: UserDataDto[]
-  /** 最大用户数量 */
-  private totalCount: number
+export default class extends mixins(DataListMiXin) {
   /** 当前编辑用户 */
-  private editUser: UserDataDto
-  /** 排序组别 */
-  private sortRule: { prop: string, sort: string }
-  /** 查询用户过滤参数 */
-  private getUserQuery: UsersGetPagedDto
+  private editUser = new UserDataDto()
 
-  private showCreateUserDialog: boolean
-  private showEditUserDialog: boolean
+  public dataFilter = new UsersGetPagedDto()
 
-  constructor() {
-    super()
-    this.totalCount = 0
-    this.editUser = new UserDataDto()
-    this.userListLoading = false
-    this.sortRule = { prop: '', sort: '' }
-    this.getUserQuery = new UsersGetPagedDto()
-    this.userList = new Array<UserDataDto>()
-
-    this.showEditUserDialog = false
-    this.showCreateUserDialog = false
-  }
+  private showCreateUserDialog = false
+  private showEditUserDialog = false
 
   mounted() {
-    this.handleGetUsers()
+    this.refreshPagedData()
   }
 
   /** 查询用户列表 */
-  private handleGetUsers() {
-    this.userListLoading = true
-    UserApiService.getUsers(this.getUserQuery).then(res => {
-      this.totalCount = res.totalCount
-      this.userList = res.items
-      this.userListLoading = false
-    })
+  protected getPagedList(filter: any) {
+    return UserApiService.getUsers(filter)
   }
 
   /** 锁定用户
@@ -273,7 +248,7 @@ export default class extends Vue {
   }
 
   private handleUserProfileChanged() {
-    this.handleGetUsers()
+    this.refreshPagedData()
   }
 
   private handleCreateUser() {
@@ -302,17 +277,12 @@ export default class extends Vue {
           if (action === 'confirm') {
             UserApiService.deleteUser(row.id).then(() => {
               this.$message.success(this.$t('users.userHasBeenDeleted', { name: row.userName }).toString())
-              this.handleGetUsers()
+              this.refreshPagedData()
             })
           }
         }
       })
   }
-
-  /** 响应表格排序事件 */
-  private handleSortChange(column: any) {
-    this.getUserQuery.sorting = column.sort
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/file-management/index.vue b/vueJs/src/views/file-management/index.vue
index ee0055c48..6c2b55fc0 100644
--- a/vueJs/src/views/file-management/index.vue
+++ b/vueJs/src/views/file-management/index.vue
@@ -27,9 +27,9 @@
 
     <el-table
       ref="fileSystemTable"
-      v-loading="fileSystemListLoading"
+      v-loading="dataLoading"
       row-key="name"
-      :data="fileSystemList"
+      :data="dataList"
       border
       fit
       highlight-current-row
@@ -38,6 +38,7 @@
       @row-click="onRowClick"
       @row-dblclick="onRowDoubleClick"
       @contextmenu.native="onContextMenu"
+      @sort-change="handleSortChange"
     >
       <el-table-column
         type="selection"
@@ -151,11 +152,11 @@
     </el-table>
 
     <Pagination
-      v-show="fileSystemCount>0"
-      :total="fileSystemCount"
-      :page.sync="fileSystemGetFilter.skipCount"
-      :limit.sync="fileSystemGetFilter.maxResultCount"
-      @pagination="handleGetFileSystemList"
+      v-show="dataTotal>0"
+      :total="dataTotal"
+      :page.sync="dataFilter.skipCount"
+      :limit.sync="dataFilter.maxResultCount"
+      @pagination="refreshPagedData"
     />
 
     <el-dialog
@@ -176,10 +177,12 @@
 <script lang="ts">
 import { dateFormat } from '@/utils'
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue } from 'vue-property-decorator'
+import { Vue } from 'vue-property-decorator'
+import DataListMiXin from '@/mixins/DataListMiXin'
+import Component, { mixins } from 'vue-class-component'
 import FileUploadForm from './components/FileUploadForm.vue'
 import Pagination from '@/components/Pagination/index.vue'
-import FileSystemService, { FileSystem, FileSystemGetByPaged, FileSystemType } from '@/api/filemanagement'
+import FileSystemService, { FileSystemGetByPaged, FileSystemType } from '@/api/filemanagement'
 
 const kbUnit = 1 * 1024
 const mbUnit = kbUnit * 1024
@@ -247,48 +250,28 @@ const $contextmenu = Vue.prototype.$contextmenu
     }
   }
 })
-export default class extends Vue {
-  private showFileUploadDialog!: boolean
-  private downloading!: boolean
-  private lastFilePath!: string
-  private fileSystemRoot!: string[]
-  private fileSystemList?: FileSystem[]
-  private fileSystemCount!: number
-  private fileSystemListLoading!: boolean
-  private fileSystemGetFilter!: FileSystemGetByPaged
+export default class extends mixins(DataListMiXin) {
+  private showFileUploadDialog = false
+  private downloading = false
+  private lastFilePath = ''
+  private fileSystemRoot = new Array<string>()
 
-  constructor() {
-    super()
-    this.lastFilePath = ''
-    this.fileSystemCount = 0
-    this.downloading = false
-    this.fileSystemListLoading = false
-    this.showFileUploadDialog = false
-    this.fileSystemRoot = new Array<string>()
-    this.fileSystemList = new Array<FileSystem>()
-    this.fileSystemGetFilter = new FileSystemGetByPaged()
-  }
+  public dataFilter = new FileSystemGetByPaged()
 
   mounted() {
     this.fileSystemRoot.push(this.$t('fileSystem.root').toString())
-    this.handleGetFileSystemList()
+    this.refreshPagedData()
   }
 
-  private handleGetFileSystemList() {
-    this.fileSystemListLoading = true
-    FileSystemService.getFileSystemList(this.fileSystemGetFilter).then(res => {
-      this.fileSystemCount = res.totalCount
-      this.fileSystemList = res.items
-    }).finally(() => {
-      this.fileSystemListLoading = false
-    })
+  protected getPagedList(filter: any) {
+    return FileSystemService.getFileSystemList(filter)
   }
 
   private navigationToFilePath() {
     const fileSystemPathArray = this.fileSystemRoot.slice(1)
     const fileSystemPath = fileSystemPathArray.join('/')
-    this.fileSystemGetFilter.parent = fileSystemPath
-    this.handleGetFileSystemList()
+    this.dataFilter.parent = fileSystemPath
+    this.refreshPagedData()
   }
 
   private handleGoToLastFolder() {
@@ -311,12 +294,12 @@ export default class extends Vue {
               }
               FileSystemService.deleteFolder(path).then(() => {
                 this.$notify.success(this.l('global.dataHasBeenDeleted', { name: row.name }))
-                this.handleGetFileSystemList()
+                this.refreshPagedData()
               })
             } else {
               FileSystemService.deleteFile(row.parent, row.name).then(() => {
                 this.$notify.success(this.l('global.dataHasBeenDeleted', { name: row.name }))
-                this.handleGetFileSystemList()
+                this.refreshPagedData()
               })
             }
           }
@@ -412,12 +395,12 @@ export default class extends Vue {
       this.fileSystemRoot.splice(index + 1)
       this.navigationToFilePath()
     } else {
-      this.handleGetFileSystemList()
+      this.refreshPagedData()
     }
   }
 
   private onFileUploaded() {
-    this.handleGetFileSystemList()
+    this.refreshPagedData()
   }
 
   private onFileUploadFormClosed() {
@@ -450,7 +433,7 @@ export default class extends Vue {
               }).then((val: any) => {
               FileSystemService.createFolder(val.value, parent).then(() => {
                 this.$message.success(this.$t('fileSystem.folderCreateSuccess', { name: val.value }).toString())
-                this.handleGetFileSystemList()
+                this.refreshPagedData()
               })
             }).catch(_ => _)
           },
@@ -476,10 +459,6 @@ export default class extends Vue {
     })
     return false
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>