分页逻辑优化

master
pan 5 years ago
parent 8ec775a21a
commit 5061dd4a9f
  1. 6
      src/account/Register.tsx
  2. 5
      src/entity.ts
  3. 28
      src/my/MyFriend.tsx
  4. 18
      src/my/MyHelp.tsx
  5. 8
      src/my/MyInfo.tsx
  6. 2
      src/public.tsx
  7. 2
      src/sub/IndexMenu.tsx
  8. 6
      src/sub/Volunteer.tsx

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import {Input} from "../ui/InputGroup"; import {Input} from "../ui/InputGroup";
import {Button, Form} from 'react-bootstrap' import {Button, Form} from 'react-bootstrap'
import {RegisterProps, RegisterState, UserType} from "../entity"; import {RegisterProps, RegisterState, Sex, UserType} from "../entity";
import {UploadImg} from "../ui/UploadImg"; import {UploadImg} from "../ui/UploadImg";
import {Address} from "../ui/Address"; import {Address} from "../ui/Address";
import {JSONResponse, Method, request} from "../interface" import {JSONResponse, Method, request} from "../interface"
@ -155,7 +155,9 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
<Input col={4} name="sex" desc="性别" as="select" onChange={(value:string)=>{ <Input col={4} name="sex" desc="性别" as="select" onChange={(value:string)=>{
this.setState({sex:value}) this.setState({sex:value})
}} }}
options={[<option value="" key={"sex"+0}></option>,<option value="man" key={"sex"+1}></option>,<option value="women" key={"sex"+2}></option>]}/> options={[<option value="" key={"sex"+0}></option>,
<option value={Sex.man} key={"sex"+1}></option>,
<option value={Sex.women} key={"sex"+2}></option>]}/>
<UploadImg maxImageSize={maxImageSize} onChange={(imgObj:any)=> <UploadImg maxImageSize={maxImageSize} onChange={(imgObj:any)=>
{ {

@ -418,3 +418,8 @@ export interface HelpEntity {
//活动结束状态 //活动结束状态
hasEnd:boolean; hasEnd:boolean;
} }
export enum Sex {
man='man',
women='women'
}

@ -109,16 +109,16 @@ export class MyFriend extends React.Component<
/** /**
* *
*/ */
queryUser(name:string,page:number){ queryUser(userId:string,page:number){
if(!name){ if(!userId){
this.setState({ this.setState({
userList:[] userList:[]
}) })
}else { }else {
let that = this let that = this
request(Api.account.findUser, Method.GET, {name:name}, new UserTransform(), function (res: UserRes) { request(Api.account.findUser, Method.GET, {targetUserId:userId}, new UserTransform(), function (res: UserRes) {
switch (res.customResult) { switch (res.customResult) {
case PageDataMessage.ok: case PageDataMessage.ok:
that.setState({ that.setState({
@ -177,29 +177,15 @@ export class MyFriend extends React.Component<
<img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({userId:friend.userId})}/> <img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({userId:friend.userId})}/>
</Tooltip> </Tooltip>
</ListGroup.Item> </ListGroup.Item>
):null} ):null}
<ListGroup.Item></ListGroup.Item>
{this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null} {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
</ListGroup>
<ListGroup className="overflow-auto bg-light friend-list">
<ListGroup.Item variant="primary"></ListGroup.Item>
<ListGroup.Item>
<FormControl placeholder="查找用户" onChange={(e)=>{
this.setState({
queryUser:e.target.value
})
this.queryUser(e.target.value,1)
}}/>
</ListGroup.Item>
{this.state.userList?this.state.userList.length>0?this.state.userList.map((user:User,index:number)=>
<ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
<span>{user.name}</span>
<Tooltip title="查看用户信息" placement="right">
<img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({userId:user.userId})}/>
</Tooltip>
</ListGroup.Item>):<ListGroup.Item></ListGroup.Item>:null}
</ListGroup> </ListGroup>
</div> </div>

@ -80,19 +80,9 @@ export class MyHelp extends React.Component<{
* @param help * @param help
*/ */
getAction(help:HelpEntity){ getAction(help:HelpEntity){
if(help.activityScore){ if(help.completeTime){
return (<Row>
<Col className={classList}></Col>
<Col className={classList}/>
<Col className={classList}>{help.activityScore}</Col>
</Row>)
}
else if(help.joinTime&&help.completeTime){
return (<Row> return (<Row>
<Col className={classList}></Col> <Col className={classList}></Col>
<Col className={classList+" p-3"}>
<Button className="w-100" onClick={()=>this.setState({historyId:help.historyId})}></Button>
</Col>
<Col className={classList}/> <Col className={classList}/>
</Row>) </Row>)
}else if(help.joinTime){ }else if(help.joinTime){
@ -110,7 +100,7 @@ export class MyHelp extends React.Component<{
}) })
}} variant={"info"}></Button>}</Col> }} variant={"info"}></Button>}</Col>
<Col className={classList}/>
</Row>) </Row>)
}else{ }else{
return ( return (
@ -125,7 +115,7 @@ export class MyHelp extends React.Component<{
}) })
}} variant={"info"}></Button>:null} }} variant={"info"}></Button>:null}
</Col> </Col>
<Col className={classList}/>
</Row> </Row>
) )
} }
@ -190,7 +180,7 @@ export class MyHelp extends React.Component<{
)} )}
</Row> </Row>
<Row> <Row>
{["参与状态","操作","活动评分"].map((text:string,index:number)=> {["参与状态","操作"].map((text:string,index:number)=>
<Col className={classList} key={"col"+index}>{text}</Col> <Col className={classList} key={"col"+index}>{text}</Col>
)} )}
</Row> </Row>

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap"; import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
import {User, UserEdit, UserType} from "../entity"; import {Sex, User, UserEdit, UserType} from "../entity";
import {Input} from "../ui/InputGroup"; import {Input} from "../ui/InputGroup";
import {JSONResponse, Method, request} from "../interface"; import {JSONResponse, Method, request} from "../interface";
import { import {
@ -294,9 +294,9 @@ export class MyInfo extends React.Component<
<FormControl value={this.state.userEdit.sex} as={"select"} onChange={event => this.setState({ <FormControl value={this.state.userEdit.sex} as={"select"} onChange={event => this.setState({
userEdit:{...this.state.userEdit,...{ sex:event.target.value}} userEdit:{...this.state.userEdit,...{ sex:event.target.value}}
})}> })}>
<option value={"man"}></option> <option value={Sex.man}></option>
<option value={"women"}></option> <option value={Sex.women}></option>
</FormControl>:this.state.userInfo?.sex==='man'?"男":"女"} </FormControl>:this.state.userInfo?.sex===Sex.man?"男":"女"}
</Col> </Col>
</Row> </Row>
<Row> <Row>

@ -32,7 +32,7 @@ export function changeActivity(activityId:number,activityStatus:ActivityStatus,t
callback(res.timeScore) callback(res.timeScore)
that.setState({ that.setState({
result:<div> result:<div>
<h3 className="text-info text-center">{getStatus(activityStatus)},{ActivityStatus.complete===activityStatus?'关闭此窗口将刷新时间币':null}</h3> <h3 className="text-info text-center">{getStatus(activityStatus)}{ActivityStatus.complete===activityStatus?',关闭此窗口将刷新时间币':null}</h3>
</div> </div>
});break });break
case SimpleMessage.fail: case SimpleMessage.fail:

@ -68,7 +68,7 @@ export class IndexMenu extends React.Component<{ cookies:Cookies },
});break; });break;
case PageDataMessage.ok: case PageDataMessage.ok:
that.setState({ that.setState({
activityList: page===1?res.dataList||[]:(that.state.activityList||[]).concat(res.dataList||[]), activityList:res.dataList,
page: res.page, page: res.page,
}) })
break break

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import {Button, Table} from "react-bootstrap"; import {Button, Table} from "react-bootstrap";
import {Input} from "../ui/InputGroup"; import {Input} from "../ui/InputGroup";
import {PageProps, User, UserType} from "../entity"; import {PageProps, Sex, User, UserType} from "../entity";
import {Page} from "../ui/Page"; import {Page} from "../ui/Page";
import {Address} from "../ui/Address"; import {Address} from "../ui/Address";
import {Method, request} from "../interface" import {Method, request} from "../interface"
@ -56,7 +56,7 @@ export class Volunteer extends React.Component<{ undefined?:undefined },
case PageDataMessage.ok: case PageDataMessage.ok:
that.setState({ that.setState({
volunteerList: page===1?res.dataList||[]:(that.state.volunteerList||[]).concat(res.dataList||[]), volunteerList: res.dataList,
page: res.page, page: res.page,
form:{ form:{
keyword:that.state.form.keyword, keyword:that.state.form.keyword,
@ -118,7 +118,7 @@ export class Volunteer extends React.Component<{ undefined?:undefined },
<div > <div >
<Table> <Table>
<tbody> <tbody>
{[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.mobile,volunteer.email,volunteer.serviceAddress]].map((tr, index)=> {[[volunteer.name,volunteer.sex===Sex.man?'男':'女',volunteer.age],[volunteer.mobile,volunteer.email,volunteer.serviceAddress]].map((tr, index)=>
<tr key={"tr"+index}> <tr key={"tr"+index}>
{tr.map((td,index)=><td key={"td"+index} className="border border-info">{td}</td>)} {tr.map((td,index)=><td key={"td"+index} className="border border-info">{td}</td>)}
</tr> </tr>

Loading…
Cancel
Save