From d7004986135c0885c1b9a92fb48919179732c00d Mon Sep 17 00:00:00 2001
From: xuxj <hugeinfo123>
Date: Sat, 09 May 2020 09:20:13 +0800
Subject: [PATCH] BUG修改
---
SunshineIns/src/page/ActiveManageEdit.jsx | 449 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 409 insertions(+), 40 deletions(-)
diff --git a/SunshineIns/src/page/ActiveManageEdit.jsx b/SunshineIns/src/page/ActiveManageEdit.jsx
index c1aa82a..f4bd483 100644
--- a/SunshineIns/src/page/ActiveManageEdit.jsx
+++ b/SunshineIns/src/page/ActiveManageEdit.jsx
@@ -5,13 +5,15 @@
*/
import React from 'react';
-import { Row, Col, Input, DatePicker, Button, Modal, Upload, Icon, message, Divider, TimePicker, Badge, Select, Popconfirm, Spin } from 'antd';
-const { TextArea } = Input;
+import { Row, Col, Input, DatePicker, Button, Modal, Upload, Table, Icon, message, Divider, TimePicker, Badge, Select, Popconfirm, Spin, Breadcrumb } from 'antd';
+const { TextArea, Search } = 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';
@@ -44,6 +46,7 @@
savedate: {},
formdata: {},
fileList: [],
+ attList1: [],
previewVisible: false,
previewImage: '',
visible: false,
@@ -53,6 +56,13 @@
disabled: true,
status: '',
loading: false,
+ code: '',
+ editorState: BraftEditor.createEditorState(null),
+ questionnaireModal: false,
+ pageSize: 10,
+ page: 1,
+ selectedRowKeys: [],
+ selectedQuestionnaireData: {}
};
}
@@ -82,14 +92,27 @@
endHour: moment(endTime).format(format),
activityType: res.activity.activityType || 'act_1',
},
+ code: res.code || '',
+ editorState: BraftEditor.createEditorState(res.activity.course),
activityType: res.activity.activityType || 'act_1',
status: res.activity.activityStatus || '',
disabled: res.activity.activityStatus == 0 ? false : true,
dateSource: res.personList || [],
+ // fileList: res.attachments.length > 0 ? res.attachments.filter(item=>(item.typeId==1000)) : [],
fileList: res.attachments || [],
+ attList1: res.attList1 || [],
loading: false,
+ modalLoading: false,
+ selectedQuestionnaireData: res.questionnaire || {}
});
})
+ }
+ onShowSizeChange = (current, pageSize) => {
+ this.setState({ pageSize, page: 1 })
+ this.loadData(1, pageSize);
+ }
+ pageChange = (page, pageSize) => {
+ this.loadData(page, pageSize);
}
saveInputChange = ({ target: { value, name } }) => {
@@ -101,21 +124,109 @@
}))
}
+ selectonClick = (value) => {
+ this.setState({
+ questionnaireModal: true,
+ modalLoading: true
+ })
+ Fetch.questionQuery({
+ status: 3,
+ title : value,
+ page: this.state.page,
+ size: this.state.pageSize,
+ })
+ .then(res => {
+ this.setState({
+ modalLoading: false
+ })
+ if (res.code == 0) {
+ for (var i = 0; i < res.data.content.length; i++) {
+ res.data.content[i]['index'] = i + 1;
+ res.data.content[i]['key'] = i;
+ }
+ this.setState({
+ tableData: res.data.content,
+ totalElements: res.data.totalElements
+ });
+
+ }
+ });
+ }
+
+ selClick = () =>{
+ this.selectonClick("");
+ }
+
+ selectCancelModel = () => {
+ this.setState({
+ questionnaireModal: false,
+ selectedRowKeys: [],
+ selectedQuestionnaireData: {},
+ })
+ }
+
+
+ questionnaireCancle = () => {
+ const { selectedQuestionnaireData } = this.state;
+ // this.props.history.push(`/questionnaire/detail/${selectedQuestionnaireData.id}`)
+ window.open('index.html#/activeManageEditquestionnaire/' + selectedQuestionnaireData.id);
+ }
+
+ questionnaireDel = () => {
+ this.setState({ selectedQuestionnaireData: {} })
+ }
+
+ handleOk = (e) => {
+ this.setState({
+ questionnaireModal: false,
+ selectedRowKeys: []
+ })
+ }
+
submit = () => {
- const { savedate } = this.state;
+ const { savedate, selectedQuestionnaireData, fileList } = 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);
+ if (!savedate.host) {
+ message.warning("主持人不能为空");
+ return;
+ }
+ if (savedate.activityPhone) {
+ if (!savedate.activityPhone) {
+ return message.warning("联系电话不能为空");
+ }
+ }
+ if (!savedate.activityTitle) {
+ message.warning("活动标题不能为空");
+ return;
+ }
+ if (!savedate.activityAddress) {
+ message.warning("活动地址不能为空");
+ return;
+ }
if (!savedate.activityPersonQuota) {
message.warning("活动人数不能为空");
return;
}
- if (savedate.activityPhone) {
- if (!validator.phone(savedate.activityPhone)) {
- return message.warning("联系电话格式不正确");
- }
+ if (!savedate.activityDesc) {
+ message.warning("活动描述不能为空");
+ return;
}
- Fetch.saveActive(savedate)
+ if (!savedate.requirement) {
+ message.warning("报名要求不能为空");
+ return;
+ }
+
+ if (fileList.length = 0) {
+ message.warning("添加图片不能为空");
+ return;
+ }
+
+ if (!selectedQuestionnaireData) {
+ return message.warning("调查问卷不能为空");
+ }
+
+ Fetch.saveActive({ ...savedate, queId: selectedQuestionnaireData.id })
.then(res => {
if (res.code === 0) {
message.success("提交成功！");
@@ -149,7 +260,6 @@
}
getNum = (e) => {
- console.log(e.target.value)
this.setState({
num: e.target.value
})
@@ -190,12 +300,10 @@
}
confirm = (e) => {
- console.log(e);
const data = { id: e, status: 2 };
this.setState({ loading: true })
Fetch.auditPerson(data).then(res => {
if (res.code == 0) {
- console.log(res)
this.setState({ loading: false })
message.success('审核通过');
this.getDetail();
@@ -208,12 +316,10 @@
}
cancel = (e) => {
- console.log(e);
const data = { id: e, status: 4 };
this.setState({ loading: true })
Fetch.auditPerson(data).then(res => {
if (res.code == 0) {
- console.log(res)
this.setState({ loading: false })
message.error('审核不通过');
this.getDetail();
@@ -225,10 +331,88 @@
)
}
+ 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, // 指定视频播放器的封面
+ }
+ })
+ }
+
+
+ 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) => {
+ console.log('editorState', editorState)
+ this.setState({ editorState })
+ const htmlContent = editorState.toHTML()
+ console.log(htmlContent)
+ this.setState(({ savedate }) => ({
+ savedate: {
+ ...savedate,
+ course: htmlContent
+ }
+ }))
+ }
+
+ submitContent = () => {
+ // 在编辑器获得焦点时按下ctrl+s会执行此方法
+ // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
+ const htmlContent = this.state.editorState.toHTML()
+ console.log(htmlContent)
+ this.setState(({ savedate }) => ({
+ savedate: {
+ ...savedate,
+ course: htmlContent
+ }
+ }))
+ }
+
+ onSelectChange = (selectedRowKeys, selectedRows) => {
+ const { tableData } = this.state;
+ this.setState({
+ selectedQuestionnaireData: tableData[selectedRowKeys[0]],
+ selectedRowKeys
+ })
+ };
+
handleCancel = () => this.setState({ previewVisible: false })
render() {
- const { savedate, previewVisible, previewImage, fileList, dateSource, hitList, activityType, disabled, loading } = this.state;
- console.log('disabled', disabled)
+ const { savedate, previewVisible, previewImage, editorState, selectedRowKeys, fileList, attList1, dateSource, code, hitList, activityType, disabled, loading, modalLoading } = this.state;
const props = {
action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
onChange: ({ file, fileList }) => {
@@ -243,6 +427,27 @@
this.setState(({ fileList }) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
+ newFileList.splice(index, 1);
+ return {
+ fileList: newFileList,
+ };
+ });
+ }
+ };
+ const bottmProps = {
+ action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
+ onChange: ({ file, fileList }) => {
+ this.setState({ attList1: fileList });
+ },
+ fileList: attList1,
+ onRemove: (file) => {
+ Fetch.deleteAttachment(file.uid)
+ .then(res => {
+ message.success("移除成功！");
+ });
+ this.setState(({ attList1 }) => {
+ const index = attList1.indexOf(file);
+ const newFileList = attList1.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
@@ -271,21 +476,47 @@
)
)
}];
+ const questionnaireColumns = [{
+ title: '问卷标题',
+ dataIndex: 'title',
+ key: 'title',
+ ellipsis: true,
+ render: (cur, item) => {
+ return cur || '暂无'
+ }
+ }, {
+ title: '描述',
+ dataIndex: 'content',
+ key: 'content',
+ ellipsis: true,
+ render: (cur, item) => {
+ return cur || '暂无'
+ }
+ }, {
+ title: '发布时间',
+ dataIndex: 'publicTime',
+ key: 'publicTime',
+ render: (cur, item) => {
+ return cur ? moment(cur).format("YYYY-MM-DD HH:mm") : '暂无'
+ }
+ }];
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: 'signerType',
+ // key: 'signerType',
+ // render: text => (<span>{text == 1 ? '个人' : '企业'}</span>)
+ // }, {
+ // title: '报名人数',
+ // dataIndex: 'signNum',
+ // key: 'signNum',
+ // },
+ {
title: '审核状态',
dataIndex: 'signStatus',
key: 'signStatus',
@@ -305,14 +536,17 @@
cancelText="不通过"
>
<a href="#">审核</a>
- </Popconfirm> : <span disabled>审核</span>
+ </Popconfirm> : <span disabled></span>
)
}];
-
return (
<div className="app-page">
<Spin spinning={loading}>
<HeadView history={this.props.history} />
+ <Breadcrumb style={{ padding: '20px' }}>
+ <Breadcrumb.Item><a href="index.html#/activeManage">法治活动</a></Breadcrumb.Item>
+ <Breadcrumb.Item>活动发布</Breadcrumb.Item>
+ </Breadcrumb>
<BusDetailView type='活动发布' >
<div style={divStyle}>
<Row type="flex" align='middle' justify="space-around">
@@ -324,15 +558,8 @@
<Option value='act_3'>普法预约</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='host' onChange={this.saveInputChange} value={savedate.host || ""} /></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='requirement' onChange={this.saveInputChange} value={savedate.requirement || ""} /></Col>
</Row>
</div>
@@ -376,6 +603,12 @@
<Col span={18} push={0} ><TextArea disabled={disabled} rows={4} placeholder="请输入活动描述" style={{ width: '92%' }} value={savedate.activityDesc || ""} onChange={this.saveInputChange} name='activityDesc' /></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} placeholder="请输入报名要求" style={{ width: '92%' }} name='requirement' onChange={this.saveInputChange} value={savedate.requirement || ""} /></Col>
+ </Row>
+ </div>
<div style={divStyle}>
<Row type="flex" align='top' justify="space-around">
@@ -395,21 +628,117 @@
</div>
{
- activityType == 'act_1' ? (dateSource.length > 0 ?
+ code && <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} ><img style={{ width: '150px', height: '150px' }} src={`data:image/png;base64,${code}`} /></Col>
+ </Row>
+ </div>
+
+ }
+
+ <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} 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}
+ />
+ </Col>
+ </Row>
+ </div>
+ {
+ savedate.activityStatus == null || savedate.activityStatus == 0 ?
+ <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} >
+ {
+ this.state.selectedQuestionnaireData.title ?
+ <div>
+ <span style={{ margin: '0 20px' }}>{this.state.selectedQuestionnaireData.title}</span>
+ <Button type="link" onClick={this.questionnaireCancle}>查看</Button>
+ <Button type="link" onClick={this.questionnaireDel}>删除</Button>
+ </div> :
+ <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.selClick}>请选择</Button>
+ }
+ </Col>
+ </Row>
+ </div> :
+ <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} >
+ {
+ this.state.selectedQuestionnaireData.title ?
+ <div>
+ <span style={{ margin: '0 20px' }}>{this.state.selectedQuestionnaireData.title}</span>
+ <Button type="link" onClick={this.questionnaireCancle}>查看</Button>
+ <Button type="link" disabled onClick={this.questionnaireDel}>删除</Button>
+ </div> :
+ <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.selClick}>请选择</Button>
+ }
+ </Col>
+ </Row>
+ </div>
+ }
+
+ {
+ savedate.activityType == 'act_1' ? (dateSource.length > 0 ?
<div style={divStyle}>
<Divider orientation="left" style={{ margin: '20px', width: '97%' }}>报名人员信息</Divider>
<TableView columns={columns} data={dateSource} pageSize='6' size='small' />
</div> : null) : null
}
{
- activityType == 'act_2' || activityType == 'act_3' ? (dateSource.length > 0 ?
+ savedate.activityType == 'act_2' || savedate.activityType == 'act_3' ? (dateSource.length > 0 ?
<div style={divStyle}>
<Divider orientation="left" style={{ margin: '20px', width: '97%' }}>报名名单</Divider>
<TableView columns={act2columns} data={dateSource} pageSize='6' size='small' />
</div> : null) : null
}
{
- activityType == 'act_1' && (
+ savedate.activityType == 'act_2' || savedate.activityType == 'act_3' ? (dateSource.length > 0 ?
+ <div style={divStyle}>
+ <Divider orientation="left" style={{ margin: '20px', width: '97%' }}>培训结果</Divider>
+ <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} {...bottmProps}>
+
+ </Upload>
+ <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+ <img alt="example" style={{ width: '100%' }} src={previewImage} />
+ </Modal>
+ </Col>
+ </Row>
+ <Row type="flex" align='top' justify="space-around">
+ <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>培训结果</span></Col>
+ <Col span={18} push={0} >
+ <span>{savedate.result}</span>
+ </Col>
+ </Row>
+ </div>
+
+ </div> : null) : null
+ }
+
+ {
+ savedate.activityType == 'act_1' && (
savedate.activityStatus == null || savedate.activityStatus == 0 ?
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.submit}>提交</Button>
@@ -429,7 +758,7 @@
)
}
{
- activityType == 'act_2' || activityType == 'act_3' && (
+ savedate.activityType == 'act_2' || savedate.activityType == 'act_3' ? (
savedate.activityStatus == null || savedate.activityStatus == 0 ?
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.submit}>提交</Button>
@@ -446,7 +775,7 @@
<Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
</div>
)
- )
+ ) : ''
}
</BusDetailView>
@@ -490,6 +819,46 @@
}
</Modal>
+ <Modal
+ title="选择调查问卷"
+ visible={this.state.questionnaireModal}
+ onCancel={this.selectCancelModel}
+ onOk={this.handleOk}
+ width='1000px'
+ >
+ <Search
+ placeholder="请输入问卷调查标题"
+ enterButton="查询"
+ size="large"
+ style={{ margin: '12px' }}
+ onSearch={value => this.selectonClick(value)}
+ />
+
+ <Table
+ size="middle"
+ dataSource={this.state.tableData}
+ rowSelection={{
+ selectedRowKeys,
+ type: 'radio',
+ onChange: this.onSelectChange,
+ }}
+ loading={{ spinning: this.state.modalLoading }}
+ columns={questionnaireColumns}
+ pagination={{
+ pageSize: this.state.pageSize,
+ onChange: this.pageChange,
+ total: this.state.totalElements,
+ showSizeChanger: true,
+ onShowSizeChange: this.onShowSizeChange,
+ showTotal: (total, range) => `共${total}条记录 `,
+ // itemRender: this.itemRender,
+ showQuickJumper: true,
+ defaultCurrent: 1,
+ current: this.state.page
+ }}
+ />
+ {/* <TableView columns={columns} data={this.state.tableData} pageSize='10' size='default' loading={modalLoading} /> */}
+ </Modal>
</Spin>
</div>
);
--
Gitblit v1.8.0