forgeplus-react/src/modules/user/usersInfo/InfosBank.js

import React, { Component } from 'react';
import { Pagination, Spin, Checkbox } from 'antd';
import moment from 'moment';
import axios from 'axios';
import NoneData from '../../courses/coursesPublic/NoneData'
import "./usersInfo.css"
import Modals from '../../modals/Modals'

class InfosBank extends Component {
  constructor(props) {
    super(props);
    this.state = {
      category: "common",
      type: "publicly",
      page: 1,
      per_page: 16,
      sort_by: "updated_at",
      CoursesId: undefined,

      totalCount: undefined,
      data: undefined,
      isSpin: false,

      dialogOpen: false,
      modalsTopval: undefined,
      modalsBottomval: undefined,
      modalSave: undefined
    }
  }

  componentDidMount = () => {
    this.setState({
      isSpin: true
    })
    let { category, type, page, sort_by, CoursesId } = this.state;
    this.getCourses(category, type, page, sort_by, CoursesId);
  }

  getCourses = (category, type, page, sort_by, CoursesId) => {
    let url = `/users/${this.props.match.params.username}/question_banks.json`;
    axios.get((url), {
      params: {
        category,
        type,
        page,
        sort_by,
        per_page: category && page == 1 ? 17 : 16,
        course_list_id: CoursesId
      }
    }).then((result) => {
      if (result) {
        this.setState({
          totalCount: result.data.count,
          data: result.data,
          isSpin: false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  //切换种类
  changeCategory = (cate) => {
    this.setState({
      category: cate,
      page: 1,
      isSpin: true
    })
    let { type, sort_by, CoursesId } = this.state;
    this.getCourses(cate, type, 1, sort_by, CoursesId);
  }
  //切换状态
  changeType = (type) => {
    this.setState({
      type: type,
      page: 1,
      isSpin: true
    })
    let { category, sort_by, CoursesId } = this.state;
    this.getCourses(category, type, 1, sort_by, CoursesId);
  }
  //切换页数
  changePage = (page) => {
    this.setState({
      page,
      isSpin: true
    })
    let { category, type, sort_by, CoursesId } = this.state;
    this.getCourses(category, type, page, sort_by, CoursesId);
  }

  // 进入课堂
  turnToCourses = (url) => {
    this.props.history.push(url);
  }

  // 切换排序方式
  changeOrder = (sort) => {
    this.setState({
      sort_by: sort,
      isSpin: true
    })
    let { category, type, page, CoursesId } = this.state;
    this.getCourses(category, type, page, sort, CoursesId);
  }

  changeCourseListId = (CoursesId) => {
    this.setState({
      CoursesId,
      isSpin: true
    })
    let { category, type, sort, page } = this.state;
    this.getCourses(category, type, page, sort, CoursesId);
  }

  //设为公开/删除
  setPublic = (index) => {
    this.setState({
      dialogOpen: true,
      modalsTopval: index == 1 ? "您确定要公开吗？" : "确定要删除该题吗？",
      modalsBottomval: index == 1 ? "公开后不能重设为私有" : "",
      modalSave: () => this.sureOperation(index)
    })
  }
  // 确定--设为公开/删除
  sureOperation = () => {

  }

  //弹框隐藏
  handleDialogClose = () => {
    this.setState({
      dialogOpen: false
    })
  }

  render() {
    let {
      category,
      type,
      page,
      data,
      totalCount,
      sort_by,
      isSpin,
      CoursesId,
      dialogOpen,
      modalsTopval,
      modalsBottomval, modalSave
    } = this.state;
    let is_current = this.props.is_current;
    return (
      <div className="educontent">
        <Modals
          modalsType={dialogOpen}
          modalsTopval={modalsTopval}
          modalsBottomval={modalsBottomval}
          modalCancel={this.handleDialogClose}
          modalSave={modalSave}
        ></Modals>
        <Spin size="large" spinning={isSpin}>
          <div className="white-panel edu-back-white pt20 pb20 clearfix ">
            <li className={type === "publicly" ? "active" : ""}><a onClick={() => this.changeType("publicly")}>{is_current ? "我" : "TA"}的题库</a></li>
            <li className={type === "personal" ? "active" : ""}><a onClick={() => this.changeType("personal")}>公共题库</a></li>
          </div>
          <div className="edu-back-white padding10-30 bor-top-greyE">
            <ul className="clearfix secondNav">
              <li className={category === "common" ? "active" : ""}><a onClick={() => this.changeCategory("common")}>普通作业</a></li>
              <li className={category === "group" ? "active" : ""}><a onClick={() => this.changeCategory("group")}>分组作业</a></li>
              <li className={category === "exercise" ? "active" : ""}><a onClick={() => this.changeCategory("exercise")}>试卷</a></li>
              <li className={category === "poll" ? "active" : ""}><a onClick={() => this.changeCategory("poll")}>问卷</a></li>
            </ul>
            <div className="edu-txt-left mt10 bankTag">
              <ul className="inline" id="sourceTag">
                <li className={CoursesId ? "" : "active"} onClick={() => this.changeCourseListId()}>
                  <a  >全部</a>
                </li>
                {
                  data && data.course_list && data.course_list.map((item, key) => {
                    return (
                      <li className={CoursesId === item.id ? "active" : ""} key={key} onClick={() => this.changeCourseListId(`${item.id}`)}>
                        <a  >{item.name}</a>
                      </li>
                    )
                  })
                }
              </ul>
            </div>
          </div>
          <p className="pl25 pr25 clearfix font-12 mb20 mt20">
            <span className="fl color-grey-9">共参与{totalCount}个题库</span>
            <div className="fr">
              <li className="drop_down">
                <span className="color-grey-9 font-12">{sort_by === "updated_at" ? "时间最新" : sort_by == "name" ? "作业名称" : "贡献者"}</span><i className="iconfont icon-xiajiantou font-12 ml2 color-grey-6"></i>
                <ul className="drop_down_normal">
                  <li onClick={() => this.changeOrder("updated_at")}>时间最新</li>
                  <li onClick={() => this.changeOrder("name")}>作业名称</li>
                  <li onClick={() => this.changeOrder("contributor")}>贡献者</li>
                </ul>
              </li>
            </div>
          </p>
          <div className="dataBank_list edu-back-white educontent">
            {
              !data || data.question_banks.length === 0 && <NoneData></NoneData>
            }
            {
              data && data.question_banks && data.question_banks.map((item, key) => {
                return (
                  <div className="dataBank_Item clearfix" key={key}>
                    <div className="fl dataItemLeft">
                      <Checkbox value={item.id} key={item.id}></Checkbox>
                    </div>
                    <div className="fr dataItemRight bank_item">
                      <p className="mb10 clearfix">
                        <span className="dataTitle fl mr80">{item.name}</span>
                        <a data-object="2599" className="bank_send fr">发送</a>
                        {
                          item.is_public === false ?
                            <a onClick={() => this.setPublic(1)} className="bank_public color-blue_4C fr mr60">设为公开</a> : ""
                        }
                      </p>
                      <p className="itembottom clearfix">
                        <span className="fl bottomspan color-grey-9">{item.quotes_count}次引用</span>
                        <span className="fl bottomspan color-grey-9">{item.solve_count}次答题</span>
                        <span className="fl bottomspan color-grey-9">{moment(item.updated_at).format('YYYY-MM-DD HH:mm')}</span>
                        <span className="fr"><a className="bank_delete color-grey-9" onClick={() => this.setPublic(2)}>删除</a></span>
                        <span className="bank_list_Tag">{item.course_list_name}</span>
                      </p>
                    </div>
                  </div>
                )
              })
            }
          </div>
          {
            totalCount > 15 &&
            <div className="mt30 mb50 edu-txt-center">
              <Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={16} current={page} />
            </div>
          }
        </Spin>
      </div>
    )
  }
}
export default InfosBank;