You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/courses/poll/PollDetailTabForth.js

667 lines
18 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React,{ Component } from "react";
import {Form,Checkbox,DatePicker,Button,Input,Select,Tooltip} from "antd";
import { handleDateString,ConditionToolTip } from 'educoder';
import PollDetailTabForthRules from './PollDetailTabForthRules'
import HomeworkModal from "../coursesPublic/HomeworkModal";
import '../css/members.css'
import '../css/busyWork.css'
import './pollStyle.css'
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN';
import axios from 'axios'
import Modals from '../../modals/Modals'
import { mapProps } from "recompose";
const Search=Input.Search;
const Option=Select.Option;
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
function disabledDateTime() {
return {
// disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(1, 30).concat(range(31, 60)),
// disabledSeconds: () => [55, 56],
};
}
const dataformat="YYYY-MM-DD HH:mm";
class PollDetailTabForth extends Component{
constructor(props){
super(props);
this.state={
modalname:undefined,
modaltype:undefined,
visible:false,
Topval:undefined,
Topvalright:undefined,
Botvalleft:undefined,
Botval:undefined,
starttime:undefined,
endtime:undefined,
Cancelname:undefined,
Savesname:undefined,
Cancel:undefined,
Saves:undefined,
chooseId:undefined,
publishCourse:undefined,
flagPageEdit:undefined,
unitSetting:true,
flagPublic:false,
flagRealName:undefined,
course_group:undefined,
end_time:undefined,
publish_time:undefined,
unit_p_tip:undefined,
unit_e_tip:undefined,
rules:undefined,
p_flag:undefined,
e_flag:undefined,
polls:undefined,
un_change_unified:false,
un_change_end:false,
//公用提示弹框相关
modalsType:false,
modalsTopval:"",
loadtype:false,
modalSave:undefined,
firstSetting:true
}
}
//加载
componentDidMount=()=>{
this.getSettingInfo();
//window.addEventListener('click', this.handleClick);
if(this.props.pollDetail!=undefined){
this.editSetting();
}
if(this.props.isAdmin() === false){
this.cancelEdit()
}
try {
this.props.triggerRef(this);
}catch (e) {
}
}
componentDidUpdate = (prevProps) => {
if(prevProps.pollDetail!= this.props.pollDetail){
this.editSetting();
}
}
handleClick=(e)=>{
console.log(e);
}
// 已有设置数据的查询
getSettingInfo=()=>{
let pollId=this.props.match.params.pollId;
let url=`/polls/${pollId}/poll_setting.json`;
axios.get(url).then((result)=>{
if(result){
this.setState({
polls:result.data.poll,
unitSetting:result.data.poll.unified_setting,
flagPublic:result.data.poll.show_result,
flagRealName:result.data.poll.un_anonymous,
course_group:result.data.course_groups,
publish_time:result.data.poll.publish_time,
end_time:result.data.poll.end_time,
firstSetting:result.data.published_course_groups.length==0 && result.data.poll.publish_time == null && result.data.poll.end_time==null,
})
// 统一设置时如果已发布则不能修改统一设置和发布时间,已截止不能修改结束时间
if(result.data.poll.unified_setting == true && moment(result.data.poll.publish_time) <= moment()){
this.setState({
un_change_unified:true
})
}
if(result.data.poll.unified_setting == true && moment(result.data.poll.end_time) <= moment()){
this.setState({
un_change_end:true
})
}
let publish_count = 0;
let group=result.data.published_course_groups;
if(group.length==0){
let list= [{
course_group_id:[],
course_group_name:[],
publish_time:undefined,
end_time:undefined,
publish_flag:"",
end_flag:"",
class_flag:"",
course_search:"",
poll_status:0,
p_timeflag:false,
e_timeflag:false
}]
this.setState({
rules:list
})
}else{
let array=[];
for(var i=0;i<group.length;i++){
array.push({
course_group_id:group[i].course_group_id,
course_group_name:group[i].course_group_name,
publish_time:group[i].course_publish_time,
end_time:group[i].course_end_time,
publish_flag:"",
end_flag:"",
class_flag:"",
course_search:"",
poll_status:result.data.poll.polls_status,
p_timeflag:moment(group[i].course_publish_time) <= moment() ,
e_timeflag:moment(group[i].course_end_time) <= moment()
})
if(moment(group[i].course_publish_time) <= moment()){
publish_count++;
}
}
this.setState({
rules:array,
un_change_unified: publish_count > 0
})
}
}
}).catch((error)=>{
console.log(error);
})
}
//提交form表单
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if(!err){
// 第一次进行问卷设置或者勾选了统一设置
let{unitSetting}=this.state
if(unitSetting==true){
console.log("统一设置");
this.UnifiedSetting();
}else{
console.log("非统一设置");
this.NotUnifiedSetting();
}
}
})
}
UnifiedSetting=()=>{
let { unit_e_tip , unit_p_tip , publish_time , end_time ,course_group }=this.state
if( this.state.un_change_unified == false){
if ( !publish_time ){
this.setState({
unit_p_tip:"请选择发布时间"
})
return;
}else if( moment(publish_time,dataformat) < moment() ){
this.setState({
unit_p_tip:"发布时间不能小于当前时间"
})
return;
}else{
this.setState({
unit_p_tip:""
})
}
}
if(this.state.un_change_end == false){
if(!end_time){
this.setState({
unit_e_tip:"请输入截止时间"
})
return;
}else if(moment(end_time,dataformat) <= moment(publish_time,dataformat)){
this.setState({
unit_e_tip:"截止时间不能小于发布时间"
})
return;
}else if(moment(end_time,dataformat)<=moment()){
this.setState({
unit_e_tip:"截止时间不能小于当前时间"
})
return;
}else{
this.setState({
unit_e_tip:""
})
}
}
this.commitSetting((result)=>{
if(result.status==200){
this.props.showNotification(`${result.data.message}`);
this.getSettingInfo();
this.setState({
flagPageEdit:false
})
}
})
}
// 非统一设置提交
NotUnifiedSetting=()=>{
const result = this.refs.pollDetailTabForthRules.notUnifiedSettingCheck(this.state.rules);
this.setState({
rules: result.rules
})
if(result.validate==false){
return;
}
this.commitSetting((result)=>{
if(result.status==200){
this.props.showNotification(`${result.data.message}`);
this.getSettingInfo();
this.setState({
flagPageEdit:false
})
}
});
}
//暂不发布
homeworkhide=()=>{
this.setState({
modalname:undefined,
modaltype:undefined,
visible:false,
Topval:undefined,
Topvalright:undefined,
Botvalleft:undefined,
Botval:undefined,
starttime:undefined,
endtime:undefined,
Cancelname:undefined,
Savesname:undefined,
Cancel:undefined,
Saves:undefined,
StudentList_value:undefined,
addname:undefined,
addnametype:false,
addnametab:undefined,
publish_time:undefined
})
}
// 确定立即发布(只要保存设置就可以)
homeworkstartend=()=>{
let {chooseId}=this.state;
let pollId=this.props.match.params.pollId;
let coursesId=this.props.match.params.coursesId;
console.log(chooseId);
this.commitSetting((result)=>{
if(result.status==200){
let url=`/courses/${coursesId}/polls/publish.json`;
axios.post((url),{
check_ids:[pollId],
group_ids:chooseId
}).then((Response)=>{
if(Response.status == 200){
this.props.showNotification(`${Response.data.message}`);
this.homeworkhide();
this.setState({
flagPageEdit:false
})
this.getSettingInfo();
this.props.getPollInfo();
}
}).catch((error)=>{
console.log(error);
})
}
})
}
getcourse_groupslist=(id)=>{
this.setState({
chooseId:id
})
}
commitSetting=(callback)=>{
let pollId=this.props.match.params.pollId;
let url=`/polls/${pollId}/commit_setting.json`;
let params=[];
if(this.state.unitSetting){
params={
unified_setting:this.state.unitSetting,
publish_time:this.state.publish_time,
end_time:this.state.end_time,
show_result:this.state.flagPublic,
un_anonymous:this.state.flagRealName
}
}else{
params={
unified_setting:this.state.unitSetting,
show_result:this.state.flagPublic,
un_anonymous:this.state.flagRealName,
publish_time_groups:this.state.rules
}
}
axios.post((url),params).then((result)=>{
callback(result);
}).catch((error)=>{
console.log(error);
})
}
rulesCheckInfo=(rules)=>{
console.log(rules);
this.setState({
rules
})
}
cancelBox=()=>{
this.setState({
modalsType:false,
modalsTopval:"",
loadtype:false,
})
}
// 是否统一设置
changeUnit=(e)=>{
this.setState({
unitSetting:e.target.checked
})
}
//是否公开统计
ChangeFlagPublic=(e)=>{
this.setState({
flagPublic:e.target.checked
})
}
//是否实名问卷
ChangeFlagName=(e)=>{
this.setState({
flagRealName:e.target.checked
})
}
onChangeTimepublish=(date, dateString)=>{
if(date!=null && date!="" && date != undefined && moment(date,dataformat)>moment()){
this.setState({
unit_p_tip:""
})
}
let { end_time }=this.state;
if(!end_time){
end_time = moment(handleDateString(dateString)).add(1, 'months');
}
this.setState({
publish_time: handleDateString(dateString),
end_time:end_time
})
}
onChangeTimeEnd=(date, dateString)=>{
if( date && moment(date,dataformat)>moment(this.state.publish_time,dataformat) && moment(date,dataformat) > moment()){
this.setState({
unit_e_tip:""
})
}
this.setState({
end_time: handleDateString(dateString)
})
}
//编辑
editSetting = () => {
if(this.props.pollDetail.course_is_end==true){
this.setState({
modalsType:true,
modalsTopval:"课堂已结束不能再修改!",
loadtype:true,
modalSave:this.cancelBox
})
}else{
this.setState({
flagPageEdit:true
})
}
}
//取消编辑
cancelEdit=()=>{
this.setState({
flagPageEdit:false
})
this.getSettingInfo();
}
render(){
let{
modalname,
modaltype,
visible,
Topval,
Topvalright,
Botvalleft,
Botval,
starttime,
endtime,
Cancelname,
Savesname,
Cancel,
Saves,
publishCourse,
un_change_unified,
un_change_end,
flagPageEdit,unitSetting,flagPublic,flagRealName,end_time,publish_time,course_group,rules,
unit_p_tip,
unit_e_tip,
modalsType,
modalsTopval,
loadtype,
modalSave,
firstSetting
}=this.state
let { pollDetail } = this.props;
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
// sm: { span: 8 },
sm: { span: 24 },
},
wrapperCol: {
xs: { span: 24 },
// sm: { span: 16 },
sm: { span: 24 },
},
};
let isAdmin = this.props.isAdmin();
let isStudent = this.props.isStudent();
return(
<div>
<HomeworkModal
modaltype={modaltype}
modalname={modalname}
visible={visible}
Topval={Topval}
Topvalright={Topvalright}
Botvalleft={Botvalleft}
Botval={Botval}
starttime={starttime}
endtime={endtime}
Cancelname={Cancelname}
Savesname={Savesname}
Cancel={Cancel}
Saves={Saves}
course_groups={publishCourse}
getcourse_groupslist={(id)=>this.getcourse_groupslist(id)}
/>
<Modals
modalsType={modalsType}
modalsTopval={modalsTopval}
loadtype={loadtype}
modalSave={modalSave}
></Modals>
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<div className="edu-back-white">
<div className="bor-bottom-greyE padding30">
<p className="mb30 clearfix">
<span className="font-16 fl">发布设置
{/* <span className="color-grey-c font-14">(课堂管理员、教师、助教拥有发布设置权限)</span> */}
</span>
{
!flagPageEdit && isAdmin ?
<a className="fr white-btn edu-blueline-btn lineh-24" onClick={this.editSetting}>
编辑设置
{/*<Tooltip title="编辑"><i className="iconfont icon-bianjidaibeijing font-20 color-green"></i></Tooltip>*/}
</a>
:""
}
</p>
<div className="pl25">
{
course_group && course_group.length > 0 &&
<p className="clearfix mb20">
<Form.Item className="fl pollForm">
{getFieldDecorator('unitSet')
(
<Checkbox disabled={un_change_unified == true ? true : !flagPageEdit}
className="mr15 font-16 color-grey-6" checked={ unitSetting }
onChange={this.changeUnit}>统一设置</Checkbox>
)}
</Form.Item>
<span className="color-grey-c font-14">选中则所有分班使用相同的发布设置仅课堂管理员可修改否则各个分班允许单独设置</span>
</p>
}
{
unitSetting ?
<div>
<div className="clearfix mb5">
<span className="font-16 mr15 fl mt6">发布时间</span>
<div className="fl">
<Tooltip placement="bottom" title={un_change_unified == true?this.props.isAdmin()? "发布时间已过,不能再修改":"":""}>
<span>
<DatePicker
showToday={false}
dropdownClassName="hideDisable"
showTime={{ format: 'HH:mm' }}
placeholder="请选择发布时间"
locale={locale}
className={unit_p_tip && unit_p_tip != "" ?"noticeTip winput-240-40":"winput-240-40" }
style={{"height":"42px"}}
format="YYYY-MM-DD HH:mm"
disabledTime={disabledDateTime}
onChange={this.onChangeTimepublish}
value={publish_time && moment(publish_time,dataformat)}
disabled={un_change_unified == true ? true : !flagPageEdit }
></DatePicker>
</span>
</Tooltip>
<p className="color-red lineh-25 clearfix" style={{height:"25px"}}>
{
unit_p_tip && unit_p_tip != "" ? <span className="fl">{ unit_p_tip }</span>:""
}
</p>
</div>
<span className="color-grey-c ml20 fl mt10 font-14">学生收到问卷的时间</span>
</div>
<div className="clearfix">
<span className="mr15 fl mt10 font-16">截止时间</span>
<div className="fl">
<Tooltip placement="bottom" title={un_change_end ? this.props.isAdmin()?"截止时间已过,不能再修改":"":""}>
<span>
<DatePicker
showToday={false}
dropdownClassName="hideDisable"
showTime={{ format: 'HH:mm' }}
locale={locale}
placeholder="请选择截止时间"
style={{"height":"42px"}}
className={unit_e_tip && unit_e_tip != "" ? "noticeTip winput-240-40 mr20":"winput-240-40 mr20" }
width={"240px"}
format="YYYY-MM-DD HH:mm"
disabledTime={disabledDateTime}
onChange={this.onChangeTimeEnd}
value={ end_time && moment(end_time,dataformat) }
disabled={un_change_end == true ? true : !flagPageEdit }
>
</DatePicker>
</span>
</Tooltip>
<p className="color-red lineh-25 clearfix" style={{height:"25px"}}>
{
unit_e_tip && unit_e_tip != "" ? <span className="fl">{ unit_e_tip }</span>:""
}
</p>
</div>
<span className="color-grey-c ml20 fl mt10 font-14">学生可以答题的时间截点</span>
</div>
</div>
:
<PollDetailTabForthRules
{...this.props}
{...this.state}
ref="pollDetailTabForthRules"
rules={rules}
course_group={course_group}
flagPageEdit={flagPageEdit}
rulesCheckInfo={(info)=>this.rulesCheckInfo(info)}
></PollDetailTabForthRules>
}
</div>
</div>
<div className="padding30">
<p className="mb30 clearfix font-16">公开设置</p>
<div className="pl25">
<p className="mb20">
<Form.Item className="fl pollForm">
{getFieldDecorator('public')
(
<Checkbox disabled={!flagPageEdit} className="mr15 font-16 color-grey-6" checked={flagPublic} onChange={this.ChangeFlagPublic}>公开统计</Checkbox>
)}
</Form.Item>
<span className="color-grey-c font-14">选中则在问卷截止时间之后已提交问卷题的学生可以查看统计结果否则不能查看</span>
</p>
<p className="clearfix">
<Form.Item className="fl pollForm">
{getFieldDecorator('real')
(
<Checkbox disabled={!flagPageEdit} className="mr15 font-16 color-grey-6" checked={flagRealName} onChange={this.ChangeFlagName}>实名问卷</Checkbox>
)}
</Form.Item>
<span className="color-grey-c font-14">选中则学生答题后老师可以查看学生的问卷</span>
</p>
</div>
</div>
</div>
{
flagPageEdit&& this.props.isAdmin() === true ?
<div className="clearfix mt30 mb30">
<Button type="primary" htmlType="submit" className="defalutSubmitbtn fl mr20">提交</Button>
<a className="defalutCancelbtn fl" onClick={this.cancelEdit}>取消</ a>
</div>:""
}
</Form>
</div>
)
}
}
const WrappedPollSet = Form.create({ name: 'pollSetting' })(PollDetailTabForth);
export default WrappedPollSet;