kede-client/js/component/manageCenter/idea/activity/activity.jsx

import React from 'react';
import { Icon, Button, Spin, message, Table, Input, Modal, DatePicker, Upload, Select } from 'antd';
import { beforeUpload, getBase64, getActivityForm, getActivityType, splitUrl } from '../../../tools';
import { activityForm, activityType } from '../../../dataDic';
import moment from 'moment';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';


const Avatar = React.createClass({
    getInitialState () {
        return {
            imageUrl: ''
        }
    },
    handleChange (info) {
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
            this.props.urlData(info.file.response.data);
        }
    },
    componentWillReceiveProps (nextProps) {
        if (this.props.visible && !nextProps.visible) {
            this.state.imageUrl = null;
        };
    },
    render () {
        const imageUrl = this.state.imageUrl;
        return (
            <Upload
                className="avatar-uploader"
                name={this.props.name}
                showUploadList={false}
                action={globalConfig.context + "/api/admin/activity/upload"}
                data={{ 'sign': 'activity_title_picture' }}
                beforeUpload={beforeUpload}
                onChange={this.handleChange} >
                {
                    (imageUrl || this.props.imageUrl) ?
                        <img src={imageUrl || this.props.imageUrl} role="presentation" id={this.props.name} /> :
                        <Icon type="plus" className="avatar-uploader-trigger" />
                }
            </Upload>
        );
    }
});

const PicturesWall = React.createClass({
    getInitialState () {
        return {
            previewVisible: false,
            previewImage: '',
            fileList: [],
        }
    },
    handleCancel () {
        this.setState({ previewVisible: false })
    },
    handlePreview (file) {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    },
    handleChange (info) {
        let fileList = info.fileList;
        this.setState({ fileList });
        this.props.fileList(fileList);
    },
    componentWillReceiveProps (nextProps) {
        this.state.fileList = nextProps.pictureUrl;
    },
    render () {
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">点击上传</div>
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    action={globalConfig.context + "/api/admin/activity/upload"}
                    data={{ 'sign': 'activity_content_picture' }}
                    listType="picture-card"
                    fileList={fileList}
                    multiple
                    onPreview={this.handlePreview}
                    onChange={this.handleChange} >
                    {uploadButton}
                </Upload>
                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </div>
        );
    }
});

const Activity = React.createClass({
    loadData (pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/activity/list',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                sTime: this.state.startDate, //活动开始时间(startTime起)
                eTime: this.state.endDate, //活动开始时间(startTime止)
                name: this.state.searchName,
                host: this.state.searchHost,
                type: this.state.searchType ? Number(this.state.searchType) : undefined, // 活动类型
                form: this.state.searchForm ? Number(this.state.searchForm) : undefined, //活动形式
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id,
                            startTime: thisdata.startTime,
                            startTimeFormattedDate: thisdata.startTimeFormattedDate,
                            endTime: thisdata.endTime,
                            endTimeFormattedDate: thisdata.endTimeFormattedDate,
                            name: thisdata.name,
                            host: thisdata.host,
                            type: thisdata.type,
                            form: thisdata.form,
                            enrollDeadline: thisdata.enrollDeadline,
                            enrollDeadlineFormattedDate: thisdata.enrollDeadlineFormattedDate
                        });
                    };
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                this.setState({
                    tableData: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadDetailData () {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/activity/detail',
            data: {
                id: this.state.RowData.id //新闻主键ID(数字类型,非字符串)
            },
            success: function (data) {
                let theObj = {}, theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    theObj = data.data;
                    theArr = theObj.asist ? theObj.asist.split(',') : [];
                    theObj.imgUrls = theObj.imgUrls ? splitUrl(theObj.imgUrls, ',', globalConfig.avatarHost + '/upload') : [];
                };
                this.setState({
                    RowData: theObj,
                    asistArray: theArr
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState () {
        return {
            loading: false,
            visible: false,
            selectedRowKeys: [],
            selectedRows: [],
            asistArray: [],
            keysObj: {},
            RowData: {},
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                {
                    title: '活动名称',
                    dataIndex: 'name',
                    key: 'name',
                    width: '20%'
                }, {
                    title: '主办单位',
                    dataIndex: 'host',
                    key: 'host',
                }, {
                    title: '活动类型',
                    dataIndex: 'type',
                    key: 'type',
                    render: (text) => { return getActivityType(text); }
                }, {
                    title: '活动形式',
                    dataIndex: 'form',
                    key: 'form',
                    render: (text) => { return getActivityForm(text); }
                }, {
                    title: '报名截止时间',
                    dataIndex: 'enrollDeadlineFormattedDate',
                    key: 'enrollDeadlineFormattedDate'
                }, {
                    title: '活动开始时间',
                    dataIndex: 'startTimeFormattedDate',
                    key: 'startTimeFormattedDate'
                }
            ],
            tableData: []
        };
    },
    tableRowClick (record, index) {
        this.state.RowData = record;
        this.loadDetailData();
        this.setState({
            visible: true
        });
    },
    componentWillMount () {
        this.loadData();
        let theTypeOption = [], theFormOption = [];
        activityType.map((item) => {
            theTypeOption.push(
                <Select.Option key={item.value}>{item.key}</Select.Option>
            )
        });
        activityForm.map((item) => {
            theFormOption.push(
                <Select.Option key={item.value}>{item.key}</Select.Option>
            )
        });
        this.state.activityTypeOption = theTypeOption;
        this.state.activityFormOption = theFormOption;
    },
    submit () {
        if (!this.state.RowData.name) {
            message.warning('必须填写一个标题！');
            return;
        };
        if (!this.state.RowData.startTimeFormattedDate) {
            message.warning('必须选择一个活动开始时间！');
            return;
        };
        if (!this.state.RowData.type) {
            message.warning('必须选择一个活动类型！');
            return;
        };
        if (!this.state.RowData.form) {
            message.warning('必须选择一个活动形式！');
            return;
        };
        if (!this.state.RowData.address) {
            message.warning('必须选择一个活动地点！');
            return;
        };
        let imgUrls = null;
        if (this.state.RowData.imgUrls && this.state.RowData.imgUrls.length) {
            let picArr = [];
            this.state.RowData.imgUrls.map(function (item) {
                if ( item.response && item.response.data && item.response.data.length ){
                    picArr.push(item.response.data);
                }
            });
            imgUrls = picArr.join(",");
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + (this.state.RowData.id ? '/api/admin/activity/update' : '/api/admin/activity/add'),
            data: {
                id: this.state.RowData.id || null, //主键，如果不填主键则为新增记录，填主键则为更新
                name: this.state.RowData.name,// 标题,
                address: this.state.RowData.address,// 活动地址,
                host: this.state.RowData.host,// 主办单位,
                undertake: this.state.RowData.undertake,// 承办单位,
                asist: this.state.asistArray ? this.state.asistArray.join(',') : undefined,// 协办单位A，协办单位B,
                type: this.state.RowData.type,// 0, //活动类型
                form: this.state.RowData.form,// 1, //活动形式
                imgUrls: imgUrls,// 活动图片,
                result: this.state.RowData.result,// 活动结果,
                titleUrl: this.state.RowData.titleUrl,// 题图URL,
                summary: this.state.RowData.summary,// 描述,
                startTimeFormattedDate: this.state.RowData.startTimeFormattedDate,// 2012-02-02, //活动开始时间 yyyy-MM-dd
                endTimeFormattedDate: this.state.RowData.endTimeFormattedDate,// 2012-09-09, //活动结束时间 yyyy-MM-dd
                enrollDeadlineFormattedDate: this.state.RowData.enrollDeadlineFormattedDate,// 2012-09-09, //报名结束时间 yyyy-MM-dd
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('保存成功!');
                    this.setState({ visible: false });
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    cleanCache (sign) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/activity/cleanCache',
            data: {
                'cacheKey': sign
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('清除缓存成功!');
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    delectRow () {
        let deletedIds = [];
        for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
            let rowItem = this.state.selectedRows[idx];
            if (rowItem.id) {
                deletedIds.push(rowItem.id)
            };
        };
        this.setState({
            selectedRowKeys: [],
            loading: deletedIds.length > 0
        });
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/activity/delete",
            data: {
                ids: deletedIds
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                message.success('删除成功！');
            };
            this.setState({
                loading: false,
            });
            this.loadData();
        }.bind(this));
    },
    reset () {
        this.state.startDate = undefined;
        this.state.endDate = undefined;
        this.state.searchName = undefined;
        this.state.searchHost = undefined;
        this.state.searchType = undefined;
        this.state.searchForm = undefined;
        this.loadData();
    },
    render () {
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows.slice(-1),
                    selectedRowKeys: selectedRowKeys.slice(-1)
                });
            }
        };
        const hasSelected = this.state.selectedRowKeys.length > 0;
        return (
            <div className="admin-content" >
                <div className="admin-content-title">
                    <span>活动圈管理</span>
                    <Button type="primary" style={{ float: 'right' }}
                        onClick={() => { this.setState({ RowData: {}, visible: true }) }}>
                        添加<Icon type="plus" />
                    </Button>
                </div>
                <div className="admin-content-warp">
                    <div className="admin-content-search">
                        <Input placeholder="活动名称" style={{ width: 200 }}
                            value={this.state.searchName}
                            onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
                        <Input placeholder="主办单位" style={{ width: 200 }}
                            value={this.state.searchHost}
                            onChange={(e) => { this.setState({ searchHost: e.target.value }); }} />
                        <Select placeholder="活动类型"
                            style={{ width: 100 }}
                            value={this.state.searchType}
                            onChange={(e) => { this.setState({ searchType: e }) }}>
                            {this.state.activityTypeOption}
                        </Select>
                        <Select placeholder="活动形式"
                            style={{ width: 100 }}
                            value={this.state.searchForm}
                            onChange={(e) => { this.setState({ searchForm: e }) }}>
                            {this.state.activityFormOption}
                        </Select>
                        <span>活动时间</span>
                        <DatePicker style={{ width: 150 }}
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="搜索开始时间"
                            value={this.state.startDate ? moment(this.state.startDate, "YYYY-MM-DD HH:mm:ss") : undefined}
                            onChange={(t, str) => {
                                this.setState({ startDate: str });
                            }} />
                        <span>到</span>
                        <DatePicker style={{ width: 150 }}
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="搜索结束时间"
                            value={this.state.endDate ? moment(this.state.endDate, "YYYY-MM-DD HH:mm:ss") : undefined}
                            onChange={(t, str) => {
                                this.setState({ endDate: str });
                            }} />
                        <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
                        <Button onClick={this.reset}>重置</Button>
                        <Button type='danger' disabled={!hasSelected} onClick={this.delectRow}>
                            删除<Icon type="minus" />
                        </Button>
                        <Button type="primary" onClick={() => { this.cleanCache('activity_portal_list_cache_key'); }}>清除缓存</Button>
                    </div>
                    <Spin spinning={this.state.loading}>
                        <Table className="no-all-select" columns={this.state.columns}
                            dataSource={this.state.tableData}
                            pagination={this.state.pagination}
                            rowSelection={rowSelection}
                            style={{
                               cursor: 'pointer',
                            }}
                            onRowClick={this.tableRowClick} />
                    </Spin>
                </div>
                <Modal title="活动详情" width={600} className="activity-modal"
                    visible={this.state.visible}
                    maskClosable={false}
                    footer={null}
                    afterClose={() => { this.state.RowData = {}; this.state.asist = null; this.state.asistArray = []; }}
                    onCancel={() => { this.setState({ visible: false }) }} >
                    <Spin spinning={this.state.loading}>
                        <div className="clearfix">
                            <div className="modal-box">
                                <span className="modal-box-title">活动标题</span>
                                <div className="modal-box-detail">
                                    <Input value={this.state.RowData.name}
                                        onChange={(e) => {
                                            this.state.RowData.name = e.target.value;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">标题图片</span>
                                <div className="modal-box-detail clearfix" style={{ width: '360px' }}>
                                    <Avatar visible={this.state.visible}
                                        imageUrl={this.state.RowData.titleUrl ? (globalConfig.avatarHost + "/upload" + this.state.RowData.titleUrl) : null}
                                        urlData={(url) => { this.state.RowData.titleUrl = url }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">活动描述</span>
                                <div className="modal-box-detail">
                                    <Input type="textarea" rows={4} value={this.state.RowData.summary}
                                        onChange={(e) => {
                                            this.state.RowData.summary = e.target.value;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">活动类型</span>
                                <div className="modal-box-detail" style={{ width: '160px' }}>
                                    <Select placeholder="选择活动类型"
                                        style={{ width: 120 }}
                                        value={this.state.RowData.type}
                                        onChange={(e) => {
                                            this.state.RowData.type = e;
                                            this.setState({ RowData: this.state.RowData });
                                        }}>
                                        {this.state.activityTypeOption}
                                    </Select>
                                </div>
                                <span className="modal-box-title">活动形式</span>
                                <div className="modal-box-detail" style={{ width: '160px' }}>
                                    <Select placeholder="选择活动形式"
                                        style={{ width: 120 }}
                                        value={this.state.RowData.form}
                                        onChange={(e) => {
                                            this.state.RowData.form = e;
                                            this.setState({ RowData: this.state.RowData });
                                        }}>
                                        {this.state.activityFormOption}
                                    </Select>
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">活动地址</span>
                                <div className="modal-box-detail">
                                    <Input value={this.state.RowData.address}
                                        onChange={(e) => {
                                            this.state.RowData.address = e.target.value;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">主办单位</span>
                                <div className="modal-box-detail">
                                    <Input value={this.state.RowData.host}
                                        onChange={(e) => {
                                            this.state.RowData.host = e.target.value;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">承办单位</span>
                                <div className="modal-box-detail">
                                    <Input value={this.state.RowData.undertake}
                                        onChange={(e) => {
                                            this.state.RowData.undertake = e.target.value;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">协办单位</span>
                                <div className="modal-box-detail">
                                    <Input value={this.state.asist} style={{ width: '320px', marginRight: '20px' }}
                                        onChange={(e) => { this.setState({ asist: e.target.value }); }} />
                                    <Button onClick={() => {
                                        if (!this.state.asist || this.state.asist.length == 0) {
                                            return;
                                        }
                                        let _me = this, theArr = this.state.asistArray.concat(), theBool = true;
                                        if (!theArr.length) {
                                            theArr.push(this.state.asist);
                                        } else {
                                            this.state.asistArray.map((item, i) => {
                                                if (item === _me.state.asist) {
                                                    theBool = false;
                                                };
                                            });
                                            if (theBool) {
                                                theArr.push(_me.state.asist);
                                            } else {
                                                message.warning('已经录入该单位!')
                                            }
                                        };
                                        this.setState({ asistArray: theArr, asist: null });
                                    }}>添加</Button>
                                </div>
                                <div className="modal-box-detail" style={{ marginLeft: '106px' }}>
                                    {this.state.asistArray.map((item, i) => {
                                        return <p key={i}>{item}</p>
                                    })}
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">活动时间</span>
                                <div className="modal-box-detail">
                                    <DatePicker style={{ width: '150px' }}
                                        showTime
                                        format="YYYY-MM-DD HH:mm:ss"
                                        placeholder="选择开始时间"
                                        value={this.state.RowData.startTimeFormattedDate ? moment(this.state.RowData.startTimeFormattedDate, "YYYY-MM-DD HH:mm:ss") : undefined}
                                        onChange={(t, str) => {
                                            this.state.RowData.startTimeFormattedDate = str;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                    <span>到</span>
                                    <DatePicker style={{ width: '150px' }}
                                        showTime
                                        format="YYYY-MM-DD HH:mm:ss"
                                        placeholder="选择结束时间"
                                        value={this.state.RowData.endTimeFormattedDate ? moment(this.state.RowData.endTimeFormattedDate, "YYYY-MM-DD HH:mm:ss") : undefined}
                                        onChange={(t, str) => {
                                            this.state.RowData.endTimeFormattedDate = str;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">报名截止时间</span>
                                <div className="modal-box-detail">
                                    <DatePicker style={{ width: '150px' }}
                                        showTime
                                        format="YYYY-MM-DD HH:mm:ss"
                                        placeholder="选择截止时间"
                                        value={this.state.RowData.enrollDeadlineFormattedDate ? moment(this.state.RowData.enrollDeadlineFormattedDate, "YYYY-MM-DD HH:mm:ss") : undefined}
                                        onChange={(t, str) => {
                                            this.state.RowData.enrollDeadlineFormattedDate = str;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">活动图片</span>
                                <div className="modal-box-detail">
                                    <PicturesWall
                                        fileList={(e) => { this.state.RowData.imgUrls = e; this.setState({ RowData: this.state.RowData }); }}
                                        pictureUrl={this.state.RowData.imgUrls || []} />
                                </div>
                            </div>
                            <div className="modal-box">
                                <span className="modal-box-title">活动结果描述</span>
                                <div className="modal-box-detail">
                                    <Input type="textarea" rows={4} value={this.state.RowData.result}
                                        onChange={(e) => {
                                            this.state.RowData.result = e.target.value;
                                            this.setState({ RowData: this.state.RowData });
                                        }} />
                                </div>
                            </div>
                        </div>
                        <div className="modal-box">
                            <Button type="primary" onClick={this.submit}>提交</Button>
                            <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button>
                        </div>
                    </Spin>
                </Modal>
            </div >
        );
    }
});

export default Activity;