help_user/src/my/SeekHelp.tsx

import React from "react";
import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
import {ActivityStatus, PageProps, SeekHelpState, User} from "../entity";
import moment from "moment";
import Dialog from "@material-ui/core/Dialog";
import {CloseDialog} from "../ui/CloseDialog";
import {Paper, Tooltip} from "@material-ui/core";
import Draggable from "react-draggable";
import {MyDialog} from "../ui/MyDialog";
import {MyInfo} from "./MyInfo";
import {Method, request} from "../interface";
import {
    PageDataMessage,
    SeekHelpInfoRes,
    SeekHelpInfoTransform,
    SeekHelpUser,
    SeekHelpUserTransform,
    SimpleMessage
} from "../result";
import {getStatus, scrollBottom} from "../public";
import {Api, prefix} from "../api";
import {SimpleSnackbar} from "../ui/toast";

const titleId="seek-help-dialog"

/**
 * 我的求助
 */
export class SeekHelp extends React.Component<{ user:string },
    {
     //求助信息
    data?:Array<SeekHelpState>;
    //志愿者列表弹框打开状态
    open:boolean;
    //筛选的活动状态
    status?:string;
    //志愿者列表
    volunteerList?:Array<User>;
    //打开用户信息弹框
    openUserInfo:boolean;
    //查看用户信息用户id
    userId?:string;
    //操作反馈弹窗
    result:JSX.Element|null;
    //分页信息
    page?:PageProps;
    scrollTip:string|null
    }>{


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

        this.state={
            data:[],
            open:false,
            openUserInfo:false,
            result:null,
            scrollTip:null
        }
    }

    componentDidMount() {
        this.loadHelp(1)
    }

    /**
     * 加载我的求助信息
     */
    loadHelp(page:number){
        let that=this
        request(Api.main.activity.seekHelp,Method.GET, {
            currentPage:String(page)
        },new SeekHelpInfoTransform(),function (res:SeekHelpInfoRes) {
                switch (res.customResult) {
                    case PageDataMessage.ok:
                        that.setState({
                            data: (that.state.data||[]).concat(res.dataList||[]),
                            page: res.page,
                            scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null,
                        })
                        break
                    case PageDataMessage.fail:
                        that.setState({
                            result:<h3 className="text-danger text-center">获取求助信息失败，请联系管理员</h3>
                        });
                        break
                }
        })

    }

    //打开志愿者列表
    openVolunteerList(activityId:number,status:ActivityStatus){
        let that=this
        request(Api.main.activity.seekHelpUser,Method.GET,{
                activityId:String(activityId),
                activityStatus:status
            },
            new SeekHelpUserTransform(),function (res:SeekHelpUser) {
                switch (res.customResult) {
                    case SimpleMessage.fail:
                        that.setState({
                            result:<h3 className="text-danger text-center">获取志愿者信息失败，请联系管理员</h3>
                        });
                        break
                    case SimpleMessage.ok:
                        that.setState({
                            volunteerList:res.dataList,
                            open:true,
                            status:getStatus(status)
                        })
                        break
                }
        })
    }



    render() {
        let that=this
        return (
            <div className="overflow-auto seek-help-height w-100" onScroll={event => scrollBottom(event,this,function () {
                    that.loadHelp((that.state.page?.currentPage||1)+1)
            })}>
                {this.state.data?this.state.data.length===0?<h3 className="text-info text-center">没有找到求助记录</h3>:this.state.data.map((help:SeekHelpState, index:number)=>
                    <div key={"list"+index} className="mt-3 mb-3 border-info border">
                        <Container>
                            <Row>
                                <Col xs={4}>
                                    <Image src={help.activityImg?prefix.image+help.activityImg:""} className="activityImage"/>
                                </Col>
                                <Col>
                                    <h5>{help.title}</h5>
                                    <h6>{help.content}</h6>
                                </Col>
                            </Row>
                            <Row>
                                <Col xs={4} className="mt-auto mb-auto">
                                    <span>{moment(help.seekHelpTime).format("YYYY-MM-DD HH:mm:ss")}</span>
                                </Col>
                                <Col>
                                    <ButtonGroup>
                                        <Button variant={"primary"} disabled={help.apply===0} onClick={()=>this.openVolunteerList(help.activityId,ActivityStatus.apply)}>报名人数:{help.apply}</Button>
                                        <Button variant={"success"} disabled={help.join===0} onClick={()=>this.openVolunteerList(help.activityId,ActivityStatus.join)}>参与人数:{help.join}</Button>
                                        <Button variant={"light"} disabled={help.complete===0} onClick={()=>this.openVolunteerList(help.activityId,ActivityStatus.complete)}>完成人数:{help.complete}</Button>
                                    </ButtonGroup>
                                </Col>
                            </Row>
                        </Container>

                    </div>
                ):null}

                <Dialog hideBackdrop={true} open={this.state.open}
                        PaperComponent={(props)=>
                        <Draggable handle={"#"+titleId} cancel={'[class*="MuiDialogContent-root"]'}>
                            <Paper {...props} />
                        </Draggable>}
                        aria-labelledby={titleId}>
                    <CloseDialog menuName={this.state.status+"活动志愿者"} onClose={()=>this.setState({open:false})} titleId={titleId}/>
                    <ListGroup>
                        {(this.state.volunteerList||[]).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({openUserInfo:true,userId:user.userId})}/>
                                </Tooltip>
                            </ListGroup.Item>
                        )}
                    </ListGroup>
                </Dialog>

                <MyDialog titleId="view-user" menuName="用户信息"
                          content={<MyInfo isOwn={false}  isAdd={true} userId={this.state.userId?this.state.userId:""}/>}
                          open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>

                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="seek-help-dialog"
                          menuName="求助信息提示" onClose={()=>this.setState({result:null})} />

                {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
            </div>
        )
    }
}