~liuwh/nsjcy.git

 
import React from 'react';
 
import HeadView from '../view/HeadView';
import TableBtnView from '../view/TableBtnView';
import CommonSearchForm from '../view/CommonSearchForm';
import { Divider, Modal, message, Button, Progress } from 'antd'
import moment from 'moment'
import Fetch from '../fetch';
import { domain } from '../fetch/_fetch';
import TableView from '../view/TableView';
const confirm = Modal.confirm;
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,
            formData: {
                __key: Date.now(),
                activityType: '',
                activityStatus: '',
                startTime: '',
                endTime: '',
            }
        };
    }
 
    componentDidMount() {
        document.title = '活动管理';
        this.getData();
    }
 
    setFormData = data => {
        console.log('form', data);
        this.setState({
            formData: data,
        });
    }
 
    searchonClick = data => {
        console.log('form', data);
        this.setState({
            formData: data,
        });
        this.getData();
    }
 
    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);
    }
 
    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>
                            :
                            <span><label className='theme-color' onClick={() => this.showModal(record.id)} style={{ cursor: 'pointer' }}>查看</label></span>
 
                )
            ),
        }];
        const { data, resetKey, formData, loading } = this.state;
        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>
            </div>
        );
    }
 
}