From 894ab56e0e650dda334273f21f948677163f134b Mon Sep 17 00:00:00 2001
From: liuwh <hugeinfo123>
Date: Sat, 09 May 2020 17:51:53 +0800
Subject: [PATCH] xiangjianlaji
---
SunshineIns/src/page/CareListEdit.jsx | 350 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 319 insertions(+), 31 deletions(-)
diff --git a/SunshineIns/src/page/CareListEdit.jsx b/SunshineIns/src/page/CareListEdit.jsx
index a0417c0..aca0324 100644
--- a/SunshineIns/src/page/CareListEdit.jsx
+++ b/SunshineIns/src/page/CareListEdit.jsx
@@ -1,13 +1,15 @@
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 } from 'antd';
const { TextArea } = Input;
import HeadView from '../view/HeadView';
import BusDetailView from '../view/BusDetailView';
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';
@@ -38,6 +40,7 @@
this.state = {
dateSource: [],
savedate: {},
+ modalData: {},
formdata: {},
fileList: [],
previewVisible: false,
@@ -50,6 +53,10 @@
status: '',
loading: false,
socialTaskObject: '',
+ // rowNum: 4,
+ editorState: BraftEditor.createEditorState(null),
+ editorStatetaskProcess: BraftEditor.createEditorState(null),
+ list: []
};
}
@@ -82,7 +89,8 @@
},
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,
@@ -120,16 +128,14 @@
message.warning("任务标题不能为空");
return;
}
- if (!savedate.taskAddress) {
- message.warning("任务地点不能为空");
+ if (moment(savedate.startTime) < moment(new Date())) {
+ message.warning("开始时间必须大于当前时间");
+ console.log(moment(savedate.startTime))
+ console.log(moment(new Date()))
return;
}
- if (!savedate.taskRequire) {
- message.warning("任务要求不能为空");
- return;
- }
- if (!savedate.taskProcess) {
- message.warning("任务流程不能为空");
+ if (moment(savedate.endTime) < moment(savedate.startTime)) {
+ message.warning("结束时间必须大于开始时间");
return;
}
if (!socialTaskObject.id) {
@@ -273,10 +279,218 @@
)
}
+ 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, // 指定视频播放器的封面
+ modalshowVisible: false
+ }
+ })
+ }
+
+
+ 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(({ modalData }) => ({
+ modalData: {
+ ...modalData,
+ taskRequire: htmlContent
+ }
+ }))
+ }
+
+ handleEditorLChange = (editorStatetaskProcess) => {
+ this.setState({ editorStatetaskProcess })
+ const htmlContent = editorStatetaskProcess.toHTML()
+ this.setState(({ modalData }) => ({
+ modalData: {
+ ...modalData,
+ taskProcess: htmlContent
+ }
+ }))
+ }
+
+ modalshow = () => {
+ this.setState({ modalshowVisible: true })
+ const { id } = this.props.match.params;
+ this.setState({ loading: true })
+ Fetch.socialfind(id)
+ .then(res => {
+ console.log(res)
+ this.setState({
+ modalData: {
+ ...res,
+ },
+ editorState: BraftEditor.createEditorState(res.taskRequire),
+ editorStatetaskProcess: BraftEditor.createEditorState(res.taskProcess),
+ taskType: res.taskType || 1,
+ socialTaskObject: res.socialTaskObject ? { id: res.socialTaskObject.objectId, objectName: res.socialTaskObject.objectName, taskReport: res.socialTaskObject.taskReport } : {},
+ modaldisabled: res.status ? true : false,
+ fileList: res.attachments || [],
+ loading: false,
+ });
+ })
+ }
+
+ modalshowCancel = () => {
+ this.setState({ modalshowVisible: false })
+ }
+
+ handleOk = () => {
+ console.log('success')
+ this.setState({ confirmLoading: true });
+ const { modalData } = this.state;
+ console.log(modalData)
+
+ if (!modalData.taskAddress) {
+ return message.warning("任务地点不能为空");
+ }
+ if (!modalData.taskTitle) {
+ return message.warning("任务标题不能为空");
+ }
+ if (!modalData.taskRequire) {
+ message.warning("任务要求不能为空");
+ return;
+ }
+ if (!modalData.taskProcess) {
+ message.warning("任务流程不能为空");
+ return;
+ }
+ console.log(modalData)
+ //提交完成后关闭弹窗，刷新列表
+
+ // Fetch.addResult({ ...modalData })
+ // .then(res => {
+ // console.log(res)
+ // if (res.code === 0) {
+ // this.setState({
+ // confirmLoading: false,
+ // modal: false,
+ // closeKey: Date.now()
+ // }, this.getData);
+ // message.success("提交成功！")
+ // } else {
+ // message.error('保存失败，请联系管理员', 2)
+ // }
+ // });
+ }
+
+
handleCancel = () => this.setState({ previewVisible: false })
+
+
+ renderColumns = () => {
+ return [
+ {
+ title: '编号',
+ dataIndex: 'key',
+ key: 'key',
+ },
+ {
+ title: '任务流程',
+ dataIndex: 'taskAddress',
+ key: 'taskAddress',
+ },
+ {
+ title: '任务要求',
+ dataIndex: 'taskProcess',
+ key: 'taskProcess',
+ }, {
+ title: '操作',
+ key: 'action',
+ render: (text, record) => (
+ <span>
+ <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>
+ </span>
+ ),
+ }
+ ]
+ }
+
+ onDel = (_text, _record) => {
+ console.log(_text, _record)
+ // Fetch.businessDel({ businessId: _text.businessId }).then(res => {
+ // if (res.code == 0) {
+ // message.warning('正在更新列表');
+ // this.onTableChange();
+ // }
+ // }, err => {
+ // message.error(err);
+ // });
+ }
+
+ onDetail = (_text, _record) => {
+ console.log(_text, _record)
+ }
+
render() {
- const { savedate, previewVisible, socialTaskObject, fileList, dateSource, hitList, taskType, disabled, loading } = this.state;
- console.log('list', socialTaskObject)
+ const { savedate, editorState, socialTaskObject, fileList, editorStatetaskProcess, hitList, taskType, disabled, loading, modalData, modalshowVisible, list, modaldisabled } = this.state;
const props = {
action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
onChange: ({ file, fileList }) => {
@@ -370,24 +584,18 @@
<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>
<Option value={4}>心理疏导</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">
@@ -403,19 +611,19 @@
</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.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={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={12} pull={0}></Col>
</Row>
</div>
+
+ <Table dataSource={list} pagination={false} columns={this.renderColumns()} />
<div style={divStyle}>
<Row type="flex" align='middle' justify="space-around">
@@ -438,8 +646,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 +667,7 @@
</Col>
</Row>
</div>
- </div> :''
+ </div> : ''
}
{
@@ -491,9 +699,89 @@
>
<p>确认结束任务吗？</p>
</Modal>
+ <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={modaldisabled} placeholder="请输入任务地点" name='taskAddress' onChange={this.saveInputChange} value={modalData.taskAddress || ""} /></Col>
+ <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>任务标题</span></Col>
+ <Col span={6} push={0} ><Input disabled={modaldisabled} placeholder="请输入任务标题" name='taskTitle' onChange={this.saveInputChange} 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>
+ <Col span={18} push={0} style={{ border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '5PX' }}>
+
+ <BraftEditor
+ value={editorState}
+ disabled={modaldisabled}
+ 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}
+ />
+ </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} style={{ border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '5PX' }}>
+
+ <BraftEditor
+ value={editorStatetaskProcess}
+ disabled={modaldisabled}
+ 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>
+ </Row>
+ </div>
+ </Modal>
</Spin>
</div>
);
}
}
+
+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;
+}
\ No newline at end of file
--
Gitblit v1.8.0