已审批待审批

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

@@ -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'
 
@@ -27,11 +27,14 @@ 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',
@@ -55,6 +58,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 +68,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>,
@@ -138,8 +148,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 +213,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 +223,8 @@ class studentsList extends Component{
       checkBoxValues: [],
       isSpin:false,
       application_list: [],
-      checkAllArray: []
+      checkAllArray: [],
+      filterKey: 1,   // 1 已审批   2  待审批
     }
   }
   onCheckAllChange = (e, item, index) => {
@@ -339,7 +354,7 @@ class studentsList extends Component{
       console.log(error);
     });
   }
-  fetchAll=(argPage)=>{
+  fetchAll = (argPage) => {
     this.setState({
       isSpin:true
     })
@@ -347,9 +362,28 @@ 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;
     }
@@ -358,8 +392,17 @@ class studentsList extends Component{
         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
+        })
+      } 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
         })
       }
@@ -529,13 +572,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 +607,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,12 +649,25 @@ 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>{`
+          .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;
@@ -599,7 +676,7 @@ class studentsList extends Component{
         <div className="mt20 edu-back-white padding20 teacherList">
           <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,14 +704,14 @@ 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>
           <Spin size="large" spinning={this.state.isSpin}>
@@ -642,7 +719,8 @@ class studentsList extends Component{
             <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,