You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
6.8 KiB
161 lines
6.8 KiB
import React from "react";
|
|
import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
|
|
import {ActivityStatus, 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 {SeekHelpInfoRes, SeekHelpInfoTransform, SeekHelpUser, SeekHelpUserTransform, SimpleMessage} from "../result";
|
|
import {getStatus} from "../public";
|
|
import {Api, prefix} from "../api";
|
|
|
|
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;
|
|
}>{
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
data:[],
|
|
open:false,
|
|
openUserInfo:false,
|
|
result:null
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadHelp()
|
|
}
|
|
|
|
/**
|
|
* 加载我的求助信息
|
|
*/
|
|
loadHelp(){
|
|
let that=this
|
|
request(Api.main.activity.seekHelp,Method.GET, {},new SeekHelpInfoTransform(),function (res:SeekHelpInfoRes) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">获取求助信息失败,请联系管理员</h3>
|
|
});
|
|
break
|
|
case SimpleMessage.ok:
|
|
that.setState({
|
|
data:res.dataList
|
|
})
|
|
break
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
//打开志愿者列表
|
|
openVolunteerList(activityId:number,status:ActivityStatus){
|
|
let that=this
|
|
request(Api.main.activity.seekHelpUser+"?activityId="+activityId+"&activityStatus="+status,Method.GET,{},
|
|
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() {
|
|
return (
|
|
<div className="overflow-auto seek-help-height w-100">
|
|
{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})} />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|