|
|
import React, { Component } from "react";
|
|
|
import { Modal, Checkbox, Input, Spin, Select, Divider } from "antd";
|
|
|
import axios from 'axios'
|
|
|
import ModalWrapper from "../../common/ModalWrapper"
|
|
|
import InfiniteScroll from 'react-infinite-scroller';
|
|
|
import { ROLE_TEACHER_NUM, ROLE_ASSISTANT_NUM } from '../common'
|
|
|
import NoneData from '../../coursesPublic/NoneData'
|
|
|
import { ConditionToolTip, ThemeContext } from 'educoder'
|
|
|
import SchoolSelect from '../../coursesPublic/form/SchoolSelect'
|
|
|
|
|
|
const Option = Select.Option;
|
|
|
const pageCount = 15;
|
|
|
class AddStudentModal extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
checkBoxValues: [],
|
|
|
users: [],
|
|
|
hasMore: true,
|
|
|
loading: false,
|
|
|
courseGroup: '',
|
|
|
page: 1,
|
|
|
isSpin:false
|
|
|
}
|
|
|
}
|
|
|
fetchMemberList = (arg_page) => {
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
const page = arg_page || this.state.page;
|
|
|
const { name, school_name } = this.state
|
|
|
let url = `/courses/${courseId}/search_users.json?page=${page}&limit=${pageCount}&school_name=${school_name || ''}&name=${name || ''}`
|
|
|
this.setState({ loading: true })
|
|
|
axios.get(encodeURI(url))
|
|
|
.then((response) => {
|
|
|
if (!response.data.users || response.data.users.length == 0) {
|
|
|
this.setState({
|
|
|
users: page == 1 ? response.data.users : this.state.users,
|
|
|
page,
|
|
|
loading: false,
|
|
|
hasMore: false,
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({
|
|
|
users: page == 1 ? response.data.users : this.state.users.concat(response.data.users),
|
|
|
page,
|
|
|
loading: false,
|
|
|
hasMore: response.data.users.length == pageCount
|
|
|
})
|
|
|
}
|
|
|
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
|
}
|
|
|
fetchOptions = () => {
|
|
|
// add_teacher_popup
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
|
|
|
let url = `/courses/${courseId}/all_course_groups.json`
|
|
|
|
|
|
axios.get(url, {
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response.data.course_groups && response.data.course_groups.length) {
|
|
|
this.setState({
|
|
|
course_groups: response.data.course_groups,
|
|
|
courseGroup: response.data.course_groups[0].id
|
|
|
})
|
|
|
} else {
|
|
|
// showNotification('')
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
setVisible = (visible) => {
|
|
|
if (visible) {
|
|
|
this.setState({school_name: this.props.user.user_school})
|
|
|
this.fetchMemberList()
|
|
|
this.fetchOptions()
|
|
|
}
|
|
|
this.refs.modalWrapper.setVisible(visible)
|
|
|
if (visible == false) {
|
|
|
this.setState({
|
|
|
checkBoxValues: []
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onSendOk = () => {
|
|
|
|
|
|
if(!this.state.checkBoxValues || this.state.checkBoxValues.length == 0) {
|
|
|
this.props.showNotification('请从列表中先选择用户。')
|
|
|
return;
|
|
|
}
|
|
|
this.setState({
|
|
|
isSpin:true
|
|
|
})
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
const url = `/courses/${courseId}/add_students_by_search.json`
|
|
|
const params = {
|
|
|
"user_ids": this.state.checkBoxValues
|
|
|
}
|
|
|
const { courseGroup } = this.state
|
|
|
if (courseGroup) {
|
|
|
params.course_group_id = courseGroup
|
|
|
}
|
|
|
axios.post(url, params)
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.setVisible(false)
|
|
|
this.props.showNotification('添加成功')
|
|
|
this.props.addStudentSuccess && this.props.addStudentSuccess(params)
|
|
|
this.setState({
|
|
|
isSpin:false
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
onOk = () => {
|
|
|
this.onSendOk()
|
|
|
}
|
|
|
|
|
|
onCheckBoxChange = (checkBoxValues) => {
|
|
|
this.setState({
|
|
|
checkBoxValues: checkBoxValues
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleInfiniteOnLoad = () => {
|
|
|
this.fetchMemberList(this.state.page + 1)
|
|
|
}
|
|
|
|
|
|
onSearch = () => {
|
|
|
this.fetchMemberList(1)
|
|
|
}
|
|
|
handleCourseGroupChange = (value) => {
|
|
|
this.setState({
|
|
|
courseGroup: value
|
|
|
})
|
|
|
}
|
|
|
render(){
|
|
|
const { users, checkBoxValues, loading, hasMore, name, school_name
|
|
|
, courseGroup, course_groups,isSpin } = this.state
|
|
|
const { moduleName } = this.props
|
|
|
let theme = this.context;
|
|
|
return(
|
|
|
<ModalWrapper
|
|
|
ref="modalWrapper"
|
|
|
width="700px"
|
|
|
title={`添加${moduleName}`}
|
|
|
{...this.props }
|
|
|
onOk={this.onOk}
|
|
|
className="addStudentModal courseForm"
|
|
|
>
|
|
|
<style>
|
|
|
{`
|
|
|
.demo-loading-container {
|
|
|
position: absolute;
|
|
|
bottom: 93px;
|
|
|
width: 82%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.df {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
margin: 12px 0;
|
|
|
}
|
|
|
.firstLabel {
|
|
|
flex: 0 0 60px;
|
|
|
}
|
|
|
.df span.label {
|
|
|
margin-right: 8px;
|
|
|
text-align: right;
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
.df .ant-input-affix-wrapper {
|
|
|
width: 32%;
|
|
|
}
|
|
|
|
|
|
.addTeacherModal label.task-hide {
|
|
|
width: 100%;
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
<div className="df">
|
|
|
<span className="mr10">姓名:</span>
|
|
|
<Input allowClear placeholder="请输入真实姓名" value={name} onChange={(e) => {this.setState({name: e.target.value})}}
|
|
|
style={{ width: '221px'}}
|
|
|
></Input>
|
|
|
<span className="label" style={{ minWidth: '36px' }}>单位:</span>
|
|
|
{/* <Input allowClear placeholder="请输入单位名称" value={school_name} onChange={(e) => {this.setState({school_name: e.target.value})}}
|
|
|
style={{ width: '200px'}}>
|
|
|
</Input> */}
|
|
|
<SchoolSelect
|
|
|
value={school_name}
|
|
|
onChange={(value) => {this.setState({school_name: value})}}
|
|
|
></SchoolSelect>
|
|
|
<a className="task-btn task-btn-orange" onClick={() => this.fetchMemberList(1)}
|
|
|
style={{ height: '30px', lineHeight: '30px', marginLeft: '10px', width: '70px'}}
|
|
|
>搜索</a>
|
|
|
</div>
|
|
|
{/* <Divider /> */}
|
|
|
|
|
|
|
|
|
<p className="clearfix mb2" style={{ margin: '0px 15px 6px' }}>
|
|
|
<Checkbox className="fl" style={{ visibility: 'hidden' }} ></Checkbox>
|
|
|
<span className="fl with25"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{'姓名'}</label></span>
|
|
|
<span className="fl with25"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{'学号'}</label></span>
|
|
|
<span className="fl with35"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{'单位'}</label></span>
|
|
|
<span className="fl with10"><label className="task-hide fl" style={{"maxWidth":"48px;"}}>{''}</label></span>
|
|
|
|
|
|
</p>
|
|
|
<Spin size="large" spinning={isSpin}>
|
|
|
{ loading || users.length ? <div>
|
|
|
{/* https://github.com/CassetteRocks/react-infinite-scroller/issues/70 */}
|
|
|
<div className="edu-back-skyblue padding10-15" style={{"height":"300px", overflowY: "scroll", overflowAnchor: 'none' }}>
|
|
|
<InfiniteScroll
|
|
|
threshold={10}
|
|
|
initialLoad={false}
|
|
|
pageStart={0}
|
|
|
loadMore={this.handleInfiniteOnLoad}
|
|
|
hasMore={!loading && hasMore}
|
|
|
useWindow={false}
|
|
|
>
|
|
|
<Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
|
|
|
|
|
|
{ users.map( candidate => {
|
|
|
return (
|
|
|
<p className="clearfix mb7" key={candidate.id}>
|
|
|
<Checkbox className="fl" value={candidate.id} key={candidate.id} disabled={candidate.added}></Checkbox>
|
|
|
<span className="fl with25">
|
|
|
<ConditionToolTip title={candidate.name} condition={candidate.name && candidate.name.length > 12 }>
|
|
|
<label className="task-hide fl" style={{"maxWidth":"208px;"}}>
|
|
|
{ candidate.name ?
|
|
|
<a href={`/users/${candidate.login}`} target="_blank" style={{"maxWidth":"208px;"}}>
|
|
|
{ candidate.name }
|
|
|
</a> : <span> </span> }
|
|
|
</label>
|
|
|
</ConditionToolTip>
|
|
|
</span>
|
|
|
<span className="fl with25">
|
|
|
<ConditionToolTip title={candidate.student_id} condition={candidate.student_id && candidate.student_id.length > 12 }>
|
|
|
<label className="task-hide fl" style={{"maxWidth":"208px;"}}>{candidate.student_id || ' '}</label>
|
|
|
</ConditionToolTip>
|
|
|
</span>
|
|
|
<span className="fl with35"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{candidate.school_name}</label></span>
|
|
|
<span className="fl with10"><label className="task-hide fl"
|
|
|
style={{"maxWidth":"48px", color: theme.foreground_select }}>{candidate.added ? '已加入' : ''}</label></span>
|
|
|
|
|
|
</p>
|
|
|
)
|
|
|
}) }
|
|
|
</Checkbox.Group>
|
|
|
{loading && hasMore && (
|
|
|
<div className="demo-loading-container">
|
|
|
<Spin />
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
</InfiniteScroll>
|
|
|
</div>
|
|
|
{course_groups && course_groups.length && <div className="df" style={{ marginTop: '12px' }} >
|
|
|
<span className="mr10" style={{ width: '148px' }}>所选学生分班至(选填):</span>
|
|
|
<Select style={{ width: 236 }} onChange={this.handleCourseGroupChange} value={courseGroup}>
|
|
|
{ course_groups.map((item) => {
|
|
|
return <Option value={item.id}>{item.name}</Option>
|
|
|
})}
|
|
|
</Select>
|
|
|
</div>}
|
|
|
</div> : <NoneData></NoneData> }
|
|
|
</Spin>
|
|
|
</ModalWrapper>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
AddStudentModal.contextType = ThemeContext;
|
|
|
export default AddStudentModal;
|
