educoder/public/react/src/modules/courses/poll/PollDetailTabFirst.js

import React,{ Component } from "react";
import {Checkbox,Input,Table, Pagination} from "antd";

import { WordsBtn } from 'educoder'
import moment from 'moment';
import CheckAllGroup from '../common/button/CheckAllGroup'
import NoneData from "../coursesPublic/NoneData"

import '../css/members.css'
import '../css/busyWork.css'
import './pollStyle.css'

import axios from 'axios'

const Search=Input.Search;
function formatDuring(mss){
  var days = parseInt(mss / (1000 * 60 * 60 * 24));
  var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
  return days + "天" + hours + "小时" + minutes + "分";
}
class PollDetailTabFirst extends Component{
  constructor(props){
    super(props);
    this.state={
      order:"end_at",
      search:undefined,
      commit_status:[],
      poll_group_id:[],
      page:1,
      limit:20,
      dataInfo:undefined,
      data:undefined,
      poll_types:undefined,
      course_groups:undefined,
      options_Class:[],
      poll_end_at:""
    }
  }
  // 搜索框搜索
  inputStudent=(e)=>{
    this.setState({
      search:e.target.value
    })
  }
  searchInfo=()=>{
    let{order,search,commit_status,poll_group_id,page}=this.state
    this.getTableList(order,search,commit_status,poll_group_id,page);
  }

  // 获取接口数据
  getTableList=(order,search,commit_status,poll_group_id,page)=>{
    let pollId=this.props.match.params.pollId;
    let courseid=this.props.match.params.coursesId;
    let url=`/polls/${pollId}/poll_lists.json`;
    
    axios.get((url),{
      params:{
        limit:this.state.limit,
        order:order,
        search:search,
        commit_status:commit_status,
        poll_group_id:poll_group_id,
        page:page
      }
    }).then((result)=>{
      if(result){
        let list=[];
        let users=result.data.poll_users;
        let{page,limit}=this.state;
        if(users.length!=0){
          for(var i=0;i<users.length;i++){
            list.push({
              No:(parseInt(page)-1)*parseInt(limit)+(i+1),
              name:users[i].user_name,
              StudentNo:users[i].student_id,
              classes:users[i].user_group_name,
              status:users[i].commit_status ,
              time:users[i].end_at ,
              operation:users[i].commit_status,
              login:users[i].login
            })
          }
        }
        let classes=[];
        let groups=result.data.course_groups;
        if(groups){
          for(var i=0;i<groups.length;i++){
            classes.push({
              value:groups[i].course_group_id,
              label:groups[i].group_group_name+"("+groups[i].count+")"
            })
          }
        }
        let endTime=result.data.poll_types.poll_end_time;
        if(endTime!=undefined && endTime!=""){
          let t= moment(endTime,'YYYY-MM-DD HH:mm') - moment();
          endTime=t > 0 ? formatDuring(t) : "0";
        }

        this.setState({
          poll_end_at:endTime,
          dataInfo:result.data.poll_users,
          data:list,
          poll_types:result.data.poll_types,
          course_groups:result.data.course_groups,
          options_Class:classes
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  componentDidMount(){
    let {order,search,commit_status,poll_group_id,page}=this.state;
    this.getTableList(order,search,commit_status,poll_group_id,page);
  }

  // 翻页
  changePage=(pageNumber)=>{
    this.setState({
      page:pageNumber
    })
    let {order,search,commit_status,poll_group_id}=this.state;
    this.getTableList(order,search,commit_status,poll_group_id,pageNumber);
  }

  //排序
  changeOrder=(order)=>{
    this.setState({
      order:order
    })
    let {search,commit_status,poll_group_id,page}=this.state;
    this.getTableList(order,search,commit_status,poll_group_id,page);
  }
  //选择分班情况
  classOptionsChange = (values,all) => {
    let status= all == false ? values : [];
    this.setState({
      poll_group_id:status
    })
    let {order,search,commit_status,page}=this.state;
    this.getTableList(order,search,commit_status,status,page);
  }
  //选择提交状态
  statusOptionChange=(values,all)=>{
    let status= all == false ? values : [];
    this.setState({
      commit_status:status
    })
    let {order,search,poll_group_id,page}=this.state;
    this.getTableList(order,search,status,poll_group_id,page);
  }

  render(){
    let {order,search,data,page,limit,course_groups,poll_types,options_Class,dataInfo,poll_end_at}=this.state;
    const isAdmin =this.props.isAdmin();
    const isStudent = this.props.isStudent();

    //分班
    const options_status = [
      { label: `未提交(${poll_types && poll_types.unanswer_users})`, value: '0' },
      { label: `按时提交(${poll_types && poll_types.answer_users})`, value: '1' }
    ];

    // 表格
    let columns = [{
      title: '序号',
      dataIndex: 'No',
      key: 'No',
      className:"edu-txt-center",
      width:110
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      className:"edu-txt-center",
      width:160
    }, {
      title: '学号',
      dataIndex: 'StudentNo',
      key: 'StudentNo',
      className:"edu-txt-center",
      render:(StudentNo,item,index)=>{
        return(
          item.StudentNo ? <span>{item.StudentNo}</span> : "--"
        )
      }
    }, {
      title: '分班',
      key: 'classes',
      dataIndex: 'classes',
      width:160,
      className:poll_types && poll_types.groups_count > 0 ? "edu-txt-center":"edu-txt-center none",
      render:(classes,item,index)=>{
        return(
          item.classes ? <span>{item.classes}</span> : <span className="color-grey-9">--</span>
        )
      }
    }, {
      title: '提交状态',
      dataIndex: 'status',
      key: 'status',
      className:"edu-txt-center",
      width:160,
      render:(status,item,index)=>{
        return(
          item.status == 1 ?<span className='color-green'>按时提交</span>:<span>未提交</span>
        )
      }
    }, {
      title: '提交时间',
      dataIndex: 'time',
      key: 'time',      
      className:"edu-txt-center",
      width:160,
      render:(time,item,index)=>{
        return(
          item.time == null ? <span className="color-grey-9">--</span> : moment(item.time).format('YYYY-MM-DD HH:mm')
        )
      }
    },{
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      className:"edu-txt-center",
      width:120,
      render:(operation,item,index)=>{
        return(
          item.status == 1 ? <WordsBtn style="blue" to={`/courses/${this.props.match.params.coursesId}/polls/${this.props.match.params.pollId}/users/${item.login}`}>查看</WordsBtn>:<span className="color-grey-9">--</span>
        )
      }
    }];
    // 非课堂成员不显示学号列
    let isNotMember =this.props.isNotMember();
    if(isNotMember){
      columns.some((item,key)=> {
        if (item.title === "学号") {
         columns.splice(key, 1)
         return true
        }
       }
      )
    }
    // un_anonymous true为实名问卷，显示操作列，否则隐藏
    if(poll_types && (isNotMember || poll_types.un_anonymous == false)){
      columns.some((item,key)=> {
        if (item.title === "操作") {
         columns.splice(key, 1)
         return true
        }
       }
      )
    }
    return(
          <div>
          {
            isAdmin ?
            <div className="pt30 pl30 clearfix edu-back-white">
              <div className="pr30 clearfix">
                <p className="fl mt5">
                  <CheckAllGroup options={options_status} label={'答题状态：'} onChange={this.statusOptionChange}></CheckAllGroup>
                </p>
                <div className="fr searchView height30">
                  <Search
                    value={search}
                    placeholder="请输入姓名或学号搜索"
                    onInput={this.inputStudent}
                    onSearch={this.searchInfo}
                  ></Search>
                </div>
              </div>
              {
                course_groups && course_groups.length > 1 ? 
                <div className="mt15">
                  <CheckAllGroup options={options_Class} label={'分班情况：'} onChange={this.classOptionsChange}></CheckAllGroup>
                </div>
                :""
              }
              
            </div>:""
          }
          
          <div className="clearfix padding20-30 edu-back-white">
            {
              isAdmin ? <span className="fl color-grey-3 font-12"><span className="color-orange-tip">{poll_types && poll_types.total_users}</span>个检索结果（{poll_types && poll_types.poll_users_count} 学生）</span> :""
            }
            {
              isStudent ? 
              <span className="fl color-grey-3 font-12">
								{poll_types && poll_types.answer_users===undefined?"":<span className="mr15"><span className="color-orange-tip">{poll_types && poll_types.answer_users}</span> 已交</span>}
								{poll_types && poll_types.unanswer_users===undefined?"":<span className="mr15">{poll_types && poll_types.unanswer_users} 未交</span>}
                {
                  poll_end_at != "0" ?
                    <span className="color-grey-9"> 剩余提交时间：<span className="color-orange-tip">{poll_end_at}</span></span>
                  :"" 
                }
              </span>
              :"" 
            }
            {
              isAdmin && 
              <div className="fr">
                <li className="drop_down">
                  <span className="color-grey-9 font-12">{order=="end_at"?"提交时间":"学生学号"}</span><i className="iconfont icon-xiajiantou font-12 ml2 color-grey-6"></i>
                  <ul className="drop_down_normal">
                    <li onClick={()=>this.changeOrder("end_at")}>提交时间</li>
                    <li onClick={()=>this.changeOrder("student_id")}>学生学号</li>
                  </ul>
                </li>
              </div>
            }
          </div>
          <div className="edu-table edu-back-white minH-560">
            {
              data && data.length>0 ?<Table columns={columns} dataSource={data} pagination={false}></Table> :<NoneData></NoneData>
            }
          </div>
          {
            poll_types && poll_types.total_users && poll_types.total_users > limit ? 
            <div className="edu-txt-center mt30 mb50">
              <Pagination showQuickJumper current={page} onChange={this.changePage} pageSize={limit} total={poll_types.total_users}></Pagination>
            </div>:""
          }
        </div>
    )
  }
}
export default PollDetailTabFirst;