|
import React from 'react';
|
|
import HeadView from '../view/HeadView';
|
import TableBtnView from '../view/TableBtnView';
|
import CommonSearchForm from '../view/CommonSearchForm';
|
import { Divider, Modal, message, Button, Row, Col, Progress, Input, Upload, Icon } from 'antd'
|
import moment from 'moment'
|
import Fetch from '../fetch';
|
import { domain } from '../fetch/_fetch';
|
import TableView from '../view/TableView';
|
const confirm = Modal.confirm;
|
const { TextArea } = Input;
|
function typeOfName(type) {
|
switch (type) {
|
case 0:
|
return '未发布';
|
case 1:
|
return '报名中';
|
case 2:
|
return '活动中';
|
case 3:
|
return '已结束';
|
case 100:
|
return '已摇号';
|
}
|
}
|
|
function typeStatus(type) {
|
switch (type) {
|
case 'act_1':
|
return "南检活动";
|
case 'act_2':
|
return "法治培训";
|
case 'act_3':
|
return "普法预约";
|
}
|
}
|
|
const taskNodeIds = {
|
'act_1': '南检活动',
|
'act_2': '法治培训',
|
'act_3': '普法预约',
|
}
|
|
const activityTypeList = [
|
'act_1',
|
'act_2',
|
'act_3',
|
]
|
|
const activityStatusIds = {
|
0: '未发布',
|
1: '报名中',
|
2: '活动中',
|
3: '已结束',
|
100: '已摇号',
|
}
|
|
const activityStatusList = [
|
0,
|
1,
|
2,
|
3,
|
100,
|
]
|
export default class ActiveManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
data: [],
|
resetKey: Date.now(),
|
loading: false,
|
confirmLoading: false,
|
modal: false,
|
closeKey: Date.now(),
|
formData: {
|
__key: Date.now(),
|
activityType: '',
|
activityStatus: '',
|
startTime: '',
|
endTime: '',
|
},
|
savedate: {},
|
fileList: [],
|
previewVisible: false,
|
previewImage: '',
|
};
|
}
|
|
componentDidMount() {
|
document.title = '法治活动';
|
this.getData();
|
}
|
|
setFormData = data => {
|
console.log('form', data);
|
this.setState({
|
formData: data,
|
});
|
}
|
|
handlePreview = (file) => {
|
this.setState({
|
previewImage: file.url || file.thumbUrl,
|
previewVisible: true,
|
});
|
}
|
|
handleOk = () => {
|
console.log('success')
|
this.setState({ confirmLoading: true });
|
const { savedate } = this.state;
|
console.log(savedate)
|
|
if (!savedate.result) {
|
return message.warning("培训结果不能为空");
|
}
|
Fetch.addResult({ ...savedate })
|
.then(res => {
|
console.log(res)
|
if (res.code === 0) {
|
this.setState({
|
confirmLoading: false,
|
modal: false,
|
closeKey: Date.now()
|
}, this.getData);
|
message.success("提交成功！")
|
} else {
|
message.error('保存失败，请联系管理员', 2)
|
}
|
});
|
}
|
|
handleCancel = () => {
|
this.setState({
|
closeKey: Date.now(),
|
modal: false
|
});
|
}
|
|
searchonClick = data => {
|
console.log('form', data);
|
this.setState({
|
formData: data,
|
});
|
this.setState({ loading: true })
|
Fetch.activeManage({ ...this.state.formData })
|
.then(res => {
|
for (var i = 0; i < res.length; i++) {
|
res[i]['index'] = i + 1;
|
}
|
this.setState({
|
data: res,
|
loading: false
|
});
|
});
|
}
|
|
saveInputChange = ({ target: { value, name } }) => {
|
this.setState(({ savedate }) => ({
|
savedate: {
|
...savedate,
|
[name]: value
|
}
|
}))
|
}
|
|
getData = () => {
|
// this.setState({
|
// data: []
|
// });
|
this.setState({ loading: true })
|
Fetch.activeManage({ ...this.state.formData })
|
.then(res => {
|
for (var i = 0; i < res.length; i++) {
|
res[i]['index'] = i + 1;
|
}
|
this.setState({
|
data: res,
|
loading: false
|
});
|
});
|
}
|
showModal = (id) => {
|
this.props.history.push("/activeManageEdit/" + id);
|
}
|
|
signIn = (id) => {
|
window.open('index.html#/signIn/' + id);
|
}
|
|
addResult = (id) => {
|
this.setState(({ savedate }) => ({
|
savedate: {
|
...savedate,
|
id: id
|
},
|
modal: true
|
}))
|
}
|
|
pulish = (id) => {
|
confirm({
|
title: '确认要发布这条活动吗?',
|
onOk: () => {
|
Fetch.publishActive(id)
|
.then(data => {
|
if (data.code == 0) {
|
message.success("发布成功！")
|
this.setState({
|
resetKey: Date.now()
|
}, this.getData);
|
} else {
|
message.error('发布失败，请联系管理员', 2)
|
}
|
})
|
}
|
});
|
}
|
deleteItems = (id) => {
|
confirm({
|
title: '确认要删除这条数据吗?',
|
onOk: () => {
|
Fetch.deleteActive(id)
|
.then(data => {
|
if (data.code == 0) {
|
message.success("删除成功！")
|
this.setState({
|
resetKey: Date.now()
|
}, this.getData);
|
} else {
|
message.error('删除失败，请联系管理员', 2)
|
}
|
})
|
}
|
});
|
}
|
render() {
|
const columns = [{
|
title: '序号',
|
dataIndex: 'index',
|
key: 'index'
|
}, {
|
title: '活动类型',
|
dataIndex: 'activityType',
|
key: 'activityType',
|
render: text => <span>{typeStatus(text)}</span>
|
}, {
|
title: '活动标题',
|
dataIndex: 'title',
|
key: 'title'
|
}, {
|
title: '发起人',
|
dataIndex: 'createrName',
|
key: 'createrName'
|
}, {
|
title: '起始时间',
|
dataIndex: 'startTime',
|
key: 'startTime',
|
render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
|
}, {
|
title: '地点',
|
dataIndex: 'address',
|
key: 'address'
|
}, {
|
title: '活动状态',
|
dataIndex: 'status',
|
key: 'status',
|
render: text => <span>{typeOfName(text)}</span>
|
|
}, {
|
title: '报名人数',
|
dataIndex: 'totalNum',
|
key: 'totalNum',
|
render: (_, { totalNum, applyNum }) => <Progress percent={applyNum * 100 / totalNum} format={percent => `${applyNum}/${totalNum} `} />,
|
}, {
|
title: '操作',
|
key: 'action',
|
render: (text, record) => (
|
(
|
record.status == 0 ?
|
<span>
|
<label className='theme-color' onClick={() => this.showModal(record.id)} style={{ cursor: 'pointer' }}>修改</label>
|
<Divider type="vertical" />
|
<label className='theme-color' onClick={() => this.pulish(record.id)} style={{ cursor: 'pointer' }}>发布</label>
|
<Divider type="vertical" />
|
<label className='theme-color' onClick={() => this.deleteItems(record.id)} style={{ cursor: 'pointer' }}>删除</label>
|
</span>
|
:
|
record.status == 2 ?
|
<span>
|
<label className='theme-color' onClick={() => this.showModal(record.id)} style={{ cursor: 'pointer' }}>查看</label>
|
<Divider type="vertical" />
|
<label className='theme-color' onClick={() => this.signIn(record.id)} style={{ cursor: 'pointer' }}>签到上墙</label>
|
</span>
|
:
|
record.status == 3 ?
|
<span>
|
<label className='theme-color' onClick={() => this.showModal(record.id)} style={{ cursor: 'pointer' }}>查看</label>
|
{!record.result &&
|
<React.Fragment>
|
<Divider type="vertical" />
|
<label className='theme-color' onClick={() => this.addResult(record.id)} style={{ cursor: 'pointer' }}>添加结果</label>
|
</React.Fragment>
|
}
|
</span>
|
:
|
<span><label className='theme-color' onClick={() => this.showModal(record.id)} style={{ cursor: 'pointer' }}>查看</label></span>
|
|
)
|
),
|
}];
|
const { data, previewImage, formData, loading, modal, fileList, previewVisible, confirmLoading, closeKey, savedate } = this.state;
|
const props = {
|
action: domain + 'api/v1/attachment/materials?associateTypeId=1020&entityId=' + savedate.id,
|
onChange: ({ file, fileList }) => {
|
this.setState({ fileList });
|
},
|
fileList: fileList,
|
onRemove: (file) => {
|
Fetch.deleteAttachment(file.uid)
|
.then(res => {
|
message.success("移除成功！");
|
});
|
this.setState(({ fileList }) => {
|
const index = fileList.indexOf(file);
|
const newFileList = fileList.slice();
|
newFileList.splice(index, 1);
|
return {
|
fileList: newFileList,
|
};
|
});
|
}
|
};
|
return (
|
<div className="app-page" >
|
<HeadView history={this.props.history} />
|
<div style={{ marginLeft: '90%', marginBottom: '20px', marginTop: '20px' }}>
|
<Button type="primary" size='large' onClick={() => this.showModal('new')}>活动发布</Button>
|
</div>
|
{/* <TableBtnView key={-resetKey} type="infoManage" name='活动一览' btnName='活动发布' onClick={() => this.showModal('new')}>
|
</TableBtnView> */}
|
<div style={{ background: '#fff', margin: 20 }}>
|
<CommonSearchForm
|
{...this.props}
|
formData={formData}
|
setFormData={this.setFormData}
|
searchonClick={this.searchonClick}
|
pathName={this.props.location.pathname}
|
data={[
|
{
|
type: 'select', name: '活动类型', label: '活动类型', key: 'activityType', list: activityTypeList.map(key => ({
|
id: key,
|
name: taskNodeIds[key]
|
})),
|
},
|
{
|
type: 'select', name: '活动状态', label: '活动状态', key: 'activityStatus', list: activityStatusList.map(key => ({
|
id: key,
|
name: activityStatusIds[key]
|
})),
|
},
|
{
|
type: 'rangePicker',
|
label: '任务生成时间',
|
name: JSON.stringify(['开始时间', '结束时间']),
|
key: JSON.stringify(['startTime', 'endTime']),
|
keylistName: 'rangeTimelist',
|
},
|
]} />
|
<TableView columns={columns} data={data} pageSize='10' size='default' loading={loading} />
|
</div>
|
<Modal
|
key={closeKey}
|
confirmLoading={confirmLoading}
|
visible={modal}
|
width={'50%'}
|
title="添加结果"
|
onOk={this.handleOk}
|
onCancel={this.handleCancel}
|
>
|
<Row type="flex" align='middle' style={{ margin: '12px 0' }} justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>培训结果</span></Col>
|
<Col span={18} push={0} ><TextArea rows={4} placeholder="请输入培训结果" value={savedate.result || ""} onChange={this.saveInputChange} name='result' /></Col>
|
</Row>
|
<Row type="flex" align='middle' justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>培训材料</span></Col>
|
<Col span={18} push={0} >
|
<Upload listType="picture-card" onPreview={this.handlePreview} {...props}>
|
<div>
|
<Icon type="plus" />
|
<div className="ant-upload-text">上传图片</div>
|
</div>
|
</Upload>
|
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
</Modal>
|
</Col>
|
</Row>
|
</Modal>
|
</div>
|
);
|
}
|
|
}
|
