forked from nsjcy/frontEnd/nsjcy

liuwh
2020-05-29 2fdc3dc444a2f8199866780205c0fa4b5ac40522
SunshineIns/src/page/CareListEdit.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Row, Col, Input, DatePicker, Button, Modal, Upload, Icon, message, Breadcrumb, TimePicker, Badge, Select, Popconfirm, Spin } from 'antd';
import { Row, Col, Input, DatePicker, Button, Modal, Upload, Table, message, Breadcrumb, TimePicker, Badge, Select, Popconfirm, Spin, Divider } from 'antd';
const { TextArea } = Input;
import HeadView from '../view/HeadView';
import BusDetailView from '../view/BusDetailView';
@@ -22,16 +22,14 @@
function typeStatus(type) {
    switch (type) {
        case 0:
            return "未开始";
        case 1:
            return "待审核";
            return "进行中";
        case 2:
            return "未签到";
        case 3:
            return "已签到";
        case 4:
            return "不通过";
            return "已结束";
        case 99:
            return "取消";
            return "暂停";
    }
}
export default class CareListEdit extends React.Component {
@@ -40,6 +38,7 @@
        this.state = {
            dateSource: [],
            savedate: {},
            modalData: {},
            formdata: {},
            fileList: [],
            previewVisible: false,
@@ -51,10 +50,12 @@
            disabled: true,
            status: '',
            loading: false,
            btlloading: false,
            socialTaskObject: '',
            // rowNum: 4,
            editorState: BraftEditor.createEditorState(null),
            editorStatetaskProcess: BraftEditor.createEditorState(null),
            list: []
        };
    }
@@ -85,14 +86,10 @@
                        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 || '',
                    disabled: res.status == 0 || res.status == 99 ? true : false,
                    list: res.tasks || [],
                    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,
                });
            })
@@ -102,6 +99,15 @@
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
                [name]: value
            }
        }))
    }
    saveModalInputChange = ({ target: { value, name } }) => {
        this.setState(({ modalData }) => ({
            modalData: {
                ...modalData,
                [name]: value
            }
        }))
@@ -118,36 +124,30 @@
    }
    submit = () => {
        const { savedate, socialTaskObject } = this.state;
        const { savedate, socialTaskObject, list } = this.state;
        savedate.startTime = moment(savedate.startDate + " " + moment(savedate.startHour).format(format), 'YYYY-MM-DD HH:mm')
        savedate.endTime = moment(savedate.endDate + " " + moment(savedate.endHour).format(format), 'YYYY-MM-DD HH:mm')
        console.log(savedate);
        console.log(moment(savedate.startTime).valueOf());
        console.log(moment(new Date()).valueOf());
        console.log(socialTaskObject);
        let data2 = {}
        if (!savedate.taskTitle) {
            message.warning("任务标题不能为空");
            return;
        }
        if (!savedate.taskAddress) {
            message.warning("任务地点不能为空");
            return;
        }
        if (moment(savedate.startTime) < moment(new Date())) {
        if (moment(savedate.startTime).valueOf() < moment(new Date()).valueOf()) {
            message.warning("开始时间必须大于当前时间");
            console.log(moment(savedate.startTime))
            console.log(moment(new Date()))
            return;
        }
        if (moment(savedate.endTime) < moment(savedate.startTime)) {
        if (moment(savedate.endTime).valueOf() < moment(savedate.startTime).valueOf()) {
            message.warning("结束时间必须大于开始时间");
            return;
        }
        if (!savedate.taskRequire) {
            message.warning("任务要求不能为空");
            return;
        }
        if (!savedate.taskProcess) {
            message.warning("任务流程不能为空");
        if (list.length == 0) {
            message.warning("请至少添加一个子任务");
            return;
        }
        if (!socialTaskObject.id) {
@@ -158,20 +158,49 @@
            const data1 = { objectId: data[0].id, objectName: data[0].companyName }
            console.log(data)
            console.log(data1)
            data2 = { ...savedate, socialTaskObject: data1 }
            data2 = { ...savedate, socialTaskObject: data1, tasks: list }
        }
        console.log(data2)
        this.setState({ btlloading: true })
        Fetch.socialSave(data2)
            .then(res => {
                if (res.code === 0) {
                    this.setState({ btlloading: false })
                    message.success("提交成功!");
                    this.props.history.push("/careList")
                } else {
                    message.error('保存失败,请联系管理员', 2)
                }
            });
    }
    modalhandleOk = () => {
        const { modalData, taskAddress, list } = this.state;
        if (!modalData.taskAddress) {
            message.warning("任务地点不能为空");
            return;
        }
        if (!modalData.taskTitle) {
            message.warning("任务标题不能为空");
            return;
        }
        if (!modalData.taskRequire) {
            message.warning("任务要求不能为空");
            return;
        }
        if (!modalData.taskProcess) {
            message.warning("任务流程不能为空");
            return;
        }
        // 如果数组中存在此对象则删除原对象末尾添加新的对象,如果是新增的对象则直接添加在尾部
        var newList = list.find(item => item.id == modalData.id) ? list.filter(item => item.id !== modalData.id) : list;
        newList.push({ ...modalData, status: 0 })
        console.log('newList', newList)
        this.setState({
            modalshowVisible: false,
            list: newList
        })
    }
    cancle = () => {
@@ -196,18 +225,12 @@
        });
    }
    handleOk = e => {
        const { savedate } = this.state;
        console.log(savedate);
        this.setState({
            visible: false,
        });
        Fetch.socialUpdate(savedate.id)
    handleOk = (record) => {
        Fetch.socialUpdate(record.id, 2)
            .then(res => {
                if (res.code === 0) {
                    message.success("结束任务成功!");
                    this.props.history.push("/careList")
                    this.getDetail()
                } else {
                    message.error('保存失败,请联系管理员', 2)
                }
@@ -335,6 +358,7 @@
                    autoPlay: true, // 指定音视频是否自动播放
                    controls: true, // 指定音视频是否显示控制栏
                    poster: domain + 'api/v1/attachment/image/' + res[0].id, // 指定视频播放器的封面
                    modalshowVisible: false
                }
            })
        }
@@ -364,9 +388,9 @@
        this.setState({ editorState })
        const htmlContent = editorState.toHTML()
        console.log(htmlContent)
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
        this.setState(({ modalData }) => ({
            modalData: {
                ...modalData,
                taskRequire: htmlContent
            }
        }))
@@ -375,19 +399,122 @@
    handleEditorLChange = (editorStatetaskProcess) => {
        this.setState({ editorStatetaskProcess })
        const htmlContent = editorStatetaskProcess.toHTML()
        this.setState(({ savedate }) => ({
            savedate: {
                ...savedate,
        this.setState(({ modalData }) => ({
            modalData: {
                ...modalData,
                taskProcess: htmlContent
            }
        }))
    }
    modalshow = () => {
        this.setState({ modalshowVisible: true, modalData: {} })
        this.setState({ loading: true })
        Fetch.socialfind('new')
            .then(res => {
                console.log(res)
                this.setState({
                    modalData: {
                        ...res,
                    },
                    editorState: BraftEditor.createEditorState(res.taskRequire),
                    editorStatetaskProcess: BraftEditor.createEditorState(res.taskProcess),
                    modaldisabled: true,
                    loading: false,
                });
            })
    }
    modalshowCancel = () => {
        this.setState({ modalshowVisible: false, fileList: [] })
    }
    handleCancel = () => this.setState({ previewVisible: false })
    renderColumns = () => {
        return [
            {
                title: '编号',
                dataIndex: 'key',
                key: 'key',
                render: (text, record, index) => <span>{index + 1}</span>
            },
            {
                title: '任务地点',
                dataIndex: 'taskAddress',
                key: 'taskAddress',
            },
            {
                title: '任务标题',
                dataIndex: 'taskTitle',
                key: 'taskTitle',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                render: (text, record) => <span>{typeStatus(text)}</span>
            }, {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                        {
                            this.state.disabled ?
                                <label onClick={() => { this.onDetail(text, record) }} className="theme-color">详情</label>
                                :
                                <label onClick={() => { this.onDetail(text, record) }} className="theme-color">编辑</label>
                        }
                        <Divider type="vertical" />
                        <Popconfirm placement="topRight" title={'你确定要删除该条记录吗'} onConfirm={() => { this.onDel(text, record) }} okText="确定" cancelText="取消">
                            <label className="theme-color">删除</label>
                        </Popconfirm>
                        {
                            record.status == 1 &&
                            <React.Fragment>
                                <Divider type="vertical" />
                                <Popconfirm placement="topRight" title={'你确定要结束任务吗'} onConfirm={() => { this.handleOk(record) }} okText="确定" cancelText="取消">
                                    <a >结束任务</a>
                                </Popconfirm>
                            </React.Fragment>
                        }
                    </span>
                ),
            }
        ]
    }
    onDel = (_text, _record) => {
        console.log(_text, _record)
        const { list } = this.state;
        this.setState({
            list: list.filter(({ id }) => (id !== _record.id))
        })
        // Fetch.businessDel({ businessId: _text.businessId }).then(res => {
        //     if (res.code == 0) {
        //         message.warning('正在更新列表');
        //         this.onTableChange();
        //     }
        // }, err => {
        //     message.error(err);
        // });
    }
    onDetail = (_text, _record) => {
        this.setState({
            modalData: _record,
            editorState: BraftEditor.createEditorState(_record.taskRequire),
            editorStatetaskProcess: BraftEditor.createEditorState(_record.taskProcess),
            fileList: _record.attachments || [],
            modalshowVisible: true
        })
    }
    render() {
        const { savedate, editorState, socialTaskObject, fileList, editorStatetaskProcess, hitList, taskType, disabled, loading } = this.state;
        console.log('list', socialTaskObject)
        const { savedate, editorState, socialTaskObject, fileList, editorStatetaskProcess, confirmLoading, btlloading, taskType, disabled, loading, modalData, modalshowVisible, list, modaldisabled } = this.state;
        console.log(modalData)
        const props = {
            action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
            onChange: ({ file, fileList }) => {
@@ -430,44 +557,6 @@
            )
            )
        }];
        const act2columns = [{
            title: '报名方',
            dataIndex: 'proposerName',
            key: 'proposerName'
        }, {
            title: '报名方性质',
            dataIndex: 'signerType',
            key: 'signerType',
            render: text => (<span>{text == 1 ? '个人' : '企业'}</span>)
        }, {
            title: '报名人数',
            dataIndex: 'signNum',
            key: 'signNum',
        }, {
            title: '审核状态',
            dataIndex: 'signStatus',
            key: 'signStatus',
            render: text => (<span>{typeStatus(text)}</span>)
        }, {
            title: '操作',
            dataIndex: 'isHit',
            key: 'isHit',
            render: (text, record) => (
                record.signStatus == 1 ?
                    <Popconfirm
                        title="确认通过审核吗?"
                        id={record.id}
                        onConfirm={e => this.confirm(record.id)}
                        onCancel={this.cancel}
                        okText="通过"
                        cancelText="不通过"
                    >
                        <a href="#">审核</a>
                    </Popconfirm> : <span disabled>审核</span>
            )
        }];
        return (
            <div className="app-page">
                <Spin spinning={loading}>
@@ -486,19 +575,14 @@
                                        <Option value={2}>合适成年人</Option>
                                        <Option value={3}>社会调查</Option>
                                        <Option value={4}>心理疏导</Option>
                                        <Option value={5}>法律援助</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='taskTitle' onChange={this.saveInputChange} value={savedate.taskTitle || ""} /></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='taskAddress' onChange={this.saveInputChange} value={savedate.taskAddress || ""} /></Col>
                            </Row>
                        </div>
                        <div style={divStyle}>
                            <Row type="flex" align='middle' justify="space-around">
@@ -514,6 +598,60 @@
                            </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} >
                                    <Button style={{ width: '300px' }} disabled={disabled} onClick={this.modalshow}>请添加</Button>
                                </Col>
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>任务对象</span></Col>
                                <Col span={6} push={0} >
                                    <Select disabled={disabled} value={socialTaskObject ? socialTaskObject.id : ''} style={{ width: "300px" }} onChange={(value) => this.selectChange({ target: { name: 'id', value } })}>
                                        {
                                            savedate.companies ? savedate.companies.map(item =>
                                                <Option value={item.id}>{item.companyName}</Option>
                                            ) : ''
                                        }
                                    </Select>
                                </Col>
                            </Row>
                        </div>
                        <Table dataSource={list} style={{ margin: '24px' }} pagination={false} columns={this.renderColumns()} />
                        {
                            disabled ?
                                <div style={{ display: 'flex', justifyContent: 'center' }}>
                                    <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
                                </div>
                                :
                                <div style={{ display: 'flex', justifyContent: 'center' }}>
                                    <Button loading={btlloading} style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.submit}>提交</Button>
                                    <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
                                </div>
                        }
                    </BusDetailView>
                    <Modal
                        width='60%'
                        title="添加"
                        confirmLoading={confirmLoading}
                        visible={modalshowVisible}
                        onOk={this.modalhandleOk}
                        onCancel={this.modalshowCancel}
                    >
                        <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="请输入任务地点" name='taskAddress' onChange={this.saveModalInputChange} value={modalData.taskAddress || ""} /></Col>
                                <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>任务标题</span></Col>
                                <Col span={6} push={0} ><Input disabled={disabled} placeholder="请输入任务标题" name='taskTitle' onChange={this.saveModalInputChange} value={modalData.taskTitle || ""} /></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>
@@ -522,7 +660,7 @@
                                    <BraftEditor
                                        value={editorState}
                                        disabled={disabled}
                                        placeholder='请输入活动进程'
                                        placeholder='请输入任务要求'
                                        media={{
                                            allowPasteImage: true, // 是否允许直接粘贴剪贴板图片(例如QQ截图等)到编辑器
                                            image: true, // 开启图片插入功能
@@ -535,7 +673,6 @@
                                        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>
@@ -548,7 +685,7 @@
                                    <BraftEditor
                                        value={editorStatetaskProcess}
                                        disabled={disabled}
                                        placeholder='请输入活动进程'
                                        placeholder='请输入任务流程'
                                        media={{
                                            allowPasteImage: true, // 是否允许直接粘贴剪贴板图片(例如QQ截图等)到编辑器
                                            image: true, // 开启图片插入功能
@@ -562,33 +699,15 @@
                                        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>
                        <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} >
                                    <Select disabled={disabled} value={socialTaskObject ? socialTaskObject.id : ''} style={{ width: "300px" }} onChange={(value) => this.selectChange({ target: { name: 'id', value } })}>
                                        {
                                            savedate.companies ? savedate.companies.map(item =>
                                                <Option value={item.id}>{item.companyName}</Option>
                                            ) : ''
                                        }
                                    </Select>
                                </Col>
                                <Col span={12} pull={0}></Col>
                            </Row>
                        </div>
                        {
                            savedate.status ?
                            modalData.socialTaskObject && modalData.socialTaskObject.taskReport ?
                                <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={8} value={socialTaskObject.taskReport || ""} onChange={this.saveInputChange} name='taskReport' />
                                            <TextArea disabled={disabled} rows={8} value={modalData.socialTaskObject.taskReport || ""} onChange={this.saveModalInputChange} name='taskReport' />
                                        </Col>
                                        <Col span={12} pull={0}></Col>
                                    </Row>
@@ -596,7 +715,7 @@
                        }
                        {
                            savedate.status ?
                            modalData.socialTaskObject && modalData.socialTaskObject.taskReport ?
                                <div style={divStyle}>
                                    <div style={divStyle}>
                                        <Row type="flex" align='top' justify="space-around">
@@ -610,35 +729,6 @@
                                    </div>
                                </div> : ''
                        }
                        {
                            savedate.status == 2 || savedate.status == 99 ?
                                <div style={{ display: 'flex', justifyContent: 'center' }}>
                                    <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
                                </div>
                                :
                                savedate.status == 1 ?
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                                        <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.showModal}>结束任务</Button>
                                        <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
                                    </div> :
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                                        <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.submit}>提交</Button>
                                        <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
                                    </div>
                        }
                    </BusDetailView>
                    <Modal
                        title="结束任务"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancelModel}
                        width='300px'
                    >
                        <p>确认结束任务吗?</p>
                    </Modal>
                </Spin>
            </div>