sourcecode/front/project/www/routes/course/note/page.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import { formatDate, getMap } from '@src/services/Tools';
import Modal from '../../../components/Modal';
import UserAction from '../../../components/UserAction';
import UserPagination from '../../../components/UserPagination';
import { RealAuth } from '../../../components/OtherModal';
import Examination from '../../../components/Examination';
import VipRenew from '../../../components/VipRenew';
import CheckboxItem from '../../../components/CheckboxItem';
import { Course } from '../../../stores/course';
import { My } from '../../../stores/my';

export default class extends Page {
  initState() {
    return {
      filterMap: {},
      sortMap: {},
      // list: [
      //   {
      //     title: '比较对象对等问题',
      //     content:
      //       '从比较对象和句子结构我们能把DE排除掉，D选项中dffat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livest。ock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较？对象和句子结构我们能把？DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结。构我们能把DE排除掉，D选项中fat和livestock不是比较对象.',
      //   },
      //   {
      //     title: '比较对象对等问题',
      //     content:
      //       '从比较对象和句子结构我们能把DE排除掉，D选项中dffat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livest。ock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较？对象和句子结构我们能把？DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结。构我们能把DE排除掉，D选项中fat和livestock不是比较对象.',
      //   },
      //   {
      //     title: '比较对象对等问题',
      //     content:
      //       '从比较对象和句子结构我们能把DE排除掉，D选项中dffat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livest。ock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较？对象和句子结构我们能把？DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结。构我们能把DE排除掉，D选项中fat和livestock不是比较对象.',
      //   },
      // ],
      selectList: [],
      allChecked: false,
      showDetail: false,
    };
  }

  init() {
    const { id } = this.params;
    Course.get(id)
      .then(result => {
        const courseNoMap = getMap(result.courseNos, 'id');
        this.setState({ course: result, courseNoMap });
      });
  }

  initData() {
    const { id } = this.params;
    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);

    My.listCourseNote(Object.assign({ courseId: id }, this.state.search))
      .then(result => {
        result.list = result.list.map(row => {
          row.key = row.courseNoId;
          return row;
        });
        this.setState({ list: result.list, total: result.total });
      });
  }

  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);
  }

  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({ showClearConfirm: true, clearInfo: { courseNoIds: 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;
        }
        this.setState({ showExportConfirm: true, exportInfo: { courseNoIds: selectList } });
        break;
      default:
    }
  }

  clearNote() {
    const { exportInfo } = this.state;
    My.clearCourseNote(exportInfo.courseNoIds)
      .then(() => {
        this.refresh();
      })
      .then(e => {
        this.setState({ warn: { title: '移除', content: e.message }, showClearConfirm: false });
      });
  }

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

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

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

  renderView() {
    const { course = {}, courseNoMap = {}, list = [], sortMap, filterMap, allChecked, total, page } = this.state;
    const {
      user: { info },
    } = this.props;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > {course.title} > <span className="t-1">我的笔记</span>
          <div className="f-r" onClick={() => linkTo(`/course/detail/${course.id}`)}>返回课程</div>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20 m-b-2">{course.title}</div>
          <UserAction
            allCheckbox
            allChecked={allChecked}
            search
            defaultSearch={filterMap.keyword}
            btnList={[
              { title: '删除', key: 'delete' },
              { title: '导出', key: 'export', tag: 'vip', disabled: !info.vip },
            ]}
            sortList={[
              { right: true, label: '课时', key: 'courseNoId', fixed: true },
              { right: true, label: '更新时间', key: 'updateTime', fixed: true },
            ]}
            sortMap={sortMap}
            filterMap={filterMap}
            onFilter={value => this.onFilter(value)}
            onSearch={value => this.onSearch(value)}
            onSort={value => this.onSort(value)}
            onAll={checked => this.onAll(checked)}
            onAction={key => this.onAction(key)}
          />
          <div className="list">
            {list.map(item => {
              return <Note data={item} courseNoMap={courseNoMap} onSelect={(value) => this.onSelect(value)} onClick={() => this.setState({ showDetail: true, article: item })} />;
            })}
          </div>
          {total > 0 && list.length > 0 && (
            <UserPagination total={total} current={page} pageSize={this.state.search.size} onChange={p => this.onChangePage(p)} />
          )}
        </div>
        {this.renderModal()}
      </div>
    );
  }

  renderModal() {
    const { showWarn, warn = {}, showClearConfirm, clearInfo = {}, showVip, showExamination, showReal, showExportWait, showExportConfirm, exportInfo = {} } = this.state;
    const { info } = this.props.user;
    const { article = {} } = this.state;
    return [
      <NoteDetail
        show={this.state.showDetail}
        data={article}
        onClose={() => this.setState({ showDetail: false })}
        onPrev={() => this.prevArticle()}
        onNext={() => this.nextArticle()}
      />,
      <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={showClearConfirm} title="移出" onConfirm={() => this.clearNote()} onCancel={() => this.setState({ showClearConfirm: false })}>
        <div className="t-2 t-s-18">
          当前选中的 <span className="t-4">{clearInfo.courseNoIds ? clearInfo.courseNoIds.length : 0}</span> 篇即将被移出笔记，移出后无法恢复，是否继续？
        </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.courseNoIds ? exportInfo.courseNoIds.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>,
      <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 NoteDetail extends Component {
  render() {
    const { show, data, onClose, onPrev, onNext } = this.props;
    return (
      <Modal
        className="note-detail-modal"
        body={false}
        show={show}
        width={720}
        maskClosable
        close={false}
        onClose={onClose}
        title={data.title}
        center
      >
        <Icon type="left" className="prev" onClick={() => onPrev && onPrev()} />
        <Icon type="right" className="next" onClick={() => onNext && onNext()} />
        <div className="t-2 t-s-18 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </Modal>
    );
  }
}

class Note extends Component {
  onSelect() {
    const { data, onSelect, selectList } = this.props;
    const index = selectList.indexOf(data.key);
    if (index >= 0) {
      selectList.splice(index, 1);
    } else {
      selectList.push(data.key);
    }
    onSelect(selectList);
  }

  render() {
    const { data, selectList, onClick, courseNoMap = {} } = this.props;
    return (
      <div className="note-item p-t-2 b-b" onClick={() => onClick && onClick()}>
        <div className="t-1 t-s-14 f-w-b m-b-5">
          <CheckboxItem theme="white" value={selectList.indexOf(data.key) >= 0} onChange={() => this.onSelect()} />
          <span className="t-2 m-l-5 m-r-5">课时{(courseNoMap[data.key] || {}).no}</span>
          {(courseNoMap[data.key] || {}).title}
          <div className="f-r t-3 t-s-12 f-w-d">
            <span>{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</span>
          </div>
        </div>
        <div className="t-2 m-b-2 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }
}