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 Assets from '@src/components/Assets';
import { timeRange, getMap, formatPercent, formatMonth, formatDate, formatSeconds } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import { RealAuth } from '../../../components/OtherModal';
import Examination from '../../../components/Examination';
import VipRenew from '../../../components/VipRenew';
import menu, { refreshQuestionType } from '../index';
import Tabs from '../../../components/Tabs';
import Modal from '../../../components/Modal';
import Select from '../../../components/Select';
import GIcon from '../../../components/Icon';
import { TimeRange, QuestionType, PrepareStatus, ExperiencePercent } from '../../../../Constant';
import { My } from '../../../stores/my';
import { Question } from '../../../stores/question';

const QuestionTypeMap = getMap(QuestionType, 'value', 'label');
const PrepareStatusMap = getMap(PrepareStatus, 'value', 'label');
const ExperiencePercentMap = getMap(ExperiencePercent, 'value', 'label');

const columns = [
  {
    key: 'question_type',
    title: '题型',
    render: (text, record) => {
      return QuestionTypeMap[record.questionType];
    },
    fixSort: true,
  },
  {
    key: 'title',
    title: '题目ID',
    fixSort: true,
  },
  {
    key: 'description',
    title: '内容',
  },
  {
    key: 'time',
    title: '耗时',
    sort: true,
    render: (text, record) => {
      const user = record.stat.userTime / record.stat.userNumber;
      const all = record.questionNo.totalTime / record.questionNo.totalNumber;
      return <div className="sub">
        <div className="t-2 t-s-12">{formatSeconds(user)}<Assets height={10} width={10} name={user > all ? 'up' : 'down'} /></div>
        <div className="t-6 t-s-12">全站{formatSeconds(all)}</div>
      </div>;
    },
  },
  {
    key: 'correct',
    title: '错误率',
    sort: true,
    render: (text, record) => {
      return <div className="sub">
        <div className="t-2 t-s-12">{formatPercent(record.stat.userNumber - record.stat.userCorrect, record.stat.userNumber, false)}</div>
        <div className="t-6 t-s-12">{record.stat.userNumber - record.stat.userCorrect}/{record.stat.userNumber}</div>
      </div>;
    },
  },
  {
    key: 'latest_time',
    title: '最近做题',
    render: (text) => {
      return <div className="sub">
        <div className="t-2 t-s-12">{text.split(' ')[0]}</div>
        <div className="t-6 t-s-12">{text.split(' ')[1]}</div>
      </div>;
    },
  },
  {
    key: '',
    title: '',
    render: (text, record) => {
      return <div><GIcon name="note" active={record.note} /></div>;
    },
  },
];

const exportType = [
  { key: 'question', title: '题目' },
  { key: 'official', title: '官方解析' },
  { key: 'note', title: '我的笔记' },
  { key: 'qx', title: '千行解析', auth: true },
  { key: 'association', title: '题源联想', auth: true },
  { key: 'qa', title: '相关问答', auth: true },
];

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

  initState() {
    return {
      tab: 'question',
      module: 'exercise',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      list: [],
      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 }) => {
      this.setState({ moduleSelect: [{ title: '练习', key: 'exercise' }, { title: '模考', key: 'examination' }] });
      My.listQuestionCollect(
        Object.assign(
          { module: data.module, questionTypes, 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 => {
        result.list = result.list.map(row => {
          row.key = row.questionNoId;
          row.questionType = row.question.questionType;
          row.title = row.questionNo.title;
          row.description = row.question.description;
          row.latest_time = formatDate(row.latestTime, 'YYYY-MM-DD HH:mm:ss');
          return row;
        });
        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, false);
    this.initData();
  }

  onSearch(value) {
    this.search({ keyword: value }, false);
    this.initData();
  }

  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 }, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page }, false);
    this.initData();
  }

  onAll(checked) {
    const selectList = [];
    if (checked) {
      const { list = [] } = this.state;
      list.forEach(item => {
        if (selectList.indexOf(item.key) >= 0) return;
        selectList.push(item.key);
      });
    }
    this.setState({ selectList, allChecked: checked });
  }

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

  onAction(key) {
    const { info } = this.props.user;
    const { selectList } = this.state;
    switch (key) {
      case 'help':
        this.setState({ showTips: true });
        return;
      case 'clear':
        if (selectList.length === 0) {
          this.setState({ showWarn: true, warn: { title: '移除', content: '不可少于1题，请重新选择' } });
          return;
        }
        this.setState({ showClearCollectConfirm: true, clearInfo: { questionNoIds: selectList } });
        break;
      case 'group':
        if (!info.vip) {
          this.setState({ showVip: true });
          return;
        }
        if (selectList.length < 10) {
          this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可小于10题，请重新选择' } });
          return;
        }
        if (selectList.length > 50) {
          this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可多余50题，请重新选择' } });
          return;
        }
        if (selectList.length === 0) {
          this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可同时选中语文题和数学题，请重新选择。' } });
          return;
        }
        this.setState({ showGroupConfirm: true, groupInfo: { questionNoIds: selectList } });
        break;
      case 'export':
        if (!info.vip) {
          this.setState({ showVip: true });
          return;
        }
        if (selectList.length < 1) {
          this.setState({ showWarn: true, warn: { title: '导出', content: '不可小于1题，请重新选择' } });
          return;
        }
        if (selectList.length > 100) {
          this.setState({ showWarn: true, warn: { title: '导出', content: '不可多余100题，请重新选择' } });
          return;
        }
        if (info.bindReal) {
          this.setState({ showExportConfirm: true, exportInfo: { info: exportType.map(row => row.key), questionNoIds: selectList } });
        } else {
          this.setState({ showExportAuthConfirm: true, exportInfo: { info: exportType.filter(row => !row.auth).map(row => row.key), questionNoIds: selectList } });
        }
        break;
      default:
    }
  }

  clearCollectQuestion() {
    const { exportInfo } = this.state;
    My.clearQuestionCollect(exportInfo.questionNoIds)
      .then(() => {
        this.refresh();
      })
      .then(e => {
        this.setState({ warn: { title: '移除', content: e.message }, showClearCollectConfirm: false });
      });
  }

  group() {
    const { groupInfo } = this.state;
    My.groupQuestionCollect(groupInfo)
      .then((result) => {
        Question.startLink('collect', result);
        this.setState({ showGroupConfirm: false });
      })
      .catch(e => {
        this.setState({ warn: { title: '组卷练习', content: e.message }, showGroupConfirm: false });
      });
  }

  export() {
    const { exportInfo } = this.state;
    this.setState({ showExportWait: true, showExportConfirm: false, showExportAuthConfirm: false });
    My.exportQuestion(exportInfo)
      .then((result) => {
        openLink(`/export/${result.id}`);
        this.setState({ showExportWait: false });
      })
      .catch(e => {
        this.setState({ warn: { title: '导出', content: e.message }, showExportWait: false });
      });
  }

  collectArticle(row, checked) {
    if (checked) {
      My.addExperienceCollect(row.id).then(() => {
        this.refresh();
      });
    } else {
      My.delExperienceCollect(row.id).then(() => {
        this.refresh();
      });
    }
  }

  prevArticle() {
    const { list, article } = this.state;
    let index = -1;
    list.forEach((row, i) => {
      if (row.id === article.id) {
        index = i;
      }
    });
    if (index === 0) return;
    this.setState({ article: list[index - 1] });
  }

  nextArticle() {
    const { list, article } = this.state;
    let index = -1;
    list.forEach((row, i) => {
      if (row.id === article.id) {
        index = i;
      }
    });
    if (index === list.length - 1) return;
    this.setState({ article: list[index + 1] });
  }

  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.onTabChange(key)}
        />
        {this[`renderTab${tab}`]()}
        {this.renderModal()}
      </div>
    );
  }

  renderTabquestion() {
    const { info } = this.props.user;
    const {
      questionSubjectSelect,
      questionSubjectMap = {},
      moduleSelect,
      filterMap = {},
      sortMap = {},
      list = [],
    } = this.state;
    const { selectList = [], allChecked, page, total } = this.state;
    return (
      <div className="tab-1-layout">
        <UserAction
          search
          defaultSearch={filterMap.keyword}
          selectList={[
            {
              children: [
                {
                  key: 'subject',
                  placeholder: '学科',
                  select: questionSubjectSelect,
                },
                {
                  placeholder: '题型',
                  key: 'questionType',
                  be: 'subject',
                  selectMap: questionSubjectMap,
                },
              ],
            },
            {
              label: '范围',
              key: 'module',
              select: moduleSelect,
            },
            {
              right: true,
              key: 'timerange',
              select: TimeRange,
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onSearch={value => this.onSearch(value)}
        />
        <UserAction
          allCheckbox
          allChecked={allChecked}
          help
          btnList={[
            { title: '移除', key: 'clear' },
            { title: '组卷', key: 'group', tag: 'vip', disabled: !info.vip },
            { title: '导出', key: 'export', tag: 'vip', disabled: !info.vip },
          ]}
          onAll={checked => this.onAll(checked)}
          onAction={key => this.onAction(key)}
        />
        <UserTable
          select
          columns={columns}
          sortMap={sortMap}
          data={list}
          current={page}
          pageSize={this.state.search.size}
          total={total}
          selectList={selectList}
          onSelect={l => this.onSelect(l)}
          onSort={v => this.onSort(v)}
          onChange={p => this.onChangePage(p)}
        />
      </div>
    );
  }

  renderTabarticle() {
    const { filterMap = {}, sortMap = {}, list = [] } = this.state;
    return (
      <div className="tab-1-layout">
        <UserAction
          sortList={[
            {
              key: 'create_time',
              label: '收藏时间',
            },
            {
              key: 'update_time',
              label: '更新时间',
            },
          ]}
          sortMap={sortMap}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onSort={value => this.onSort(value)}
        />
        {list.map(item => {
          return <Article data={item} onClick={() => this.setState({ showDetail: true, article: item })} onUnCollect={() => this.collectArticle(item, false)} />;
        })}
      </div>
    );
  }

  renderModal() {
    const { article = {}, showTips, showWarn, warn = {}, showClearCollectConfirm, clearInfo = {}, showGroupConfirm, groupInfo = {}, showExportConfirm, showExportAuthConfirm, exportInfo = {}, showExportWait, showExamination, showVip, showReal } = this.state;
    const { info } = this.props.user;
    return [
      <ArticleDetail show={this.state.showDetail} data={article} onClose={() => this.setState({ showDetail: false })} onPrev={() => this.prevArticle()} onNext={() => this.nextArticle()} />,
      <Modal show={showTips} title="操作提示" confirmText="好的，知道了" btnAlign="center" onConfirm={() => this.setState({ showTips: false })}>
        <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 show={showWarn} title={warn.title} confirmText="好的，知道了" btnAlign="center" onConfirm={() => this.setState({ showWarn: false })}>
        <div className="t-2 t-s-18">{warn.content}</div>
      </Modal>,
      <Modal show={showGroupConfirm} title="组卷练习" confirmText="开始练习" onConfirm={() => this.group()} onCancel={() => this.setState({ showGroupConfirm: false })}>
        <div className="t-2 t-s-18">
          您共选择了 <span className="t-4">{groupInfo.questionNoIds ? groupInfo.questionNoIds.length : 0}</span> 道题目，是否开始练习？
        </div>
        <div className="t-2 t-s-16">
          <Checkbox checked className="m-r-5" />
          剔除已组卷练习 <Select
            theme="white"
            value={groupInfo.filterTimes}
            list={[{ key: 2, title: '2' }, { key: 3, title: '3' }]}
            onChange={(key) => {
              groupInfo.filterTimes = key;
              this.setState({ groupInfo });
            }}
          />{' '}
          次以上的错题
        </div>
      </Modal>,
      <Modal show={showClearCollectConfirm} title="移出" onConfirm={() => this.clearCollectQuestion()} onCancel={() => this.setState({ showClearCollectConfirm: false })}>
        <div className="t-2 t-s-18">
          当前选中的 <span className="t-4">{clearInfo.questionNoIds ? clearInfo.questionNoIds.length : 0}</span> 道题即将被移出收藏，移出后无法恢复，是否继续？
        </div>
      </Modal>,
      <Modal show={showExportWait} title="导出" confirmText="好的，知道了" btnAlign="center" onConfirm={() => this.setState({ showExportWait: false })}>
        <div className="t-2 t-s-18">正在下载中，请不要关闭当前页面！</div>
      </Modal>,
      <Modal show={showExportConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportConfirm: false })}>
        <div className="t-2 t-s-18 m-b-5">
          当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</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={exportInfo.info ? exportInfo.info.indexOf(item.key) >= 0 : false} className="m-r-5" onChange={() => {
                  const index = exportInfo.info.indexOf(item.key);
                  if (index >= 0) {
                    exportInfo.info.splice(index, 1);
                  } else {
                    exportInfo.info.push(item.key);
                  }
                  this.setState({ exportInfo });
                }} />
                {item.title}
              </div>
            );
          })}
        </div>
      </Modal>,
      <Modal show={showExportAuthConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportAuthConfirm: false })}>
        <div className="t-2 t-s-18 m-b-5">
          当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</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={exportInfo.info ? exportInfo.info.indexOf(item.key) >= 0 : false} className="m-r-5" onChange={() => {
                    const index = exportInfo.info.indexOf(item.key);
                    if (index >= 0) {
                      exportInfo.info.splice(index, 1);
                    } else {
                      exportInfo.info.push(item.key);
                    }
                    this.setState({ exportInfo });
                  }} />
                  {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" onClick={() => this.setState({ showExportAuthConfirm: false, showReal: true })}>去认证 ></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>,
      <Examination
        show={showExamination}
        data={info}
        onConfirm={() => this.setState({ showExamination: false })}
        onCancel={() => this.setState({ showExamination: false })}
        onClose={() => this.setState({ showExamination: false })}
      />,
      <RealAuth show={showReal} data={info} onConfirm={() => this.setState({ showReal: false })} />,
      <VipRenew
        show={showVip}
        data={info}
        onReal={() => this.setState({ showVip: false, showReal: true })}
        onPrepare={() => this.setState({ showVip: false, showExamination: true })}
        onClose={() => this.setState({ showVip: false })}
      />,
    ];
  }
}

class ArticleDetail extends Component {
  render() {
    const { show, data, 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">{data.title}</div>
        <div className="t-1 t-s-12 m-b-2">
          <span className="m-r-2">{data.user ? data.user.nickname : data.nickname}</span>
          <span className="m-r-2">{PrepareStatusMap[data.prepareStatus]}</span>
          <span className="m-r-2">备考:{formatMonth(data.experienceDay, false)}</span>
          <span className="m-r-2">{data.experienceScore}分 /提分 {ExperiencePercentMap[data.experiencePercent]}</span>
          <span className="t-4">更多信息</span>
        </div>
        <div className="t-2 t-s-18 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </Modal>
    );
  }
}

class Article extends Component {
  render() {
    const { data, onClick, onUnCollect } = 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">
          {data.title}
          <div className="f-r t-3 t-s-12 f-w-d">
            <span>{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</span>
            <span className="m-l-2">阅读 {data.viewNumber}</span>
            <span className="m-l-2" onClick={() => onUnCollect()}>取消收藏</span>
          </div>
        </div>
        <div className="t-1 t-s-12 m-b-2">
          <span className="m-r-2">{data.user ? data.user.nickname : data.nickname}</span>
          <span className="m-r-2">{PrepareStatusMap[data.prepareStatus]}</span>
          <span className="m-r-2">备考:{formatMonth(data.experienceDay, false)}</span>
          <span className="m-r-2">{data.experienceScore}分 /提分 {ExperiencePercentMap[data.experiencePercent]}</span>
        </div>
        <div className="t-2 m-b-2 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }
}