From 8d68b6a1dcdf5008fba6bdac5858d1085a0e63e7 Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Mon, 30 Mar 2020 23:14:04 +0800 Subject: [PATCH] 提交 --- SunshineIns/src/page/CareListEdit.jsx | 141 ++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 132 insertions(+), 9 deletions(-) diff --git a/SunshineIns/src/page/CareListEdit.jsx b/SunshineIns/src/page/CareListEdit.jsx index 25c60e4..f34510a 100644 --- a/SunshineIns/src/page/CareListEdit.jsx +++ b/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,8 @@ status: '', loading: false, socialTaskObject: '', + editorState: BraftEditor.createEditorState(null), + editorStatetaskProcess: BraftEditor.createEditorState(null), }; } @@ -80,10 +84,13 @@ 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}:{}, + socialTaskObject: res.socialTaskObject ? { id: res.socialTaskObject.objectId, objectName: res.socialTaskObject.objectName, taskReport: res.socialTaskObject.taskReport } : {}, disabled: res.status ? true : false, + fileList: res.attachments || [], loading: false, }); }) @@ -121,6 +128,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) { @@ -180,9 +197,9 @@ handleOk = e => { const { savedate } = this.state; console.log(savedate); - + this.setState({ - visible: false, + visible: false, }); Fetch.socialUpdate(savedate.id) .then(res => { @@ -193,7 +210,7 @@ message.error('保存失败,请联系管理员', 2) } }); - }; + }; getNum = (e) => { console.log(e.target.value) @@ -272,9 +289,42 @@ ) } + 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 + } + })) + } + + handleEditorChange = (editorState) => { + this.setState({ editorState }) + } + + handleEditorLChange = (editorStatetaskProcess) => { + this.setState({ editorStatetaskProcess }) + } + + 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, @@ -361,7 +411,7 @@ <Spin spinning={loading}> <HeadView history={this.props.history} /> <Breadcrumb style={{ padding: '20px' }}> - <Breadcrumb.Item><a href="index.html#/entry/applyFor">社会关护管理</a></Breadcrumb.Item> + <Breadcrumb.Item><a href="index.html#/careList">社会关护管理</a></Breadcrumb.Item> <Breadcrumb.Item>社会关护管理活动</Breadcrumb.Item> </Breadcrumb> <BusDetailView type='社会关护管理活动' > @@ -369,7 +419,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> @@ -405,14 +455,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> @@ -431,6 +519,36 @@ <Col span={12} pull={0}></Col> </Row> </div> + + { + savedate.status ? + <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} value={socialTaskObject.taskReport || ""} onChange={this.saveInputChange} name='taskReport' /> + </Col> + <Col span={12} pull={0}></Col> + </Row> + </div> : '' + } + + { + savedate.status ? + <div style={divStyle}> + <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} {...props}> + + </Upload> + </Col> + </Row> + </div> + </div> : '' + } + { savedate.status == 2 || savedate.status == 99 ? @@ -466,3 +584,8 @@ } } + +function disabledDate(current) { + // Can not select days before today and today + return current && current < moment().endOf('day'); +} -- Gitblit v1.8.0