|
|
import React,{ Component } from "react";
|
|
|
import { Modal,Input, Checkbox,Icon,Spin} from "antd";
|
|
|
|
|
|
import '../css/members.css'
|
|
|
import '../css/busyWork.css'
|
|
|
import { WordsBtn, ConditionToolTip } from 'educoder'
|
|
|
import axios from 'axios'
|
|
|
import InfiniteScroll from 'react-infinite-scroller';
|
|
|
|
|
|
import NoneData from '../coursesPublic/NoneData'
|
|
|
|
|
|
const Search=Input.Search;
|
|
|
const pageCount = 20
|
|
|
// "poll", #normal 普通作业题库； group 分组作业题库； poll问卷题库； exercise试卷题库; gtask 毕设选题题库；gtopic 毕设任务
|
|
|
const engNameMap = {
|
|
|
poll: '问卷',
|
|
|
normal: '普通作业',
|
|
|
group: '分组作业',
|
|
|
exercise: '试卷',
|
|
|
gtask: '毕设任务',
|
|
|
gtopic: '毕设选题',
|
|
|
}
|
|
|
class UseBank extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
flag:false,
|
|
|
nav_my: 'myself',
|
|
|
search: '',
|
|
|
page: 1,
|
|
|
checkBoxValues: [],
|
|
|
isChecked:'',
|
|
|
is_teacher:undefined,
|
|
|
hometypepvisible:false
|
|
|
}
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
|
|
|
}
|
|
|
onCheckBoxChange = (checkBoxValues) => {
|
|
|
this.setState({
|
|
|
checkBoxValues: checkBoxValues
|
|
|
})
|
|
|
if(checkBoxValues.length!=0){
|
|
|
this.setState({
|
|
|
isChecked:""
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
fetchAll = (arg_page) => {
|
|
|
console.log('fetchAll')
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
const page = arg_page || this.state.page;
|
|
|
const { nav_my, search } = this.state
|
|
|
/**
|
|
|
normal 普通作业题库； group 分组作业题库； poll问卷题库； exercise试卷题库; gtask 毕设选题题库；gtopic 毕设任务
|
|
|
filter string public公共题库 2， myself我的题库 1
|
|
|
*/
|
|
|
const object_type = this.props.object_type
|
|
|
let url = `/question_banks/bank_list.json?page=${page}&limit=${pageCount}&object_type=${object_type || ''}&search=${search || ''}&filter=${nav_my}`
|
|
|
this.setState({ loading: true })
|
|
|
axios.get(url
|
|
|
// , {
|
|
|
// params: {
|
|
|
|
|
|
// }
|
|
|
// }
|
|
|
)
|
|
|
.then((response) => {
|
|
|
if(response.data){
|
|
|
this.setState({
|
|
|
is_teacher:response.data.is_teacher
|
|
|
})
|
|
|
}
|
|
|
if (!response.data.object_list || response.data.object_list.length == 0) {
|
|
|
this.setState({
|
|
|
object_list: page == 1 ? [] : this.state.object_list,
|
|
|
page,
|
|
|
loading: false,
|
|
|
hasMore: false,
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({
|
|
|
object_list: page == 1 ? response.data.object_list : this.state.object_list.concat(response.data.object_list),
|
|
|
page,
|
|
|
loading: false,
|
|
|
hasMore: response.data.object_list.length == pageCount
|
|
|
})
|
|
|
}
|
|
|
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
openSelectBank=()=>{
|
|
|
this.setState({
|
|
|
search: '',
|
|
|
flag:true
|
|
|
}, () => {
|
|
|
this.fetchAll()
|
|
|
})
|
|
|
}
|
|
|
closeSelectBank=()=>{
|
|
|
this.setState({
|
|
|
flag:false,
|
|
|
nav_my: 'myself',
|
|
|
search: '',
|
|
|
page: 1,
|
|
|
checkBoxValues: [],
|
|
|
isChecked:'',
|
|
|
is_teacher:undefined,
|
|
|
hometypepvisible:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//切换tab
|
|
|
changeNav=(index)=>{
|
|
|
this.setState({
|
|
|
nav_my:index
|
|
|
}, () => {
|
|
|
this.fetchAll(1)
|
|
|
})
|
|
|
}
|
|
|
onSearchChange = (e) => {
|
|
|
this.setState({
|
|
|
search: e.target.value
|
|
|
})
|
|
|
}
|
|
|
onSave = () => {
|
|
|
|
|
|
const { checkBoxValues } = this.state;
|
|
|
const { object_type } = this.props
|
|
|
if(checkBoxValues.length==0){
|
|
|
this.setState({
|
|
|
isChecked:"请先选择"+engNameMap[object_type]
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
this.setState({
|
|
|
hometypepvisible:true
|
|
|
})
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
let url = `/question_banks/save_banks.json`
|
|
|
this.setState({ loading: true })
|
|
|
axios.post(url
|
|
|
,{
|
|
|
"object_type": object_type,
|
|
|
"bank_id": checkBoxValues,
|
|
|
"course_id": courseId
|
|
|
}
|
|
|
)
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.props.showNotification('题库选用成功')
|
|
|
this.props.useBankSuccess && this.props.useBankSuccess(checkBoxValues,response.data.object_ids);
|
|
|
this.closeSelectBank();
|
|
|
this.props.updataleftNavfun()
|
|
|
this.setState({
|
|
|
hometypepvisible:false,
|
|
|
checkBoxValues:[]
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({
|
|
|
hometypepvisible:false,
|
|
|
checkBoxValues:[]
|
|
|
})
|
|
|
this.props.showNotification(response.data.message)
|
|
|
}
|
|
|
})
|
|
|
.catch( (error) =>{
|
|
|
console.log(error);
|
|
|
this.setState({
|
|
|
hometypepvisible:false,
|
|
|
checkBoxValues:[]
|
|
|
})
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
let { flag, nav_my, loading, hasMore, object_list, search, checkBoxValues,isChecked,page,is_teacher }=this.state
|
|
|
let { object_type }=this.props;
|
|
|
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
|
|
|
return(
|
|
|
<a>
|
|
|
<style>{`
|
|
|
.bankModal .task-hide {
|
|
|
max-width: 290px;
|
|
|
}
|
|
|
.d_middle{
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
display: -webkit-flex;
|
|
|
}
|
|
|
.setImgW .edu-nodata-img{
|
|
|
width:218px !important;
|
|
|
}
|
|
|
.bankwidth{
|
|
|
width:24% !important;
|
|
|
overflow:hidden;
|
|
|
text-overflow:ellipsis;
|
|
|
white-space:nowrap
|
|
|
}
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
{
|
|
|
flag===true?<style>
|
|
|
{
|
|
|
`
|
|
|
body {
|
|
|
overflow: hidden !important;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>:""
|
|
|
}
|
|
|
|
|
|
<WordsBtn style="blue" className="mr30 font-16" onClick={()=>this.openSelectBank()}>{engNameMap[object_type]=="问卷"?"问卷选用":engNameMap[object_type]=="试卷"?"试卷选用":"题库选用"}</WordsBtn>
|
|
|
{flag===true?<Modal
|
|
|
title="题库选用"
|
|
|
visible={flag}
|
|
|
closable={false}
|
|
|
width="800px"
|
|
|
footer={null}
|
|
|
keyboard={false}
|
|
|
destroyOnClose={true}
|
|
|
centered={true}
|
|
|
>
|
|
|
|
|
|
<div className="newupload_conbox clearfix bankModal">
|
|
|
<Spin indicator={antIcon} spinning={this.state.hometypepvisible} className="newnext-loading" color='#4AC7FF' size="large">
|
|
|
<div className="clearfix mb30">
|
|
|
<ul className="fl mt2 bankNav">
|
|
|
<li className={nav_my==='myself'?"active":""} onClick={()=>this.changeNav('myself')}><a>我的题库</a></li>
|
|
|
<li className={nav_my==='myself'?"":"active"} onClick={()=>this.changeNav('public')}><a>公共题库</a></li>
|
|
|
</ul>
|
|
|
<Search placeholder="输入标题、适用课程进行搜索" className="searchView fr" style={{"width":"268px","height":"30px"}}
|
|
|
onSearch={() => this.fetchAll(1)} onChange={this.onSearchChange} value={search}
|
|
|
></Search>
|
|
|
</div>
|
|
|
{
|
|
|
object_list && object_list.length == 0 && page == 1 ? "" : nav_my==='myself'?
|
|
|
<p className="color-grey-6 mb25 edu-txt-center">选用对象：你在课堂{engNameMap[object_type]}列表中已<span className="color-orange-tip">“加入题库”</span>的{engNameMap[object_type]}</p>
|
|
|
:
|
|
|
<p className="color-grey-6 mb25 edu-txt-center">选用对象：题库中已设置成公共属性的所有{engNameMap[object_type]}</p>
|
|
|
}
|
|
|
|
|
|
{
|
|
|
nav_my !='myself' && is_teacher == false ?
|
|
|
<div style={{"height":"230px"}} className="d_middle edu-txt-center">
|
|
|
<div>
|
|
|
<p className="font-16 mb20 color-grey-3">通过职业认证的教师才能访问公共题库</p>
|
|
|
<a className="white-btn edu-orangeback-btn" target="_blank" href="/account/professional_certification">立即认证</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
:
|
|
|
object_list && object_list.length == 0 && page == 1 ?
|
|
|
<div className="setImgW"><NoneData></NoneData></div>
|
|
|
:
|
|
|
<div className="edu-back-skyblue padding20" style={{"height":"230px", "overflowY": 'auto'}}>
|
|
|
<InfiniteScroll
|
|
|
threshold={10}
|
|
|
initialLoad={false}
|
|
|
pageStart={0}
|
|
|
loadMore={() => this.fetchAll(this.state.page + 1)}
|
|
|
hasMore={!loading && hasMore}
|
|
|
useWindow={false}
|
|
|
>
|
|
|
<Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
|
|
|
{ object_list && object_list.map( item => {
|
|
|
/**
|
|
|
course_list_name: "C++程序设计"
|
|
|
id: 3889
|
|
|
name: "作业3：第四章 控制结构 "
|
|
|
username: "Coder"
|
|
|
*/
|
|
|
return (
|
|
|
<p className="clearfix mb7" key={item.id}>
|
|
|
<Checkbox className="fl" value={item.id}></Checkbox>
|
|
|
<span className="fl with65">
|
|
|
<label className="task-hide fl" title={item.name && item.name.length > 30 ? item.name:""} style={{"maxWidth":"100%"}}>{item.name}</label>
|
|
|
</span>
|
|
|
<span title={item.course_list_name && item.course_list_name.length > 10 && item.course_list_name}
|
|
|
className={nav_my==='myself'?"fl with30 color-grey-6 task-hide pl5 bankwidth":"fl with30 color-grey-6 task-hide pl5 bankwidth"}
|
|
|
|
|
|
>{item.course_list_name}</span>
|
|
|
{
|
|
|
nav_my==='public' &&
|
|
|
<span className="fl with16 color-grey-6 task-hide pl10">{item.username}</span>
|
|
|
}
|
|
|
</p>
|
|
|
)
|
|
|
})}
|
|
|
</Checkbox.Group>
|
|
|
{/* <p className="clearfix mb7">
|
|
|
<Checkbox className="fl"></Checkbox>
|
|
|
<span className="fl with45"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>毕业设计2018开题报告题报</label></span>
|
|
|
<span className={nav_my===1?"fl with50 color-grey-6 task-hide pl5":"fl with30 color-grey-6 task-hide pl5"}>数据库原理数据库原理</span>
|
|
|
{
|
|
|
nav_my===2 &&
|
|
|
<span className="fl with16 color-grey-6 task-hide pl10">胡莎莎胡莎莎</span>
|
|
|
}
|
|
|
</p> */}
|
|
|
</InfiniteScroll>
|
|
|
</div>
|
|
|
}
|
|
|
|
|
|
<p style={{height:"20px",lineHeight:"20px;", marginTop: '4px'}}>
|
|
|
{
|
|
|
isChecked !="" ? <span className="color-red">{isChecked}</span>:""
|
|
|
}
|
|
|
</p>
|
|
|
<div className="mt10 marginauto clearfix edu-txt-center">
|
|
|
<a onClick={this.closeSelectBank} className="pop_close task-btn mr30">取消</a>
|
|
|
|
|
|
{object_list && object_list.length == 0 && page == 1 ?
|
|
|
nav_my !='myself' && is_teacher == false ?
|
|
|
<a onClick={this.closeSelectBank} className="task-btn task-btn-orange">确定</a>
|
|
|
: <a onClick={this.closeSelectBank} className="task-btn task-btn-orange">确定</a>
|
|
|
:<a className="task-btn task-btn-orange" id="submit_send_shixun" onClick={this.onSave}>确定</a>
|
|
|
}
|
|
|
{/*<a className="task-btn task-btn-orange" id="submit_send_shixun" onClick={this.onSave}>确定</a>*/}
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</div>
|
|
|
</Modal>:""}
|
|
|
</a>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default UseBank; |
