|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
|
import { Input,Checkbox,Table, Divider, Tooltip,Spin } from "antd";
|
|
|
|
|
import { Input,Checkbox,Table, Divider, Tooltip,Spin, Menu } from "antd";
|
|
|
|
|
|
|
|
|
|
import CourseLayoutcomponent from '../common/CourseLayoutComponent'
|
|
|
|
|
|
|
|
|
|
@ -21,24 +21,29 @@ import { from } from "array-flatten";
|
|
|
|
|
import AddGraduationGroupModal from './modal/AddGraduationGroupModal'
|
|
|
|
|
import AddAdminModal from './modal/AddAdminModal'
|
|
|
|
|
import { ROLE_TEACHER_NUM, ROLE_ASSISTANT_NUM } from './common'
|
|
|
|
|
import CourseGroupChooser from './CourseGroupChooser'
|
|
|
|
|
|
|
|
|
|
const Search = Input.Search;
|
|
|
|
|
const ROLE_ADMIN = "管理员"
|
|
|
|
|
const ROLE_TEACHER = "教师"
|
|
|
|
|
const ROLE_TEACHER_ASSISTANT = "助教"
|
|
|
|
|
const pageSize = 20;
|
|
|
|
|
|
|
|
|
|
function buildColumns(that) {
|
|
|
|
|
let sortedInfo = that.state.sortedInfo || {}
|
|
|
|
|
const isAdmin = that.props.isAdmin()
|
|
|
|
|
const isAdminOrCreator = that.props.isAdminOrCreator();
|
|
|
|
|
const isAdminOrTeacher = that.props.isAdminOrTeacher()
|
|
|
|
|
const { course_groups } = that.state
|
|
|
|
|
const { course_groups, filterKey } = that.state
|
|
|
|
|
const showSorter = filterKey == '1'
|
|
|
|
|
const columns = [{
|
|
|
|
|
title: '序号',
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
key: 'index',
|
|
|
|
|
render: (content, item, index) => {
|
|
|
|
|
return item.isApply == true ? '' : <a href="javascript:;">{(that.state.page - 1) * 20 + index + 1
|
|
|
|
|
- (that.state.application_list ? that.state.application_list.length : 0)} </a>
|
|
|
|
|
return index + 1
|
|
|
|
|
// return item.isApply == true ? '' : <a href="javascript:;">{(that.state.page - 1) * 20 + index + 1
|
|
|
|
|
// - (that.state.application_list ? that.state.application_list.length : 0)} </a>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// ,{
|
|
|
|
|
@ -55,6 +60,8 @@ function buildColumns(that) {
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
width: 120,
|
|
|
|
|
key: 'name',
|
|
|
|
|
sorter: showSorter,
|
|
|
|
|
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
|
|
|
|
|
render: (name, record) => {
|
|
|
|
|
return <a href={`/login/${record.login}`} target="_blank" className="overflowHidden1" style={{ maxWidth: '110px'}}
|
|
|
|
|
title={`${name.length > 4 ? name : ''}`}>{name}</a>
|
|
|
|
|
@ -63,6 +70,11 @@ function buildColumns(that) {
|
|
|
|
|
title: '角色',
|
|
|
|
|
dataIndex: 'role',
|
|
|
|
|
key: 'role',
|
|
|
|
|
sorter: showSorter,
|
|
|
|
|
// 'ascend' | 'descend'
|
|
|
|
|
defaultSortOrder: 'ascend',
|
|
|
|
|
sortOrder: sortedInfo.columnKey === 'role' && sortedInfo.order,
|
|
|
|
|
|
|
|
|
|
}]
|
|
|
|
|
that.state.course_groups && that.state.course_groups.length && columns.push({
|
|
|
|
|
title: <Tooltip title="仅能批阅指定分班的作品">管理权限</Tooltip>,
|
|
|
|
|
@ -84,49 +96,13 @@ function buildColumns(that) {
|
|
|
|
|
{ isAdmin &&
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
<i className="iconfont icon-xiajiantou font-12 ml2"></i>
|
|
|
|
|
{!noGroups && <ul className="drop_down_menu" style={{"lef":"tunset", minWidth: '262px'}}>
|
|
|
|
|
{
|
|
|
|
|
course_groups && course_groups.length > 10?
|
|
|
|
|
(<p className="drop_down_search">
|
|
|
|
|
<Input placeholder="搜索" value={that.state.groupSearchValue} onChange={(e) => {that.setState({groupSearchValue: e.target.value})}} allowClear/>
|
|
|
|
|
</p>):
|
|
|
|
|
''
|
|
|
|
|
}
|
|
|
|
|
{course_groups && course_groups.length > 1 && <li key={'_all' + index} >
|
|
|
|
|
{/* 防止被外面group包裹 */}
|
|
|
|
|
<Checkbox.Group>
|
|
|
|
|
<Checkbox
|
|
|
|
|
checked={that.state.checkAllArray[index]}
|
|
|
|
|
style={{ marginRight: '6px' }} onClick={(e) => that.onCheckAllChange(e, item, index)} onChange={() => {}}
|
|
|
|
|
>全选</Checkbox>
|
|
|
|
|
</Checkbox.Group>
|
|
|
|
|
</li>}
|
|
|
|
|
<Checkbox.Group onChange={(checkedValues) => that.joinCourseGroup(checkedValues, item, index)}
|
|
|
|
|
value={arg_course_groups.map(item => item.id)}
|
|
|
|
|
disabled={!isAdminOrCreator}
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
course_groups && course_groups.filter((item) => {
|
|
|
|
|
return (!that.state.groupSearchValue || item.name.indexOf(that.state.groupSearchValue) != -1)
|
|
|
|
|
}).map((item,key)=>{
|
|
|
|
|
return(
|
|
|
|
|
<li key={key} value={item.id} >
|
|
|
|
|
<Checkbox value={item.id}
|
|
|
|
|
style={{ marginRight: '6px' }}
|
|
|
|
|
></Checkbox>
|
|
|
|
|
{item.name}
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
<p className="drop_down_btn">
|
|
|
|
|
<a href="javascript:void(0)" className="color-grey-6"
|
|
|
|
|
onClick={() => trigger('groupAdd', that.props.coursesids)}
|
|
|
|
|
>添加分班...</a>
|
|
|
|
|
</p>
|
|
|
|
|
</Checkbox.Group>
|
|
|
|
|
</ul>}
|
|
|
|
|
{!noGroups && <CourseGroupChooser
|
|
|
|
|
{...{course_groups, isAdminOrCreator, item, index, arg_course_groups,
|
|
|
|
|
checkAllValue: that.state.checkAllArray[index],
|
|
|
|
|
joinCourseGroup: that.joinCourseGroup,
|
|
|
|
|
onCheckAllChange: that.onCheckAllChange,
|
|
|
|
|
coursesids: that.props.coursesids }}
|
|
|
|
|
></CourseGroupChooser>}
|
|
|
|
|
</React.Fragment> }
|
|
|
|
|
</span>
|
|
|
|
|
</ConditionToolTip>)
|
|
|
|
|
@ -138,8 +114,11 @@ function buildColumns(that) {
|
|
|
|
|
columns.push({
|
|
|
|
|
title: '答辩组',
|
|
|
|
|
// width: 90,
|
|
|
|
|
sorter: showSorter,
|
|
|
|
|
key: 'graduation_group',
|
|
|
|
|
dataIndex: 'graduation_group',
|
|
|
|
|
sortOrder: sortedInfo.columnKey === 'graduation_group' && sortedInfo.order,
|
|
|
|
|
|
|
|
|
|
render: text => (
|
|
|
|
|
<span>
|
|
|
|
|
{text}
|
|
|
|
|
@ -200,6 +179,7 @@ class studentsList extends Component{
|
|
|
|
|
this.state={
|
|
|
|
|
headIndex:"1",
|
|
|
|
|
page:1,
|
|
|
|
|
sortedInfo: { columnKey: 'role', order: 'ascend'},
|
|
|
|
|
totalPage:undefined,
|
|
|
|
|
searchValue:"",
|
|
|
|
|
order: ORDER_BY_DATE,
|
|
|
|
|
@ -209,7 +189,8 @@ class studentsList extends Component{
|
|
|
|
|
checkBoxValues: [],
|
|
|
|
|
isSpin:false,
|
|
|
|
|
application_list: [],
|
|
|
|
|
checkAllArray: []
|
|
|
|
|
checkAllArray: [],
|
|
|
|
|
filterKey: 1, // 1 已审批 2 待审批
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
onCheckAllChange = (e, item, index) => {
|
|
|
|
|
@ -312,7 +293,7 @@ class studentsList extends Component{
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
joinCourseGroup = (ids, item, index) => {
|
|
|
|
|
console.log('join ', ids, item)
|
|
|
|
|
// console.log('join ', ids, item)
|
|
|
|
|
|
|
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
|
|
|
|
|
|
|
@ -339,7 +320,7 @@ class studentsList extends Component{
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
fetchAll=(argPage)=>{
|
|
|
|
|
fetchAll = async (argPage) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpin:true
|
|
|
|
|
})
|
|
|
|
|
@ -347,28 +328,57 @@ class studentsList extends Component{
|
|
|
|
|
if (argPage) {
|
|
|
|
|
this.setState({ page: argPage })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const sortedInfo = this.state.sortedInfo;
|
|
|
|
|
let page = argPage || this.state.page
|
|
|
|
|
let { order, searchValue }=this.state
|
|
|
|
|
let url=`/courses/${id}/teachers.json?order=${order}&page=${page}`;
|
|
|
|
|
let { searchValue, filterKey }=this.state
|
|
|
|
|
let order = 1;
|
|
|
|
|
if (sortedInfo.columnKey == 'role') {
|
|
|
|
|
order = 1;
|
|
|
|
|
} else if (sortedInfo.columnKey == 'name') {
|
|
|
|
|
order = 2;
|
|
|
|
|
} else if (sortedInfo.columnKey == 'graduation_group') {
|
|
|
|
|
order = 3;
|
|
|
|
|
}
|
|
|
|
|
let sort = 'desc'
|
|
|
|
|
if (sortedInfo.order == 'ascend') {
|
|
|
|
|
sort = 'asc'
|
|
|
|
|
}
|
|
|
|
|
let url=`/courses/${id}/teachers.json?order=${order}&page=${page}&sort=${sort}`;
|
|
|
|
|
if (filterKey == '1') {
|
|
|
|
|
|
|
|
|
|
} else if (filterKey == '2') {
|
|
|
|
|
url = `/courses/${id}/apply_teachers.json?_a=1`
|
|
|
|
|
}
|
|
|
|
|
if(searchValue!=""){
|
|
|
|
|
url+='&search='+searchValue;
|
|
|
|
|
}
|
|
|
|
|
axios.get((url)).then((result)=>{
|
|
|
|
|
const result = await axios.get(url)
|
|
|
|
|
// axios.get((url)).then((result)=>{
|
|
|
|
|
if (result.data.teacher_list) {
|
|
|
|
|
this.setState({
|
|
|
|
|
teachers: result.data.teacher_list,
|
|
|
|
|
total_count: result.data.teacher_list_size,
|
|
|
|
|
application_list: result.data.application_list,
|
|
|
|
|
application_list: result.data.application_list || [],
|
|
|
|
|
is_admin: result.data.is_admin,
|
|
|
|
|
apply_size: result.data.apply_size,
|
|
|
|
|
isSpin:false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}).catch((error)=>{
|
|
|
|
|
console.log(error);
|
|
|
|
|
} else if (result.data.application_list) {
|
|
|
|
|
this.setState({
|
|
|
|
|
total_count: result.data.teacher_list_size,
|
|
|
|
|
application_list: result.data.application_list || [],
|
|
|
|
|
is_admin: result.data.is_admin,
|
|
|
|
|
apply_size: result.data.apply_size,
|
|
|
|
|
isSpin:false
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// }).catch((error)=>{
|
|
|
|
|
// console.log(error);
|
|
|
|
|
// this.setState({
|
|
|
|
|
// isSpin:false
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
getGroupList(){
|
|
|
|
|
let id = this.props.match.params.coursesId
|
|
|
|
|
@ -529,13 +539,33 @@ class studentsList extends Component{
|
|
|
|
|
})
|
|
|
|
|
return result && result.length > 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onTableChange = (pagination, filters, sorter) => {
|
|
|
|
|
console.log('Various parameters', pagination, filters, sorter);
|
|
|
|
|
this.setState({
|
|
|
|
|
sortedInfo: sorter,
|
|
|
|
|
}, () => {
|
|
|
|
|
this.fetchAll()
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
clearSelection = () => {
|
|
|
|
|
this.setState({ checkBoxValues: [] })
|
|
|
|
|
}
|
|
|
|
|
selectedStatus=(e)=>{
|
|
|
|
|
this.clearSelection()
|
|
|
|
|
this.setState({
|
|
|
|
|
filterKey: e.key,
|
|
|
|
|
page:1,
|
|
|
|
|
isSpin:true
|
|
|
|
|
}, () => {
|
|
|
|
|
this.fetchAll();
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
render(){
|
|
|
|
|
const isAdmin = this.props.isAdmin()
|
|
|
|
|
const columns = buildColumns(this)
|
|
|
|
|
let {
|
|
|
|
|
searchValue, checkBoxValues, checkAllValue,
|
|
|
|
|
groupList, total_count, teachers, order, page
|
|
|
|
|
groupList, total_count, teachers, order, page, apply_size, filterKey
|
|
|
|
|
}=this.state
|
|
|
|
|
|
|
|
|
|
let currentOrderName = '加入时间排序'
|
|
|
|
|
@ -544,12 +574,13 @@ class studentsList extends Component{
|
|
|
|
|
} else if (order == ORDER_BY_GRADUATION_GROUP) {
|
|
|
|
|
currentOrderName = '答辩组排序'
|
|
|
|
|
}
|
|
|
|
|
const combineArray = teachers.slice(0)
|
|
|
|
|
if (page == 1) {
|
|
|
|
|
this.state.application_list && this.state.application_list.slice(0).reverse().forEach(item => {
|
|
|
|
|
item.isApply = true
|
|
|
|
|
combineArray.unshift(item)
|
|
|
|
|
})
|
|
|
|
|
let combineArray = teachers.slice(0)
|
|
|
|
|
if (page == 1 && filterKey == '2') {
|
|
|
|
|
// this.state.application_list && this.state.application_list.slice(0).reverse().forEach(item => {
|
|
|
|
|
// item.isApply = true
|
|
|
|
|
// combineArray.unshift(item)
|
|
|
|
|
// })
|
|
|
|
|
combineArray = this.state.application_list
|
|
|
|
|
}
|
|
|
|
|
const isAdminOrTeacher = this.props.isAdminOrTeacher()
|
|
|
|
|
const hasGraduationModule = this.hasGraduationModule()
|
|
|
|
|
@ -585,21 +616,39 @@ class studentsList extends Component{
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
}
|
|
|
|
|
secondRowLeft={
|
|
|
|
|
total_count ? <ColorCountText count={total_count} name="个教师"></ColorCountText> : ''
|
|
|
|
|
isAdminOrTeacher ? <div className="fl mt6 task_menu_ul ">
|
|
|
|
|
<Menu mode="horizontal" defaultSelectedKeys="1" onClick={this.selectedStatus}>
|
|
|
|
|
<Menu.Item key="1">已审批({total_count})</Menu.Item>
|
|
|
|
|
<Menu.Item key="2">待审批({apply_size})</Menu.Item>
|
|
|
|
|
</Menu>
|
|
|
|
|
</div> :
|
|
|
|
|
(total_count ? <ColorCountText count={total_count} name="个教师"></ColorCountText> : '')
|
|
|
|
|
}
|
|
|
|
|
onPressEnter={this.onPressEnter}
|
|
|
|
|
></Titlesearchsection>
|
|
|
|
|
|
|
|
|
|
<style>{`
|
|
|
|
|
/* CourseGroupChooser */
|
|
|
|
|
.drop_down_menu .mainGroup.ant-checkbox-group {
|
|
|
|
|
max-height: 380px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
.task_menu_ul .ant-menu-item, .task_menu_ul .ant-menu-submenu-title{
|
|
|
|
|
padding:0px;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
line-height: 68px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.teacherList .ant-table-pagination.ant-pagination {
|
|
|
|
|
float: none;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
|
|
|
|
<div className="mt20 edu-back-white padding20 teacherList">
|
|
|
|
|
<div className="clearfix stu_head" style={{paddingLeft: '15px'}}>
|
|
|
|
|
{filterKey == '1' && <div className="clearfix stu_head" style={{paddingLeft: '15px'}}>
|
|
|
|
|
{ isAdminOrTeacher && hasGraduationModule && <Checkbox className="fl" onChange={this.onCheckAll} checked={checkAllValue} >已选 {checkBoxValues.length} 个</Checkbox> }
|
|
|
|
|
{ <div className="studentList_operation_ul">
|
|
|
|
|
{ filterKey == '1' && <div className="studentList_operation_ul">
|
|
|
|
|
{ hasGraduationModule && isAdminOrTeacher && <li className="li_line drop_down">
|
|
|
|
|
加入答辩组<i className="iconfont icon-xiajiantou font-12 ml2"></i>
|
|
|
|
|
<ul className="drop_down_menu" style={{"right":"0px","left":"unset", minWidth: '222px'}}>
|
|
|
|
|
@ -627,22 +676,23 @@ class studentsList extends Component{
|
|
|
|
|
</p>
|
|
|
|
|
</ul>
|
|
|
|
|
</li> }
|
|
|
|
|
<li className="drop_down">
|
|
|
|
|
{/* <li className="drop_down">
|
|
|
|
|
{currentOrderName} <i className="iconfont icon-xiajiantou font-12 ml2"></i>
|
|
|
|
|
<ul className="drop_down_normal">
|
|
|
|
|
<li onClick={() => this.onSortTypeChange(ORDER_BY_NAME)} >姓名排序</li>
|
|
|
|
|
<li onClick={() => this.onSortTypeChange(ORDER_BY_DATE)} style={{width: '125px'}}>加入时间排序</li>
|
|
|
|
|
{this.hasGraduationModule() && <li onClick={() => this.onSortTypeChange(ORDER_BY_GRADUATION_GROUP)} >答辩组排序</li>}
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</li> */}
|
|
|
|
|
</div> }
|
|
|
|
|
</div>
|
|
|
|
|
</div>}
|
|
|
|
|
<Spin size="large" spinning={this.state.isSpin}>
|
|
|
|
|
<div className="clearfix stu_table">
|
|
|
|
|
<Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
|
|
|
|
|
{/* pagination={{ current: page, total: total_count, pageSize:20, onChange: this.onPageChange }} */}
|
|
|
|
|
<Table columns={columns} dataSource={combineArray}
|
|
|
|
|
pagination={total_count > 20 ? { //分页
|
|
|
|
|
onChange={this.onTableChange}
|
|
|
|
|
pagination={total_count > 20 && filterKey == '1' ? { //分页
|
|
|
|
|
total: page == 1 && this.state.application_list.length ? total_count + total_count / Math.floor(this.state.application_list.length + 20) : total_count , //数据总数量
|
|
|
|
|
pageSize: page == 1 && this.state.application_list.length ? this.state.application_list.length + 20 : 20, //显示几条一页
|
|
|
|
|
current: page,
|
|
|
|
|
|
