fix: account cannot be paged

src/api/user.js

@@ -228,11 +228,20 @@ export function getUsersByGroup (query) {
     method: 'GET',
     params: {
       briefRepresentation: true,
-      max,
+      max: max + 1,
       first: pageNum ? (pageNum - 1) * max : void 0,
       ...params
     }
-  }).then(data => { return { data } })
+  }).then(data => {
+    const totalCount = data.length
+    if (totalCount > max) {
+      data = data.slice(0, -1)
+    }
+    return {
+      data,
+      totalCount
+    }
+  })
 }
 
 export function getUserGroups (id, briefRepresentation = true) {

src/components/table/Table/index.vue

@@ -88,12 +88,18 @@
         @click="onPagination"
       />
     </el-table>
-    <pagination
-      :total="options.totalCount"
-      :page.sync="options.params.pageNum"
-      :limit.sync="options.params.pageSize"
-      @pagination="onPagination"
-    />
+    <slot
+      name="pagination"
+      :options="options"
+      :pagination="onPagination"
+    >
+      <pagination
+        :total="options.totalCount"
+        :page.sync="options.params.pageNum"
+        :limit.sync="options.params.pageSize"
+        @pagination="onPagination"
+      />
+    </slot>
     <slot />
   </div>
 </template>

src/scss/bem/_object.scss

@@ -73,6 +73,16 @@
   }
 }
 
+.o-pagination-button {
+  border-color: $blue;
+  background-color: $blue;
+
+  &:hover {
+    border-color: rgba($blue, .8);
+    background-color: rgba($blue, .8);
+  }
+}
+
 .o-tag {
   min-width: 80px;
   text-align: center;

src/views/realm/assign/User.vue

@@ -4,15 +4,46 @@
     class="c-tree-sidebar__main"
   >
     <template v-if="!options.loading">
-      <el-tree
-        v-if="options.users.length"
-        ref="tree"
-        :data="options.users"
-        node-key="id"
-        highlight-current
-        :props="{ label: 'username' }"
-        @node-click="onChange"
-      />
+      <template v-if="options.users.length">
+        <el-tree
+          ref="tree"
+          :data="options.users"
+          node-key="id"
+          highlight-current
+          :props="{ label: 'username' }"
+          @node-click="onChange"
+        />
+        <el-button-group
+          v-if="hasPages"
+          class="has-top-padding"
+        >
+          <el-button
+            class="o-pagination-button"
+            type="primary"
+            size="mini"
+            :disabled="isFirstPage"
+            @click="onFirstPage"
+          >
+            首页
+          </el-button>
+          <el-button
+            class="o-pagination-button"
+            type="primary"
+            size="mini"
+            icon="el-icon-arrow-left"
+            :disabled="isFirstPage"
+            @click="onPresentPage"
+          />
+          <el-button
+            class="o-pagination-button"
+            type="primary"
+            size="mini"
+            icon="el-icon-arrow-right"
+            :disabled="isLastPage"
+            @click="onNextPage"
+          />
+        </el-button-group>
+      </template>
       <div
         v-else
         class="has-padding-top"
@@ -50,6 +81,17 @@ export default {
       options: null
     }
   },
+  computed: {
+    isFirstPage () {
+      return this.options.params.pageNum === 1
+    },
+    isLastPage () {
+      return !this.options.hasNextPage
+    },
+    hasPages () {
+      return !this.isFirstPage || !this.isLastPage
+    }
+  },
   watch: {
     tenant () {
       this.init()
@@ -67,20 +109,39 @@ export default {
         loading: true,
         error: false,
         users: [],
-        used: true
+        used: true,
+        hasNextPage: false,
+        params: {
+          id: this.tenant.id,
+          pageSize: 10,
+          pageNum: 1
+        }
       }
       this.onChange()
       this.getUsers()
     },
+    onFirstPage () {
+      this.options.params.pageNum = 1
+      this.getUsers()
+    },
+    onPresentPage () {
+      this.options.params.pageNum -= 1
+      this.getUsers()
+    },
+    onNextPage () {
+      this.options.params.pageNum += 1
+      this.getUsers()
+    },
     getUsers () {
       const options = this.options
       options.loading = true
       options.error = false
-      getUsersByGroup({ id: this.tenant.id }).then(
-        ({ data }) => {
+      getUsersByGroup(options.params).then(
+        ({ data, totalCount }) => {
           options.loading = false
           if (data.length && options.used) {
             options.users = data
+            options.hasNextPage = totalCount > data.length
             this.$emit('change', data[0].id)
             this.$nextTick(() => {
               this.$refs.tree.setCurrentKey(data[0].id)
@@ -88,6 +149,7 @@ export default {
           }
         },
         () => {
+          options.users = []
           options.loading = false
           options.error = false
         }

src/views/realm/user/Account.vue

@@ -3,6 +3,44 @@
     ref="table"
     :schema="schema"
   >
+    <template #pagination="{ options, pagination }">
+      <div class="l-flex__none u-text-center">
+        <el-button-group
+          v-if="options.params.pageNum > 1 || options.totalCount > options.params.pageSize"
+          class="has-top-padding"
+        >
+          <el-button
+            class="o-pagination-button"
+            type="primary"
+            size="mini"
+            :disabled="options.params.pageNum === 1"
+            @click="onFirstPage(options, pagination)"
+          >
+            首页
+          </el-button>
+          <el-button
+            class="o-pagination-button"
+            type="primary"
+            size="mini"
+            icon="el-icon-arrow-left"
+            :disabled="options.params.pageNum === 1"
+            @click="onPresentPage(options, pagination)"
+          >
+            上一页
+          </el-button>
+          <el-button
+            class="o-pagination-button"
+            type="primary"
+            size="mini"
+            :disabled="options.totalCount <= options.params.pageSize"
+            @click="onNextPage(options, pagination)"
+          >
+            下一页
+            <i class="el-icon-arrow-right el-icon--right" />
+          </el-button>
+        </el-button-group>
+      </div>
+    </template>
     <confirm-dialog
       ref="editDialog"
       title="新增账号"
@@ -73,7 +111,6 @@ export default {
   data () {
     return {
       schema: {
-        singlePage: true,
         condition: { id: this.group.id },
         list: getUsersByGroup,
         buttons: [
@@ -106,6 +143,18 @@ export default {
     }
   },
   methods: {
+    onFirstPage (options, pagination) {
+      options.params.pageNum = 1
+      pagination()
+    },
+    onPresentPage (options, pagination) {
+      options.params.pageNum -= 1
+      pagination()
+    },
+    onNextPage (options, pagination) {
+      options.params.pageNum += 1
+      pagination()
+    },
     onSettings (user) {
       this.user = user
       this.showSettings = true