sourcecode/front/project/www/routes/exercise/list/page.js

import React from 'react';
import { Breadcrumb } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
import { formatPercent, formatSeconds, formatDate } from '@src/services/Tools';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
import ListTable from '../../../components/ListTable';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import { Main } from '../../../stores/main';
import { Question } from '../../../stores/question';
import { QuestionDifficult } from '../../../../Constant';

const LOGIC_NO = 'no';
const LOGIC_PLACE = 'place';
const LOGIC_DIFFICULT = 'difficult';
const LOGIC_ERROR = 'error';

export default class extends Page {
  initState() {
    this.columns = [{
      title: '练习册',
      width: 250,
      align: 'left',
      render: (record) => {
        let progress = 0;
        if (record.report) {
          progress = formatPercent(record.report.userNumber, record.report.questionNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16">{record.title}</div>
            <div>
              <ProgressText progress={progress} times={record.paper ? record.paper.finishTimes : 0} size="small" />
            </div>
          </div>
        );
      },
    }, {
      title: '正确率',
      width: 150,
      align: 'left',
      render: (record) => {
        let correct = '--';
        if (record.report) {
          correct = formatPercent(record.report.userCorrect, record.report.userNumber, false);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{correct}</div>
            <div className="f-s-12">全站{formatPercent(record.stat.totalCorrect, record.stat.totalNumber, false)}</div>
          </div>
        );
      },
    }, {
      title: '全站用时',
      width: 150,
      align: 'left',
      render: (record) => {
        let time = '--';
        if (record.report) {
          time = formatSeconds(record.report.userTime / record.report.userNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{time}</div>
            <div className="f-s-12">全站{formatSeconds(record.stat.totalTime / record.stat.totalNumber)}</div>
          </div>
        );
      },
    }, {
      title: '最近做题',
      width: 150,
      align: 'left',
      render: (record) => {
        const time = record.report ? record.report.updateTime : record.paper ? record.paper.latestTime : null;
        return (
          <div className="table-row">
            <div>{time && formatDate(time, 'YYYY-MM-DD')}</div>
            <div>{time && formatDate(time, 'HH:mm')}</div>
          </div>
        );
      },
    }, {
      title: '操作',
      width: 180,
      align: 'left',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {!record.report && <IconButton type="start" tip="Start" onClick={() => {
              Question.startLink('exercise', record);
            }} />}
            {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
              Question.continueLink('exercise', record);
            }} />}
            {(record.report) && <IconButton type="restart" tip="Restart" onClick={() => {
              this.restart(record);
            }} />}
          </div>
        );
      },
    }, {
      title: '报告',
      width: 30,
      align: 'right',
      render: (record) => {
        return (
          <div className="table-row p-t-1">
            {record.report && !!record.report.isFinish && <IconButton type="report" tip="Report" onClick={() => {
              Question.reportLink(record);
            }} />}
          </div>
        );
      },
    }];
    this.placeList = [];
    this.inited = false;
    return {
      logic: LOGIC_NO,
      logicExtend: '',
      logics: [{
        key: LOGIC_NO,
        title: '按顺序练习',
      }, {
        key: LOGIC_PLACE,
        title: '按考点练习',
      }, {
        key: LOGIC_DIFFICULT,
        title: '按难度练习',
      }, {
        key: LOGIC_ERROR,
        title: '按易错度练习',
      }],
    };
  }

  init() {
    const { id } = this.params;
    Main.getExerciseParent(id).then(result => {
      const navs = result.map(row => {
        row.title = row.level > 2 ? row.titleZh : `${row.titleZh}${row.titleEn}`;
        return row;
      });
      this.inited = true;
      this.setState({ navs });
    });
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    this.setState(data);
    this.refreshData();
  }

  refreshData(newLogic) {
    const { logic } = this.state;
    let handler = null;
    switch (newLogic || logic) {
      case LOGIC_PLACE:
        handler = this.refreshPlace();
        break;
      case LOGIC_DIFFICULT:
        handler = this.refreshDifficult();
        break;
      default:
        handler = Promise.resolve();
    }
    handler.then(() => {
      this.refreshExercise();
    });
  }

  refreshPlace() {
    const { id } = this.params;
    let handler;
    if (this.placeList.length > 0) {
      this.setState({ logicExtends: this.placeList });
      handler = Promise.resolve();
    } else {
      handler = Question.getExercisePlace(id).then(result => {
        this.placeList = result.map(row => {
          return {
            name: row,
            key: row,
          };
        });
        this.setState({ logicExtends: this.placeList });
      });
    }
    return handler.then(() => {
      let { logicExtend } = this.state;
      if (logicExtend === '') {
        logicExtend = this.placeList[0].key;
        this.setState({ logicExtend });
      }
    });
  }

  refreshDifficult() {
    let { logicExtend } = this.state;
    this.setState({
      logicExtends: QuestionDifficult.map(difficult => {
        difficult.name = difficult.label;
        difficult.key = difficult.value;
        return difficult;
      }),
    });
    return Promise.resolve().then(() => {
      if (logicExtend === '') {
        logicExtend = QuestionDifficult[0].key;
        this.setState({ logicExtend });
      }
    });
  }

  refreshExercise() {
    const { logic, logicExtend } = this.state;
    Question.getExerciseList(Object.assign({ structId: this.params.id, logic, logicExtend }, this.state.search))
      .then((result) => {
        this.setState({ list: result.list, total: result.total });
      });
  }

  onChangeTab(key, value) {
    const { logic } = this.state;
    const data = {};
    if (key === 'logicExtend') {
      data.logic = logic;
      data.logicExtend = value;
    } else {
      data.logic = value;
    }
    // this.refreshData(tab);
    this.refreshQuery(data);
  }

  restart(item) {
    asyncConfirm('提示', '你打算重做本套练习，过往做题记录可至「个人中心-报告」查看。', () => {
      Question.restart(item.paper.id).then(() => {
        this.refresh();
      });
    });
  }

  renderView() {
    const { logic, logicExtend, logics = [], logicExtends = [], list, search, navs } = this.state;
    const { finish } = search;
    return (
      <div>
        <div className="content">
          <Breadcrumb separator=">">
            <Breadcrumb.Item href="/exercise">练习</Breadcrumb.Item>
            {(navs || []).map(row => {
              return <Breadcrumb.Item>{row.title}</Breadcrumb.Item>;
            })}
          </Breadcrumb>
          <Module className="m-t-2">
            <Tabs
              active={logic}
              border
              width="180px"
              space="0"
              tabs={logics}
              onChange={(key) => {
                this.onChangeTab('logic', key);
              }}
            />
            {logicExtends.length > 0 && <Tabs
              active={logicExtend}
              type="text"
              tabs={logicExtends}
              onChange={(key) => {
                this.onChangeTab('logicExtend', key);
              }}
            />}
          </Module>
          <ListTable
            filters={[
              {
                type: 'radio',
                checked: finish,
                list: [{ key: '0', title: '未完成' }, { key: '1', title: '已完成' }],
                onChange: item => {
                  if (item.key === finish) {
                    this.search({ finish: null });
                  } else if (item.key === '0') {
                    this.search({ finish: 0 });
                  } else if (item.key === '1') {
                    this.search({ finish: 1 });
                  } else {
                    this.search({ finish: null });
                  }
                },
              },
            ]}
            data={list}
            columns={this.columns}
          />
        </div>
      </div>
    );
  }
}