page.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Icon } from 'antd';
  4. import { Link } from 'react-router-dom';
  5. import Page from '@src/containers/Page';
  6. import Assets from '@src/components/Assets';
  7. import { getMap, formatPercent, formatSeconds } from '@src/services/Tools';
  8. import Button from '../../../components/Button';
  9. import Tabs from '../../../components/Tabs';
  10. import UserAction from '../../../components/UserAction';
  11. import UserPagination from '../../../components/UserPagination';
  12. import { refreshQuestionType, refreshStruct } from '../index';
  13. import { User } from '../../../stores/user';
  14. import { Question } from '../../../stores/question';
  15. import { QuestionType, QuestionDifficult } from '../../../../Constant';
  16. import { My } from '../../../stores/my';
  17. const QuestionTypeMap = getMap(QuestionType, 'value', 'label');
  18. // const QuestionDifficultMap = getMap(QuestionDifficult, 'value', 'label');
  19. export default class extends Page {
  20. initState() {
  21. this.searchNo = 0;
  22. return {
  23. list: [],
  24. searchList: [],
  25. keyword: '',
  26. subject: 'verbal',
  27. filterMap: {},
  28. sortMap: {},
  29. focus: false,
  30. difficultSelect: QuestionDifficult.map(row => {
  31. return {
  32. title: row.label,
  33. key: row.value,
  34. };
  35. }),
  36. };
  37. }
  38. initData() {
  39. const data = Object.assign(this.state, this.state.search);
  40. data.filterMap = this.state.search;
  41. if (data.order) {
  42. data.sortMap = { [data.order]: data.direction };
  43. }
  44. if (data.subject) {
  45. data.filterMap.subject = data.subject;
  46. }
  47. this.setState(data);
  48. refreshQuestionType(this, data.subject, data.questionType, {
  49. needSentence: false,
  50. allSubject: true,
  51. excludeAwa: true,
  52. }).then(({ questionTypes }) => {
  53. return refreshStruct(this, 'exercise', data.one, data.two, {
  54. all: true,
  55. }).then(({ structIds }) => {
  56. let handler = null;
  57. if (this.state.search.keyword) {
  58. handler = Question.searchStem({
  59. keyword: this.state.search.keyword,
  60. page: this.state.search.page,
  61. size: this.state.search.size,
  62. });
  63. } else {
  64. handler = Question.searchStem(
  65. Object.assign({ questionTypes, structIds, module: 'exercise' }, this.state.search, {
  66. order: Object.keys(data.sortMap)
  67. .map(key => {
  68. return `${key} ${data.sortMap[key]}`;
  69. })
  70. .join(','),
  71. }),
  72. );
  73. }
  74. handler.then(result => {
  75. this.setState({ list: result.list, total: result.total, page: data.page, searchResult: !!data.keyword });
  76. });
  77. });
  78. });
  79. }
  80. onRefreshFilter(query) {
  81. // this.changeQuery(query);
  82. // this.setState(query);
  83. this.refreshQuery(query);
  84. // this.initData();
  85. }
  86. onFilter(value) {
  87. this.search(value);
  88. // this.initData();
  89. }
  90. onSearch(value) {
  91. const { keyword } = this.state;
  92. User.addSearch(value || keyword);
  93. // this.search({ keyword }, false);
  94. // this.changeQuery({ keyword });
  95. // this.setState({ keyword });
  96. this.refreshQuery({ keyword: value || keyword });
  97. // this.initData();
  98. }
  99. onSort(value) {
  100. const keys = Object.keys(value);
  101. // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
  102. const { sortMap } = this.state;
  103. const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
  104. this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null }, false);
  105. this.initData();
  106. }
  107. onChangePage(page) {
  108. this.search({ page }, false);
  109. this.initData();
  110. }
  111. onChangeSearch(keyword, force = false) {
  112. if (!force) {
  113. this.searchNo += 1;
  114. const no = this.searchNo;
  115. Question.searchNo({ keyword, module: 'exercise', page: 1, size: 5 }).then(result => {
  116. if (no !== this.searchNo) return;
  117. this.setState({ searchList: result.list.map(row => row.title) });
  118. });
  119. }
  120. this.setState({ keyword });
  121. }
  122. addSearchHistory(id) {
  123. My.addSearchHistory(id);
  124. }
  125. renderView() {
  126. const { searchResult } = this.state;
  127. return (
  128. <div>
  129. {this.renderSearch()}
  130. {searchResult ? this.renderResult() : this.renderFilter()}
  131. </div>
  132. );
  133. }
  134. renderSearch() {
  135. const { searchHistoryList = [] } = this.props.user;
  136. const { searchList = [], keyword, focus, tip } = this.state;
  137. // console.log(focus, tip, searchHistoryList);
  138. return (
  139. <div className="search-layout">
  140. <div className="search-wrapper">
  141. <input
  142. value={keyword}
  143. onChange={e => this.onChangeSearch(e.target.value)}
  144. onFocus={() => this.setState({ focus: true })}
  145. onBlur={() => this.setState({ focus: false })}
  146. />
  147. <Button width={150} onClick={() => this.onSearch(keyword)}>
  148. <Icon className="m-r-5" type="search" />
  149. 搜索题目
  150. </Button>
  151. {(focus || tip) && (
  152. <div
  153. hidden={!keyword || searchList.length === 0}
  154. className="search-tip-wrapper"
  155. onMouseEnter={() => this.setState({ tip: true })}
  156. onMouseLeave={() => this.setState({ tip: false })}
  157. >
  158. {searchList.map(item => {
  159. return (
  160. <div
  161. className="t-2 t-s-16"
  162. onClick={() => {
  163. // this.onChangeSearch(item, true);
  164. this.onSearch(item);
  165. }}
  166. >
  167. {item}
  168. </div>
  169. );
  170. })}
  171. </div>
  172. )}
  173. {(focus || tip) && (
  174. <div
  175. hidden={keyword || searchHistoryList.length === 0}
  176. className="search-tip-wrapper"
  177. onMouseEnter={() => this.setState({ tip: true })}
  178. onMouseLeave={() => this.setState({ tip: false })}
  179. >
  180. {searchHistoryList.map((item, index) => {
  181. return (
  182. <div
  183. className="t-2 t-s-16"
  184. onClick={() => {
  185. // this.onChangeSearch(item, true);
  186. this.onSearch(item);
  187. }}
  188. >
  189. {item}
  190. <div
  191. className="f-r t-4 t-s-12 c-p"
  192. onClick={e => {
  193. e.stopPropagation();
  194. User.removeSearchIndex(index);
  195. }}
  196. >
  197. 删除
  198. </div>
  199. </div>
  200. );
  201. })}
  202. <div className="all-del t-r">
  203. <span className="t-4 t-s-12 c-p" onClick={() => User.clearSearch()}>
  204. 删除历史
  205. </span>
  206. </div>
  207. </div>
  208. )}
  209. </div>
  210. </div>
  211. );
  212. }
  213. renderFilter() {
  214. const { filterMap, sortMap } = this.state;
  215. const {
  216. subject,
  217. questionSubjectSelect,
  218. questionSubjectMap = {},
  219. difficultSelect,
  220. oneSelect,
  221. twoSelectMap = {},
  222. list = [],
  223. total,
  224. page,
  225. } = this.state;
  226. const { login } = this.props.user;
  227. return (
  228. <div className="filter-layout">
  229. <div className="content">
  230. <div style={{ right: 0, top: 0 }} className="p-a" hidden={!login}>
  231. <Link to="/question/search/history">
  232. <Assets name="history_time" className="m-r-5" /> 浏览历史 >
  233. </Link>
  234. </div>
  235. <Tabs
  236. border
  237. type="division"
  238. theme="theme"
  239. size="small"
  240. space={5}
  241. width={220}
  242. active={subject}
  243. tabs={questionSubjectSelect}
  244. onChange={key => this.onRefreshFilter({ subject: key })}
  245. />
  246. <UserAction
  247. selectList={[
  248. {
  249. key: 'questionType',
  250. placeholder: '题型',
  251. select: questionSubjectMap[subject] || [],
  252. },
  253. {
  254. label: '范围',
  255. children: [
  256. {
  257. key: 'one',
  258. placeholder: '全部',
  259. select: oneSelect,
  260. },
  261. {
  262. placeholder: '全部',
  263. key: 'two',
  264. be: 'one',
  265. selectMap: twoSelectMap,
  266. },
  267. ],
  268. },
  269. {
  270. right: true,
  271. placeholder: '难度',
  272. key: 'level',
  273. select: difficultSelect,
  274. },
  275. ]}
  276. sortList={[
  277. { key: 'time', label: '全站用时', fixed: true, right: true },
  278. { key: 'correct', label: '平均正确率', fixed: true, right: true },
  279. { key: 'collect_number', label: '收藏人数', fixed: true, right: true },
  280. ]}
  281. filterMap={filterMap}
  282. sortMap={sortMap}
  283. onSort={value => this.onSort(value)}
  284. onFilter={value => this.onFilter(value)}
  285. />
  286. {this.renderList()}
  287. {total > 0 && list.length > 0 && (
  288. <UserPagination
  289. total={total}
  290. current={page}
  291. pageSize={this.state.search.size}
  292. onChange={p => this.onChangePage(p)}
  293. />
  294. )}
  295. </div>
  296. </div>
  297. );
  298. }
  299. renderResult() {
  300. const { total, list, page } = this.state;
  301. return (
  302. <div className="result-layout">
  303. <div className="content">
  304. <div className="m-b-1">
  305. <span className="t-1 t-s-24">搜索结果:</span>
  306. <span className="t-2 t-s-18">共{total}条</span>
  307. </div>
  308. {this.renderList()}
  309. {total > 0 && list.length > 0 && (
  310. <UserPagination
  311. total={total}
  312. current={page}
  313. pageSize={this.state.search.size}
  314. onChange={p => this.onChangePage(p)}
  315. />
  316. )}
  317. </div>
  318. </div>
  319. );
  320. }
  321. renderList() {
  322. const { list } = this.state;
  323. return list.map(item => {
  324. return <SearchItem data={item} onClick={() => this.addSearchHistory(item.id)} />;
  325. });
  326. }
  327. }
  328. class SearchItem extends Component {
  329. render() {
  330. const { data = {}, onClick } = this.props;
  331. return (
  332. <div className="search-item">
  333. <div className="search-item-head">
  334. <span className="t-15 t-s-16 m-r-1">{QuestionTypeMap[data.question.questionType]}</span>
  335. <a className="t-1 t-s-16" href={`/question/detail/${data.id}`} target="_blank" onClick={() => onClick()}>
  336. {data.title}
  337. </a>
  338. <div className="f-r t-15 t-s-14">
  339. <span className="m-r-1">{data.question.difficult}</span>
  340. <span className="m-r-1">用时: {formatSeconds(data.totalTime / data.totalNumer)}</span>
  341. <span className="m-r-1">{formatPercent(data.totalCorrect, data.totalNumber, false)}</span>
  342. <span>收藏 {data.collectNumber}</span>
  343. </div>
  344. </div>
  345. <div className="t-1 p-20">{data.question.description}</div>
  346. </div>
  347. );
  348. }
  349. }