page.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  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, getMap, formatDate } from '@src/services/Tools';
  6. import UserLayout from '../../../layouts/User';
  7. import Button from '../../../components/Button';
  8. import UserTable from '../../../components/UserTable';
  9. import UserAction from '../../../components/UserAction';
  10. import UserPagination from '../../../components/UserPagination';
  11. import Switch from '../../../components/Switch';
  12. import menu, { refreshQuestionType, refreshStruct } from '../index';
  13. import Tabs from '../../../components/Tabs';
  14. import { TimeRange, AskTarget, QuestionType } from '../../../../Constant';
  15. import { My } from '../../../stores/my';
  16. import { OpenText } from '../../../components/Open';
  17. const AskTargetMap = getMap(AskTarget, 'value', 'label');
  18. const QuestionTypeMap = getMap(QuestionType, 'value', 'label');
  19. const columns = [
  20. {
  21. key: 'questionType',
  22. width: 140,
  23. render(text, row) {
  24. return <div className="group">
  25. <Link to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}>{QuestionTypeMap[text]}</Link>
  26. </div>;
  27. },
  28. },
  29. {
  30. key: 'title',
  31. width: 100,
  32. render(text, row) {
  33. return <div className="group">
  34. <Link to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}>{text}</Link>
  35. </div>;
  36. },
  37. },
  38. {
  39. key: 'content',
  40. width: 540,
  41. render(text, row) {
  42. return <div className="group text-hidden"><Link to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}>{text}</Link></div>;
  43. },
  44. },
  45. ];
  46. export default class extends Page {
  47. constructor(props) {
  48. props.size = 10;
  49. super(props);
  50. }
  51. initState() {
  52. return {
  53. filterMap: {},
  54. sortMap: {},
  55. list: [],
  56. selectList: [],
  57. tab: 'exercise',
  58. timerange: 'today',
  59. };
  60. }
  61. initData() {
  62. const data = Object.assign(this.state, this.state.search);
  63. data.filterMap = this.state.search;
  64. if (data.order) {
  65. data.sortMap = { [data.order]: data.direction };
  66. }
  67. if (data.timerange) {
  68. data.filterMap.timerange = data.timerange;
  69. }
  70. const [startTime, endTime] = timeRange(data.timerange);
  71. refreshQuestionType(this, data.subject, data.questionType, {
  72. all: true,
  73. needSentence: false,
  74. allSubject: true,
  75. }).then(({ questionTypes }) => {
  76. return refreshStruct(this, data.tab, data.one, data.two, {
  77. all: true,
  78. needPreview: false,
  79. needTextbook: true,
  80. }).then(({ structIds, latest, year }) => {
  81. My.listQuestionAsk(
  82. Object.assign(
  83. { module: data.tab, questionTypes, structIds, latest, year, startTime, endTime },
  84. this.state.search,
  85. {
  86. order: Object.keys(data.sortMap)
  87. .map(key => {
  88. return `${key} ${data.sortMap[key]}`;
  89. })
  90. .join(','),
  91. },
  92. ),
  93. ).then(result => {
  94. result.list = result.list.map(row => {
  95. row.group = true;
  96. row.questionType = row.question.questionType;
  97. row.title = row.questionNo.title;
  98. row.content = row.question.description;
  99. return row;
  100. });
  101. this.setState({ list: result.list, total: result.total, page: data.page });
  102. });
  103. });
  104. });
  105. }
  106. onTabChange(tab) {
  107. const data = { tab };
  108. this.refreshQuery(data);
  109. }
  110. onFilter(value) {
  111. this.search(value);
  112. }
  113. onSort(value) {
  114. const keys = Object.keys(value);
  115. // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
  116. const { sortMap } = this.state;
  117. const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
  118. this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null });
  119. }
  120. onChangePage(page) {
  121. this.search({ page });
  122. }
  123. onAction() { }
  124. onSelect(selectList) {
  125. this.setState({ selectList });
  126. }
  127. delAsk(id) {
  128. My.delQuestionAsk(id)
  129. .then(() => {
  130. this.refresh();
  131. });
  132. }
  133. renderView() {
  134. const { config } = this.props;
  135. return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  136. }
  137. renderTable() {
  138. const {
  139. tab,
  140. questionSubjectSelect,
  141. questionSubjectMap = {},
  142. oneSelect,
  143. twoSelectMap = {},
  144. filterMap = {},
  145. sortMap = {},
  146. list = [],
  147. } = this.state;
  148. const { total, page } = this.state;
  149. return (
  150. <div className="table-layout">
  151. <Tabs
  152. border
  153. type="division"
  154. theme="theme"
  155. size="small"
  156. space={2.5}
  157. width={100}
  158. active={tab}
  159. tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }]}
  160. onChange={key => this.onTabChange(key)}
  161. />
  162. <UserAction
  163. search
  164. selectList={[
  165. {
  166. children: [
  167. {
  168. key: 'subject',
  169. placeholder: '学科',
  170. select: questionSubjectSelect,
  171. },
  172. {
  173. placeholder: '题型',
  174. key: 'questionType',
  175. be: 'subject',
  176. selectMap: questionSubjectMap,
  177. },
  178. ],
  179. },
  180. {
  181. label: '范围',
  182. children: [
  183. {
  184. key: 'one',
  185. placeholder: '全部',
  186. select: oneSelect,
  187. },
  188. {
  189. key: 'two',
  190. be: 'one',
  191. placeholder: '全部',
  192. selectMap: twoSelectMap,
  193. },
  194. ],
  195. },
  196. {
  197. right: true,
  198. key: 'timerange',
  199. select: TimeRange,
  200. },
  201. ]}
  202. filterMap={filterMap}
  203. onFilter={value => this.onFilter(value)}
  204. />
  205. <UserAction
  206. sortList={[
  207. { right: true, label: '提问时间', key: 'create_time' },
  208. { right: true, label: '回答时间', key: 'ask_time' },
  209. ]}
  210. sortMap={sortMap}
  211. left={
  212. <div className="email">
  213. 只看已回答{' '}
  214. <Switch
  215. checked={Number(filterMap.askStatus)}
  216. onChange={() => {
  217. filterMap.askStatus = Number(filterMap.askStatus) ? null : 1;
  218. this.onFilter(filterMap);
  219. }}
  220. />
  221. </div>
  222. }
  223. onSort={value => this.onSort(value)}
  224. />
  225. {list.map(item => {
  226. return (
  227. <div className="group">
  228. <UserTable border={false} size="small" columns={columns} data={[item]} header={false} />
  229. <div className="answer-layout">
  230. <div className="title">
  231. 提问区域: <b>{AskTargetMap[item.target]}</b>
  232. {item.answerStatus === 0 && <div className='f-r'><Button radius size='small' onClick={() => this.delAsk(item.id)}>删除</Button></div>}
  233. </div>
  234. <div><div className="small-tag">提问</div><div className='f-r t-2 t-s-12'>{formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')}</div></div>
  235. <div className="desc">
  236. <OpenText>{item.content}</OpenText>
  237. </div>
  238. {item.answerStatus > 0 && <div><div className="small-tag">回答</div><div className='f-r t-2 t-s-12'>{formatDate(item.answerTime, 'YYYY-MM-DD HH:mm:ss')}</div></div>}
  239. {item.answerStatus > 0 && <div className="desc">
  240. <OpenText>{item.answer}</OpenText>
  241. </div>}
  242. </div>
  243. </div>
  244. );
  245. })}
  246. {total > 0 && list.length > 0 && (
  247. <UserPagination total={total} pageSize={this.state.search.size} current={page} onChange={p => this.onChangePage(p)} />
  248. )}
  249. </div>
  250. );
  251. }
  252. }