help_user/src/sub/Volunteer.tsx

import React from "react";
import {Button, Table} from "react-bootstrap";
import {Input} from "../ui/InputGroup";
import {PageProps, User, UserType} from "../entity";
import {Page} from "../ui/Page";
import {Address} from "../ui/Address";
import {Method, request} from "../interface"
import {FindUserRes, FindUserTransform, PageDataMessage} from "../result";
import {MyDialog} from "../ui/MyDialog";
import {Api} from "../api";

/**
 * 志愿者信息
 */
export class Volunteer extends React.Component<{ undefined?:undefined },
    {
    form:{
        keyword:string;
        serviceAddress:string|null;
    };
    volunteerList?:Array<Array<User>>;
    page?:PageProps;
    result:JSX.Element|null;
}>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            result: null,
            form:{
                keyword:"",
                serviceAddress:""
            }
        }
    }

    componentDidMount() {
        this.loadVolunteerList(1)
    }

    /**
     * 加载志愿者列表
     */
    loadVolunteerList(page:number){

        let that=this
        request(Api.account.find,Method.GET,{
            currentPage:String(page),
            userTypes:[UserType.help],
            info:this.state.form.keyword,
            serviceAddress:this.state.form.serviceAddress?this.state.form.serviceAddress:""
        },new FindUserTransform(),function(res:FindUserRes){
            switch (res.customResult) {
                case PageDataMessage.ok:
                    that.setState({
                        volunteerList:res.dataList,
                        page:res.page,
                        form:{
                            keyword:that.state.form.keyword,
                            serviceAddress:that.state.form.serviceAddress
                        }
                    })
                    break
                case PageDataMessage.fail:
                    that.setState({
                        form:{
                            keyword:that.state.form.keyword,
                            serviceAddress:that.state.form.serviceAddress
                        },
                        result:<h3 className="text-center text-danger">志愿者搜索失败，请联系管理员</h3>
                    });break
                case PageDataMessage.empty:
                    that.setState({
                        volunteerList:[]
                    });
                    break
            }
        })
    }

    render() {
        return (
            <div className="p-5">

            <h3>搜索志愿者</h3>

                <Input col={3} name="keyword" desc="描述信息关键字" onChange={(value:string)=>this.setState({form:{
                     keyword:value,
                     serviceAddress:this.state.form.serviceAddress
                     }})}/>

                <div className="mt-3">
                    <Address onChange={(value:string)=>this.setState({
                        form:{
                            keyword:this.state.form.keyword,
                            serviceAddress:value
                        }
                    })}/>
                </div>

                <Button className="col-1 mt-3 mb-3" variant="info" onClick={()=>this.loadVolunteerList(1)}>搜索</Button>

                {/*<Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}


                    {this.state.volunteerList?this.state.volunteerList.length===0?<h3 className="text-info text-center">当前没有志愿者</h3>:this.state.volunteerList.map((volunteers:Array<User>, index:number)=>
                        <div className="p-3 d-flex ml-auto mr-auto volunteer overflow-auto justify-content-center" key={"row"+index}>{volunteers.map((volunteer:User, subIndex:number)=>
                            <div  key={"col"+subIndex} className="mr-3">
                                    <div className="border-info border">
                                        志愿者个人简介
                                    </div>
                                    <div>
                                        <p className="border-info border m-0">{volunteer.info}</p>
                                    </div>
                                    <div >
                                        <Table>
                                            <tbody>
                                            {[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.mobile,volunteer.email,volunteer.serviceAddress]].map((tr, index)=>
                                                <tr key={"tr"+index}>
                                                    {tr.map((td,index)=><td key={"td"+index} className="border border-info">{td}</td>)}
                                                </tr>
                                            )}
                                            </tbody>
                                        </Table>
                                    </div>
                            </div>
                        )}</div>
                    ):null}

                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-volunteer" menuName="搜索志愿者" onClose={()=>this.setState({result:null})}/>

                {this.state.page?<Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>:null}

            </div>

        )
    }
}