sourcecode/front/project/www/routes/my/collect/page.js

import React, { Component } from 'react';
import './index.less';
import { Icon, Checkbox } from 'antd';
import Page from '@src/containers/Page';
import { timeRange } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import menu, { refreshQuestionType, refreshStruct } from '../index';
import Tabs from '../../../components/Tabs';
import Modal from '../../../components/Modal';
import Select from '../../../components/Select';
import GIcon from '../../../components/Icon';
import { TimeRange } from '../../../../Constant';
import { My } from '../../../stores/my';

const columns = [
  { key: 'question_type', title: '题型', fixSort: true },
  { key: 'title', title: '题目ID', fixSort: true },
  { key: 'description', title: '内容' },
  { key: 'time', title: '耗时', sort: true },
  { key: 'correct', title: '错误率', sort: true },
  { key: 'latest_time', title: '最近做题' },
  {
    key: '',
    title: '',
    render() {
      return <GIcon name="note" />;
    },
  },
];

const exportType = [
  { key: '1', title: '题目' },
  { key: '2', title: '官方解析' },
  { key: '3', title: '我的笔记' },
  { key: '4', title: '千行解析', auth: true },
  { key: '5', title: '题源联想', auth: true },
  { key: '6', title: '相关问答', auth: true },
];

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  initState() {
    return {
      tab: 'question',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      data: [{}, {}],
      selectList: [],
      allChecked: false,
      showDetail: false,
    };
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    data.filterMap = this.state.search;
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    if (data.timerange) {
      data.filterMap.timerange = data.timerange;
    }
    switch (data.tab) {
      case 'question':
        return this.refreshQuestion(data);
      case 'article':
        return this.refreshArticle(data);
      default:
        return null;
    }
  }

  refreshQuestion(data) {
    const [startTime, endTime] = timeRange(data.timerange);
    refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: true, allSubject: true })
      .then(({ questionTypes }) => {
        return refreshStruct(this, data.tab, data.one, data.two, {
          all: true, needPreview: false, needTextbook: true,
        })
          .then(({ structIds, latest, year }) => {
            My.listQuestionCollect(Object.assign({ module: data.tab, questionTypes, structIds, latest, year, startTime, endTime }, this.state.search, {
              order: Object.keys(data.sortMap).map(key => {
                if (key === 'title') return 'pid desc, no desc';
                return `${key} ${data.sortMap[key]}`;
              }).join(','),
            })).then(result => {
              this.setState({ list: result.list, total: result.total });
            });
          });
      });
  }

  refreshArticle(data) {
    const [startTime, endTime] = timeRange(data.timerange);
    My.listExperienceCollect(Object.assign({ startTime, endTime }, this.state.search)).then(result => {
      this.setState({ list: result.list, total: result.total });
    });
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  onFilter(value) {
    this.search(value);
  }

  onSort(value) {
    const keys = Object.keys(value);
    // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
    const { sortMap } = this.state;
    const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
    this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null });
  }

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

  onAll(checked) {
    if (checked) {
      const { data = [] } = this.state;
      const list = [];
      data.forEach(item => {
        list.push(item.key);
      });
      this.setState({ selectList: list, allChecked: true });
    } else {
      this.setState({ selectList: [], allChecked: false });
    }
  }

  onAction() { }

  onSelect(selectList) {
    this.setState({ selectList });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { tab } = this.state;
    return (
      <div className="table-layout">
        <Tabs
          border
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={tab}
          tabs={[{ key: 'question', title: '题目' }, { key: 'article', title: '文章' }]}
          onChange={key => this.onChangeTab(key)}
        />
        {this[`renderTab${tab}`]()}
        {this.renderModal()}
      </div>
    );
  }

  renderTabquestion() {
    const { questionSubjectSelect, questionSubjectMap = {}, oneSelect, twoSelectMap = {}, filterMap = {}, sortMap = {}, list = [] } = this.state;
    const { selectList = [], allChecked, page, total } = this.state;
    return (
      <div className="tab-1-layout">
        <UserAction
          search
          selectList={[{
            children: [{
              key: 'subject',
              placeholder: '学科',
              select: questionSubjectSelect,
            }, {
              placeholder: '题型',
              key: 'questionType',
              be: 'subject',
              selectMap: questionSubjectMap,
            }],
          }, {
            label: '范围',
            children: [{
              key: 'one',
              placeholder: '全部',
              select: oneSelect,
            }, {
              key: 'two',
              be: 'one',
              placeholder: '全部',
              selectMap: twoSelectMap,
            }],
          }, {
            right: true,
            key: 'timerange',
            select: TimeRange,
          }]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <UserAction
          allCheckbox
          allChecked={allChecked}
          help
          btnList={[
            { title: '移除', key: 'remove' },
            { title: '组卷', key: 'group', tag: 'vip' },
            { title: '导出', key: 'export', tag: 'vip', disabled: true },
          ]}
          right={
            <div className="tip">
              2019-06-03 15：30 组卷50题，做对30题。<span>移除正确题目</span> or <span>忽略</span>
            </div>
          }
          onAll={checked => this.onAll(checked)}
          onAction={key => this.onAction(key)}
        />
        <UserTable
          select
          columns={columns}
          sortMap={sortMap}
          data={list}
          current={page}
          total={total}
          selectList={selectList}
          onSelect={l => this.onSelect(l)}
          onSort={v => this.onSort(v)}
          onChange={p => this.onChangePage(p)}
        />
      </div>
    );
  }

  renderTabarticle() {
    const { filterMap = {}, sortMap = {} } = this.state;
    return (
      <div className="tab-1-layout">
        <UserAction
          selectList={[
            {
              key: 'one',
              right: true,
              select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
            },
          ]}
          sortList={[
            {
              key: '1',
              label: '收藏时间',
            },
            {
              key: '2',
              label: '更新时间',
            },
          ]}
          sortMap={sortMap}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onSort={value => this.onSort(value)}
        />
        {[{}, {}, {}].map(item => {
          return <Article data={item} onClick={() => this.setState({ showDetail: true })} />;
        })}
      </div>
    );
  }

  renderModal() {
    return [
      <ArticleDetail show={this.state.showDetail} onClose={() => this.setState({ showDetail: false })} />,
      <Modal title="操作提示" confirmText="好的，知道了" btnAlign="center" onConfirm={() => { }}>
        <div className="flex-layout m-b-2">
          <div className="flex-block">
            <div className="t-1 t-s-18">组卷功能</div>
            <div className="t-2">操作数量：10-50；</div>
            <div className="t-2">注意事项：可跨题型、不可跨学科。</div>
          </div>
          <div className="flex-block">
            <div className="t-1 t-s-18">导出功能</div>
            <div className="t-2">操作数量：1-100；</div>
            <div className="t-2">注意事项：“综合推理IR”暂时无法导出。</div>
          </div>
        </div>

        <div className="t-3">
          *您可点击
          <Icon type="question-circle" theme="filled" />
          查阅以上信息。
        </div>
      </Modal>,
      <Modal title="组卷练习" confirmText="好的，知道了" btnAlign="center" onConfirm={() => { }}>
        <div className="t-2 t-s-18">不可同时选中语文题和数学题，请重新选择。</div>
      </Modal>,
      <Modal title="组卷练习" confirmText="开始练习" onConfirm={() => { }} onCancel={() => { }}>
        <div className="t-2 t-s-18">
          您共选择了 <span className="t-4">50</span> 道题目，是否开始练习？
        </div>
        <div className="t-2 t-s-16">
          <Checkbox checked className="m-r-5" />
          剔除已组卷练习 <Select
            theme="white"
            value="1"
            list={[{ key: '1', title: '2' }, { key: '2', title: '3' }]}
          />{' '}
          次以上的错题
        </div>
      </Modal>,
      <Modal title="移出" onConfirm={() => { }} onCancel={() => { }}>
        <div className="t-2 t-s-18">
          当前选中的 <span className="t-4">50</span> 道题即将被移出错题本，移出后无法恢复，是否继续？
        </div>
      </Modal>,
      <Modal title="导出" confirmText="好的，知道了" btnAlign="center" onConfirm={() => { }}>
        <div className="t-2 t-s-18">正在下载中，请不要关闭当前页面！</div>
      </Modal>,
      <Modal title="导出" confirmText="导出" onConfirm={() => { }} onCancel={() => { }}>
        <div className="t-2 t-s-18 m-b-5">
          当前共选中 <span className="t-4">50</span> 道题，请确认需要导出的内容：
        </div>
        <div className="t-2 t-s-16">
          {exportType.map(item => {
            return (
              <div className="d-i-b m-b-5" style={{ width: 135 }}>
                <Checkbox checked className="m-r-5" />
                {item.title}
              </div>
            );
          })}
        </div>
      </Modal>,
      <Modal title="导出" confirmText="导出" onConfirm={() => { }} onCancel={() => { }}>
        <div className="t-2 t-s-18 m-b-5">
          当前共选中 <span className="t-4">50</span> 道题，请确认需要导出的内容：
        </div>
        <div className="t-2 t-s-16 m-b-2">
          {exportType
            .filter(item => !item.auth)
            .map(item => {
              return (
                <div className="d-i-b m-b-2" style={{ width: 135 }}>
                  <Checkbox checked className="m-r-5" />
                  {item.title}
                </div>
              );
            })}
        </div>
        <div className="b-b m-b-2 m-t-2" />
        <div className="t-3 m-b-1">
          以下内容需实名认证后才可导出: <a className="f-r">去认证 ></a>
        </div>
        <div className="t-2 t-s-16 m-b-2">
          {exportType
            .filter(item => item.auth)
            .map(item => {
              return (
                <div className="d-i-b" style={{ width: 135 }}>
                  <Checkbox disabled className="m-r-5" />
                  {item.title}
                </div>
              );
            })}
        </div>
      </Modal>,
    ];
  }
}

class ArticleDetail extends Component {
  render() {
    const { show, onClose, onPrev, onNext } = this.props;
    return (
      <Modal
        className="article-detail-modal"
        body={false}
        show={show}
        width={720}
        maskClosable
        close={false}
        onClose={onClose}
        center
      >
        <Icon type="left" className="prev" onClick={() => onPrev && onPrev()} />
        <Icon type="right" className="next" onClick={() => onNext && onNext()} />
        <div className="t-1 t-s-20 m-b-5">文章标题文章标题文章标题文章标题文章标题文章标题</div>
        <div className="t-1 t-s-12 m-b-2">
          <span className="m-r-2">翻翻le</span>
          <span className="m-r-2">学生-D</span>
          <span className="m-r-2">备考:2个月</span>
          <span className="m-r-2">750分 /提分 150+</span>
          <span className="t-4">更多信息</span>
        </div>
        <div className="t-2 t-s-18 detail">
          {' '}
          GMAT阅读难不一定是长度问题，主要是内容比较晦涩，结构不好把握的文章，千万不要慌张，不要害怕，此时的恐慌会让你整个昏头，不知道自己在读什么，做GMAT阅读题的时候，也许会重读好几遍，不仅慢，正确率也不好。
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并不知道这个事情是什么，即使知道它叫什么也不要紧。然后看题，根据题目，问到什么就回去找什么，找到的东西你可能也不明白是什么。但一般情况下，较难的GMAT阅读文章的题目会相对于简单，甚至有类似送分的白痴题。因此，只要你能找对地方，静下心来，淡定应考，不要害怕，就能做对较难的GMAT阅读。
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并不知道这个事情是什么，即使知道它叫什么也不要紧。然后看题，根据题目，问到什么就回去找什么，找到的东西你可能也不明白是什么。但一般情况下，较难的GMAT阅读文章的题目会相对于简单，甚至有类似送分的白痴题。因此，只要你能找对地方，静下心来，淡定应考，不要害怕，就能做对较难的GMAT阅读。
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并
        </div>
      </Modal>
    );
  }
}

class Article extends Component {
  render() {
    const { onClick } = this.props;
    return (
      <div className="article-item p-t-2 b-b" onClick={() => onClick && onClick()}>
        <div className="t-1 t-s-14 f-w-b">
          GMAT 考试题型包括哪些呢？
          <div className="f-r t-3 t-s-12 f-w-d">
            <span>2019-04-27 15:13:31</span>
            <span className="m-l-2">阅读 8990</span>
            <span className="m-l-2">取消收藏</span>
          </div>
        </div>
        <div className="t-1 t-s-12 m-b-2">
          <span className="m-r-2">翻翻le</span>
          <span className="m-r-2">学生-D</span>
          <span className="m-r-2">备考:2个月</span>
          <span className="m-r-2">750分 /提分 150+</span>
        </div>
        <div className="t-2 m-b-2 detail">
          GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价
        </div>
      </div>
    );
  }
}