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.
254 lines
10 KiB
254 lines
10 KiB
import React from "react";
|
|
import {Button, Form, Image, ListGroup, Tab, Table, Tabs} from "react-bootstrap";
|
|
import {ManagerActivity, PageProps} from "./entity";
|
|
import {JSONResponse, Method, request} from "./interface";
|
|
import {API, prefix} from "./api";
|
|
import {
|
|
EmptyBodyTransform,
|
|
FindActivityRes,
|
|
FindActivityTransform,
|
|
FindTimeScoreRes,
|
|
PageDataMessage,
|
|
ScoreTransform,
|
|
SimpleMessage
|
|
} from "./result";
|
|
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
|
|
/**
|
|
* 图片尺寸限制
|
|
*/
|
|
const maxImageSize={
|
|
width:100,
|
|
height:100
|
|
}
|
|
class EditActive extends React.Component<
|
|
{
|
|
onClick:Function;
|
|
activity:ManagerActivity;
|
|
},
|
|
{
|
|
activity:ManagerActivity;
|
|
}>{
|
|
|
|
|
|
constructor(props: Readonly<{ onClick: Function; activity: ManagerActivity }>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
activity:this.props.activity
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Form>
|
|
<div className="text-center ml-auto mr-auto">
|
|
<UploadImg tip={"点击更新活动图片"} maxImageSize={maxImageSize} onChange={(value:string)=>
|
|
this.setState({activity:{...this.state.activity,...{activityImgFile:value}}})} />
|
|
</div>
|
|
<Input name="title" desc="活动标题" value={this.state.activity.title} onChange={(value:string)=>
|
|
this.setState({
|
|
activity:{...this.state.activity,...{title:value}}
|
|
})} valid={{check:this.isNotEmpty(this.state.activity.title)}}/>
|
|
|
|
<Input name="content" desc="活动内容" value={this.state.activity.content} as="textarea" valid=
|
|
{{check:this.state.activity.content.length>0,valid:this.state.activity.content.length===0?
|
|
"验证失败":"您还可输入"+(contentMaxLength-this.state.activity.content.length+"个字符")}}
|
|
maxLength={contentMaxLength} onChange={(value:string)=>this.setState({activity:{...this.state.activity,...{content:value}}})}/>
|
|
|
|
<Button variant={"info"} block={true} className="ml-auto mr-auto col-3 mt-3" onClick={()=>this.props.onClick(this.state.activity)}>提交</Button>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
private isNotEmpty(name: any) {
|
|
return String(name).length>0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 活动管理
|
|
*/
|
|
export class Active extends React.Component<any, {
|
|
activeList?:Array<ManagerActivity>;
|
|
tipContent:JSX.Element|null
|
|
dialog:JSX.Element|null,
|
|
page?:PageProps
|
|
}>{
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
tipContent:null,
|
|
dialog:null,
|
|
}
|
|
}
|
|
|
|
//加载活动信息
|
|
loadActive(page:number){
|
|
let that=this
|
|
request(API.account.findActivity,Method.GET,{
|
|
currentPage:String(page)
|
|
},new FindActivityTransform(),function (res:FindActivityRes) {
|
|
switch (res.customResult) {
|
|
case PageDataMessage.ok:
|
|
that.setState({
|
|
activeList:res.dataList,
|
|
page:res.page
|
|
})
|
|
break
|
|
case PageDataMessage.fail:
|
|
that.setState({
|
|
tipContent:<h3>查询活动失败，请联系管理员</h3>
|
|
})
|
|
break
|
|
}
|
|
} )
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadActive(1)
|
|
}
|
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
<Tabs defaultActiveKey="info" id="uncontrolled-tab-example">
|
|
<Tab eventKey="info" title="活动管理">
|
|
<Table striped bordered hover className="mt-3">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>活动标题</th>
|
|
<th>活动内容</th>
|
|
<th>活动图片</th>
|
|
<th>开始时间</th>
|
|
<th>结束时间</th>
|
|
<th>求助用户id</th>
|
|
<th>帮助用户id</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{this.state.activeList?this.state.activeList.length>0?this.state.activeList.map((active:ManagerActivity,index:number)=>
|
|
<tr key={"tr"+index}>
|
|
<td>{index+1}</td>
|
|
<td>{active.title}</td>
|
|
<td>{active.content}</td>
|
|
<td><Image className="head-img" src={prefix.image+active.activityImg}/></td>
|
|
<td>{moment(active.activityStartTime).format("YYYY-MM-DD HH:mm:ss")}</td>
|
|
<td>{moment(active.activityEndTime).format("YYYY-MM-DD HH:mm:ss")}</td>
|
|
<td>{active.seekHelpUser}</td>
|
|
<td>
|
|
{active.helpUser != null ?
|
|
<ListGroup>
|
|
{active.helpUser.map((userId,index) =>
|
|
<ListGroup.Item key={'item'+index}>{userId}<Image onClick={()=>this.loadScore(userId,active.activityId)} className="timeScore" src={"money.svg"}/></ListGroup.Item>)}
|
|
</ListGroup>:'无'
|
|
}
|
|
</td>
|
|
<td><Button variant={"info"} onClick={()=>this.setState({
|
|
dialog:<MyDialog content={<EditActive onClick={(activity:ManagerActivity)=>this.modifyActivity(activity)} activity={active}/>} open={true} titleId={"activity-dialog"} menuName={"修改活动信息"}
|
|
onClose={()=>this.setState({dialog:null})}/>
|
|
})}>修改活动信息</Button></td>
|
|
</tr>
|
|
):<h3 className="text-center text-info">没有活动信息</h3>:null
|
|
}
|
|
</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={"操作提示"}
|
|
onClose={()=>this.setState({
|
|
tipContent:null
|
|
})}/>
|
|
</Tab>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 修改活动信息
|
|
* @param activity
|
|
*/
|
|
private modifyActivity(activity: ManagerActivity) {
|
|
let that=this
|
|
request(API.account.updateActivity+activity.activityId,Method.PUT, {
|
|
title:activity.title,
|
|
content:activity.content,
|
|
activityImgFile:activity.activityImgFile?activity.activityImgFile:null
|
|
},
|
|
new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.ok:
|
|
that.setState({
|
|
tipContent:<h3 className="text-info text-center">修改成功</h3>,
|
|
dialog:null
|
|
})
|
|
that.loadActive(1)
|
|
break
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
tipContent:<h3 className="text-danger text-center">修改失败，请联系管理员</h3>
|
|
})
|
|
break
|
|
}
|
|
})
|
|
}
|
|
|
|
/*
|
|
加载时间币
|
|
*/
|
|
private loadScore(userId: string, activityId: number) {
|
|
let that=this
|
|
request(API.account.timeScore,Method.GET,{
|
|
userId:userId,
|
|
activityId:String(activityId)
|
|
},new ScoreTransform(),function (res:FindTimeScoreRes) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.ok:
|
|
if(res.timeScore==null){
|
|
that.setState({
|
|
tipContent:<h3 className="text-center text-danger">该用户没有结算时间币记录</h3>
|
|
})
|
|
}else {
|
|
that.setState({
|
|
tipContent: <Table>
|
|
<thead>
|
|
<tr>
|
|
<th>结算时间</th>
|
|
<th>时间币</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{moment(res.timeScore?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
|
|
<td>{res.timeScore?.timeScore}</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
})
|
|
}
|
|
break
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
tipContent:<h3 className="text-center text-danger">时间币查询失败，请联系管理员</h3>
|
|
})
|
|
break
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|