Merge pull request 'fix(表格组件)：修改表格组件分页为后端分页' (#1) from dev into main

Reviewed-on: #1

src/components/DataTable.vue

@@ -134,10 +134,6 @@ export default {
     updatePageCount(newPageSize) {
       this.pageCount = Math.floor(this.dataCount / newPageSize);
       this.pageCount += this.dataCount % newPageSize == 0 ? 0 : 1;
-    },
-    //更新单页数据
-    updateRows(newPageIndex) {
-      
     },
     //更新分页按钮数据
     updatePageBtn(newPageIndex){
@@ -155,7 +151,9 @@ export default {
           this.pageBtn.push({text: '...', index: newPageIndex})
         }
         //渲染当前页码左右各两格页码
-        for(let i = newPageIndex - 2; i <= newPageIndex + 2; i++){
+        const numleft = (newPageIndex - 2) < 2 ? newPageIndex - 2 : 2;
+        const numright = (newPageIndex + 2) < this.pageCount ? 2 : (this.pageCount - newPageIndex - 1);
+        for(let i = newPageIndex - numleft; i <= newPageIndex + numright; i++){
           this.pageBtn.push({text: `${i}`, index: i})
         }
         //当前页右侧显示2格页码，当显示最大页码距离尾页中间间隔大于1时隐藏间隔页面
@@ -174,7 +172,7 @@ export default {
         this.updatePageCount(newVal)
         //单页显示数据量改变时重置当前索引，防止数据以及控件异常
         this.currentPageIndex = 1
-        this.updateRows(this.currentPageIndex)
+        this.$emit('pageChanged',{pageIndex:this.currentPageIndex,pageSize:newVal})
         this.updatePageBtn(this.currentPageIndex)
       },
       immediate: true
@@ -182,7 +180,7 @@ export default {
     //监听页索引，用于切换数据
     'currentPageIndex': {
       handler(newVal) {
-        this.updateRows(newVal)
+        this.$emit('pageChanged',{pageIndex:newVal,pageSize:this.pageSize})
         this.updatePageBtn(newVal)
       },
       immediate: true

src/request/api.js

@@ -17,11 +17,15 @@ const getUserInfo = async () => await request.get('/api/User/UserInfo')
 //获取用户列表（分页）
 const getUserList = async (pageIndex,pageSize,desc) => await request.get(`/api/Admin/UserList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
 
+//获取用户数量
+const getUserCount = async () => await request.get('/api/Admin/UserCount')
+
 export default {
     login,
     register,
     SendValidateCode,
     getAllConfig,
     getUserInfo,
-    getUserList
+    getUserList,
+    getUserCount
 }

src/router/index.js

@@ -61,13 +61,24 @@ const routes = [
         path: 'test',
         component: () => import('@/views/layout/Users.vue'),
         meta: {
-          title: '用户管理',
+          title: '充值中心',
           icon: 'inbox',
           showInMenu: true,
           showInUser:false,
           isHome:false
         }
       },
+      {
+        path: 'api',
+        component: () => import('@/views/layout/Dashboard.vue'),
+        meta: {
+          title: 'API管理',
+          icon: 'home',
+          showInMenu: true,
+          showInUser:false,
+          isHome:true
+        }
+      },
     ]
   }
 ]

src/views/layout/Users.vue

@@ -2,8 +2,8 @@
     <div class="main-wrapper">
 
         <div class="row">
-            <div class="col">
-                <DataTable :title="'员工信息表'" :headers="tableHeaders" :rows="tableData" :data-count="dataCount"/>
+            <div class="col" v-if="isLoaded">
+                <DataTable :title="'用户管理'" :headers="tableHeaders" :rows="tableData" :data-count="dataCount" @pageChanged="pageChangedHandle"/>
             </div>
         </div>
     </div>
@@ -16,113 +16,41 @@ export default {
   components: { DataTable },
   data() {
     return {
-        dataCount:11,
+        dataCount:0,
+        isLoaded:false,
       tableHeaders: [
-        { text: "名字", value: "name", width: "155px" },
-        { text: "位置", value: "position", width: "214px" },
-        { text: "办公室", value: "office", width: "48px" },
-        { text: "年龄", value: "age", width: "29px" },
-        { text: "开始日期", value: "startDate", width: "82px" },
-        { text: "工资", value: "salary", width: "103px" },
-      ],
-      tableData: [
-        {
-          name: "佐藤爱理",
-          position: "会计",
-          office: "东京",
-          age: 33,
-          startDate: "2008/11/28",
-          salary: "162,700 元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        {
-          name: "安吉莉卡·拉莫斯",
-          position: "首席执行官 （CEO）",
-          office: "伦敦",
-          age: 47,
-          startDate: "2009/10/09",
-          salary: "1,200,000 美元",
-        },
-        // 其他数据...
+        { text: "编号", value: "id", width: "155px" },
+        { text: "用户名", value: "userName", width: "214px" },
+        { text: "邮箱", value: "email", width: "48px" },
+        { text: "余额", value: "balance", width: "29px" },
+        { text: "状态", value: "isBan", width: "82px",type:"state"},
+        { text: "角色", value: "roles", width: "103px" },
+        { text: "创建时间", value: "created", width: "103px" },
       ],
+      tableData: [],
     };
   },
   methods: {
     async loadUserList(pageIndex = 1, pageSize = 10, desc = false){
         try{
             const res = await this.$api.getUserList(pageIndex,pageSize,desc)
-            console.log(res)
+            if(res.code == '1000'){
+              this.tableData = res.data
+            }
         }catch(e){
             this.$alert('用户列表数据加载失败!','danger')
             console.error(e)
         }
+    },
+    async pageChangedHandle(newval){
+      console.log(newval)
+      await this.loadUserList(newval.pageIndex,newval.pageSize,false)
     }
   },
-  mounted(){
-    this.loadUserList()
+  async mounted(){
+    await this.loadUserList()
+    this.dataCount = (await this.$api.getUserCount()).data
+    this.isLoaded = true
   }
 };
 </script>