From 47c7a0503a119572bd1b9e2812510dd6792d95f0 Mon Sep 17 00:00:00 2001
From: liuwh <hugeinfo123>
Date: Tue, 31 Mar 2020 12:14:44 +0800
Subject: [PATCH] 1
---
SunshineIns/src/page/CareListEdit.jsx | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 103 insertions(+), 11 deletions(-)
diff --git a/SunshineIns/src/page/CareListEdit.jsx b/SunshineIns/src/page/CareListEdit.jsx
index 0be5abe..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,9 +84,11 @@
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 } : {},
disabled: res.status ? true : false,
fileList: res.attachments || [],
loading: false,
@@ -122,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) {
@@ -273,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,
@@ -362,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='社会关护管理活动' >
@@ -370,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>
@@ -406,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>
@@ -434,12 +521,12 @@
</div>
{
- savedate.status !== 0 ?
+ 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={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={4} value={socialTaskObject.taskReport || ""} onChange={this.saveInputChange} name='taskReport' />
</Col>
<Col span={12} pull={0}></Col>
</Row>
@@ -447,7 +534,7 @@
}
{
- savedate.status !== 0 ?
+ savedate.status ?
<div style={divStyle}>
<div style={divStyle}>
<Row type="flex" align='top' justify="space-around">
@@ -459,7 +546,7 @@
</Col>
</Row>
</div>
- </div> :''
+ </div> : ''
}
{
@@ -497,3 +584,8 @@
}
}
+
+function disabledDate(current) {
+ // Can not select days before today and today
+ return current && current < moment().endOf('day');
+}
--
Gitblit v1.8.0