feat 添加分页组件

admin-fe/src/assets/app.css

@@ -123,9 +123,10 @@ table{
     width: 100%;
     border-left: solid 1px #eee;
     border-top: solid 1px #eee;
+    border-collapse: collapse;
 }
 td,th {
     border-right: solid 1px #eee;
     border-bottom: solid 1px #eee;
-    padding:2px 4px;
+    padding:6px;
 }

admin-fe/src/components/pager/Pager.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="page-wrapper">
+    <span v-if="showRefresh" class="refresh" @click="$emit('refresh')">刷新</span>
+    <span v-if="page > 1" class="prev-page page-item" @click="$emit('page-change',--page)">上一页</span>
+    <span class="page-item page-first" :class="{'current-page':page == 1}"
+          @click="$emit('page-change',(page=1))">1</span>
+    <template v-for="index in pageData">
+      <span class="page-item" :class="{'current-page':page == index}" @click="$emit('page-change',(page=index))">{{
+          index
+        }}</span>
+    </template>
+    <span class="page-item page-end" :class="{'current-page':page == totalPage}"
+          @click="$emit('page-change',(page=totalPage))">{{
+        totalPage
+      }}</span>
+    <span v-if="page < totalPage" class="page-item next-page" @click="$emit('page-change',++ page)">下一页</span>
+  </div>
+</template>
+
+<script>
+import {computed, defineComponent, ref} from 'vue'
+
+export default defineComponent({
+  name: "Pager",
+  props: {
+    /**
+     * 总条数
+     */
+    total: {
+      type: Number,
+      require: true
+    },
+    showRefresh: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 每页的条数
+     */
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ['refresh', 'page-change'],
+  setup(props) {
+    const totalPage = computed(() => Math.ceil((props.total || 0) / props.pageSize))
+    const page = ref(props.currentPage)
+    const pageData = computed(() => {
+      // 循环使用的开始和结束页码
+      let start = page.value - 2, end = page.value + 2
+      if (start <= 1) {
+        // 补足少的页码
+        end += 1 - start;
+        start = 2;
+      }
+      if (end >= totalPage.value) {
+        end = totalPage.value - 1;
+        start = end - 4;
+        if (start <= 1) {
+          start = 2;
+        }
+      }
+      const pages = []
+      for (; start <= end; start++) {
+        pages.push(start)
+      }
+      return pages
+    })
+    return {
+      totalPage, page, pageData
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.page-wrapper {
+  margin: 20px 0;
+
+  .page-item {
+    cursor: pointer;
+    border: solid 1px var(--primary-2);
+    border-radius: var(--border-radius-middle);
+    display: inline-block;
+    padding: 4px 10px;
+    margin: 0 5px;
+    min-width: 40px;
+    text-align: center;
+
+    &:hover, &.current-page {
+      border-color: var(--primary-color);
+      color: var(--primary-color)
+    }
+  }
+}
+</style>

admin-fe/src/components/pager/index.ts

@@ -0,0 +1,4 @@
+import PagerComponent from './Pager.vue'
+
+const Pager = PagerComponent
+export default Pager

admin-fe/src/util/http.ts

@@ -1,5 +1,6 @@
 import {toast} from "../components/message";
 import {useUserStore} from "../service/store";
+import router from '../router'
 
 export type HttpMethod = 'get' | 'post' | 'delete' | 'put'
 
@@ -99,9 +100,11 @@ class Http {
                         // 需要统一处理数据
                         if (code === 403) {
                             toast("登录凭证无效或者已过期")
-                            // if (r.fullPath != '/login') {
+                            // 通过router获取当前路由
-                            //     router.replace('/login');
+                            const route = router.currentRoute;
-                            // }
+                            if (route.fullPath != '/login') {
+                                router.replace('/login');
+                            }
                             return;
                         } else if (err) {
                             toast(httpConfig.globalErrorHandler[code])

admin-fe/src/views/user/index.vue

@@ -1,35 +1,38 @@
 <template>
 
-  <table>
+  <div>
-    <tr>
+    <table>
-      <th>UID</th>
+      <tr>
-      <th>昵称</th>
+        <th>UID</th>
-      <th>OPEN_ID</th>
+        <th>昵称</th>
-      <th>性别</th>
+        <th>OPEN_ID</th>
-      <th>地区</th>
+        <th>性别</th>
-      <th>推荐者</th>
+        <th>地区</th>
-      <th>状态</th>
+        <th>推荐者</th>
-      <th>积分</th>
+        <th>状态</th>
-      <th>注册时间</th>
+        <th>积分</th>
-      <th>操作</th>
+        <th>注册时间</th>
-    </tr>
+        <th>操作</th>
-    <tr v-for="u in userList" :key="u.id">
+      </tr>
-      <td>{{ u.id }}</td>
+      <tr v-for="u in userList" :key="u.id">
-      <td>{{ u.nickname }}</td>
+        <td>{{ u.id }}</td>
-      <td>{{ u.openId }}</td>
+        <td>{{ u.nickname }}</td>
-      <td>{{ GenderEnum[u.gender] || '未知' }}</td>
+        <td>{{ u.openId }}</td>
-      <td>{{ u.province + '-' + u.city }}</td>
+        <td>{{ GenderEnum[u.gender] || '未知' }}</td>
-      <td>{{ u.parent?.nickname || '-' }}</td>
+        <td>{{ u.province + '-' + u.city }}</td>
-      <td>{{ StatusEnum[u.status] || '未知' }}</td>
+        <td>{{ u.parent?.nickname || '-' }}</td>
-      <td>{{ u.pointInfo?.totalPoint }}</td>
+        <td>{{ StatusEnum[u.status] || '未知' }}</td>
-      <td>{{ u.firstLoginTime }}</td>
+        <td>{{ u.pointInfo?.totalPoint }}</td>
-      <td>
+        <td>{{ u.firstLoginTime }}</td>
-        <span @click="editUser(u)">编辑</span>
+        <td>
-        <span>禁用</span>
+          <span @click="editUser(u)">编辑</span>
-        <span @click="removeUser(u.id)">删除</span>
+          <span>禁用</span>
-      </td>
+          <span @click="removeUser(u.id)">删除</span>
-    </tr>
+        </td>
-  </table>
+      </tr>
+    </table>
+    <Pager :total="userTotalCount" show-refresh @refresh="loadUserList" @page-change="onPageChange"/>
+  </div>
   <Modal v-model="modalVisible">
     <div>
       <div>
@@ -60,6 +63,7 @@ import {onMounted, reactive, ref} from "vue";
 import http, {DataListModel} from "../../util/http";
 import message from "../../components/message";
 import Modal from "../../components/modal/modal.vue";
+import Pager from "../../components/pager/Pager.vue";
 //
 const GenderEnum = {
   1: '男', 2: '女'
@@ -88,6 +92,11 @@ const editUserData = reactive({
 });
 const userTotalCount = ref(0)
 
+function onPageChange(currentPage: number) {
+  param.page = currentPage;
+  loadUserList();
+}
+
 function loadUserList() {
   http.post<DataListModel<UserInfoModel>>('/admin/user/list', param).then(res => {
     userList.value = res.items

api/src/main/java/me/xiaoyan/point/api/controller/admin/UserAdminController.java

@@ -34,6 +34,12 @@ public class UserAdminController {
         userStoreMap.put("test", UserAdminInfo.create(2, "test", "123123"));
     }
 
+    @PostMapping
+    public UserInfo update(@RequestBody UserInfo userInfo) {
+        if (!userInfoService.updateById(userInfo)) throw BizException.saveFail();
+        return userInfo;
+    }
+
     @SneakyThrows
     @PostMapping("login")
     public UserAdminInfo login(@Validated @RequestBody UserAdminInfo user) {

api/src/main/java/me/xiaoyan/point/api/error/BizException.java

@@ -20,4 +20,8 @@ public class BizException extends RuntimeException {
     public static BizException create(int code,String message) {
         return new BizException(code, message);
     }
+
+    public static BizException saveFail() {
+        return create(1022,"保存失败");
+    }
 }

api/src/main/java/me/xiaoyan/point/api/pojo/UserInfo.java

@@ -10,6 +10,7 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 import lombok.experimental.Accessors;
 
+import javax.validation.constraints.NotNull;
 import java.io.Serializable;
 import java.util.Date;
 
@@ -24,6 +25,7 @@ public class UserInfo implements Serializable {
      * 用户id
      */
     @TableId(type = IdType.AUTO)
+    @NotNull
     private Integer id;
     /**
      * 微信openid