提交

liuwh

2020-02-27 d828320e6384df831839bde49f09cf2ad1c49899

 SunshineIns/src/page/ActiveManageEdit.jsx

@@ -5,13 +5,15 @@
 */
import React from 'react';

import { Row, Col, Input, DatePicker, Button, Modal, Upload, Icon, message, Divider, TimePicker, Badge, Select, Popconfirm, Spin } from 'antd';
import { Row, Col, Input, DatePicker, Button, Modal, Upload, Icon, message, Divider, TimePicker, Badge, Select, Popconfirm, Spin, Breadcrumb } from 'antd';
const { TextArea } = Input;
import HeadView from '../view/HeadView';
import BusDetailView from '../view/BusDetailView';
import TableView from '../view/TableView';
import ImageBoxView from '../view/ImageBoxView'
// 引入编辑器以及编辑器样式
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import Fetch from '../fetch';
import moment from 'moment';
const format = 'HH:mm';
@@ -53,6 +55,8 @@
            disabled: true,
            status: '',
            loading: false,
            code: '',
            editorState: BraftEditor.createEditorState(null)
        };
    }

@@ -73,6 +77,7 @@
                if (endTime == null) {
                    endTime = Date.now();
                }
                console.log(res.attachments)
                this.setState({
                    savedate: {
                        ...res.activity,
@@ -82,10 +87,13 @@
                        endHour: moment(endTime).format(format),
                        activityType: res.activity.activityType || 'act_1',
                    },
                    code: res.code || '',
                    editorState: BraftEditor.createEditorState(res.activity.course),
                    activityType: res.activity.activityType || 'act_1',
                    status: res.activity.activityStatus || '',
                    disabled: res.activity.activityStatus == 0 ? false : true,
                    dateSource: res.personList || [],
                    // fileList: res.attachments.length > 0 ? res.attachments.filter(item=>(item.typeId==1000)) : [],
                    fileList: res.attachments || [],
                    loading: false,
                });
@@ -111,8 +119,8 @@
            return;
        }
        if (savedate.activityPhone) {
            if (!validator.phone(savedate.activityPhone)) {
                return message.warning("联系电话格式不正确");
            if (!savedate.activityPhone) {
                return message.warning("联系电话不能为空");
            }
        }
        Fetch.saveActive(savedate)
@@ -225,16 +233,98 @@
        )
    }

    uploadFn = (param) => {

        const serverURL = domain + 'api/v1/attachment/upload'
        const xhr = new XMLHttpRequest
        const fd = new FormData()
        const successFn = (response) => {
            // 假设服务端直接返回文件上传后的地址
            // 上传成功后调用param.success并传入上传后的文件地址
            //Pz
            const res = JSON.parse(xhr.responseText);
            param.success({
                url: domain + 'api/v1/attachment/image/' + res[0].id,
                meta: {
                    id: res[0].id,
                    title: res[0].name,
                    alt: res[0].name,
                    loop: true, // 指定音视频是否循环播放
                    autoPlay: true, // 指定音视频是否自动播放
                    controls: true, // 指定音视频是否显示控制栏
                    poster: domain + 'api/v1/attachment/image/' + res[0].id, // 指定视频播放器的封面
                }
            })
        }


        const progressFn = (event) => {
            // 上传进度发生变化时调用param.progress
            param.progress(event.loaded / event.total * 100)
        }

        const errorFn = (response) => {
            // 上传发生错误时调用param.error
            param.error({
                msg: 'unable to upload.'
            })
        }
        xhr.upload.addEventListener("progress", progressFn, false)
        xhr.addEventListener("load", successFn, false)
        xhr.addEventListener("error", errorFn, false)
        xhr.addEventListener("abort", errorFn, false)
        fd.append('file', param.file)
        xhr.open('POST', serverURL, true)
        xhr.send(fd)
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    submitContent = () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML()
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
                course: htmlContent
            }
        }))
    }

    handleCancel = () => this.setState({ previewVisible: false })
    render() {
        const { savedate, previewVisible, previewImage, fileList, dateSource, hitList, activityType, disabled, loading } = this.state;
        console.log('disabled', disabled)
        const { savedate, previewVisible, previewImage, editorState, fileList, dateSource, code, hitList, activityType, disabled, loading } = this.state;
        console.log('disabled', fileList)
        const props = {
            action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
            onChange: ({ file, fileList }) => {
                this.setState({ fileList });
            },
            fileList: fileList,
            fileList: fileList.filter(item=>(item.typeId==1000)),
            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,
                    };
                });
            }
        };
        const bottmProps = {
            action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
            onChange: ({ file, fileList }) => {
                this.setState({ fileList });
            },
            fileList: fileList.filter(item=>(item.typeId==1020)),
            onRemove: (file) => {
                Fetch.deleteAttachment(file.uid)
                    .then(res => {
@@ -313,6 +403,10 @@
            <div className="app-page">
                <Spin spinning={loading}>
                    <HeadView history={this.props.history} />
                    <Breadcrumb style={{ padding: '20px' }}>
                        <Breadcrumb.Item><a href="index.html#/activeManage">法治活动</a></Breadcrumb.Item>
                        <Breadcrumb.Item>活动发布</Breadcrumb.Item>
                    </Breadcrumb>
                    <BusDetailView type='活动发布' >
                        <div style={divStyle}>
                            <Row type="flex" align='middle' justify="space-around">
@@ -324,15 +418,8 @@
                                        <Option value='act_3'>普法预约</Option>
                                    </Select>
                                </Col>
                                <Col span={12} pull={0}></Col>
                            </Row>
                        </div>
                        <div style={divStyle}>
                            <Row type="flex" align='middle' justify="space-around">
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>主持人</span></Col>
                                <Col span={6} push={0} ><Input disabled={disabled} placeholder="请输入主持人姓名" style={{ width: '300px' }} name='host' onChange={this.saveInputChange} value={savedate.host || ""} /></Col>
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>报名要求</span></Col>
                                <Col span={6} push={0} ><Input disabled={disabled} placeholder="请输入报名要求" style={{ width: '300px' }} name='requirement' onChange={this.saveInputChange} value={savedate.requirement || ""} /></Col>
                            </Row>
                        </div>

@@ -376,6 +463,12 @@
                                <Col span={18} push={0} ><TextArea disabled={disabled} rows={4} placeholder="请输入活动描述" style={{ width: '92%' }} value={savedate.activityDesc || ""} onChange={this.saveInputChange} name='activityDesc' /></Col>
                            </Row>
                        </div>
                        <div style={divStyle}>
                            <Row type="flex" align='middle' justify="space-around">
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>报名要求</span></Col>
                                <Col span={18} push={0} ><TextArea disabled={disabled} placeholder="请输入报名要求" style={{ width: '92%' }} name='requirement' onChange={this.saveInputChange} value={savedate.requirement || ""} /></Col>
                            </Row>
                        </div>

                        <div style={divStyle}>
                            <Row type="flex" align='top' justify="space-around">
@@ -395,6 +488,40 @@
                        </div>

                        {
                            code && <div style={divStyle}>
                                <Row type="flex" align='middle' justify="space-around">
                                    <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>活动二维码</span></Col>
                                    <Col span={18} push={0} ><img style={{ width: '150px', height: '150px' }} src={`data:image/png;base64,${code}`} /></Col>
                                </Row>
                            </div>

                        }

                        <div style={divStyle}>
                            <Row type="flex" align='top' justify="space-around">
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>活动进程</span></Col>
                                <Col span={18} push={0} style={{ border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '5PX' }} >
                                    <BraftEditor
                                        value={editorState}
                                        disabled={disabled}
                                        placeholder='请输入活动进程'
                                        media={{
                                            allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
                                            image: true, // 开启图片插入功能
                                            video: false, // 开启视频插入功能
                                            audio: false, // 开启音频插入功能
                                            uploadFn: this.uploadFn
                                        }}
                                        excludeControls={['emoji']}
                                        onChange={this.handleEditorChange}
                                        onSave={this.submitContent}
                                        onBlur={this.submitContent}
                                    />
                                </Col>
                            </Row>
                        </div>

                        {
                            activityType == 'act_1' ? (dateSource.length > 0 ?
                                <div style={divStyle}>
                                    <Divider orientation="left" style={{ margin: '20px', width: '97%' }}>报名人员信息</Divider>
@@ -409,6 +536,26 @@
                                </div> : null) : null
                        }
                        {
                            activityType == 'act_2' || activityType == 'act_3' ? (dateSource.length > 0 ?
                                <div style={divStyle}>
                                    <Divider orientation="left" style={{ margin: '20px', width: '97%' }}>培训结果</Divider>
                                    <div style={divStyle}>
                                        <Row type="flex" align='top' justify="space-around">
                                            <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>添加图片</span></Col>
                                            <Col span={18} push={0} >
                                                <Upload disabled={disabled} listType="picture-card" onPreview={this.handlePreview} {...bottmProps}>
                                                    
                                                </Upload>
                                                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                                                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                                                </Modal>
                                            </Col>
                                        </Row>
                                    </div>
                                </div> : null) : null
                        }

                        {
                            activityType == 'act_1' && (
                                savedate.activityStatus == null || savedate.activityStatus == 0 ?
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>