|
|
import React,{ Component } from "react";
|
|
|
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin } from "antd";
|
|
|
import CourseLayoutcomponent from '../common/CourseLayoutComponent';
|
|
|
import ExerciseListItem from './ExerciseListItem'
|
|
|
import axios from 'axios';
|
|
|
import Modals from '../../modals/Modals';
|
|
|
import '../css/members.css'
|
|
|
import { WordsBtn } from 'educoder'
|
|
|
import '../css/busyWork.css'
|
|
|
import _ from 'lodash';
|
|
|
import moment from 'moment'
|
|
|
import UseBank from "../busyWork/UseBank";
|
|
|
import ImmediatelyPublish from "../poll/pollPublicBtn/ImmediatelyPublish";
|
|
|
import ImmediatelyEnd from "../poll/pollPublicBtn/ImmediatelyEnd";
|
|
|
import NoneData from "../coursesPublic/NoneData";
|
|
|
import HomeworkModal from "../coursesPublic/HomeworkModal";
|
|
|
const Search = Input.Search;
|
|
|
|
|
|
|
|
|
class Exercise extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
modalname:undefined,
|
|
|
modaltype:undefined,
|
|
|
modalsBottomval: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,
|
|
|
type:undefined,
|
|
|
search:undefined,
|
|
|
page:1,
|
|
|
limit:15,
|
|
|
checkBoxValues:[],
|
|
|
Exercisetype:"exercise",
|
|
|
isSpin:false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载列表
|
|
|
componentDidMount(){
|
|
|
this.reloadList();
|
|
|
}
|
|
|
|
|
|
reloadList=()=>{
|
|
|
this.setState({
|
|
|
isSpin:true
|
|
|
})
|
|
|
let{type,search,page,limit}=this.state
|
|
|
this.InitList(type,search,page,limit);
|
|
|
}
|
|
|
|
|
|
// 获取列表数据
|
|
|
InitList=(type,search,page,limit)=>{
|
|
|
this.setState({
|
|
|
isSpin:true
|
|
|
})
|
|
|
let coursesId=this.props.match.params.coursesId;
|
|
|
let url='/courses/'+coursesId+'/exercises.json';
|
|
|
|
|
|
axios.get(url,
|
|
|
{
|
|
|
params: {
|
|
|
type:type,
|
|
|
search: search,
|
|
|
page: page,
|
|
|
limit: limit
|
|
|
}
|
|
|
}
|
|
|
).then((result)=>{
|
|
|
this.setState({
|
|
|
exercises_counts:result.data.exercises_counts,
|
|
|
course_types:result.data.course_types,
|
|
|
exercises:result.data.exercises,
|
|
|
checkAllValue:false,
|
|
|
checkBoxValues:[],
|
|
|
isSpin:false
|
|
|
})
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
inputStudent=(e)=>{
|
|
|
this.setState({
|
|
|
StudentList_value:e.target.value
|
|
|
})
|
|
|
}
|
|
|
// 搜索
|
|
|
searchInfo=()=>{
|
|
|
this.setState({
|
|
|
type:undefined,
|
|
|
page:1,
|
|
|
})
|
|
|
let{type,StudentList_value,limit}=this.state;
|
|
|
this.InitList(type,StudentList_value,1,limit)
|
|
|
}
|
|
|
|
|
|
|
|
|
changeType=(e)=>{
|
|
|
this.setState({
|
|
|
type:e.key,
|
|
|
checkAllValue:false,
|
|
|
checkBoxValues:[]
|
|
|
})
|
|
|
let{StudentList_value,page,limit}=this.state;
|
|
|
this.InitList(e.key==="0"?undefined:e.key,StudentList_value,page,limit)
|
|
|
}
|
|
|
|
|
|
//切换分页
|
|
|
changePage=(pageNumber)=>{
|
|
|
this.setState({
|
|
|
page:pageNumber
|
|
|
})
|
|
|
let{type,StudentList_value,limit}=this.state
|
|
|
this.InitList(type,StudentList_value,pageNumber,limit);
|
|
|
}
|
|
|
|
|
|
onselectfifteen = () => {
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval:"选择条数不能大于15条",
|
|
|
ModalSave:this.cancelmodel,
|
|
|
modalsBottomval:"",
|
|
|
Loadtype:true
|
|
|
})
|
|
|
}
|
|
|
|
|
|
cancelmodel=()=>{
|
|
|
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
Loadtype:false,
|
|
|
Modalstopval:"",
|
|
|
modalsBottomval:"",
|
|
|
ModalCancel:"",
|
|
|
ModalSave:"",
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
onCheckBoxChange = (checkedValues) => {
|
|
|
let {exercises}=this.state;
|
|
|
if( checkedValues.length>15){
|
|
|
this.onselectfifteen()
|
|
|
return
|
|
|
}
|
|
|
|
|
|
this.setState({
|
|
|
checkBoxValues: checkedValues,
|
|
|
checkAllValue: checkedValues.length == exercises.length
|
|
|
})
|
|
|
}
|
|
|
// 全选or反选
|
|
|
onCheckAll = (e) => {
|
|
|
this.setState({
|
|
|
checkAllValue: e.target.checked
|
|
|
})
|
|
|
const values = this.state.exercises.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)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
// 题库选用成功后刷新页面
|
|
|
useBankSuccess=(checkValue,value)=>{
|
|
|
debugger
|
|
|
let{type,StudentList_value,page,limit}=this.state;
|
|
|
let coursesId=this.props.match.params.coursesId;
|
|
|
let url=`/courses/${coursesId}/exercises/publish_modal.json`;
|
|
|
axios.get(url,{
|
|
|
params:{
|
|
|
check_ids:value
|
|
|
}
|
|
|
}).then((response) => {
|
|
|
if(response.status===200){
|
|
|
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({
|
|
|
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,
|
|
|
course_groups:list,
|
|
|
checkBoxValues:value
|
|
|
})
|
|
|
|
|
|
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
//删除或者设为公开
|
|
|
ActionPoll=(value)=>{
|
|
|
|
|
|
let CourseId=this.props.match.params.coursesId;
|
|
|
let{type,StudentList_value,page,limit}=this.state;
|
|
|
|
|
|
//判断是否有选中数据
|
|
|
if(this.state.checkBoxValues.length==0){
|
|
|
// this.setState({
|
|
|
// Modalstype:true,
|
|
|
// Modalstopval:"请先在列表中选择数据",
|
|
|
// Loadtype:true,
|
|
|
// ModalSave:this.cancelmodel,
|
|
|
// })
|
|
|
this.props.showNotification("请先在列表中选择数据");
|
|
|
}else{
|
|
|
if(value != "bank"){
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval:value=="delete"?"已提交作品将全部被删除，不可恢复":"公开后非课堂成员也可以访问查看",
|
|
|
modalsBottomval:value=="delete"?"是否确认删除?":"是否确认公开？",
|
|
|
Loadtype:false,
|
|
|
boxType:value,
|
|
|
ModalSave:this.ModalAction
|
|
|
})
|
|
|
}else{
|
|
|
|
|
|
//加入题库
|
|
|
let url=`/courses/${CourseId}/exercises/join_exercise_banks.json`;
|
|
|
axios.post((url), {
|
|
|
check_ids: this.state.checkBoxValues
|
|
|
})
|
|
|
.then((result)=>{
|
|
|
if(result.data.status==0){
|
|
|
this.props.showNotification(`${result.data.message}`);
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
Modalstopval:"",
|
|
|
modalsBottomval:"",
|
|
|
Loadtype:false,
|
|
|
checkBoxValues:[]
|
|
|
})
|
|
|
this.InitList(type,StudentList_value,page,limit)
|
|
|
this.props.updataleftNavfun()
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
//确定删除或者设为公开
|
|
|
ModalAction=()=>{
|
|
|
let CourseId=this.props.match.params.coursesId;
|
|
|
let{type,StudentList_value,page,limit}=this.state;
|
|
|
this.setState({
|
|
|
Modalstypeloding:true
|
|
|
})
|
|
|
if(this.state.checkBoxValues.length==0){
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
Modalstopval:"",
|
|
|
modalsBottomval:"",
|
|
|
Loadtype:false,
|
|
|
checkBoxValues:[],
|
|
|
Modalstypeloding:false
|
|
|
})
|
|
|
}else{
|
|
|
if(this.state.boxType=="delete"){
|
|
|
//删除
|
|
|
let url=`/courses/${CourseId}/exercises/destroys.json`;
|
|
|
axios.post((url), {
|
|
|
check_ids: this.state.checkBoxValues
|
|
|
})
|
|
|
.then((result)=>{
|
|
|
if(result.data.status==0){
|
|
|
this.props.showNotification(`${result.data.message}`);
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
Modalstopval:"",
|
|
|
modalsBottomval:"",
|
|
|
Loadtype:false,
|
|
|
checkBoxValues:[],
|
|
|
Modalstypeloding:false
|
|
|
})
|
|
|
this.InitList(type,StudentList_value,page,limit)
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}else if(this.state.boxType=="public"){
|
|
|
//设为公开
|
|
|
|
|
|
let url=`/courses/${CourseId}/exercises/set_public.json`;
|
|
|
axios.post((url), {
|
|
|
check_ids: this.state.checkBoxValues
|
|
|
})
|
|
|
.then((result)=>{
|
|
|
if(result.data.status==0){
|
|
|
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);
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//暂不发布
|
|
|
homeworkhide=()=>{
|
|
|
let {type,StudentList_value,page,limit}=this.state;
|
|
|
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
|
|
|
})
|
|
|
|
|
|
this.InitList(type,StudentList_value,page,limit)
|
|
|
}
|
|
|
|
|
|
getcourse_groupslist=(id)=>{
|
|
|
this.setState({
|
|
|
chooseId:id
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 确定立即发布
|
|
|
homeworkstartend=(idss,endtime)=> {
|
|
|
let {chooseId,checkBoxValues,type,StudentList_value,page,limit} = this.state;
|
|
|
|
|
|
let coursesId = this.props.match.params.coursesId;
|
|
|
|
|
|
let url = `/courses/${coursesId}/exercises/publish.json`
|
|
|
axios.post(url, {
|
|
|
check_ids: checkBoxValues,
|
|
|
group_ids: chooseId,
|
|
|
end_time:endtime
|
|
|
}).then((result) => {
|
|
|
if (result) {
|
|
|
this.props.showNotification(result.data.message);
|
|
|
this.homeworkhide();
|
|
|
|
|
|
// 调用父级公共头部的接口刷新
|
|
|
// this.props.action()
|
|
|
this.InitList(type,StudentList_value,page,limit)
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error);
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
let {
|
|
|
checkAllValue,
|
|
|
StudentList_value,
|
|
|
exercises_counts,
|
|
|
course_types,
|
|
|
exercises,
|
|
|
checkBoxValues,
|
|
|
|
|
|
pageSize,
|
|
|
page,
|
|
|
}=this.state;
|
|
|
|
|
|
let {child}=this.props;
|
|
|
// debugger
|
|
|
// exercises_counts && exercises_counts.exercises_all_counts ===0
|
|
|
|
|
|
return(
|
|
|
<React.Fragment>
|
|
|
|
|
|
{/* 公用的提示弹框 */}
|
|
|
<Modals
|
|
|
modalsType={this.state.Modalstype}
|
|
|
modalsTopval={this.state.Modalstopval}
|
|
|
modalsBottomval={this.state.modalsBottomval}
|
|
|
loadtype={this.state.Loadtype}
|
|
|
modalCancel={this.cancelmodel}
|
|
|
modalSave={this.state.ModalSave}
|
|
|
antIcon={this.state.Modalstypeloding}
|
|
|
></Modals>
|
|
|
|
|
|
<HomeworkModal
|
|
|
modaltype={this.state.modaltype}
|
|
|
modalname={this.state.modalname}
|
|
|
visible={this.state.visible}
|
|
|
Topval={this.state.Topval}
|
|
|
Topvalright={this.state.Topvalright}
|
|
|
Botvalleft={this.state.Botvalleft}
|
|
|
Botval={this.state.Botval}
|
|
|
starttime={this.state.starttime}
|
|
|
starttimes={this.state.starttimes}
|
|
|
endtime={this.state.endtime}
|
|
|
Cancelname={this.state.Cancelname}
|
|
|
Savesname={this.state.Savesname}
|
|
|
Cancel={this.state.Cancel}
|
|
|
Saves={this.state.Saves}
|
|
|
course_groups={this.state.course_groups}
|
|
|
getcourse_groupslist={(id)=>this.getcourse_groupslist(id)}
|
|
|
/>
|
|
|
|
|
|
<div className="edu-back-white">
|
|
|
<p className="clearfix padding30 bor-bottom-greyE">
|
|
|
<span className="font-18 fl color-dark-21">{exercises_counts && exercises_counts.left_banner_name}</span>
|
|
|
{
|
|
|
this.props.isAdmin()===true?
|
|
|
<li className="fr">
|
|
|
<p className="fl"><UseBank {...this.props} {...this.state} object_type={"exercise"} useBankSuccess={this.useBankSuccess}></UseBank></p>
|
|
|
{course_types&&course_types.course_status===0?<WordsBtn style="blue" className="font-16" to={`/courses/${this.props.match.params.coursesId}/exercises/new`}>新建</WordsBtn>:""}
|
|
|
</li>:""
|
|
|
}
|
|
|
|
|
|
{/*{*/}
|
|
|
{/*this.props.isStudent()===true?*/}
|
|
|
{/*<li className="fr">*/}
|
|
|
{/*<p className="fl"><UseBank {...this.props} {...this.state} object_type={"exercise"} useBankSuccess={this.useBankSuccess}></UseBank></p>*/}
|
|
|
{/*</li>:""*/}
|
|
|
{/*}*/}
|
|
|
</p>
|
|
|
<div className="clearfix pl30 pr30">
|
|
|
<p className="fl font-16" style={{"marginTop":"27px"}}>
|
|
|
<span className="mr20">共{exercises_counts && exercises_counts.exercises_total_counts}个试卷</span>
|
|
|
<span className="mr20">已发布：{exercises_counts && exercises_counts.exercises_published_counts}个</span>
|
|
|
<span>未发布：{exercises_counts && exercises_counts.exercises_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>
|
|
|
{this.props.isAdmin()?<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}>
|
|
|
{this.props.isAdmin()?<div className="mt20 mb20 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.reloadList}
|
|
|
></ImmediatelyPublish>
|
|
|
</li>
|
|
|
<li className="li_line">
|
|
|
<ImmediatelyEnd
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
style="grey"
|
|
|
checkBoxValues={this.state.checkBoxValues}
|
|
|
action={this.reloadList}
|
|
|
></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>:<div className="mt20"></div>}
|
|
|
|
|
|
<style>{`
|
|
|
.workList_Item:hover {
|
|
|
box-shadow: 0px 2px 6px rgba(51,51,51,0.09);
|
|
|
opacity: 1;
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
`}</style>
|
|
|
|
|
|
{
|
|
|
exercises && exercises.length > 0 &&
|
|
|
|
|
|
<Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
|
|
|
<div className="workList">
|
|
|
{
|
|
|
exercises && exercises.map((item,key)=>{
|
|
|
return(
|
|
|
<ExerciseListItem
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
item={item}
|
|
|
key={key}
|
|
|
checkBox={<Checkbox value={item.id}
|
|
|
// onClick={() => this.onItemClick(item)}
|
|
|
></Checkbox>}
|
|
|
></ExerciseListItem>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</div>
|
|
|
</Checkbox.Group>
|
|
|
|
|
|
}
|
|
|
</Spin>
|
|
|
{
|
|
|
exercises && exercises.length ===0 && <NoneData></NoneData>
|
|
|
}
|
|
|
{
|
|
|
exercises_counts && exercises_counts.exercises_all_counts > 15 ?
|
|
|
<div className="mb20 edu-txt-center pt30">
|
|
|
<Pagination showQuickJumper current={page} total={exercises_counts && exercises_counts.exercises_all_counts} pageSize={15} onChange={this.changePage}></Pagination>
|
|
|
</div>
|
|
|
:
|
|
|
""
|
|
|
}
|
|
|
|
|
|
|
|
|
</React.Fragment>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default Exercise;
|
