page.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import './index.less';
  4. import Page from '@src/containers/Page';
  5. import { timeRange } from '@src/services/Tools';
  6. import UserLayout from '../../../layouts/User';
  7. import UserTable from '../../../components/UserTable';
  8. import UserAction from '../../../components/UserAction';
  9. import UserPagination from '../../../components/UserPagination';
  10. import Switch from '../../../components/Switch';
  11. import menu, { refreshQuestionType, refreshStruct } from '../index';
  12. import Tabs from '../../../components/Tabs';
  13. import { TimeRange } from '../../../../Constant';
  14. import { My } from '../../../stores/my';
  15. import { OpenText } from '../../../components/Open';
  16. const columns = [
  17. {
  18. key: 'title',
  19. title: '笔记对象',
  20. width: 140,
  21. render(text, row) {
  22. return row.group ? (
  23. <div className="group">
  24. <Link to="">{text}</Link>
  25. </div>
  26. ) : (
  27. <div className="sub">{text}</div>
  28. );
  29. },
  30. },
  31. {
  32. key: 'date',
  33. title: '更新时间',
  34. width: 100,
  35. render(text, row) {
  36. return row.group ? (
  37. <div className="group">
  38. <Link to="">{text}</Link>
  39. </div>
  40. ) : (
  41. <div className="sub">
  42. <div className="date">{text.split(' ')[0]}</div>
  43. <div className="date">{text.split(' ')[1]}</div>
  44. </div>
  45. );
  46. },
  47. },
  48. {
  49. key: 'content',
  50. title: '内容',
  51. width: 540,
  52. render(text, row) {
  53. return row.group ? (
  54. <div className="group">
  55. <Link to="">{text}</Link>
  56. </div>
  57. ) : (
  58. <div className="sub">{text}</div>
  59. );
  60. },
  61. },
  62. ];
  63. export default class extends Page {
  64. constructor(props) {
  65. props.size = 10;
  66. super(props);
  67. }
  68. initState() {
  69. return {
  70. filterMap: {},
  71. sortMap: {},
  72. list: [
  73. {
  74. group: true,
  75. title: '语法',
  76. date: ' OG18 #678',
  77. content:
  78. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  79. answer:
  80. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  81. list: [
  82. {
  83. title: '题目',
  84. content:
  85. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  86. answer:
  87. '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,',
  88. },
  89. {
  90. title: '题目',
  91. content:
  92. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  93. answer:
  94. '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,',
  95. },
  96. ],
  97. },
  98. {
  99. group: true,
  100. title: '语法',
  101. date: ' OG18 #678',
  102. content:
  103. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  104. answer:
  105. '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,',
  106. list: [
  107. {
  108. title: '题目',
  109. content:
  110. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  111. answer:
  112. '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,',
  113. },
  114. {
  115. title: '题目',
  116. content:
  117. '从比较对象和句子结构我们能把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不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉',
  118. answer:
  119. '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,',
  120. },
  121. ],
  122. },
  123. ],
  124. selectList: [],
  125. tab: 'exercise',
  126. timerange: 'today',
  127. };
  128. }
  129. initData() {
  130. const data = Object.assign(this.state, this.state.search);
  131. data.filterMap = this.state.search;
  132. if (data.order) {
  133. data.sortMap = { [data.order]: data.direction };
  134. }
  135. if (data.timerange) {
  136. data.filterMap.timerange = data.timerange;
  137. }
  138. const [startTime, endTime] = timeRange(data.timerange);
  139. refreshQuestionType(this, data.subject, data.questionType, {
  140. all: true,
  141. needSentence: false,
  142. allSubject: true,
  143. }).then(({ questionTypes }) => {
  144. return refreshStruct(this, data.tab, data.one, data.two, {
  145. all: true,
  146. needPreview: false,
  147. needTextbook: true,
  148. }).then(({ structIds, latest, year }) => {
  149. My.listQuestionAsk(
  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. return `${key} ${data.sortMap[key]}`;
  157. })
  158. .join(','),
  159. },
  160. ),
  161. ).then(result => {
  162. this.setState({ list: result.list, total: result.total, page: data.page });
  163. });
  164. });
  165. });
  166. }
  167. onTabChange(tab) {
  168. const data = { tab };
  169. this.refreshQuery(data);
  170. }
  171. onFilter(value) {
  172. this.search(value);
  173. }
  174. onSort(value) {
  175. const keys = Object.keys(value);
  176. // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
  177. const { sortMap } = this.state;
  178. const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
  179. this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null });
  180. }
  181. onChangePage(page) {
  182. this.search({ page });
  183. }
  184. onAction() {}
  185. onSelect(selectList) {
  186. this.setState({ selectList });
  187. }
  188. renderView() {
  189. const { config } = this.props;
  190. return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  191. }
  192. renderTable() {
  193. const {
  194. tab,
  195. questionSubjectSelect,
  196. questionSubjectMap = {},
  197. oneSelect,
  198. twoSelectMap = {},
  199. filterMap = {},
  200. sortMap = {},
  201. list = [],
  202. } = this.state;
  203. const { total, page } = this.state;
  204. return (
  205. <div className="table-layout">
  206. <Tabs
  207. border
  208. type="division"
  209. theme="theme"
  210. size="small"
  211. space={2.5}
  212. width={100}
  213. active={tab}
  214. tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }]}
  215. onChange={key => this.onTabChange(key)}
  216. />
  217. <UserAction
  218. search
  219. selectList={[
  220. {
  221. children: [
  222. {
  223. key: 'subject',
  224. placeholder: '学科',
  225. select: questionSubjectSelect,
  226. },
  227. {
  228. placeholder: '题型',
  229. key: 'questionType',
  230. be: 'subject',
  231. selectMap: questionSubjectMap,
  232. },
  233. ],
  234. },
  235. {
  236. label: '范围',
  237. children: [
  238. {
  239. key: 'one',
  240. placeholder: '全部',
  241. select: oneSelect,
  242. },
  243. {
  244. key: 'two',
  245. be: 'one',
  246. placeholder: '全部',
  247. selectMap: twoSelectMap,
  248. },
  249. ],
  250. },
  251. {
  252. right: true,
  253. key: 'timerange',
  254. select: TimeRange,
  255. },
  256. ]}
  257. filterMap={filterMap}
  258. onFilter={value => this.onFilter(value)}
  259. />
  260. <UserAction
  261. sortList={[
  262. { right: true, label: '提问时间', key: 'create_time', fixed: true },
  263. { right: true, label: '回答时间', key: 'ask_time' },
  264. ]}
  265. sortMap={sortMap}
  266. left={
  267. <div className="email">
  268. 只看已回答{' '}
  269. <Switch
  270. checked={filterMap.askStatus}
  271. onChange={() => {
  272. filterMap.askStatus = !filterMap.askStatus;
  273. this.onFilter(filterMap);
  274. }}
  275. />
  276. </div>
  277. }
  278. onSort={value => this.onSort(value)}
  279. />
  280. {list.map(item => {
  281. return (
  282. <div className="group">
  283. <UserTable border={false} size="small" columns={columns} data={[item]} header={false} />
  284. <div className="answer-layout">
  285. <div className="title">
  286. 提问区域: <b>{item.target}</b>
  287. </div>
  288. <div className="small-tag">提问</div>
  289. <div className="desc">
  290. <OpenText>{item.content}</OpenText>
  291. </div>
  292. <div className="small-tag">回答</div>
  293. <div className="desc">
  294. <OpenText>{item.answer}</OpenText>
  295. </div>
  296. </div>
  297. </div>
  298. );
  299. })}
  300. {total && list.length > 0 && (
  301. <UserPagination total={total} current={page} onChange={p => this.onChangePage(p)} />
  302. )}
  303. </div>
  304. );
  305. }
  306. }