BUG修改

xuxj

2020-05-09 d7004986135c0885c1b9a92fb48919179732c00d

 SunshineIns/src/page/CareListEdit.jsx

@@ -8,6 +8,8 @@
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';
@@ -50,6 +52,9 @@
            status: '',
            loading: false,
            socialTaskObject: '',
            // rowNum: 4,
            editorState: BraftEditor.createEditorState(null),
            editorStatetaskProcess: BraftEditor.createEditorState(null),
        };
    }

@@ -80,9 +85,12 @@
                        endHour: moment(endTime).format(format),
                        taskType: res.taskType || 1
                    },
                    editorState: BraftEditor.createEditorState(res.taskRequire),
                    editorStatetaskProcess: BraftEditor.createEditorState(res.taskProcess),
                    taskType: res.taskType || 1,
                    // status: res.activityStatus || '',
                    socialTaskObject: res.socialTaskObject ? { id: res.socialTaskObject.objectId, objectName: res.socialTaskObject.objectName, taskReport:res.socialTaskObject.taskReport } : {},
                    socialTaskObject: res.socialTaskObject ? { id: res.socialTaskObject.objectId, objectName: res.socialTaskObject.objectName, taskReport: res.socialTaskObject.taskReport } : {},
                    // rowNum: ReplaceSeperator(res.socialTaskObject.taskReport),
                    disabled: res.status ? true : false,
                    fileList: res.attachments || [],
                    loading: false,
@@ -122,6 +130,16 @@
        }
        if (!savedate.taskAddress) {
            message.warning("任务地点不能为空");
            return;
        }
        if (moment(savedate.startTime) < moment(new Date())) {
            message.warning("开始时间必须大于当前时间");
            console.log(moment(savedate.startTime))
            console.log(moment(new Date()))
            return;
        }
        if (moment(savedate.endTime) < moment(savedate.startTime)) {
            message.warning("结束时间必须大于开始时间");
            return;
        }
        if (!savedate.taskRequire) {
@@ -273,9 +291,102 @@
        )
    }

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

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

    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 })
        const htmlContent = editorState.toHTML()
        console.log(htmlContent)
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
                taskRequire: htmlContent
            }
        }))
    }

    handleEditorLChange = (editorStatetaskProcess) => {
        this.setState({ editorStatetaskProcess })
        const htmlContent = editorStatetaskProcess.toHTML()
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
                taskProcess: htmlContent
            }
        }))
    }


    handleCancel = () => this.setState({ previewVisible: false })
    render() {
        const { savedate, previewVisible, socialTaskObject, fileList, dateSource, hitList, taskType, disabled, loading } = this.state;
        const { savedate, editorState, socialTaskObject, fileList, editorStatetaskProcess, hitList, taskType, disabled, loading } = this.state;
        console.log('list', socialTaskObject)
        const props = {
            action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
@@ -370,7 +481,7 @@
                            <Row type="flex" align='middle' justify="space-around">
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>任务类型</span></Col>
                                <Col span={6} push={0} >
                                    <Select disabled={disabled} value={taskType || 1} style={{ width: "300px" }} onChange={(value) => this.saveInputChange({ target: { name: 'taskType', value } })}>
                                    <Select disabled={disabled} value={savedate.taskType || 1} style={{ width: "300px" }} onChange={(value) => this.saveInputChange({ target: { name: 'taskType', value } })}>
                                        <Option value={1}>跟踪帮教</Option>
                                        <Option value={2}>合适成年人</Option>
                                        <Option value={3}>社会调查</Option>
@@ -406,14 +517,52 @@
                        <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} rows={4} placeholder="请输入任务要求" style={{ width: '92%' }} value={savedate.taskRequire || ""} onChange={this.saveInputChange} name='taskRequire' /></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}
                                    />
                                    {/* <TextArea disabled={disabled} rows={4} placeholder="请输入任务要求" style={{ width: '92%' }} value={savedate.taskRequire || ""} onChange={this.saveInputChange} name='taskRequire' /> */}
                                </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} rows={4} placeholder="请输入任务流程" style={{ width: '92%' }} value={savedate.taskProcess || ""} onChange={this.saveInputChange} name='taskProcess' /></Col>
                                <Col span={18} push={0} style={{ border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '5PX' }}>

                                    <BraftEditor
                                        value={editorStatetaskProcess}
                                        disabled={disabled}
                                        placeholder='请输入活动进程'
                                        media={{
                                            allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
                                            image: true, // 开启图片插入功能
                                            video: false, // 开启视频插入功能
                                            audio: false, // 开启音频插入功能
                                            uploadFn: this.uploadFn
                                        }}
                                        excludeControls={['emoji']}
                                        onChange={this.handleEditorLChange}
                                        onSave={this.submitLContent}
                                        onBlur={this.submitLContent}
                                    />
                                </Col>
                                {/* <Col span={18} push={0} ><TextArea disabled={disabled} rows={4} placeholder="请输入任务流程" style={{ width: '92%' }} value={savedate.taskProcess || ""} onChange={this.saveInputChange} name='taskProcess' /></Col> */}
                            </Row>
                        </div>

@@ -438,8 +587,8 @@
                                <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} >
                                            <TextArea disabled={disabled} rows={4} style={{ width: '92%' }} value={socialTaskObject.taskReport || ""} onChange={this.saveInputChange} name='taskReport' />
                                        <Col span={18} push={0} >
                                            <TextArea disabled={disabled} rows={8} value={socialTaskObject.taskReport || ""} onChange={this.saveInputChange} name='taskReport' />
                                        </Col>
                                        <Col span={12} pull={0}></Col>
                                    </Row>
@@ -459,7 +608,7 @@
                                            </Col>
                                        </Row>
                                    </div>
                                </div> :''
                                </div> : ''
                        }

                        {
@@ -497,3 +646,17 @@
    }

}

function ReplaceSeperator(mobiles) {
    var i;
    var result = "";
    var c;
    for (i = 0; i < mobiles.length; i++) {
        c = mobiles.substr(i, 1);
        if (c == "\n")
            result = result + "<br/>";
        // else if (c != "\r")
        //     result = result + c;
    }
    return result;
}