page.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import './index.less';
  4. import { Icon, Checkbox } from 'antd';
  5. import Page from '@src/containers/Page';
  6. import Assets from '@src/components/Assets';
  7. import { timeRange, formatDate, getMap, formatSeconds, formatPercent } from '@src/services/Tools';
  8. import UserLayout from '../../../layouts/User';
  9. import UserTable from '../../../components/UserTable';
  10. import UserAction from '../../../components/UserAction';
  11. import { RealAuth, QuestionNoteModal } from '../../../components/OtherModal';
  12. import Examination from '../../../components/Examination';
  13. import VipRenew from '../../../components/VipRenew';
  14. import menu, { refreshQuestionType, refreshStruct } from '../index';
  15. import Tabs from '../../../components/Tabs';
  16. import Modal from '../../../components/Modal';
  17. import Select from '../../../components/Select';
  18. import GIcon from '../../../components/Icon';
  19. import { TimeRange, QuestionType } from '../../../../Constant';
  20. import { My } from '../../../stores/my';
  21. import { Question } from '../../../stores/question';
  22. import { User } from '../../../stores/user';
  23. const QuestionTypeMap = getMap(QuestionType, 'value', 'label');
  24. const exportType = [
  25. { key: 'question', title: '题目' },
  26. { key: 'official', title: '官方解析' },
  27. { key: 'note', title: '我的笔记' },
  28. { key: 'qx', title: '千行解析', auth: true },
  29. { key: 'association', title: '题源联想', auth: true },
  30. { key: 'qa', title: '相关问答', auth: true },
  31. ];
  32. export default class extends Page {
  33. constructor(props) {
  34. props.size = 10;
  35. super(props);
  36. }
  37. initState() {
  38. return {
  39. tab: 'exercise',
  40. timerange: 'today',
  41. filterMap: {},
  42. sortMap: {},
  43. data: [{}, {}],
  44. selectList: [],
  45. allChecked: false,
  46. };
  47. }
  48. init() {
  49. this.columns = [
  50. {
  51. key: 'question_type',
  52. title: '题型',
  53. width: 115,
  54. render: (text, record) => {
  55. return QuestionTypeMap[record.questionType];
  56. },
  57. fixSort: true,
  58. },
  59. {
  60. key: 'title',
  61. title: '题目ID',
  62. width: 100,
  63. fixSort: true,
  64. render: (text, record) => {
  65. return <Link to={`/paper/question/${record.id}`}>{text}</Link>;
  66. },
  67. },
  68. {
  69. key: 'description',
  70. title: '内容',
  71. width: 220,
  72. render: (text) => {
  73. return <div style={{ maxHeight: '80px', overflow: 'hidden' }}>{text}</div>;
  74. },
  75. },
  76. {
  77. key: 'time',
  78. title: '耗时',
  79. width: 80,
  80. sort: true,
  81. render: (text, record) => {
  82. const user = record.stat ? record.stat.userTime / record.stat.userNumber : 0;
  83. const all = record.questionNo.totalNumber ? record.questionNo.totalTime / record.questionNo.totalNumber : 0;
  84. return <div className="sub">
  85. <div className="t-2 t-s-12">{user > 0 ? formatSeconds(user) : '-'}{user > 0 && <Assets height={10} width={10} name={user > all ? 'up' : 'down'} />}</div>
  86. <div className="t-6 t-s-12">全站{all > 0 ? formatSeconds(all) : '-'}</div>
  87. </div>;
  88. },
  89. },
  90. {
  91. key: 'correct',
  92. title: '错误率',
  93. width: 95,
  94. sort: true,
  95. render: (text, record) => {
  96. return <div className="sub">
  97. <div className="t-2 t-s-12">{record.stat ? formatPercent(record.stat.userNumber - record.stat.userCorrect, record.stat.userNumber, false) : '-'}</div>
  98. <div className="t-6 t-s-12">{record.stat ? `${record.stat.userNumber - record.stat.userCorrect}/${record.stat.userNumber}` : '-'}</div>
  99. </div>;
  100. },
  101. },
  102. {
  103. key: 'latest_time',
  104. title: '最近做题',
  105. width: 95,
  106. render: (text) => {
  107. return <div className="sub">
  108. <div className="t-2 t-s-12">{text.split(' ')[0]}</div>
  109. <div className="t-6 t-s-12">{text.split(' ')[1]}</div>
  110. </div>;
  111. },
  112. },
  113. {
  114. key: '',
  115. title: '',
  116. render: (text, record, index) => {
  117. return <div><GIcon name="star" active={record.collect} className="m-r-5" onClick={() => this.toggleCollect(index)} /><GIcon name="note" active={record.note} onClick={() => this.note(index)} /></div>;
  118. },
  119. },
  120. ];
  121. }
  122. initData() {
  123. const data = Object.assign(this.state, this.state.search);
  124. data.filterMap = this.state.search;
  125. if (data.order) {
  126. data.sortMap = { [data.order]: data.direction };
  127. }
  128. if (data.timerange) {
  129. data.filterMap.timerange = data.timerange;
  130. }
  131. const { info = {} } = this.props.user;
  132. if (info.latestExercise) {
  133. // 获取最后一次错题记录
  134. Question.baseReport(info.latestError).then(result => {
  135. this.setState({ latest: result });
  136. });
  137. }
  138. const [startTime, endTime] = timeRange(data.timerange);
  139. refreshQuestionType(this, data.subject, data.questionType, {
  140. all: true,
  141. needSentence: true,
  142. allSubject: true,
  143. }).then(({ questionTypes }) => {
  144. return refreshStruct(this, questionTypes, data.tab, data.one, data.two, {
  145. all: true,
  146. needPreview: false,
  147. needTextbook: true,
  148. }).then(({ structIds, latest, year }) => {
  149. My.listError(
  150. Object.assign(
  151. { module: data.tab, questionTypes, structIds, latest, year, startTime, endTime },
  152. this.state.search,
  153. {
  154. order: Object.keys(data.sortMap)
  155. .map(key => {
  156. if (key === 'title') return 'pid desc, no desc';
  157. return `${key} ${data.sortMap[key]}`;
  158. })
  159. .join(','),
  160. },
  161. ),
  162. ).then(result => {
  163. result.list = result.list.map(row => {
  164. row.questionNo = row.questionNo || {};
  165. row.key = row.questionNoId;
  166. row.questionType = row.question.questionType;
  167. row.title = row.questionNo.title;
  168. row.description = row.question.description;
  169. row.latest_time = row.latestTime ? formatDate(row.latestTime, 'YYYY-MM-DD HH:mm:ss') : '';
  170. return row;
  171. });
  172. this.setState({ list: result.list, total: result.total });
  173. });
  174. });
  175. });
  176. }
  177. toggleCollect(index) {
  178. const { list } = this.props;
  179. const userQuestion = list[index];
  180. if (!userQuestion.collect) {
  181. My.addQuestionCollect(userQuestion.questionNo.id).then(() => {
  182. userQuestion.collect = true;
  183. this.setState({ list });
  184. });
  185. } else {
  186. My.delQuestionCollect(userQuestion.questionNo.id).then(() => {
  187. userQuestion.collect = false;
  188. this.setState({ list });
  189. });
  190. }
  191. }
  192. note(index) {
  193. const { list } = this.props;
  194. const userQuestion = list[index];
  195. const { questionNo } = userQuestion;
  196. My.getQuestionNote(questionNo.id)
  197. .then(result => {
  198. this.setState({ questionNo, note: result || {}, showNote: true, index });
  199. });
  200. }
  201. onTabChange(tab) {
  202. const data = { tab };
  203. this.refreshQuery(data);
  204. }
  205. onFilter(value) {
  206. this.search(value, false);
  207. this.initData();
  208. }
  209. onSearch(value) {
  210. this.search({ page: 1, keyword: value }, false);
  211. this.initData();
  212. }
  213. onSort(value) {
  214. const keys = Object.keys(value);
  215. // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
  216. const { sortMap } = this.state;
  217. const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
  218. this.search({ order: keys.length && value[keys[index]] && value[keys[index]] ? keys[index] : null, direction: keys.length ? value[keys[index]] : null }, false);
  219. this.initData();
  220. }
  221. onChangePage(page) {
  222. this.search({ page }, false);
  223. this.initData();
  224. }
  225. onAll(checked) {
  226. const { selectList } = this.state;
  227. const { list = [] } = this.state;
  228. if (checked) {
  229. list.forEach(item => {
  230. if (selectList.indexOf(item.key) >= 0) return;
  231. selectList.push(item.key);
  232. });
  233. } else {
  234. list.forEach(item => {
  235. const index = selectList.indexOf(item.key);
  236. if (index < 0) return;
  237. selectList.splice(index, 1);
  238. });
  239. }
  240. this.setState({ selectList, allChecked: checked });
  241. }
  242. onSelect(selectList) {
  243. this.setState({ selectList, allCheckbox: false });
  244. }
  245. onAction(key) {
  246. const { info } = this.props.user;
  247. const { selectList } = this.state;
  248. switch (key) {
  249. case 'help':
  250. this.setState({ showTips: true });
  251. return;
  252. case 'clear':
  253. if (selectList.length === 0) {
  254. this.setState({ showWarn: true, warn: { title: '移除', content: '不可少于1题,请重新选择' } });
  255. return;
  256. }
  257. this.setState({ showClearConfirm: true, clearInfo: { questionNoIds: selectList } });
  258. break;
  259. case 'group':
  260. if (!info.vip) {
  261. this.setState({ showVip: true });
  262. return;
  263. }
  264. if (selectList.length < 10) {
  265. this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可小于10题,请重新选择' } });
  266. return;
  267. }
  268. if (selectList.length > 50) {
  269. this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可多余50题,请重新选择' } });
  270. return;
  271. }
  272. if (selectList.length === 0) {
  273. this.setState({ showWarn: true, warn: { title: '组卷练习', content: '不可同时选中语文题和数学题,请重新选择。' } });
  274. return;
  275. }
  276. this.setState({ showGroupConfirm: true, groupInfo: { questionNoIds: selectList, filterTimes: 2 } });
  277. break;
  278. case 'export':
  279. if (!info.vip) {
  280. this.setState({ showVip: true });
  281. return;
  282. }
  283. if (selectList.length < 1) {
  284. this.setState({ showWarn: true, warn: { title: '导出', content: '不可小于1题,请重新选择' } });
  285. return;
  286. }
  287. if (selectList.length > 100) {
  288. this.setState({ showWarn: true, warn: { title: '导出', content: '不可多余100题,请重新选择' } });
  289. return;
  290. }
  291. if (info.bindReal) {
  292. this.setState({ showExportConfirm: true, exportInfo: { include: exportType.map(row => row.key), questionNoIds: selectList, answer: true } });
  293. } else {
  294. this.setState({ showExportAuthConfirm: true, exportInfo: { include: exportType.filter(row => !row.auth).map(row => row.key), questionNoIds: selectList, answer: true } });
  295. }
  296. break;
  297. default:
  298. }
  299. }
  300. clearErrorQuestion() {
  301. const { clearInfo } = this.state;
  302. My.clearError(clearInfo.questionNoIds)
  303. .then(() => {
  304. this.refresh();
  305. })
  306. .catch(e => {
  307. this.setState({ showWarn: true, warn: { title: '移除', content: e.message }, showClearConfirm: false });
  308. });
  309. }
  310. group() {
  311. const { groupInfo } = this.state;
  312. My.groupQuestionCollect(groupInfo)
  313. .then((result) => {
  314. Question.startLink('error', result);
  315. this.setState({ showGroupConfirm: false });
  316. })
  317. .catch(e => {
  318. this.setState({ showWarn: true, warn: { title: '组卷练习', content: e.message }, showGroupConfirm: false });
  319. });
  320. }
  321. export() {
  322. const { exportInfo } = this.state;
  323. this.setState({ showExportWait: true, showExportConfirm: false, showExportAuthConfirm: false });
  324. My.exportQuestionError(exportInfo)
  325. .then((result) => {
  326. openLink(`/export/${result}`);
  327. this.setState({ showExportWait: false });
  328. })
  329. .catch(e => {
  330. this.setState({ showWarn: true, warn: { title: '导出', content: e.message }, showExportWait: false });
  331. });
  332. }
  333. remove(report) {
  334. My.removeError(report.id)
  335. .then(() => {
  336. this.refresh();
  337. });
  338. }
  339. clearErrorReport() {
  340. My.clearLatestError()
  341. .then(() => {
  342. const { info } = this.props.user;
  343. info.latestError = 0;
  344. User.infoHandle(info);
  345. });
  346. this.setState({ latest: null });
  347. }
  348. renderView() {
  349. const { config } = this.props;
  350. return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  351. }
  352. renderTable() {
  353. const {
  354. tab,
  355. questionSubjectSelect,
  356. questionSubjectMap = {},
  357. oneSelect,
  358. twoSelectMap = {},
  359. filterMap = {},
  360. sortMap = {},
  361. list = [],
  362. latest,
  363. } = this.state;
  364. const { selectList = [], allChecked, page, total } = this.state;
  365. const { info } = this.props.user;
  366. return (
  367. <div className="table-layout">
  368. <Tabs
  369. border
  370. type="division"
  371. theme="theme"
  372. size="small"
  373. space={2.5}
  374. width={100}
  375. active={tab}
  376. tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }]}
  377. onChange={key => this.onTabChange(key)}
  378. />
  379. <UserAction
  380. search
  381. defaultSearch={filterMap.keyword}
  382. selectList={[
  383. {
  384. children: [
  385. {
  386. key: 'subject',
  387. placeholder: '学科',
  388. select: questionSubjectSelect,
  389. },
  390. {
  391. placeholder: '题型',
  392. key: 'questionType',
  393. be: 'subject',
  394. selectMap: questionSubjectMap,
  395. },
  396. ],
  397. },
  398. {
  399. label: '范围',
  400. children: [
  401. {
  402. key: 'one',
  403. placeholder: '全部',
  404. select: oneSelect,
  405. },
  406. {
  407. key: 'two',
  408. be: 'one',
  409. placeholder: '全部',
  410. selectMap: twoSelectMap,
  411. },
  412. ],
  413. },
  414. {
  415. right: true,
  416. key: 'timerange',
  417. select: TimeRange,
  418. },
  419. ]}
  420. filterMap={filterMap}
  421. onFilter={value => this.onFilter(value)}
  422. onSearch={value => this.onSearch(value)}
  423. />
  424. <UserAction
  425. allCheckbox
  426. allChecked={allChecked}
  427. help
  428. btnList={[
  429. { title: '移除', key: 'clear' },
  430. { title: '组卷', key: 'group', tag: 'vip', disabled: !info.vip },
  431. { title: '导出', key: 'export', tag: 'vip', disabled: !info.vip },
  432. ]}
  433. right={
  434. latest && <div className="tip">
  435. {formatDate(latest.updateTime, 'YYYY-MM-DD HH:mm')} 组卷{latest.questionNumber}题,做对{latest.userCorrect}题。<span onClick={() => {
  436. this.remove(latest);
  437. }}>移除正确题目</span>
  438. <Icon type="close-circle" theme="filled" onClick={() => {
  439. this.clearErrorReport();
  440. }} />
  441. </div>
  442. }
  443. onAll={checked => this.onAll(checked)}
  444. onAction={key => this.onAction(key)}
  445. />
  446. <UserTable
  447. select
  448. columns={this.columns}
  449. sortMap={sortMap}
  450. data={list}
  451. current={page}
  452. total={total}
  453. pageSize={this.state.search.size}
  454. selectList={selectList}
  455. onSelect={l => this.onSelect(l)}
  456. onSort={v => this.onSort(v)}
  457. onChange={p => this.onChangePage(p)}
  458. />
  459. {this.renderModal()}
  460. </div>
  461. );
  462. }
  463. renderModal() {
  464. const { showTips, showWarn, warn = {}, showClearConfirm, clearInfo = {}, showGroupConfirm, groupInfo = {}, showExportConfirm, showExportAuthConfirm, exportInfo = {}, showExportWait, showExamination, showVip, showReal, showNote, note = {}, questionNo = {}, list } = this.state;
  465. const { info } = this.props.user;
  466. return [
  467. <Modal show={showTips} title="操作提示" confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showTips: false })}>
  468. <div className="flex-layout m-b-2">
  469. <div className="flex-block">
  470. <div className="t-1 t-s-18">组卷功能</div>
  471. <div className="t-2">操作数量:10-50;</div>
  472. <div className="t-2">注意事项:可跨题型、不可跨学科。</div>
  473. </div>
  474. <div className="flex-block">
  475. <div className="t-1 t-s-18">导出功能</div>
  476. <div className="t-2">操作数量:1-100;</div>
  477. <div className="t-2">注意事项:“综合推理IR”暂时无法导出。</div>
  478. </div>
  479. </div>
  480. <div className="t-3">
  481. *您可点击
  482. <Icon type="question-circle" theme="filled" />
  483. 查阅以上信息。
  484. </div>
  485. </Modal>,
  486. <Modal show={showWarn} title={warn.title} confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showWarn: false })}>
  487. <div className="t-2 t-s-18">{warn.content}</div>
  488. </Modal>,
  489. <Modal show={showGroupConfirm} title="组卷练习" confirmText="开始练习" onConfirm={() => this.group()} onCancel={() => this.setState({ showGroupConfirm: false })}>
  490. <div className="t-2 t-s-18">
  491. 您共选择了 <span className="t-4">{groupInfo.questionNoIds ? groupInfo.questionNoIds.length : 0}</span> 道题目,是否开始练习?</div>
  492. <div className="t-2 t-s-16">
  493. <Checkbox checked className="m-r-5" />
  494. 剔除已组卷练习 <Select
  495. theme="white"
  496. value={groupInfo.filterTimes}
  497. list={[{ key: 2, title: '2' }, { key: 3, title: '3' }]}
  498. onChange={({ key }) => {
  499. groupInfo.filterTimes = key;
  500. this.setState({ groupInfo });
  501. }}
  502. />{' '}
  503. 次以上的错题
  504. </div>
  505. </Modal>,
  506. <Modal show={showClearConfirm} title="移出" onConfirm={() => this.clearErrorQuestion()} onCancel={() => this.setState({ showClearConfirm: false })}>
  507. <div className="t-2 t-s-18">
  508. 当前选中的 <span className="t-4">{clearInfo.questionNoIds ? clearInfo.questionNoIds.length : 0}</span> 道题即将被移出错题本,移出后无法恢复,是否继续?
  509. </div>
  510. </Modal>,
  511. <Modal show={showExportWait} title="导出" confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showExportWait: false })}>
  512. <div className="t-2 t-s-18">正在下载中,请不要关闭当前页面!</div>
  513. </Modal>,
  514. <Modal show={showExportConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportConfirm: false })}>
  515. <div className="t-2 t-s-18 m-b-5">
  516. 当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</span> 道题,请确认需要导出的内容:
  517. </div>
  518. <div className="t-2 t-s-16">
  519. {exportType.map(item => {
  520. return (
  521. <div className="d-i-b m-b-5" style={{ width: 135 }}>
  522. <Checkbox checked={exportInfo.include ? exportInfo.include.indexOf(item.key) >= 0 : false} className="m-r-5" onChange={() => {
  523. exportInfo.include.push(item.key);
  524. this.setState({ exportInfo });
  525. }} />
  526. {item.title}
  527. </div>
  528. );
  529. })}
  530. </div>
  531. </Modal>,
  532. <Modal show={showExportAuthConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportAuthConfirm: false })}>
  533. <div className="t-2 t-s-18 m-b-5">
  534. 当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</span> 道题,请确认需要导出的内容:
  535. </div>
  536. <div className="t-2 t-s-16 m-b-2">
  537. {exportType
  538. .filter(item => !item.auth)
  539. .map(item => {
  540. return (
  541. <div className="d-i-b m-b-2" style={{ width: 135 }}>
  542. <Checkbox checked={exportInfo.include ? exportInfo.include.indexOf(item.key) >= 0 : false} className="m-r-5" onChange={() => {
  543. exportInfo.include.push(item.key);
  544. this.setState({ exportInfo });
  545. }} />
  546. {item.title}
  547. </div>
  548. );
  549. })}
  550. </div>
  551. <div className="b-b m-b-2 m-t-2" />
  552. <div className="t-3 m-b-1">
  553. 以下内容需实名认证后才可导出: <a className="f-r" onClick={() => this.setState({ showExportAuthConfirm: false, showReal: true })}>去认证 ></a>
  554. </div>
  555. <div className="t-2 t-s-16 m-b-2">
  556. {exportType
  557. .filter(item => item.auth)
  558. .map(item => {
  559. return (
  560. <div className="d-i-b" style={{ width: 135 }}>
  561. <Checkbox disabled className="m-r-5" />
  562. {item.title}
  563. </div>
  564. );
  565. })}
  566. </div>
  567. </Modal>,
  568. <Examination
  569. show={showExamination}
  570. data={info}
  571. onConfirm={() => this.setState({ showExamination: false })}
  572. onCancel={() => this.setState({ showExamination: false })}
  573. onClose={() => this.setState({ showExamination: false })}
  574. />,
  575. <RealAuth show={showReal} data={info} onConfirm={() => this.setState({ showReal: false })} />,
  576. <VipRenew
  577. show={showVip}
  578. data={info}
  579. onReal={() => this.setState({ showVip: false, showReal: true })}
  580. onPrepare={() => this.setState({ showVip: false, showExamination: true })}
  581. onClose={(result) => {
  582. if (result) {
  583. this.refresh();
  584. } else {
  585. this.setState({ showVip: false });
  586. }
  587. }}
  588. />,
  589. <QuestionNoteModal show={showNote} defaultData={note} questionNo={questionNo} onConfirm={() => {
  590. list[this.state.index].note = true;
  591. this.setState({ showNote: false, list });
  592. }} onCancel={() => this.setState({ showNote: false })} />,
  593. ];
  594. }
  595. }