分页逻辑对接服务端

src/Active.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, Form, Image, ListGroup, Tab, Table, Tabs} from "react-bootstrap";
-import {ManagerActivity} from "./entity";
+import {ManagerActivity, PageProps} from "./entity";
 import {JSONResponse, Method, request} from "./interface";
 import {API, prefix} from "./api";
 import {EmptyBodyTransform, FindActivityRes, FindActivityTransform, PageDataMessage, SimpleMessage} from "./result";
@@ -8,6 +8,7 @@ import {MyDialog} from "./ui/MyDialog";
 import moment from "moment";
 import {Input} from "./ui/InputGroup";
 import {UploadImg} from "./ui/UploadImg";
+import {Page} from "./ui/Page";
 
 const contentMaxLength=50
 /**
@@ -68,7 +69,8 @@ class EditActive extends React.Component<
 export class Active extends React.Component<any, {
     activeList?:Array<ManagerActivity>;
     tipContent:JSX.Element|null
-    dialog:JSX.Element|null
+    dialog:JSX.Element|null,
+    page?:PageProps
 }>{
 
 
@@ -77,7 +79,7 @@ export class Active extends React.Component<any, {
 
         this.state={
             tipContent:null,
-            dialog:null
+            dialog:null,
         }
     }
 
@@ -90,9 +92,9 @@ export class Active extends React.Component<any, {
             switch (res.customResult) {
                 case PageDataMessage.ok:
                     that.setState({
-                        activeList:res.dataList
+                        activeList:res.dataList,
+                        page:res.page
                     })
-                    // that.loadActive(1)
                     break
                 case PageDataMessage.fail:
                     that.setState({
@@ -155,6 +157,10 @@ export class Active extends React.Component<any, {
                         </tbody>
                     </Table>
 
+                    {this.state.page?<Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage}
+                                           totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+                        :<span className="text-danger text-center">丢失分页数据</span>}
+
                     {this.state.dialog}
 
                     <MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"user-dialog"} menuName={"操作提示"}

src/Manager.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import {Button, Form, Tab, Table, Tabs} from "react-bootstrap";
-import {ManagerEntity} from "./entity";
+import {ManagerEntity, PageProps} from "./entity";
 import {Input} from "./ui/InputGroup";
 import {Cookies} from "react-cookie";
 import {MyDialog} from "./ui/MyDialog";
 import {JSONResponse, Method, request} from "./interface";
 import {API} from "./api";
-import {EmptyBodyTransform, ManagerList, ManagerTransform, SimpleMessage} from "./result";
+import {EmptyBodyTransform, ManagerList, ManagerTransform, PageDataMessage, SimpleMessage} from "./result";
 import {manager_cookie} from "./account/PropCookie";
 import {register} from './public'
+import {Page} from "./ui/Page";
 
 enum Type {
     modify,
@@ -91,6 +92,7 @@ export class Manager extends React.Component<
         dialog:JSX.Element|null;
         //操作反馈
         tipContent:JSX.Element|null;
+        page?:PageProps;
     }>{
 
     constructor(props: Readonly<any>) {
@@ -98,7 +100,7 @@ export class Manager extends React.Component<
 
         this.state={
             tipContent: null,
-            dialog:null,
+            dialog:null
         }
 
     }
@@ -138,12 +140,17 @@ export class Manager extends React.Component<
             currentPage:page+""
         },new ManagerTransform(),function (res:ManagerList) {
                 switch (res.customResult) {
-                    case SimpleMessage.ok:
+                    case PageDataMessage.ok:
                         that.setState({
-                            managerList:res.dataList
+                            managerList:res.dataList,
+                            page: res.page
+                        })
+                        break
+                    case PageDataMessage.fail:
+                        that.setState({
+                            tipContent:<h3 className="text-center text-danger">加载数据失败，请联系管理员</h3>
                         })
                         break
-                    case SimpleMessage.fail:
 
                 }
         })
@@ -234,11 +241,12 @@ export class Manager extends React.Component<
                         </tbody>
                     </Table>
 
+                    {this.state.page?<Page onClick={(page:number)=>this.loadManager(page)} currentPage={this.state.page.currentPage}
+                                           totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>:null}
 
                     {this.state.dialog}
 
 
-
                     <MyDialog content={this.state.tipContent} open={this.state.tipContent!=null}
                               titleId={"manager-tip"} menuName={"提示信息"} onClose={()=>this.setState({
                         tipContent:null

src/User.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, Form, Image, Tab, Table, Tabs} from "react-bootstrap";
-import {UserEntity, UserType} from "./entity";
+import {PageProps, UserEntity, UserType} from "./entity";
 import {Input} from "./ui/InputGroup";
 import {JSONResponse, Method, request} from "./interface";
 import {API, prefix} from "./api";
@@ -8,6 +8,7 @@ import {EmptyBodyTransform, FindUserRes, FindUserTransform, PageDataMessage, Sim
 import {MyDialog} from "./ui/MyDialog";
 import {Address} from "./ui/Address";
 import {UploadImg} from "./ui/UploadImg";
+import {Page} from "./ui/Page";
 /**
  * 图片尺寸限制
  */
@@ -162,6 +163,7 @@ export class User extends React.Component<
         user?:UserEntity;
         headImg?:string;
         dialog:JSX.Element|null;
+        page?:PageProps;
     }>{
 
 
@@ -186,7 +188,8 @@ export class User extends React.Component<
                 switch (res.customResult) {
                     case PageDataMessage.ok:
                         that.setState({
-                            userList:res.dataList
+                            userList:res.dataList,
+                            page:res.page
                         })
                         break
                     case PageDataMessage.fail:
@@ -264,6 +267,9 @@ export class User extends React.Component<
                         </tbody>
                     </Table>
 
+                    {this.state.page?<Page onClick={(page:number)=>this.loadUser(page)} currentPage={this.state.page.currentPage}
+                                           totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+                    :<span className="text-danger text-center">丢失分页数据</span>}
 
                     {this.state.dialog}
 

src/result.ts

@@ -65,22 +65,6 @@ export class RegisterTransform extends EmptyBodyDiffMsg<RegisterRes>{
 }
 
 
-export class ManagerList extends JSONResponse<SimpleMessage>{
-    dataList?:Array<ManagerEntity>
-}
-
-export class ManagerTransform extends TransformData<SimpleMessage, ManagerList>{
-    protected newObject(): ManagerList {
-        return new ManagerList();
-    }
-
-    protected transformBody(data: any) {
-        if (data.body) {
-            this.target.dataList = data.body.body
-        }
-    }
-}
-
 /**
  * 分页数据转换
  */
@@ -110,6 +94,19 @@ export abstract class PageDataTransform<T extends PageDataRes> extends Transform
 
     }
 }
+
+
+
+export class ManagerList extends PageDataRes{
+    dataList?:Array<ManagerEntity>
+}
+
+export class ManagerTransform extends PageDataTransform<ManagerList>{
+    protected newObject(): ManagerList {
+        return new ManagerList();
+    }
+}
+
 /**
  * 用户信息实体
  */