m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

chooser

Browse Source
dev_forum
hjm 5 years ago
parent 653b9a13e6
commit fce86464cf
3 changed files with 176 additions and 24 deletions
Show Stats Download Patch File Download Diff File

34
public/react/src/modules/courses/members/CourseGroupChooser.js
Unescape View File

@ -2,8 +2,16 @@ import React, { useState, useEffect } from 'react'
import { trigger } from 'educoder'
import { Input, Checkbox } from "antd";
function CourseGroupChooser({ course_groups, isAdminOrCreator, item, index, arg_course_groups, checkAllValue
, coursesids, onCheckAllChange, joinCourseGroup }) {
/**
arg_course_groups 选中的id数组
joinCourseGroup 选中时触发 joinCourseGroup(checkedValues, item, index) 传入item：数据对象，index： 数据对象index
checkAllValue 是否全选
onCheckAllChange 全选 onCheckAllChange(e, item, index)
course_groups 所有的group
*/
function CourseGroupChooser({ course_groups, isAdminOrCreator = true, item, index, arg_course_groups, checkAllValue, alwaysShow
, onCheckAllChange, joinCourseGroup }) {
const [state, setState] = useState({counter: 0})
const [search, setSearch] = useState('')
// useEffect(() => {
@ -30,8 +38,15 @@ function CourseGroupChooser({ course_groups, isAdminOrCreator, item, index, arg_
that.state.checkAllArray[index] - checkAllValue
*/
console.log('arg_course_groups', arg_course_groups)
const urlStyle = {"lef":"tunset", minWidth: '262px'};
if (alwaysShow == true) {
urlStyle.display = 'block'
}
return (
<ul className="drop_down_menu" style={{"lef":"tunset", minWidth: '262px'}}>
<ul className="drop_down_menu" style={urlStyle}>
{
course_groups && course_groups.length > 10?
(<p className="drop_down_search">
@ -41,15 +56,15 @@ function CourseGroupChooser({ course_groups, isAdminOrCreator, item, index, arg_
}
<Checkbox.Group onChange={(checkedValues) => joinCourseGroup(checkedValues, item, index)}
value={arg_course_groups.map(item => item.id)}
value={arg_course_groups.length && arg_course_groups[0].id ? arg_course_groups.map(item => item.id): arg_course_groups}
disabled={!isAdminOrCreator} className="mainGroup"
>
{course_groups && course_groups.length > 1 && <li key={'_all' + index} >
{/* 防止被外面group包裹 */}
<Checkbox.Group>
<Checkbox.Group onChange={(e) => onCheckAllChange(e, item, index)} value={[checkAllValue]}>
<Checkbox
checked={checkAllValue}
style={{ marginRight: '6px' }} onClick={(e) => onCheckAllChange(e, item, index)} onChange={() => {}}
value={true}
style={{ marginRight: '6px' }} onClick={() => {}}
>全选</Checkbox>
</Checkbox.Group>
</li>}
@ -60,9 +75,10 @@ function CourseGroupChooser({ course_groups, isAdminOrCreator, item, index, arg_
return(
<li key={item.id} value={item.id} >
<Checkbox value={item.id}
id={`check${item.id}`}
style={{ marginRight: '6px' }}
></Checkbox>
{item.name}
<label for={`check${item.id}`}>{item.name}</label>
</li>
)
})
@ -71,7 +87,7 @@ function CourseGroupChooser({ course_groups, isAdminOrCreator, item, index, arg_
</Checkbox.Group>
<p className="drop_down_btn">
<a href="javascript:void(0)" className="color-grey-6"
onClick={() => trigger('groupAdd', coursesids)}
onClick={() => trigger('groupAdd')}
>添加分班...</a>
</p>
</ul>

108
public/react/src/modules/courses/members/modal/CourseGroupChooserModal.js
Unescape View File

@ -0,0 +1,108 @@
import React, { useState, useEffect, useRef } from 'react'
import { trigger } from 'educoder'
import { Input, Checkbox } from "antd";
import CourseGroupChooser from '../CourseGroupChooser'
import ModalWrapper from "../../common/ModalWrapper"
import axios from 'axios'
/**
arg_course_groups 选中的id数组
joinCourseGroup 选中时触发 joinCourseGroup(checkedValues, item, index) 传入item：数据对象，index： 数据对象index
checkAllValue 是否全选
onCheckAllChange 全选 onCheckAllChange(e, item, index)
course_groups 所有的group
*/
function CourseGroupChooserModal({ course_groups = [], isAdminOrCreator, item, index,
setVisible, visible, record = {}, props = {}, fetchAll
}) {
// , arg_course_groups, checkAllValue , onCheckAllChange, joinCourseGroup
const [checkAllValue, setCheckAllValue] = useState(true)
const [arg_course_groups, setArg_course_groups] = useState(course_groups.map(item => item.id))
const modalEl = useRef(null);
useEffect(() => {
setCheckAllValue(true)
setArg_course_groups(course_groups.map(item => item.id))
}, [course_groups, visible])
useEffect(() => {
if (visible != undefined) {
modalEl.current.setVisible(true)
}
}, [visible])
const joinCourseGroup = (checks) => {
setArg_course_groups(checks)
}
const onCheckAllChange = (e) => {
if (checkAllValue) {
setArg_course_groups([])
} else {
setArg_course_groups(course_groups.map(item => item.id))
}
setCheckAllValue(!checkAllValue)
}
const onOk = async () => {
console.log(checkAllValue, arg_course_groups)
let approval = 1
const courseId = props.match.params.coursesId
let url = `/courses/${courseId}/teacher_application_review.json`
const response = await axios.post(url, {
user_id: record.user_id,
application_id: record.application_id,
approval: approval,
group_id: arg_course_groups
})
props.showNotification(`已${approval == 1? '同意' : '拒绝'}`)
fetchAll(1)
modalEl.current.setVisible(false)
}
return (
<ModalWrapper
ref={modalEl}
width="600px"
title={`同意`}
visible={visible}
onOk={onOk}
className="courseGroupChooserModal"
>
<style>{`
.courseGroupChooserModal .description {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
}
.courseGroupChooserModal .drop_down_menu {
position: relative;
top: auto;
box-shadow: none;
padding: 0 20px;
background: #f2f9ff;
padding-top: 12px;
}
.courseGroupChooserModal .drop_down_menu .mainGroup.ant-checkbox-group {
width: 100%;
max-height: 300px
}
.courseGroupChooserModal .drop_down_search {
margin: 0;
margin-bottom: 10px;
}
.courseGroupChooserModal .drop_down_menu li {
padding: 0px;
}
.courseGroupChooserModal .drop_down_menu .drop_down_btn {
padding: 0px 20px;
margin: 0;
}
`}</style>
{/* <React.Fragment>
<React.Fragment> */}
<div className="description">确认同意TA的加入，并设置TA的分班管理权限</div>
<CourseGroupChooser
{...{ checkAllValue, isAdminOrCreator, course_groups, arg_course_groups, item, index,
joinCourseGroup, onCheckAllChange, alwaysShow: true }}
></CourseGroupChooser>
</ModalWrapper>
)
}
export default CourseGroupChooserModal

58
public/react/src/modules/courses/members/teacherList.js
Unescape View File

@ -21,6 +21,7 @@ import { from } from "array-flatten";
// import AddStudentModal from './modal/AddStudentModal'
import AddGraduationGroupModal from './modal/AddGraduationGroupModal'
import AddAdminModal from './modal/AddAdminModal'
import CourseGroupChooserModal from './modal/CourseGroupChooserModal'
import { ROLE_TEACHER_NUM, ROLE_ASSISTANT_NUM } from './common'
import CourseGroupChooser from './CourseGroupChooser'
@ -101,8 +102,7 @@ function buildColumns(that) {
{...{course_groups, isAdminOrCreator, item, index, arg_course_groups,
checkAllValue: that.state.checkAllArray[index],
joinCourseGroup: that.joinCourseGroup,
onCheckAllChange: that.onCheckAllChange,
coursesids: that.props.coursesids }}
onCheckAllChange: that.onCheckAllChange}}
></CourseGroupChooser>}
</React.Fragment> }
</span>
@ -212,24 +212,39 @@ class studentsList extends Component{
}
// approval 2 - 拒绝
onAgree = (record, approval = 1) => {
const isAdminOrCreator = this.props.isAdminOrCreator()
const { course_groups } = this.state
if (approval == 1 && isAdminOrCreator && course_groups && course_groups.length) {
this.setState({ clickRecord: record}, () => {
this.setGroupChooserModalVisible(true)
})
return;
}
const courseId = this.props.match.params.coursesId
let url = `/courses/${courseId}/teacher_application_review.json`
axios.post(url, {
user_id: record.user_id,
application_id: record.application_id,
approval: approval
})
.then((response) => {
if (response.data.status == 0) {
this.props.showNotification(`已${approval == 1? '同意' : '拒绝'}`)
this.fetchAll(1)
this.props.confirm({
content: `是否确认${ approval == 1 ? '同意' : '拒绝'}TA的加入？`,
onOk: () => {
axios.post(url, {
user_id: record.user_id,
application_id: record.application_id,
approval: approval
})
.then((response) => {
if (response.data.status == 0) {
this.props.showNotification(`已${approval == 1? '同意' : '拒绝'}`)
this.fetchAll(1)
}
})
.catch(function (error) {
console.log(error);
});
}
})
.catch(function (error) {
console.log(error);
});
}
onRefuse = (record) => {
this.onAgree(record, 2)
@ -561,11 +576,15 @@ class studentsList extends Component{
this.fetchAll();
})
}
setGroupChooserModalVisible = (visible) => {
// 这里只会调用open
this.setState({groupChooserModalVisible: !this.state.groupChooserModalVisible})
}
render(){
const isAdmin = this.props.isAdmin()
const columns = buildColumns(this)
let {
searchValue, checkBoxValues, checkAllValue,
searchValue, checkBoxValues, checkAllValue, course_groups,
groupList, total_count, teachers, order, page, apply_size, filterKey
}=this.state
@ -647,6 +666,15 @@ class studentsList extends Component{
}
`}</style>
<div className="mt20 edu-back-white padding20 teacherList">
<CourseGroupChooserModal
props={this.props}
record={this.state.clickRecord}
fetchAll={this.fetchAll}
course_groups={course_groups}
visible={this.state.groupChooserModalVisible}
setVisible={this.setGroupChooserModalVisible}
></CourseGroupChooserModal>
{filterKey == '1' && <div className="clearfix stu_head" style={{paddingLeft: '15px'}}>
{ isAdminOrTeacher && hasGraduationModule && <Checkbox className="fl" onChange={this.onCheckAll} checked={checkAllValue} >已选 {checkBoxValues.length} 个</Checkbox> }
{ filterKey == '1' && <div className="studentList_operation_ul">

Write Preview
Loading…
Cancel
Save