diff --git a/backend/src/main/java/io/metersphere/report/JtlResolver.java b/backend/src/main/java/io/metersphere/report/JtlResolver.java
index 4f7d8dce69..3f2490d9e0 100644
--- a/backend/src/main/java/io/metersphere/report/JtlResolver.java
+++ b/backend/src/main/java/io/metersphere/report/JtlResolver.java
@@ -7,7 +7,6 @@ import io.metersphere.report.base.*;
 import io.metersphere.report.dto.ErrorsTop5DTO;
 import io.metersphere.report.dto.RequestStatisticsDTO;
 import org.apache.commons.lang3.StringUtils;
-
 import java.io.Reader;
 import java.io.StringReader;
 import java.math.BigDecimal;
@@ -19,13 +18,14 @@ import java.time.Instant;
 import java.time.LocalDateTime;
 import java.time.ZoneId;
 import java.time.format.DateTimeFormatter;
-import java.time.temporal.ChronoUnit;
 import java.util.*;
 import java.util.stream.Collectors;
 
 public class JtlResolver {
 
     private static final Integer ERRORS_TOP_SIZE = 5;
+    private static final String DATE_TIME_PATTERN = "yyyy/MM/dd HH:mm:ss";
+    private static final String TIME_PATTERN = "HH:mm:ss";
 
     private static List<Metric> resolver(String jtlString) {
         HeaderColumnNameMappingStrategy<Metric> ms = new HeaderColumnNameMappingStrategy<>();
@@ -325,7 +325,7 @@ public class JtlResolver {
 
         if (totalMetricList != null) {
             for (Metric metric : totalMetricList) {
-                metric.setTimestamp(stampToDate(metric.getTimestamp()));
+                metric.setTimestamp(stampToDate(DATE_TIME_PATTERN, metric.getTimestamp()));
             }
         }
         Map<String, List<Metric>> collect = Objects.requireNonNull(totalMetricList).stream().collect(Collectors.groupingBy(Metric::getTimestamp));
@@ -378,7 +378,7 @@ public class JtlResolver {
         List<Metric> totalMetricList = JtlResolver.resolver(jtlString);
 
         totalMetricList.forEach(metric -> {
-            metric.setTimestamp(stampToDate(metric.getTimestamp()));
+            metric.setTimestamp(stampToDate(DATE_TIME_PATTERN, metric.getTimestamp()));
         });
 
         Map<String, List<Metric>> metricMap = totalMetricList.stream().collect(Collectors.groupingBy(Metric::getTimestamp));
@@ -422,7 +422,7 @@ public class JtlResolver {
         String startTimeStamp = totalLineList.get(0).getTimestamp();
         String endTimeStamp = totalLineList.get(totalLineList.size() - 1).getTimestamp();
 
-        DateTimeFormatter dtf = DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss");
+        DateTimeFormatter dtf = DateTimeFormatter.ofPattern(DATE_TIME_PATTERN);
         String startTime = dtf.format(LocalDateTime.ofInstant(Instant.ofEpochMilli(Long.parseLong(startTimeStamp)), ZoneId.systemDefault()));
         String endTime = dtf.format(LocalDateTime.ofInstant(Instant.ofEpochMilli(Long.parseLong(endTimeStamp)), ZoneId.systemDefault()));
         reportTimeInfo.setStartTime(startTime);
@@ -440,11 +440,10 @@ public class JtlResolver {
         return reportTimeInfo;
     }
 
-    private static String stampToDate(String timeStamp) {
-        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
-        long lt = Long.parseLong(timeStamp);
-        Date date = new Date(lt);
-        return simpleDateFormat.format(date);
+    private static String stampToDate(String pattern, String timeStamp) {
+        DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern(pattern);
+        LocalDateTime localDateTime = LocalDateTime.ofInstant(Instant.ofEpochMilli(Long.parseLong(timeStamp)), ZoneId.systemDefault());
+        return localDateTime.format(dateTimeFormatter);
     }
 
     /**
@@ -452,8 +451,8 @@ public class JtlResolver {
      * @return "HH:mm:ss"
      */
     private static String formatDate(String dateString) throws ParseException {
-        SimpleDateFormat before = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
-        SimpleDateFormat after = new SimpleDateFormat("HH:mm:ss");
+        SimpleDateFormat before = new SimpleDateFormat(DATE_TIME_PATTERN);
+        SimpleDateFormat after = new SimpleDateFormat(TIME_PATTERN);
         return after.format(before.parse(dateString));
     }
 
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index de0e9aaa91..a1f9a7fd8f 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -2,7 +2,7 @@
   <div v-loading="result.loading">
     <el-card>
       <template v-slot:header>
-        <div >
+        <div>
           <el-row type="flex" justify="space-between" align="middle">
           <span class="title">{{$t('commons.member')}}
             <ms-create-box :tips="btnTips" :exec="create"/>
@@ -28,34 +28,23 @@
         </el-table-column>
         <el-table-column>
           <template v-slot:default="scope">
-            <el-button @click="edit(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit" size="mini" circle/>
-            <el-button @click="del(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete" size="mini" circle/>
+            <el-button @click="edit(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit" size="mini"
+                       circle/>
+            <el-button @click="del(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete" size="mini"
+                       circle/>
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
     </el-card>
 
-    <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+    <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
+               @close="closeFunc">
       <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.member')" prop="userIds">
-          <el-select v-model="form.userIds" multiple :placeholder="$t('member.please_choose_member')" class="select-width">
+          <el-select v-model="form.userIds" multiple :placeholder="$t('member.please_choose_member')"
+                     class="select-width">
             <el-option
               v-for="item in form.userList"
               :key="item.id"
@@ -85,7 +74,8 @@
       </template>
     </el-dialog>
 
-    <el-dialog :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+    <el-dialog :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
+               @close="closeFunc">
       <el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
           <el-input v-model="form.id" autocomplete="off" :disabled="true"/>
@@ -123,10 +113,11 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import {TokenKey} from "../../../../common/js/constants";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     name: "MsOrganizationMember",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     created() {
       this.initTableData();
     },
@@ -187,14 +178,6 @@
         this.form = {};
         this.initTableData();
       },
-      handleSizeChange(size) {
-        this.pageSize = size;
-        this.initTableData();
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-        this.initTableData();
-      },
       edit(row) {
         this.updateVisible = true;
         this.form = row;
@@ -214,7 +197,7 @@
           roleIds: this.form.roleIds,
           organizationId: this.currentUser().lastOrganizationId
         }
-        this.result = this.$post("/organization/member/update", param,() => {
+        this.result = this.$post("/organization/member/update", param, () => {
           this.$message({
             type: 'success',
             message: this.$t('commons.modify_success')
@@ -270,7 +253,7 @@
               roleIds: this.form.roleIds,
               organizationId: orgId
             };
-            this.result = this.$post("user/org/member/add", param,() => {
+            this.result = this.$post("user/org/member/add", param, () => {
               this.initTableData();
               this.createVisible = false;
             })
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index c014c901bf..9a720839c4 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -33,23 +33,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="list" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
     </el-card>
 
     <el-dialog :title="$t('workspace.create')" :visible.sync="createVisible" width="30%">
@@ -103,23 +88,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleMemberSizeChange"
-                @current-change="handleMemberCurrentChange"
-                :current-page.sync="currentMemberPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageMemberSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="memberTotal">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="wsMemberList" :current-page.sync="currentMemberPage" :page-size.sync="pageMemberSize"
+                           :total="memberTotal"/>
     </el-dialog>
 
     <!-- add workspace member dialog -->
@@ -203,10 +173,11 @@
   import MsCreateBox from "../CreateBox";
   import {Message} from "element-ui";
   import {TokenKey} from "../../../../common/js/constants";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     name: "MsOrganizationWorkspace",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     mounted() {
       this.list();
     },
@@ -296,14 +267,6 @@
         }
 
       },
-      handleSizeChange(size) {
-        this.pageSize = size;
-        this.list();
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-        this.list();
-      },
       addMember() {
         this.addMemberVisible = true;
         this.memberForm = {};
@@ -337,6 +300,28 @@
           this.memberTotal = data.itemCount;
         });
       },
+      wsMemberList() {
+        let row = this.currentWorkspaceRow;
+        this.memberVisible = true;
+        let param = {
+          name: '',
+          workspaceId: row.id
+        };
+        let path = "/user/ws/member/list";
+        this.result = this.$post(this.buildPagePath(path), param, res => {
+          let data = res.data;
+          this.memberLineData = data.listObject;
+          let url = "/userrole/list/ws/" + row.id;
+          // 填充角色信息
+          for (let i = 0; i < this.memberLineData.length; i++) {
+            this.$get(url + "/" + this.memberLineData[i].id, response => {
+              let roles = response.data;
+              this.$set(this.memberLineData[i], "roles", roles);
+            })
+          }
+          this.memberTotal = data.itemCount;
+        });
+      },
       closeFunc() {
         this.form = {};
       },
@@ -344,14 +329,6 @@
         this.memberLineData = [];
         this.list();
       },
-      handleMemberSizeChange(size) {
-        this.pageMemberSize = size;
-        this.cellClick(this.currentWorkspaceRow);
-      },
-      handleMemberCurrentChange(current) {
-        this.currentMemberPage = current;
-        this.cellClick(this.currentWorkspaceRow);
-      },
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
@@ -418,7 +395,7 @@
         });
       },
       buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
+        return path + "/" + this.currentMemberPage + "/" + this.pageMemberSize;
       },
     },
     data() {
diff --git a/frontend/src/business/components/settings/system/Organization.vue b/frontend/src/business/components/settings/system/Organization.vue
index cc6b1cad16..970d46a4e4 100644
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@@ -29,28 +29,15 @@
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="edit(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit" size="mini" circle/>
-            <el-button @click="del(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete" size="mini" circle/>
+            <el-button @click="edit(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit" size="mini"
+                       circle/>
+            <el-button @click="del(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete" size="mini"
+                       circle/>
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
     </el-card>
     <!-- dialog of organization member -->
     <el-dialog :visible.sync="memberVisible" width="70%" :destroy-on-close="true" @close="closeMemberFunc">
@@ -79,28 +66,16 @@
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="editMember(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit" size="mini" circle/>
-            <el-button @click="delMember(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete" size="mini" circle/>
+            <el-button @click="editMember(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit"
+                       size="mini" circle/>
+            <el-button @click="delMember(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete"
+                       size="mini" circle/>
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleMemberSizeChange"
-                @current-change="handleMemberCurrentChange"
-                :current-page.sync="currentMemberPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageMemberSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="memberTotal">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="orgMemberList" :current-page.sync="currentMemberPage"
+                           :page-size.sync="pageMemberSize"
+                           :total="memberTotal"/>
     </el-dialog>
 
     <!-- add organization form -->
@@ -138,7 +113,8 @@
       <template v-slot:footer>
         <span class="dialog-footer">
           <el-button type="primary" onkeydown="return false;"
-                     @click="updateOrganization('updateOrganizationForm')" size="medium">{{$t('organization.modify')}}</el-button>
+                     @click="updateOrganization('updateOrganizationForm')"
+                     size="medium">{{$t('organization.modify')}}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -174,7 +150,7 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span  class="dialog-footer">
+        <span class="dialog-footer">
           <el-button type="primary" onkeydown="return false;"
                      @click="submitForm('form')" size="medium">{{$t('commons.save')}}</el-button>
         </span>
@@ -222,10 +198,11 @@
 
 <script>
   import MsCreateBox from "../CreateBox";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     name: "MsOrganization",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     data() {
       return {
         queryPath: '/organization/list',
@@ -317,7 +294,28 @@
           organizationId: row.id
         };
         let path = "/user/special/org/member/list";
-        this.result = this.$post(this.buildPagePath(path), param, res => {
+        this.result = this.$post(path + "/" + this.currentMemberPage + "/" + this.pageMemberSize, param, res => {
+          let data = res.data;
+          this.memberLineData = data.listObject;
+          let url = "/userrole/list/org/" + row.id;
+          for (let i = 0; i < this.memberLineData.length; i++) {
+            this.$get(url + "/" + this.memberLineData[i].id, response => {
+              let roles = response.data;
+              this.$set(this.memberLineData[i], "roles", roles);
+            })
+          }
+          this.memberTotal = data.itemCount;
+        });
+      },
+      orgMemberList() {
+        let row = this.currentRow;
+        this.memberVisible = true;
+        let param = {
+          name: '',
+          organizationId: row.id
+        };
+        let path = "/user/special/org/member/list";
+        this.result = this.$post(path + "/" + this.currentMemberPage + "/" + this.pageMemberSize, param, res => {
           let data = res.data;
           this.memberLineData = data.listObject;
           let url = "/userrole/list/org/" + row.id;
@@ -409,7 +407,7 @@
         let param = {
           name: this.condition
         };
-        this.result = this.$post(this.buildPagePath(this.queryPath), param, response => {
+        this.result = this.$post(this.queryPath + "/" + this.currentPage + "/" + this.pageSize, param, response => {
           let data = response.data;
           this.tableData = data.listObject;
           for (let i = 0; i < this.tableData.length; i++) {
@@ -433,25 +431,6 @@
         this.memberLineData = [];
         this.initTableData();
       },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-      handleSizeChange(size) {
-        this.pageSize = size;
-        this.initTableData();
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-        this.initTableData();
-      },
-      handleMemberSizeChange(size) {
-        this.pageMemberSize = size;
-        this.cellClick(this.currentRow);
-      },
-      handleMemberCurrentChange(current) {
-        this.currentMemberPage = current;
-        this.cellClick(this.currentRow);
-      },
       handleSelectionChange(val) {
         this.multipleSelection = val;
       },
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index e67689e6a7..7badd0d075 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -35,23 +35,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="list" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
     </el-card>
 
     <!-- add workspace dialog -->
@@ -139,28 +124,15 @@
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="editMember(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit" size="mini" circle/>
-            <el-button @click="delMember(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete" size="mini" circle/>
+            <el-button @click="editMember(scope.row)" onkeydown="return false;" type="primary" icon="el-icon-edit"
+                       size="mini" circle/>
+            <el-button @click="delMember(scope.row)" onkeydown="return false;" type="danger" icon="el-icon-delete"
+                       size="mini" circle/>
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleMemberSizeChange"
-                @current-change="handleMemberCurrentChange"
-                :current-page.sync="currentMemberPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageMemberSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="memberTotal">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="wsMemberList" :current-page.sync="currentMemberPage" :page-size.sync="pageMemberSize"
+                           :total="memberTotal"/>
     </el-dialog>
 
     <!-- add workspace member dialog -->
@@ -243,10 +215,11 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import {Message} from "element-ui";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     name: "MsSystemWorkspace",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     mounted() {
       this.list();
     },
@@ -308,6 +281,28 @@
           this.memberTotal = data.itemCount;
         });
       },
+      wsMemberList() {
+        let row = this.currentWorkspaceRow;
+        this.memberVisible = true;
+        let param = {
+          name: '',
+          workspaceId: row.id
+        };
+        let path = "/user/special/ws/member/list";
+        this.result = this.$post(this.buildPagePath(path), param, res => {
+          let data = res.data;
+          this.memberLineData = data.listObject;
+          let url = "/userrole/list/ws/" + row.id;
+          // 填充角色信息
+          for (let i = 0; i < this.memberLineData.length; i++) {
+            this.$get(url + "/" + this.memberLineData[i].id, response => {
+              let roles = response.data;
+              this.$set(this.memberLineData[i], "roles", roles);
+            })
+          }
+          this.memberTotal = data.itemCount;
+        });
+      },
       edit(row) {
         this.updateVisible = true;
         // copy user
@@ -376,23 +371,7 @@
         });
       },
       buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-      handleSizeChange(size) {
-        this.pageSize = size;
-        this.list();
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-        this.list();
-      },
-      handleMemberSizeChange(size) {
-        this.pageMemberSize = size;
-        this.cellClick(this.currentWorkspaceRow);
-      },
-      handleMemberCurrentChange(current) {
-        this.currentMemberPage = current;
-        this.cellClick(this.currentWorkspaceRow);
+        return path + "/" + this.currentMemberPage + "/" + this.pageMemberSize;
       },
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
diff --git a/frontend/src/business/components/settings/system/TestResourcePool.vue b/frontend/src/business/components/settings/system/TestResourcePool.vue
index 8c3ca9c22c..61ccbbd99c 100644
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@@ -53,23 +53,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
     </el-card>
 
     <el-dialog v-loading="result.loading"
@@ -239,10 +224,11 @@
 
 <script>
   import MsCreateBox from "../CreateBox";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     name: "MsTestResourcePool",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     data() {
       return {
         result: {},
@@ -340,12 +326,6 @@
       search() {
         this.initTableData();
       },
-      handleSizeChange(size) {
-        this.pageSize = size;
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-      },
       create() {
         this.createVisible = true;
       },
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index 6b25785dc2..abe67f2642 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -46,27 +46,13 @@
         </el-table-column>
       </el-table>
 
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
 
     </el-card>
 
-    <el-dialog :title="$t('user.create')" :visible.sync="createVisible" width="30%" @closed="closeFunc" :destroy-on-close="true">
+    <el-dialog :title="$t('user.create')" :visible.sync="createVisible" width="30%" @closed="closeFunc"
+               :destroy-on-close="true">
       <el-form :model="form" label-position="right" label-width="100px" size="small" :rules="rule" ref="createUserForm">
         <el-form-item label="ID" prop="id">
           <el-input v-model="form.id" autocomplete="off"/>
@@ -89,7 +75,8 @@
       </template>
     </el-dialog>
 
-    <el-dialog :title="$t('user.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+    <el-dialog :title="$t('user.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
+               @close="closeFunc">
       <el-form :model="form" label-position="right" label-width="100px" size="small" :rules="rule" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
           <el-input v-model="form.id" autocomplete="off" :disabled="true"/>
@@ -105,7 +92,7 @@
         </el-form-item>
       </el-form>
       <template v-slot:footer>
-        <span  class="dialog-footer">
+        <span class="dialog-footer">
           <el-button type="primary" onkeydown="return false;"
                      @click="updateUser('updateUserForm')" size="medium">{{$t('commons.save')}}</el-button>
         </span>
@@ -117,6 +104,7 @@
 
 <script>
   import MsCreateBox from "../CreateBox";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     data() {
@@ -138,12 +126,12 @@
         form: {},
         rule: {
           id: [
-            { required: true, message: this.$t('user.input_id'), trigger: 'blur'},
-            { min: 2, max: 20, message: this.$t('commons.input_limit', [2, 20]), trigger: 'blur' }
+            {required: true, message: this.$t('user.input_id'), trigger: 'blur'},
+            {min: 2, max: 20, message: this.$t('commons.input_limit', [2, 20]), trigger: 'blur'}
           ],
           name: [
             {required: true, message: this.$t('user.input_name'), trigger: 'blur'},
-            { min: 2, max: 20, message: this.$t('commons.input_limit', [2, 20]), trigger: 'blur' },
+            {min: 2, max: 20, message: this.$t('commons.input_limit', [2, 20]), trigger: 'blur'},
             {
               required: true,
               pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
@@ -160,7 +148,7 @@
             }
           ],
           email: [
-            { required: true, message: this.$t('user.input_email'), trigger: 'blur' },
+            {required: true, message: this.$t('user.input_email'), trigger: 'blur'},
             {
               required: true,
               pattern: /^([A-Za-z0-9_\-.])+@([A-Za-z0-9]+\.)+[A-Za-z]{2,6}$/,
@@ -172,9 +160,9 @@
       }
     },
     name: "MsUser",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     created() {
-      this.initTableData();
+      this.search();
     },
     methods: {
       create() {
@@ -195,7 +183,7 @@
               type: 'success',
               message: this.$t('commons.delete_success')
             });
-            this.initTableData();
+            this.search();
           });
         }).catch(() => {
           this.$message({
@@ -212,9 +200,9 @@
                 type: 'success',
                 message: this.$t('commons.save_success')
               });
-              this.initTableData();
+              this.search();
               this.createVisible = false;
-              });
+            });
           } else {
             return false;
           }
@@ -223,37 +211,34 @@
       updateUser(updateUserForm) {
         this.$refs[updateUserForm].validate(valide => {
           if (valide) {
-            this.result = this.$post(this.updatePath, this.form,() => {
+            this.result = this.$post(this.updatePath, this.form, () => {
               this.$message({
-                  type: 'success',
-                  message: this.$t('commons.modify_success')
+                type: 'success',
+                message: this.$t('commons.modify_success')
               });
               this.updateVisible = false;
-              this.initTableData();
-              });
+              this.search();
+            });
           } else {
             return false;
           }
         })
       },
       search() {
-        this.initTableData();
-      },
-      initTableData() {
         let param = {
           name: this.condition
         };
-        this.result = this.$post(this.buildPagePath(this.queryPath),param,response => {
-            let data = response.data;
-            this.total = data.itemCount;
-            this.tableData = data.listObject;
+        this.result = this.$post(this.buildPagePath(this.queryPath), param, response => {
+          let data = response.data;
+          this.total = data.itemCount;
+          this.tableData = data.listObject;
         })
       },
       closeFunc() {
         this.form = {};
       },
       changeSwitch(row) {
-        this.$post(this.updatePath, row,() =>{
+        this.$post(this.updatePath, row, () => {
           this.$message({
             type: 'success',
             message: this.$t('commons.modify_success')
@@ -263,14 +248,6 @@
       buildPagePath(path) {
         return path + "/" + this.currentPage + "/" + this.pageSize;
       },
-      handleSizeChange(size) {
-        this.pageSize = size;
-        this.initTableData();
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-        this.initTableData();
-      },
       handleSelectionChange(val) {
         this.multipleSelection = val;
       }
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 5ea94860fe..58dd25b371 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -32,23 +32,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
     </el-card>
 
     <el-dialog title="添加成员" :visible.sync="createVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
@@ -123,10 +108,11 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import {TokenKey} from "../../../../common/js/constants";
+  import MsTablePagination from "../../common/pagination/TablePagination";
 
   export default {
     name: "MsMember",
-    components: {MsCreateBox},
+    components: {MsCreateBox, MsTablePagination},
     data() {
       return {
         result: {},
@@ -189,12 +175,6 @@
       search() {
         this.initTableData();
       },
-      handleSizeChange(size) {
-        this.pageSize = size;
-      },
-      handleCurrentChange(current) {
-        this.currentPage = current;
-      },
       closeFunc() {
         this.form = {};
         this.initTableData();