sourcecode/front/project/www/routes/textbook/topic/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 { TextbookSubject, TextbookQuality, TextbookType } from '../../../../Constant';
import { getMap, formatDate } from '../../../../../src/services/Tools';

const TextbookSubjectMap = getMap(TextbookSubject, 'value', 'label');
const TextbookQualityMap = getMap(TextbookQuality, 'value', 'label');
const TextbookTypeMap = getMap(TextbookType, 'value', 'label');

export default class extends Page {
  initState() {
    return {
      subject: TextbookSubject[0].value,
      textbookSubject: TextbookSubject.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
      textbookQuality: TextbookQuality.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
      textbookType: TextbookType.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
      defaultSortMap: { no: 'desc' },
    };
  }

  init() {
    this.baseColumns = [
      {
        title: '文章编号',
        key: 'no',
        sort: true,
        render: (text) => {
          return <Link to={`/textbook/topic/detail/${this.params.subject}?no=${text}`}>{text}</Link>;
        },
      },
      { title: '关键词', key: 'keyword', render: (text) => (this.params.subject === 'quant' ? TextbookTypeMap[text] : text) },
      { title: '机经质量', key: 'quality', render: (text) => TextbookQualityMap[text] || '' },
    ];
    this.quantColumns = [
      {
        title: '题号',
        key: 'no',
        sort: true,
        render: (text) => {
          return <Link to={`/textbook/topic/detail/${this.params.subject}?no=${text}`}>{text}</Link>;
        },
      },
      { title: '题型', key: 'keyword', render: (text) => (this.params.subject === 'quant' ? TextbookTypeMap[text] : text) },
      { title: '机经质量', key: 'quality', render: (text) => TextbookQualityMap[text] || '' },
    ];
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
    Textbook.getInfo()
      .then(result => {
        if (!result.hasService) {
          linkTo('/textbook');
        }
        this.setState({ data: result });
      });
  }

  initData() {
    const { subject } = this.params;
    const data = Object.assign(this.state, this.state.search);
    console.log(data);
    data.filterMap = this.state.search;
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    } else if (data.order !== null && data.order !== '') {
      data.sortMap = Object.assign({}, this.state.defaultSortMap);
      data.order = 'no';
      data.direction = 'desc';
    }
    this.setState(data);
    Textbook.listTopic(Object.assign({ latest: true, subject, order: data.order, direction: data.direction }, this.state.search, { isOld: data.month === '2' ? true : (data.month === '1' ? false : null) }))
      .then(result => {
        if (this.state.search.page === 1) {
          result.list = result.list.map(row => {
            row.new = '';
            return row;
          });
        }
        this.setState({ list: result.list, total: result.total });
      });
  }

  filter(data) {
    data.page = 1;
    this.search(data);
  }

  onSort(value) {
    const keys = Object.keys(value);
    const { sortMap, defaultSortMap } = this.state;
    const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
    let order = keys.length && value[keys[index]] ? keys[index] : null;
    let direction = keys.length ? value[keys[index]] : null;
    if (order == null) {
      const [prevOrder] = Object.keys(sortMap);
      console.log(prevOrder, defaultSortMap[prevOrder]);
      if (!defaultSortMap[prevOrder]) {
        [order] = Object.keys(defaultSortMap);
        direction = defaultSortMap[order];
      }
    }
    this.search({ order, direction }, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page });
  }

  changeSubject(subject) {
    linkTo(`/textbook/topic/list/${subject}`);
  }

  renderView() {
    const { subject } = this.params;
    const { base = {}, textbookSubject, textbookQuality, textbookType, keyword, quality, month, data = {}, list = [], page, total, sortMap } = this.state;
    const { latest = {} } = data;
    return (
      <div>
        <div className="top content t-8">
          <Link to="/textbook">机经</Link> > 本期机经 > <span className="t-1">{TextbookSubjectMap[subject]}</span>
          <Select className="f-r m-t-1" size="small" theme="white" value={subject} list={textbookSubject} onChange={({ key }) => this.changeSubject(key)} />
        </div>
        <div className="center content">
          <div className="t-1 t-s-18 m-b-1">
            【{TextbookSubjectMap[subject]}】{latest.startDate && formatDate(latest.startDate, 'MMDD')} 起{TextbookSubjectMap[subject]}机经整理
            <Select className="f-r m-l-1" size="small" theme="default" value={quality} placeholder={'机经质量'} list={textbookQuality} onChange={({ key }) => this.filter({ quality: key })} />
            <Select
              className="f-r m-l-1"
              size="small"
              theme="default"
              value={month}
              list={[{ title: '全部', key: '' }, { title: '本月', key: '1' }, { title: '考古', key: '2' }]}
              onChange={({ key }) => this.filter({ month: key })}
            />
            {subject === 'quant' && <Select
              className="f-r m-l-1"
              size="small"
              theme="default"
              value={keyword}
              list={textbookType}
              placeholder={'题型'}
              onChange={({ key }) => this.filter({ keyword: key })}
            />}
          </div>
          <UserTable
            size="small"
            data={list}
            sortMap={sortMap}
            onSort={v => this.onSort(v)}
            current={page}
            pageSize={this.state.size}
            total={total}
            onChange={p => this.onChangePage(p)}
            jump
            columns={subject === 'quant' ? this.quantColumns : this.baseColumns}
          />
        </div>
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }
}