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/Poll.js

627 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 { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip ,Spin} from "antd";
import {WordsBtn, on, off, trigger } from 'educoder';
import HomeworkModal from "../coursesPublic/HomeworkModal";
import AddcoursesNav from "../coursesPublic/AddcoursesNav";
import ImmediatelyPublish from './pollPublicBtn/ImmediatelyPublish';
import ImmediatelyEnd from './pollPublicBtn/ImmediatelyEnd';
import PollListItem from './PollListItem';
import NoneData from '../coursesPublic/NoneData';
import UseBank from '../busyWork/UseBank';
import _ from 'lodash';
import '../css/members.css';
import '../css/busyWork.css';
import Modals from '../../modals/Modals';
import axios from 'axios';
import moment from 'moment';
const Search = Input.Search;
class Poll 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,
StudentList_value:undefined,
addname:undefined,
addnametype:false,
addnametab:undefined,
addcanner:undefined,
addsave:undefined,
course_groups:[],
chooseId:undefined,
// 列表相关
checkBoxValues:[],
checkAllValue:false,
pollsList:undefined,
course_types:undefined,
page:1,
pageSize:15,
type:0,
polls_counts:undefined,
//公用提示弹框相关
modalsType:false,
modalsTopval:"",
modalsBottomval:"",
loadtype:false,
boxType:"delete",
isSpin:false
}
}
inputStudent=(e)=>{
this.setState({
StudentList_value:e.target.value
})
}
// 题库选用
selectBlank=(type)=>{
if(type===2){
this.setState({
addname:"添加目录",
addnametype:true,
addnametab:type,
addcanner:this.homeworkhide,
addsave:undefined
})
}else if(type===4){
this.setState({
addname:"移动到目录",
addnametype:true,
addnametab:type,
addcanner:this.homeworkhide,
addsave:undefined
})
}
}
// 切换菜单选项
changeType=(e)=>{
this.setState({
type:e.key,
checkBoxValues:[],
checkAllValue:false
})
let{StudentList_value,page}=this.state;
this.InitList(e.key,StudentList_value,page);
}
// 获取列表数据
InitList=(type,search,page)=>{
this.setState({
isSpin:true
})
let {pageSize}=this.state
let coursesId=this.props.match.params.coursesId;
let url='/courses/'+coursesId+'/polls.json?limit='+pageSize+'&page='+page
if(type!="0"){
url+="&type="+type
}
if(search!=""&&search!=undefined){
url+="&search="+search
}
axios.get(url).then((result)=>{
if(result){
this.setState({
pollsList:result.data.polls,
course_types:result.data.course_types,
polls_counts:result.data.polls_counts,
isSpin:false,
checkBoxValues:[]
})
}
}).catch((error)=>{
console.log(error);
})
}
// 加载列表
componentDidMount(){
this.setState({
isSpin:true
})
let{type,StudentList_value,page}=this.state
this.InitList(type,StudentList_value,page);
on('updateNavSuccess', this.updateNavSuccess)
}
updateNavSuccess=()=>{
this.setState({
isSpin:true
})
let{type,StudentList_value,page}=this.state
this.InitList(type,StudentList_value,page);
}
//切换分页
changePage=(pageNumber)=>{
this.setState({
page:pageNumber
})
let{type,StudentList_value}=this.state
this.InitList(type,StudentList_value,pageNumber);
}
// 搜索
searchInfo=()=>{
this.setState({
page:1
})
let{type,StudentList_value}=this.state;
this.InitList(type,StudentList_value,1)
}
// checkbox
onItemClick = (item) => {
const checkBoxValues = this.state.checkBoxValues.slice(0);
const index = checkBoxValues.indexOf(item.id);
if (index != -1) {
_.remove(checkBoxValues, (listItem)=> listItem === item.id)
} else {
checkBoxValues.push(item.id);
}
this.onCheckBoxChange(checkBoxValues)
}
// 全选or反选
onCheckAll = (e) => {
this.setState({
checkAllValue: e.target.checked
})
const values = this.state.pollsList.map(item => {
return item.id
})
if (e.target.checked) {
const concated = this.state.checkBoxValues.concat(values);
const uniq=_.uniq(concated)
this.setState({
checkBoxValues: uniq
})
} else {
this.setState({
checkBoxValues: _.difference(this.state.checkBoxValues, values)
})
}
}
onCheckBoxChange = (checkedValues) => {
this.setState({
checkBoxValues: checkedValues,
checkAllValue: checkedValues.length == this.state.pollsList.length
})
}
//删除或者设为公开
ActionPoll=(value)=>{
let CourseId=this.props.match.params.coursesId;
//判断是否有选中数据
if(this.state.checkBoxValues.length==0){
this.props.showNotification("请先在列表中选择数据");
// this.setState({
// modalsType:true,
// modalsTopval:"请先在列表中选择数据",
// modalsBottomval:'',
// loadtype:true
// })
}else{
if(value != "bank"){
this.setState({
modalsType:true,
modalsTopval:value=="delete"?"已提交作品将全部被删除,不可恢复":"公开后非课堂成员也可以访问查看",
modalsBottomval:value=="delete"?"您确定要删除吗?":"是否确认公开?",
loadtype:false,
boxType:value
})
}else{
//加入题库
let url=`/courses/${CourseId}/polls/join_poll_banks.json`;
axios.post((url), {
check_ids: this.state.checkBoxValues
})
.then((result)=>{
if(result){
this.props.showNotification(`${result.data.message}`);
this.setState({
modalsType:false,
modalsTopval:"",
modalsBottomval:"",
loadtype:false,
checkBoxValues:[],
checkAllValue:false
})
let{type,StudentList_value}=this.state
this.InitList(type,StudentList_value,1);
}
}).catch((error)=>{
console.log(error);
})
}
}
}
//取消删除或者设为公开
modalCancel=()=>{
this.setState({
modalsType:false,
modalsTopval:"",
modalsBottomval:"",
loadtype:false
})
}
//确定删除或者设为公开
ModalAction=()=>{
let CourseId=this.props.match.params.coursesId;
if(this.state.checkBoxValues.length==0){
this.setState({
modalsType:false,
modalsTopval:"",
loadtype:false,
checkBoxValues:[]
})
}else{
if(this.state.boxType=="delete"){
//删除
let url=`/courses/${CourseId}/polls/destroys.json`;
axios.post((url), {
check_ids: this.state.checkBoxValues
})
.then((result)=>{
if(result){
this.props.showNotification(`${result.data.message}`);
this.setState({
modalsType:false,
modalsTopval:"",
modalsBottomval:"",
loadtype:false,
checkBoxValues:[]
})
let{type,StudentList_value}=this.state
this.InitList(type,StudentList_value,1);
this.props.updataleftNavfun();
}
}).catch((error)=>{
console.log(error);
})
}else if(this.state.boxType=="public"){
//设为公开
let url=`/courses/${CourseId}/polls/set_public.json`;
axios.post((url), {
check_ids: this.state.checkBoxValues
})
.then((result)=>{
if(result){
this.props.showNotification(`${result.data.message}`);
this.setState({
modalsType:false,
modalsTopval:"",
loadtype:false,
checkBoxValues:[]
})
let{type,StudentList_value}=this.state
this.InitList(type,StudentList_value,1);
}
}).catch((error)=>{
console.log(error);
})
}
}
}
successFun=()=>{
let{type,StudentList_value,page}=this.state
this.InitList(type,StudentList_value,page)
}
// 题库选用成功后,立即发布,刷新页面
useBankSuccess=(checkValue,value)=>{
this.setState({
isSpin:true
})
let{type,StudentList_value,page}=this.state
this.InitList(type,StudentList_value,page);
this.setState({
checkBoxValues:[]
})
let coursesId=this.props.match.params.coursesId;
let url=`/courses/${coursesId}/polls/publish_modal.json`;
axios.get(url,{
params:{
check_ids:value
}
}).then((response) => {
if(response){
let list=[];
if(response.data.course_info){
for(var i=0;i<response.data.course_info.length;i++){
list.push({
id:response.data.course_info[i].course_group_id,
name:response.data.course_info[i].course_group_name,
})
}
}
this.setState({
course_groups:list,
checkBoxValues:value
})
this.setState({
modalname:"立即发布",
modaltype:response.data.un_publish > 0 ? 1 : 2,
visible:true,
Topval:"本操作只对“未发布”的对象生效",
Botvalleft:"暂不发布",
Botval:"则通过后续手动设置,定时发布",
starttime:"发布时间:"+moment(moment(new Date())).format("YYYY-MM-DD HH:mm"),
starttimes:this.props.getNowFormatDates(1),
endtime:"截止时间:"+this.props.getNowFormatDates(2),
Cancelname:"暂不发布",
Savesname:"立即发布",
Cancel:this.homeworkhide,
Saves:this.homeworkstartend,
})
}
}).catch((error) => {
console.log(error)
});
}
getcourse_groupslist=(id)=>{
this.setState({
chooseId:id
})
}
// 确定立即发布
homeworkstartend=(value,endtime)=>{
let {checkBoxValues}=this.state;
let coursesId=this.props.match.params.coursesId;
let url=`/courses/${coursesId}/polls/publish.json`
axios.post(url,{
check_ids:checkBoxValues,
group_ids:value,
end_time:endtime
}).then((result)=>{
if(result){
let{type,StudentList_value,page}=this.state
this.InitList(type,StudentList_value,page);
this.props.showNotification(result.data.message);
this.homeworkhide();
}
}).catch((error)=>{
console.log(error);
})
}
//暂不发布
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,
checkBoxValues:[]
})
}
render(){
let {
modalname,
modaltype,
visible,
Topval,
Topvalright,
Botvalleft,
Botval,
starttime,
endtime,
Cancelname,
Savesname,
Cancel,
Saves,
StudentList_value,
addname,
addnametype,
addnametab,
addcanner,
addsave,
course_groups,
checkAllValue,
checkBoxValues,
course_types,
pollsList,
page,
pageSize,
polls_counts,
modalsType,
modalsTopval,
modalsBottomval,
loadtype
}=this.state;
// console.log(this.props);
let {child}=this.props;
let {coursesId,Id}=this.props.match.params
const isAdmin = this.props.isAdmin()
const isStudent=this.props.isStudent();
// console.log(child)
return(
<React.Fragment >
{visible===true?<HomeworkModal
modaltype={modaltype}
modalname={modalname}
visible={visible}
Topval={Topval}
Topvalright={Topvalright}
Botvalleft={Botvalleft}
Botval={Botval}
starttime={starttime}
starttimes={this.state.starttimes}
endtime={endtime}
Cancelname={Cancelname}
Savesname={Savesname}
Cancel={Cancel}
Saves={Saves}
course_groups={course_groups}
getcourse_groupslist={(id)=>this.getcourse_groupslist(id)}
/>:""}
{/*添加目录/选择目录*/}
<AddcoursesNav
addname={addname}
addnametype={addnametype}
addnametab={addnametab}
addcanner={addcanner}
addsave={addsave}
/>
{/* 公用的提示弹框 */}
<Modals
modalsType={modalsType}
modalsTopval={modalsTopval}
modalsBottomval={modalsBottomval}
loadtype={loadtype}
modalCancel={this.modalCancel}
modalSave={this.ModalAction}
></Modals>
<div className="edu-back-white">
<p className="clearfix padding30 bor-bottom-greyE">
<span className="font-18 fl color-dark-21">{polls_counts&&polls_counts.left_banner_name}</span>
{
isAdmin &&
<li className="fr">
<p className="fl"><UseBank {...this.props} {...this.state} object_type={"poll"} useBankSuccess={this.useBankSuccess}></UseBank></p>
<WordsBtn style="blue" className="font-16" to={`/courses/${coursesId}/polls/${Id}/${"new"}`}>新建</WordsBtn>
</li>
}
</p>
<div className="clearfix pl30 pr30">
<p className="fl font-16" style={{"marginTop":"27px"}}>
<span className="mr20">{polls_counts && polls_counts.polls_total_counts}个问卷</span>
<span className="mr20">已发布{polls_counts && polls_counts.polls_published_counts}</span>
<span>未发布{polls_counts && polls_counts.polls_unpublish_counts}</span>
</p>
<div className="fr mt16 mb16 searchView">
<Search
value={StudentList_value}
placeholder="请输入名称进行搜索"
onInput={this.inputStudent}
onSearch={this.searchInfo}
></Search>
</div>
</div>
<div className="task_menu_ul pl30 pr30">
<Menu mode="horizontal" defaultSelectedKeys="0" onClick={this.changeType}>
<Menu.Item key="0">全部</Menu.Item>
{ course_types && course_types.user_permission == 1 && <Menu.Item key="1">未发布</Menu.Item> }
<Menu.Item key="2">提交中</Menu.Item>
<Menu.Item key="3">已截止</Menu.Item>
</Menu>
</div>
</div>
<Spin size="large" spinning={this.state.isSpin}>
{
pollsList && pollsList.length > 0 && isAdmin &&
<div className="mt20 edu-back-white padding20-30">
<div className="clearfix">
<Checkbox className="fl" onChange={this.onCheckAll} checked={checkAllValue}>已选 {checkBoxValues.length} </Checkbox>
<div className="studentList_operation_ul">
<li className="li_line"><a className="color-grey-9" onClick={()=>this.ActionPoll("delete")}>删除</a></li>
<li className="li_line">
<ImmediatelyPublish
{...this.props}
{...this.state}
style="grey"
checkBoxValues={this.state.checkBoxValues}
action={this.successFun}
></ImmediatelyPublish>
</li>
<li className="li_line">
<ImmediatelyEnd
{...this.props}
{...this.state}
style="grey"
checkBoxValues={this.state.checkBoxValues}
action={this.successFun}
></ImmediatelyEnd>
</li>
{
course_types && course_types.course_is_public == 1 && <li className="li_line"><a className="color-grey-9" onClick={()=>this.ActionPoll("public")}>设为公开</a></li>
}
<li className="li_line"><a className="color-grey-9" onClick={()=>this.ActionPoll("bank")}>加入题库</a></li>
</div>
</div>
</div>
}
{
pollsList && pollsList.length > 0 &&
<Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
<div className="workList mt20">
{
pollsList && pollsList.map((item,key)=>{
return(
<PollListItem
{...this.props}
{...this.state}
courseType={course_types}
item={item}
index={key}
onItemClick={this.onItemClick}
checkBox={<Checkbox value={item.id} key={item.id} onClick={() => this.onItemClick(item)}></Checkbox>}
></PollListItem>
)
})
}
</div>
</Checkbox.Group>
}
</Spin>
{
pollsList && pollsList.length==0 && <NoneData></NoneData>
}
{
course_types && polls_counts.polls_all_counts > pageSize ?
<div className="mt30 edu-txt-center pb30">
<Pagination showQuickJumper current={page} total={polls_counts && polls_counts.polls_all_counts} pageSize={pageSize} onChange={this.changePage}></Pagination>
</div>
:
""
}
</React.Fragment>
)
}
}
export default Poll;