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

import React from 'react';
import { Breadcrumb, Switch } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import { asyncConfirm, asyncSMessage } from '@src/services/AsyncTools';
import { formatPercent, formatSeconds, formatDate } from '@src/services/Tools';
import ListTable from '../../../components/ListTable';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import Button from '../../../components/Button';
import { DownloadModal } from '../../../components/OtherModal';
import { Question } from '../../../stores/question';
import { Textbook } from '../../../stores/textbook';
import Select from '../../../components/Select';
import { TextbookMinYear } from '../../../../Constant';

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.resetTimes : 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.inited = false;
    const year = [];
    const nowYear = new Date().getFullYear();
    for (let i = TextbookMinYear; i <= nowYear; i += 1) {
      year.push({
        title: i.toString(),
        key: i.toString(),
      });
    }
    return {
      yearList: year,
    };
  }

  initData() {
    const { search } = this.state;
    const info = {};
    info.latest = search.latest ? Number(search.latest) : 0;
    info.logic = search.logic ? search.logic : 'ds';
    info.year = search.year ? search.year : new Date().getFullYear().toString();
    const data = Object.assign(this.state, this.state.search);
    data.info = info;
    this.setState(data);
    this.refreshData();
  }

  refreshData() {
    Textbook.getInfo().then((result) => {
      this.setState({ textbook: result });
    });
    this.refreshTextbook();
  }

  refreshTextbook() {
    Textbook.listPaper(Object.assign({ year: new Date().getFullYear().toString() }, this.state.search, this.state.info))
      .then((result) => {
        this.setState({ list: result });
      })
      .catch(err => {
        asyncSMessage(err.message, 'warn');
        linkTo('/examination');
      });
  }

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

  subscribe(value) {
    Textbook.subscribe(value)
      .then(() => {
        this.refresh();
      })
      .catch(err => {
        asyncSMessage(err.message, 'warn');
      });
  }

  renderView() {
    const { list, search, info = {}, textbook = {}, showDownload } = this.state;
    const { finish } = search;
    return (
      <div>
        <div className="content">
          <div className="textbook-head">
            <Breadcrumb separator=">">
              <Breadcrumb.Item href="/examination">模考</Breadcrumb.Item>
              <Breadcrumb.Item href="/examination?tab1=textbook">数学机经</Breadcrumb.Item>
              <Breadcrumb.Item>{info.latest ? '最新' : '往期'}</Breadcrumb.Item>
              <Breadcrumb.Item>{info.logic ? info.logic.toUpperCase() : ''}</Breadcrumb.Item>
            </Breadcrumb>
            {!!info.latest && !!textbook.latest && <div className='textbook-time'>最近更新：{formatDate(textbook.latest.updateTime, 'YYYY-MM-DD')}</div>}
          </div>
          <ListTable
            rightAction={<div>
              {!!info.latest && <span>邮箱订阅<Switch checked={textbook.subscribe} onChange={() => {
                this.subscribe(!textbook.subscribe);
              }} /></span>}
              {!!info.latest && <Button radius onClick={() => {
                this.setState({ showDownload: true });
              }}>下载</Button>}
              {!info.latest && <Select value={info.year} theme="default" list={this.state.yearList || []} onChange={(item) => {
                this.search({ year: item.key });
              }} />}
            </div>}
            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>
        <DownloadModal
          show={showDownload}
          data={textbook.latest}
          onConfirm={() => this.setState({ showDownload: false })}
          onCancel={() => this.setState({ showDownload: false })}
          onClose={() => this.setState({ showDownload: false })}
        />
      </div>
    );
  }
}