From 51351c2d8c7297cb3f96e572c0e1a110ce8a5073 Mon Sep 17 00:00:00 2001
From: liuwh <hugeinfo123>
Date: Tue, 24 Mar 2020 20:50:45 +0800
Subject: [PATCH] bug

---
 SunshineIns/src/page/CareListEdit.jsx |   94 ++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/SunshineIns/src/page/CareListEdit.jsx b/SunshineIns/src/page/CareListEdit.jsx
index 0be5abe..26e0f99 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,
@@ -273,9 +279,41 @@
         )
     }
 
+    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.editorState.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 +400,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 +408,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 +444,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,7 +510,7 @@
                         </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>
@@ -447,7 +523,7 @@
                         }
 
                         {
-                            savedate.status !== 0 ?
+                            savedate.status ?
                                 <div style={divStyle}>
                                     <div style={divStyle}>
                                         <Row type="flex" align='top' justify="space-around">
@@ -459,7 +535,7 @@
                                             </Col>
                                         </Row>
                                     </div>
-                                </div> :''
+                                </div> : ''
                         }
 
                         {

--
Gitblit v1.8.0