From 8f619dde9e2382fc8a4f1e04fafde1418f06165b Mon Sep 17 00:00:00 2001
From: LAPTOP-RI7D261L\Mr Ke <545800322@qq.com>
Date: Wed, 26 Feb 2020 16:39:29 +0800
Subject: [PATCH] 问卷管理模块（新建、列表、详情）
---
SunshineIns/src/page/ActiveManageEdit.jsx | 405 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 278 insertions(+), 127 deletions(-)
diff --git a/SunshineIns/src/page/ActiveManageEdit.jsx b/SunshineIns/src/page/ActiveManageEdit.jsx
index 8a02785..c1aa82a 100644
--- a/SunshineIns/src/page/ActiveManageEdit.jsx
+++ b/SunshineIns/src/page/ActiveManageEdit.jsx
@@ -5,7 +5,7 @@
*/
import React from 'react';
-import { Row, Col, Input, DatePicker, Button, Modal, Upload, Icon, message, Divider, TimePicker, Badge } from 'antd';
+import { Row, Col, Input, DatePicker, Button, Modal, Upload, Icon, message, Divider, TimePicker, Badge, Select, Popconfirm, Spin } from 'antd';
const { TextArea } = Input;
import HeadView from '../view/HeadView';
import BusDetailView from '../view/BusDetailView';
@@ -15,11 +15,27 @@
import Fetch from '../fetch';
import moment from 'moment';
const format = 'HH:mm';
+const { Option } = Select;
const yearFormat = 'YYYY-MM-DD';
const divStyle = {
margin: '20px'
}
const domain = Fetch.domain;
+
+function typeStatus(type) {
+ switch (type) {
+ case 1:
+ return "待审核";
+ case 2:
+ return "未签到";
+ case 3:
+ return "已签到";
+ case 4:
+ return "不通过";
+ case 99:
+ return "取消";
+ }
+}
export default class ActiveManageEdit extends React.Component {
constructor(props) {
super(props);
@@ -32,7 +48,11 @@
previewImage: '',
visible: false,
hitList: [],
- num: 0
+ num: 0,
+ activityType: 'act_1',
+ disabled: true,
+ status: '',
+ loading: false,
};
}
@@ -43,6 +63,7 @@
getDetail = () => {
const { id } = this.props.match.params;
+ this.setState({ loading: true })
Fetch.getActiveDetail(id)
.then(res => {
let { startTime, endTime } = res.activity;
@@ -58,10 +79,15 @@
startDate: moment(startTime).format(yearFormat),
startHour: moment(startTime).format(format),
endDate: moment(endTime).format(yearFormat),
- endHour: moment(endTime).format(format)
+ endHour: moment(endTime).format(format),
+ activityType: res.activity.activityType || 'act_1',
},
+ activityType: res.activity.activityType || 'act_1',
+ status: res.activity.activityStatus || '',
+ disabled: res.activity.activityStatus == 0 ? false : true,
dateSource: res.personList || [],
- fileList: res.attachments || []
+ fileList: res.attachments || [],
+ loading: false,
});
})
}
@@ -80,15 +106,15 @@
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.activityPersonQuota){
+ if (!savedate.activityPersonQuota) {
message.warning("活动人数不能为空");
- return;
+ return;
}
if (savedate.activityPhone) {
if (!validator.phone(savedate.activityPhone)) {
- return message.warning("联系电话格式不正确");
+ return message.warning("联系电话格式不正确");
}
- }
+ }
Fetch.saveActive(savedate)
.then(res => {
if (res.code === 0) {
@@ -163,9 +189,46 @@
});
}
+ 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();
+ } else {
+ this.setState({ loading: false })
+ message.error('请求失败，请联系管理员', 2)
+ }
+ }
+ )
+ }
+
+ 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();
+ } else {
+ this.setState({ loading: false })
+ message.error('请求失败，请联系管理员', 2)
+ }
+ }
+ )
+ }
+
handleCancel = () => this.setState({ previewVisible: false })
render() {
- const { savedate, previewVisible, previewImage, fileList, dateSource, hitList } = this.state;
+ const { savedate, previewVisible, previewImage, fileList, dateSource, hitList, activityType, disabled, loading } = this.state;
+ console.log('disabled', disabled)
const props = {
action: domain + 'api/v1/attachment/materials?entityId=' + savedate.id,
onChange: ({ file, fileList }) => {
@@ -208,138 +271,226 @@
)
)
}];
+
+ 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">
- <HeadView history={this.props.history} />
- <BusDetailView type='活动发布' >
- <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 placeholder="请输入活动标题" style={{ width: '300px' }} name='activityTitle' onChange={this.saveInputChange} value={savedate.activityTitle || ""} /></Col>
- <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>主办方电话</span></Col>
- <Col span={6} push={0} ><Input placeholder="请输入活动主办方联系电话" style={{ width: '300px' }} name='activityPhone' onChange={this.saveInputChange} value={savedate.activityPhone || ""} /></Col>
- </Row>
- </div>
+ <Spin spinning={loading}>
+ <HeadView history={this.props.history} />
+ <BusDetailView type='活动发布' >
+ <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={savedate.activityType || 'act_1'} style={{ width: "300px" }} onChange={(value) => this.saveInputChange({ target: { name: 'activityType', value } })}>
+ <Option value='act_1'>南检活动</Option>
+ <Option value='act_2'>法治培训</Option>
+ <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>
- <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} >
- <DatePicker style={{ width: '165px' }} onChange={(_, value) => this.saveInputChange({ target: { name: 'startDate', value } })} value={moment(savedate.startDate, yearFormat)} format={yearFormat} />
- <TimePicker minuteStep={30} onChange={(value) => this.saveInputChange({ target: { name: 'startHour', value } })} value={moment(savedate.startHour, format)} format={format} /></Col>
- <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>结束时间</span></Col>
- <Col span={6} push={0} >
- <DatePicker style={{ width: '165px' }} onChange={(_, value) => this.saveInputChange({ target: { name: 'endDate', value } })} value={moment(savedate.endDate, yearFormat)} format={yearFormat} />
- <TimePicker minuteStep={30} onChange={(value) => this.saveInputChange({ target: { name: 'endHour', value } })} value={moment(savedate.endHour, format)} format={format} /></Col>
+ <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='activityTitle' onChange={this.saveInputChange} value={savedate.activityTitle || ""} /></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='activityPhone' onChange={this.saveInputChange} value={savedate.activityPhone || ""} /></Col>
+ </Row>
+ </div>
- </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} >
+ <DatePicker disabled={disabled} style={{ width: '165px' }} onChange={(_, value) => this.saveInputChange({ target: { name: 'startDate', value } })} value={moment(savedate.startDate || new Date(), yearFormat)} format={yearFormat} />
+ <TimePicker disabled={disabled} minuteStep={30} onChange={(value) => this.saveInputChange({ target: { name: 'startHour', value } })} value={moment(savedate.startHour || new Date(), format)} format={format} /></Col>
+ <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>结束时间</span></Col>
+ <Col span={6} push={0} >
+ <DatePicker disabled={disabled} style={{ width: '165px' }} onChange={(_, value) => this.saveInputChange({ target: { name: 'endDate', value } })} value={moment(savedate.endDate || new Date(), yearFormat)} format={yearFormat} />
+ <TimePicker disabled={disabled} minuteStep={30} onChange={(value) => this.saveInputChange({ target: { name: 'endHour', value } })} value={moment(savedate.endHour || new Date(), format)} format={format} /></Col>
- <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 placeholder="请输入详细地址" style={{ width: '300px' }} name='activityAddress' onChange={this.saveInputChange} value={savedate.activityAddress || ""} /></Col>
- <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>活动人数</span></Col>
- <Col span={6} push={0} >
- <Input style={{ width: '300px' }} name='activityPersonQuota' onChange={this.saveInputChange} value={savedate.activityPersonQuota || ""} />
- </Col>
- </Row>
- </div>
+ </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 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={6} push={0} ><Input disabled={disabled} placeholder="请输入详细地址" style={{ width: '300px' }} name='activityAddress' onChange={this.saveInputChange} value={savedate.activityAddress || ""} /></Col>
+ <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>活动人数</span></Col>
+ <Col span={6} push={0} >
+ <Input disabled={disabled} style={{ width: '300px' }} name='activityPersonQuota' onChange={this.saveInputChange} value={savedate.activityPersonQuota || ""} />
+ </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} >
- <Upload listType="picture-card" onPreview={this.handlePreview} {...props}>
- <div>
- <Icon type="plus" />
- <div className="ant-upload-text">上传图片</div>
- </div>
- </Upload>
- <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
- <img alt="example" style={{ width: '100%' }} src={previewImage} />
- </Modal>
- </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.activityDesc || ""} onChange={this.saveInputChange} name='activityDesc' /></Col>
+ </Row>
+ </div>
- {
- 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
+ <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} {...props}>
+ <div>
+ <Icon type="plus" />
+ <div className="ant-upload-text">上传图片</div>
+ </div>
+ </Upload>
+ <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+ <img alt="example" style={{ width: '100%' }} src={previewImage} />
+ </Modal>
+ </Col>
+ </Row>
+ </div>
- }
- {
- savedate.activityStatus == null || savedate.activityStatus == 0 ?
- < 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>
- : (
- savedate.activityStatus == 3 ?
- < 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={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
- </div>
- )
- }
-
- </BusDetailView>
-
- <Modal
- title="活动摇号"
- visible={this.state.visible}
- onCancel={this.handleCancelModel}
- footer={null}
- width='1000px'
- >
- <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 placeholder="请输入活动标题" style={{ width: '200px' }} name='activityTitle' value={savedate.activityPersonQuota} disabled /></Col>
- <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>摇号名额</span></Col>
- <Col span={6} push={0} ><Input placeholder="请输入摇号名额" style={{ width: '200px' }} onChange={this.getNum} /></Col>
- </Row>
- </div>
-
- <div style={{ display: 'flex', marginBottom: '20px', justifyContent: 'space-around' }}>
{
- hitList.map((data) => (
- <ImageBoxView url={data.headimgurl} userName={data.userName} />
- ))
+ 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
}
- </div>
+ {
+ activityType == 'act_2' || 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.activityStatus == null || savedate.activityStatus == 0 ?
+ <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>
+ : (
+ savedate.activityStatus == 3 ?
+ <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={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
+ </div>
+ )
+ )
+ }
+ {
+ activityType == 'act_2' || 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>
+ <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
+ </div>
+ : (
+ savedate.activityStatus == 3 ?
+ <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={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>返回</Button>
+ </div>
+ )
+ )
+ }
+
+ </BusDetailView>
+
+ <Modal
+ title="活动摇号"
+ visible={this.state.visible}
+ onCancel={this.handleCancelModel}
+ footer={null}
+ width='1000px'
+ >
+ <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 placeholder="请输入活动标题" style={{ width: '200px' }} name='activityTitle' value={savedate.activityPersonQuota} disabled /></Col>
+ <Col span={6} pull={0} style={{ textAlign: 'center' }}><span>摇号名额</span></Col>
+ <Col span={6} push={0} ><Input placeholder="请输入摇号名额" style={{ width: '200px' }} onChange={this.getNum} /></Col>
+ </Row>
+ </div>
+
+ <div style={{ display: 'flex', marginBottom: '20px', justifyContent: 'space-around' }}>
+ {
+ hitList.map((data) => (
+ <ImageBoxView url={data.headimgurl} userName={data.userName} />
+ ))
+ }
+ </div>
- {
- hitList.length > 0 ?
- < div style={{ display: 'flex', justifyContent: 'center' }}>
- <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.publishResult}>发布结果</Button>
- <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.getPerson}>重新摇号</Button>
- </div>
- :
- < div style={{ display: 'flex', justifyContent: 'center' }}>
- <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.getPerson}>活动摇号</Button>
- <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.handleCancelModel}>返回</Button>
- </div>
- }
+ {
+ hitList.length > 0 ?
+ < div style={{ display: 'flex', justifyContent: 'center' }}>
+ <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.publishResult}>发布结果</Button>
+ <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.getPerson}>重新摇号</Button>
+ </div>
+ :
+ < div style={{ display: 'flex', justifyContent: 'center' }}>
+ <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.getPerson}>活动摇号</Button>
+ <Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.handleCancelModel}>返回</Button>
+ </div>
+ }
- </Modal>
-
+ </Modal>
+ </Spin>
</div>
);
}
--
Gitblit v1.8.0