From 2fdc3dc444a2f8199866780205c0fa4b5ac40522 Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Fri, 29 May 2020 10:38:46 +0800 Subject: [PATCH] 指纹登记与对比 --- SunshineIns/src/page/CareListEdit.jsx | 443 +++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 302 insertions(+), 141 deletions(-) diff --git a/SunshineIns/src/page/CareListEdit.jsx b/SunshineIns/src/page/CareListEdit.jsx index 854d35d..822f686 100644 --- a/SunshineIns/src/page/CareListEdit.jsx +++ b/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,9 +50,12 @@ disabled: true, status: '', loading: false, + btlloading: false, socialTaskObject: '', + // rowNum: 4, editorState: BraftEditor.createEditorState(null), editorStatetaskProcess: BraftEditor.createEditorState(null), + list: [] }; } @@ -84,13 +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 } : {}, - disabled: res.status ? true : false, - fileList: res.attachments || [], loading: false, }); }) @@ -100,6 +99,15 @@ this.setState(({ savedate }) => ({ savedate: { ...savedate, + [name]: value + } + })) + } + + saveModalInputChange = ({ target: { value, name } }) => { + this.setState(({ modalData }) => ({ + modalData: { + ...modalData, [name]: value } })) @@ -116,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) { @@ -156,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 = () => { @@ -194,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) } @@ -313,19 +338,183 @@ })) } + 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, 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 }) => { @@ -368,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}> @@ -424,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"> @@ -452,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> @@ -460,7 +660,7 @@ <BraftEditor value={editorState} disabled={disabled} - placeholder='请输入活动进程' + placeholder='请输入任务要求' media={{ allowPasteImage: true, // 是否允许直接粘贴剪贴板图片(例如QQ截图等)到编辑器 image: true, // 开启图片插入功能 @@ -473,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> @@ -486,7 +685,7 @@ <BraftEditor value={editorStatetaskProcess} disabled={disabled} - placeholder='请输入活动进程' + placeholder='请输入任务流程' media={{ allowPasteImage: true, // 是否允许直接粘贴剪贴板图片(例如QQ截图等)到编辑器 image: true, // 开启图片插入功能 @@ -500,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> @@ -534,7 +715,7 @@ } { - savedate.status ? + modalData.socialTaskObject && modalData.socialTaskObject.taskReport ? <div style={divStyle}> <div style={divStyle}> <Row type="flex" align='top' justify="space-around"> @@ -548,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> @@ -585,7 +737,16 @@ } -function disabledDate(current) { - // Can not select days before today and today - return current && current < moment().endOf('day'); -} +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