分班组件封装

public/react/src/modules/courses/members/CourseGroupChooser.js

@@ -0,0 +1,80 @@
+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 }) {
+    const [state, setState] = useState({counter: 0})
+    const [search, setSearch] = useState('')
+    // useEffect(() => {
+    //     console.log(' cdm')
+    //     return () => {
+    //         console.log(' cwum')
+    //     };
+    //     // , [state.counter]  加了这个后，onClick就消失了  加错位置了？
+    // }, [state.counter] )
+    // TODO 为什么每次onClick都会执行 cwum
+
+    // const add1ToCounter = () => {
+    //     const newCounterValue = state.counter + 1
+    //     setState({ counter: newCounterValue })
+    // }
+
+    /**
+        that.state.groupSearchValue
+        that.setState({groupSearchValue: e.target.value})
+
+        that.onCheckAllChange(e, item, index)    -    onCheckAllChange(e, item, index)
+        that.joinCourseGroup(checkedValues, item, index)    -    joinCourseGroup(checkedValues, item, index)  
+
+        that.state.checkAllArray[index] - checkAllValue
+     */
+
+    return (
+        <ul className="drop_down_menu" style={{"lef":"tunset", minWidth: '262px'}}>
+            {
+            course_groups && course_groups.length > 10?
+            (<p className="drop_down_search">
+                <Input placeholder="搜索" value={search} onChange={(e) => {setSearch(e.target.value)}} allowClear/>
+            </p>):
+            ''
+            }
+            
+            <Checkbox.Group onChange={(checkedValues) => joinCourseGroup(checkedValues, item, index)} 
+                value={arg_course_groups.map(item => item.id)}
+                disabled={!isAdminOrCreator} className="mainGroup"
+            >
+                {course_groups && course_groups.length > 1 && <li key={'_all' + index} >
+                {/* 防止被外面group包裹 */}
+                <Checkbox.Group>
+                    <Checkbox 
+                    checked={checkAllValue}
+                    style={{ marginRight: '6px' }} onClick={(e) =>  onCheckAllChange(e, item, index)} onChange={() => {}}
+                    >全选</Checkbox>
+                </Checkbox.Group>
+                </li>}
+            {
+            course_groups && course_groups.filter((item) => {
+                return (!search || item.name.indexOf(search) != -1)
+            }).map((item,key)=>{
+                return(
+                    <li key={item.id} value={item.id} >
+                    <Checkbox value={item.id}
+                        style={{ marginRight: '6px' }}
+                    ></Checkbox>
+                    {item.name}
+                    </li>
+                )
+            })
+            }
+            
+            </Checkbox.Group>
+            <p className="drop_down_btn">
+                <a href="javascript:void(0)" className="color-grey-6"
+                    onClick={() => trigger('groupAdd', coursesids)}
+                >添加分班...</a>
+            </p>
+        </ul>
+    )
+}
+export default CourseGroupChooser

public/react/src/modules/courses/members/teacherList.js

@@ -21,6 +21,7 @@ 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 = "管理员"
@@ -95,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>)
@@ -328,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    
     
@@ -663,6 +628,11 @@ class studentsList extends Component{
         ></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;
@@ -676,7 +646,7 @@ class studentsList extends Component{
           }
         `}</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> }
             { filterKey == '1' && <div className="studentList_operation_ul">
               { hasGraduationModule && isAdminOrTeacher && <li className="li_line drop_down">
@@ -715,7 +685,7 @@ class studentsList extends Component{
                 </ul>
               </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}>