page.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Icon, Checkbox } from 'antd';
  4. import Page from '@src/containers/Page';
  5. import UserLayout from '../../../layouts/User';
  6. import UserTable from '../../../components/UserTable';
  7. import UserAction from '../../../components/UserAction';
  8. import menu from '../index';
  9. import Tabs from '../../../components/Tabs';
  10. import Modal from '../../../components/Modal';
  11. import Select from '../../../components/Select';
  12. import GIcon from '../../../components/Icon';
  13. const columns = [
  14. { key: '', title: '题型', fixSort: true },
  15. { key: '', title: '题目ID', fixSort: true },
  16. { key: '', title: '内容' },
  17. { key: '', title: '耗时', sort: true },
  18. { key: '', title: '错误率', sort: true },
  19. { key: '', title: '最近做题' },
  20. {
  21. key: '',
  22. title: '',
  23. render() {
  24. return <GIcon name="note" />;
  25. },
  26. },
  27. ];
  28. const exportType = [
  29. { key: '1', title: '题目' },
  30. { key: '2', title: '官方解析' },
  31. { key: '3', title: '我的笔记' },
  32. { key: '4', title: '千行解析', auth: true },
  33. { key: '5', title: '题源联想', auth: true },
  34. { key: '6', title: '相关问答', auth: true },
  35. ];
  36. export default class extends Page {
  37. initState() {
  38. return {
  39. tab: '1',
  40. filterMap: {},
  41. sortMap: {},
  42. data: [{}, {}],
  43. selectList: [],
  44. allChecked: false,
  45. page: 1,
  46. total: 1,
  47. showDetail: false,
  48. };
  49. }
  50. onChangeTab(tab) {
  51. this.setState({ tab });
  52. }
  53. onFilter(value) {
  54. this.setState({ filterMap: value });
  55. }
  56. onSort(value) {
  57. this.setState({ sortMap: value });
  58. }
  59. onDataChange(page) {
  60. this.setState({ page, allChecked: false, selectList: [] });
  61. }
  62. onAll(checked) {
  63. if (checked) {
  64. const { data = [] } = this.state;
  65. const list = [];
  66. data.forEach(item => {
  67. list.push(item.key);
  68. });
  69. this.setState({ selectList: list, allChecked: true });
  70. } else {
  71. this.setState({ selectList: [], allChecked: false });
  72. }
  73. }
  74. onAction() {}
  75. onSelect(selectList) {
  76. this.setState({ selectList });
  77. }
  78. renderView() {
  79. const { config } = this.props;
  80. return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  81. }
  82. renderTable() {
  83. const { tab } = this.state;
  84. return (
  85. <div className="table-layout">
  86. <Tabs
  87. border
  88. type="division"
  89. theme="theme"
  90. size="small"
  91. space={2.5}
  92. width={100}
  93. active={tab}
  94. tabs={[{ key: '1', title: '题目' }, { key: '2', title: '文章' }]}
  95. onChange={key => this.onChangeTab(key)}
  96. />
  97. {this[`renderTab${tab}`]()}
  98. {this.renderModal()}
  99. </div>
  100. );
  101. }
  102. renderTab1() {
  103. const { filterMap = {}, sortMap = {}, selectList = [], data = [], allChecked, page, total } = this.state;
  104. return (
  105. <div className="tab-1-layout">
  106. <UserAction
  107. selectList={[
  108. {
  109. children: [
  110. {
  111. key: '3',
  112. default: '1',
  113. select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
  114. },
  115. {
  116. key: 'two',
  117. be: 'one',
  118. placeholder: '全部',
  119. selectMap: {
  120. 1: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
  121. },
  122. },
  123. ],
  124. },
  125. {
  126. label: '123',
  127. key: 'one',
  128. select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
  129. },
  130. {
  131. key: 'th',
  132. right: true,
  133. select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
  134. },
  135. ]}
  136. filterMap={filterMap}
  137. onFilter={value => this.onFilter(value)}
  138. />
  139. <UserAction
  140. allCheckbox
  141. allChecked={allChecked}
  142. help
  143. btnList={[
  144. { title: '移除', key: 'remove' },
  145. { title: '组卷', key: 'group', tag: 'vip' },
  146. { title: '导出', key: 'export', tag: 'vip', disabled: true },
  147. ]}
  148. right={
  149. <div className="tip">
  150. 2019-06-03 15:30 组卷50题,做对30题。<span>移除正确题目</span> or <span>忽略</span>
  151. </div>
  152. }
  153. onAll={checked => this.onAll(checked)}
  154. onAction={key => this.onAction(key)}
  155. />
  156. <UserTable
  157. select
  158. columns={columns}
  159. sortMap={sortMap}
  160. data={data}
  161. current={page}
  162. total={total}
  163. selectList={selectList}
  164. onSelect={l => this.onSelect(l)}
  165. onSort={v => this.onSort(v)}
  166. onChange={p => this.onDataChange(p)}
  167. />
  168. </div>
  169. );
  170. }
  171. renderTab2() {
  172. const { filterMap = {}, sortMap = {} } = this.state;
  173. return (
  174. <div className="tab-1-layout">
  175. <UserAction
  176. selectList={[
  177. {
  178. key: 'one',
  179. right: true,
  180. select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
  181. },
  182. ]}
  183. sortList={[
  184. {
  185. key: '1',
  186. label: '收藏时间',
  187. },
  188. {
  189. key: '2',
  190. label: '更新时间',
  191. },
  192. ]}
  193. sortMap={sortMap}
  194. filterMap={filterMap}
  195. onFilter={value => this.onFilter(value)}
  196. onSort={value => this.onSort(value)}
  197. />
  198. {[{}, {}, {}].map(item => {
  199. return <Article data={item} onClick={() => this.setState({ showDetail: true })} />;
  200. })}
  201. </div>
  202. );
  203. }
  204. renderModal() {
  205. return [
  206. <ArticleDetail show={this.state.showDetail} onClose={() => this.setState({ showDetail: false })} />,
  207. <Modal title="操作提示" confirmText="好的,知道了" btnAlign="center" onConfirm={() => {}}>
  208. <div className="flex-layout m-b-2">
  209. <div className="flex-block">
  210. <div className="t-1 t-s-18">组卷功能</div>
  211. <div className="t-2">操作数量:10-50;</div>
  212. <div className="t-2">注意事项:可跨题型、不可跨学科。</div>
  213. </div>
  214. <div className="flex-block">
  215. <div className="t-1 t-s-18">导出功能</div>
  216. <div className="t-2">操作数量:1-100;</div>
  217. <div className="t-2">注意事项:“综合推理IR”暂时无法导出。</div>
  218. </div>
  219. </div>
  220. <div className="t-3">
  221. *您可点击
  222. <Icon type="question-circle" theme="filled" />
  223. 查阅以上信息。
  224. </div>
  225. </Modal>,
  226. <Modal title="组卷练习" confirmText="好的,知道了" btnAlign="center" onConfirm={() => {}}>
  227. <div className="t-2 t-s-18">不可同时选中语文题和数学题,请重新选择。</div>
  228. </Modal>,
  229. <Modal title="组卷练习" confirmText="开始练习" onConfirm={() => {}} onCancel={() => {}}>
  230. <div className="t-2 t-s-18">
  231. 您共选择了 <span className="t-4">50</span> 道题目,是否开始练习?
  232. </div>
  233. <div className="t-2 t-s-16">
  234. <Checkbox checked className="m-r-5" />
  235. 剔除已组卷练习 <Select
  236. theme="white"
  237. value="1"
  238. list={[{ key: '1', title: '2' }, { key: '2', title: '3' }]}
  239. />{' '}
  240. 次以上的错题
  241. </div>
  242. </Modal>,
  243. <Modal title="移出" onConfirm={() => {}} onCancel={() => {}}>
  244. <div className="t-2 t-s-18">
  245. 当前选中的 <span className="t-4">50</span> 道题即将被移出错题本,移出后无法恢复,是否继续?
  246. </div>
  247. </Modal>,
  248. <Modal title="导出" confirmText="好的,知道了" btnAlign="center" onConfirm={() => {}}>
  249. <div className="t-2 t-s-18">正在下载中,请不要关闭当前页面!</div>
  250. </Modal>,
  251. <Modal title="导出" confirmText="导出" onConfirm={() => {}} onCancel={() => {}}>
  252. <div className="t-2 t-s-18 m-b-5">
  253. 当前共选中 <span className="t-4">50</span> 道题,请确认需要导出的内容:
  254. </div>
  255. <div className="t-2 t-s-16">
  256. {exportType.map(item => {
  257. return (
  258. <div className="d-i-b m-b-5" style={{ width: 135 }}>
  259. <Checkbox checked className="m-r-5" />
  260. {item.title}
  261. </div>
  262. );
  263. })}
  264. </div>
  265. </Modal>,
  266. <Modal title="导出" confirmText="导出" onConfirm={() => {}} onCancel={() => {}}>
  267. <div className="t-2 t-s-18 m-b-5">
  268. 当前共选中 <span className="t-4">50</span> 道题,请确认需要导出的内容:
  269. </div>
  270. <div className="t-2 t-s-16 m-b-2">
  271. {exportType
  272. .filter(item => !item.auth)
  273. .map(item => {
  274. return (
  275. <div className="d-i-b m-b-2" style={{ width: 135 }}>
  276. <Checkbox checked className="m-r-5" />
  277. {item.title}
  278. </div>
  279. );
  280. })}
  281. </div>
  282. <div className="b-b m-b-2 m-t-2" />
  283. <div className="t-3 m-b-1">
  284. 以下内容需实名认证后才可导出: <a className="f-r">去认证 ></a>
  285. </div>
  286. <div className="t-2 t-s-16 m-b-2">
  287. {exportType
  288. .filter(item => item.auth)
  289. .map(item => {
  290. return (
  291. <div className="d-i-b" style={{ width: 135 }}>
  292. <Checkbox disabled className="m-r-5" />
  293. {item.title}
  294. </div>
  295. );
  296. })}
  297. </div>
  298. </Modal>,
  299. ];
  300. }
  301. }
  302. class ArticleDetail extends Component {
  303. render() {
  304. const { show, onClose, onPrev, onNext } = this.props;
  305. return (
  306. <Modal
  307. className="article-detail-modal"
  308. body={false}
  309. show={show}
  310. width={720}
  311. maskClosable
  312. close={false}
  313. onClose={onClose}
  314. center
  315. >
  316. <Icon type="left" className="prev" onClick={() => onPrev && onPrev()} />
  317. <Icon type="right" className="next" onClick={() => onNext && onNext()} />
  318. <div className="t-1 t-s-20 m-b-5">文章标题文章标题文章标题文章标题文章标题文章标题</div>
  319. <div className="t-1 t-s-12 m-b-2">
  320. <span className="m-r-2">翻翻le</span>
  321. <span className="m-r-2">学生-D</span>
  322. <span className="m-r-2">备考:2个月</span>
  323. <span className="m-r-2">750分 /提分 150+</span>
  324. <span className="t-4">更多信息</span>
  325. </div>
  326. <div className="t-2 t-s-18 detail">
  327. {' '}
  328. GMAT阅读难不一定是长度问题,主要是内容比较晦涩,结构不好把握的文章,千万不要慌张,不要害怕,此时的恐慌会让你整个昏头,不知道自己在读什么,做GMAT阅读题的时候,也许会重读好几遍,不仅慢,正确率也不好。
  329. 遇到这种类型的文章,读第一遍的时候,不要纠结于细节,甚至于不要看细节,挑出主题句和总结句,以及文章中起承转合的词或者句,然后忽略一切变态词汇。读完GMAT阅读之后,保证让自己知道这个文章讲的是个什么事,有可能你并不知道这个事情是什么,即使知道它叫什么也不要紧。然后看题,根据题目,问到什么就回去找什么,找到的东西你可能也不明白是什么。但一般情况下,较难的GMAT阅读文章的题目会相对于简单,甚至有类似送分的白痴题。因此,只要你能找对地方,静下心来,淡定应考,不要害怕,就能做对较难的GMAT阅读。
  330. 遇到这种类型的文章,读第一遍的时候,不要纠结于细节,甚至于不要看细节,挑出主题句和总结句,以及文章中起承转合的词或者句,然后忽略一切变态词汇。读完GMAT阅读之后,保证让自己知道这个文章讲的是个什么事,有可能你并不知道这个事情是什么,即使知道它叫什么也不要紧。然后看题,根据题目,问到什么就回去找什么,找到的东西你可能也不明白是什么。但一般情况下,较难的GMAT阅读文章的题目会相对于简单,甚至有类似送分的白痴题。因此,只要你能找对地方,静下心来,淡定应考,不要害怕,就能做对较难的GMAT阅读。
  331. 遇到这种类型的文章,读第一遍的时候,不要纠结于细节,甚至于不要看细节,挑出主题句和总结句,以及文章中起承转合的词或者句,然后忽略一切变态词汇。读完GMAT阅读之后,保证让自己知道这个文章讲的是个什么事,有可能你并
  332. 遇到这种类型的文章,读第一遍的时候,不要纠结于细节,甚至于不要看细节,挑出主题句和总结句,以及文章中起承转合的词或者句,然后忽略一切变态词汇。读完GMAT阅读之后,保证让自己知道这个文章讲的是个什么事,有可能你并
  333. </div>
  334. </Modal>
  335. );
  336. }
  337. }
  338. class Article extends Component {
  339. render() {
  340. const { onClick } = this.props;
  341. return (
  342. <div className="article-item p-t-2 b-b" onClick={() => onClick && onClick()}>
  343. <div className="t-1 t-s-14 f-w-b">
  344. GMAT 考试题型包括哪些呢?
  345. <div className="f-r t-3 t-s-12 f-w-d">
  346. <span>2019-04-27 15:13:31</span>
  347. <span className="m-l-2">阅读 8990</span>
  348. <span className="m-l-2">取消收藏</span>
  349. </div>
  350. </div>
  351. <div className="t-1 t-s-12 m-b-2">
  352. <span className="m-r-2">翻翻le</span>
  353. <span className="m-r-2">学生-D</span>
  354. <span className="m-r-2">备考:2个月</span>
  355. <span className="m-r-2">750分 /提分 150+</span>
  356. </div>
  357. <div className="t-2 m-b-2 detail">
  358. GMAT考试由分析写作、推理、数学和语文四部分组成。分别为: a)分析性写作评价(Analytical Writing
  359. Assessment)A:GMAT考试由分析写作、推理、数学和语文四部分组成。分别为: a)分析性写作评价(Analytical Writing
  360. Assessment)GMAT考试由分析写作、推理、数学和语文四部分组成。分别为: a)分析性写作评价(Analytical Writing
  361. Assessment)A:GMAT考试由分析写作、推理、数学和语文四部分组成。分别为: a)分析性写作评价(Analytical Writing
  362. Assessment)A:GMAT考试由分析写作、推理、数学和语文四部分组成。分别为: a)分析性写作评价
  363. </div>
  364. </div>
  365. );
  366. }
  367. }