forked from nsjcy/frontEnd/nsjcy

1
liuwh
2020-02-26 b321fc6111c6483e3b2e501620d2e7ffc6a22f15
SunshineIns/src/page/ActiveManage.jsx
@@ -1,20 +1,16 @@
/**
 * 徐祥健<xuxj@hugeinfo.com.cn>
 * 2018年8月28日 10:41
 *
 */
import React from 'react';
import HeadView from '../view/HeadView';
import TableBtnView from '../view/TableBtnView';
import { Divider, Modal, message, Tooltip, Progress } from 'antd'
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:
@@ -40,12 +36,55 @@
            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()
            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: '',
        };
    }
@@ -53,17 +92,83 @@
        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.getData();
    }
    saveInputChange = ({ target: { value, name } }) => {
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
                [name]: value
            }
        }))
    }
    getData = () => {
        // this.setState({
        //     data: []
        // });
        Fetch.activeManage()
        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
                    data: res,
                    loading: false
                });
            });
    }
@@ -71,8 +176,18 @@
        this.props.history.push("/activeManageEdit/" + id);
    }
    signIn= (id) => {
    signIn = (id) => {
        window.open('index.html#/signIn/' + id);
    }
    addResult = (id) => {
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
                id: id
            },
            modal: true
        }))
    }
    pulish = (id) => {
@@ -162,26 +277,118 @@
                            <Divider type="vertical" />
                            <label className='theme-color' onClick={() => this.deleteItems(record.id)} style={{ cursor: 'pointer' }}>删除</label>
                        </span>
                        :
                    record.status == 2 ?
                        :
                        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>
                            :
                            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, resetKey } = this.state;
        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">
            <div className="app-page" >
                <HeadView history={this.props.history} />
                <TableBtnView key={-resetKey} type="infoManage" name='活动一览' btnName='活动发布' onClick={() => this.showModal('new')}>
                </TableBtnView>
                <TableView columns={columns} data={data} pageSize='10' size='default' />
                <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>
        );
    }