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

import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Select from '../../../components/Select';
import UserTable from '../../../components/UserTable';
import { Textbook } from '../../../stores/textbook';
import { Main } from '../../../stores/main';
import { TextbookMinYear, TextbookSubject } from '../../../../Constant';
import { formatDate } from '../../../../../src/services/Tools';

export default class extends Page {
  initState() {
    const yearList = [];
    const nowYear = new Date().getFullYear();
    for (let i = TextbookMinYear; i <= nowYear; i += 1) {
      yearList.push({
        title: i.toString(),
        key: i.toString(),
      });
    }
    return {
      subject: TextbookSubject[0].value,
      year: nowYear,
      yearList,
      textbookSubject: TextbookSubject.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
    };
  }

  init() {
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    data.filterMap = this.state.search;
    this.setState(data);
    Textbook.getInfo()
      .then(result => {
        this.setState(result);
      });
    console.log(this.state);
    this.refreshYear(this.state.year);
  }

  refreshYear(year) {
    this.setState({ year });
    Textbook.listYear(year)
      .then((list) => {
        const monthMap = {};
        let lastTime = null;
        list.forEach((row) => {
          const d = new Date(row.startDate);
          const month = d.getMonth() + 1;
          row.month = month;
          if (lastTime) {
            row.period = parseInt((d.getTime() - lastTime.getTime()) / 86400000, 10) - 1;
          } else {
            row.period = 0;
          }
          lastTime = d;
          if (!monthMap[month]) {
            monthMap[month] = [];
          }
          monthMap[month].push(d.getDate());
        });
        this.setState({ monthMap, list });
      });
  }

  renderView() {
    const { base = {}, yearList, year, monthMap, list } = this.state;
    return (
      <div>
        <div className="top content t-8">
          <Link to="/textbook">机经</Link> > <span className="t-1">按年份查询</span>
        </div>
        <div className="center content">
          <div className="t-1 t-s-18 m-b-1">
            GMAT历年换库记录
            <Select className="f-r" size="small" theme="default" value={year} placeholder={'年份'} list={yearList} onChange={({ key }) => this.refreshYear(key)} />
          </div>
          <UserTable
            size="small"
            data={list}
            columns={[
              { title: '更新时间', key: 'startDate', render: (text) => formatDate(text, 'YYYY-MM-DD') },
              { title: '间隔天数', key: 'period' },
              { title: '当月换库次数(次)', key: 'month', render: (text) => (monthMap[text] ? monthMap[text].length : 0) },
            ]}
          />
        </div>
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }
}