page.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. import React from 'react';
  2. import moment from 'moment';
  3. import { DatePicker, Checkbox, Modal, Form, Input, Row, Col, Button, Upload } from 'antd';
  4. import './index.less';
  5. import Page from '@src/containers/Page';
  6. import Block from '@src/components/Block';
  7. // import FilterLayout from '@src/layouts/FilterLayout';
  8. import ActionLayout from '@src/layouts/ActionLayout';
  9. import TableLayout from '@src/layouts/TableLayout';
  10. import { formatDate, formatSecond, formatPercent } from '@src/services/Tools';
  11. import { asyncSMessage, asyncForm } from '@src/services/AsyncTools';
  12. import { UserUrl } from '../../../../Constant';
  13. import { Course } from '../../../stores/course';
  14. import { User } from '../../../stores/user';
  15. import { System } from '../../../stores/system';
  16. export default class extends Page {
  17. init() {
  18. this.videoColumns = [{
  19. title: '课时',
  20. dataIndex: 'courseNo.no',
  21. }, {
  22. title: '课时名称',
  23. dataIndex: 'courseNo.title',
  24. }, {
  25. title: '学习记录',
  26. dataIndex: 'records',
  27. render: (text) => {
  28. return (text || []).map(row => {
  29. return <p>{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')} {formatSecond(row.userTime)}</p>;
  30. });
  31. },
  32. }, {
  33. title: '预习作业进度',
  34. dataIndex: 'userPaper',
  35. render: (text, record) => {
  36. return `${text.times}遍+${formatPercent(record.userReport.userNumber, record.userReport.questionNumber)}`;
  37. },
  38. }, {
  39. title: '操作',
  40. dataIndex: 'handler',
  41. render: (text, record) => {
  42. return <div className="table-button">
  43. {<a onClick={() => {
  44. User.locationUser(record.userId, `${UserUrl}/my/report`);
  45. }}>查看</a>}
  46. </div>;
  47. },
  48. }];
  49. this.vsAction = [{
  50. key: 'addAppointment',
  51. name: '添加预约',
  52. }];
  53. this.vsList = [{
  54. key: 'id',
  55. type: 'hidden',
  56. }, {
  57. key: 'title',
  58. type: 'input',
  59. name: '课程名称',
  60. }, {
  61. key: 'timerange',
  62. type: 'daterange',
  63. showTime: true,
  64. name: '上课时间',
  65. }, {
  66. key: 'cctalkChannel',
  67. type: 'input',
  68. name: '频道号',
  69. }];
  70. this.vsColumns = [{
  71. title: '课时序号',
  72. dataIndex: 'no',
  73. render: (text) => {
  74. const { data } = this.state;
  75. return `${text}/${data.number}`;
  76. },
  77. }, {
  78. title: '上课时间',
  79. dataIndex: 'time',
  80. render: (text, record) => {
  81. return <DatePicker.RangePicker showTime value={[record.startTime, record.endTime]} onChange={(value) => {
  82. this.changeAppointment(record.id, { startTime: value[0], endTime: value[1] });
  83. }} />;
  84. },
  85. }, {
  86. title: '课程名称',
  87. dataIndex: 'title',
  88. }, {
  89. title: '频道号',
  90. dataIndex: 'cctalkChannel',
  91. }, {
  92. title: '学习进度',
  93. dataIndex: 'isFinish',
  94. render: (text, record) => {
  95. return <Checkbox checked={text > 0} onChange={(e) => {
  96. this.changeAppointment(record.id, { isFinish: e.target.checked ? 1 : 0 });
  97. }} />;
  98. },
  99. }, {
  100. title: '预习作业',
  101. dataIndex: 'userPaper',
  102. render: (text, record) => {
  103. return text ? <a onClick={() => {
  104. User.locationUser(record.userId, `${UserUrl}/paper/report/${record.reportId}`);
  105. }}>查看{text.times > 0 ? '(已完成)' : ''}</a> : '';
  106. },
  107. }, {
  108. title: '笔记批阅',
  109. dataIndex: 'noteList',
  110. render: (text, record) => {
  111. return <a onClick={() => {
  112. this.noteAction(record);
  113. }}>查看</a>;
  114. },
  115. }, {
  116. title: '课后补充',
  117. dataIndex: 'supplyList',
  118. render: (text, record) => {
  119. return <a onClick={() => {
  120. this.supplyAction(record);
  121. }}>查看</a>;
  122. },
  123. }];
  124. }
  125. initData() {
  126. const { id } = this.params;
  127. let handler;
  128. if (id) {
  129. handler = Course.listStudy({ ids: [id] });
  130. }
  131. handler
  132. .then(result => {
  133. const [row] = result.list;
  134. if (!row) {
  135. asyncSMessage('记录不存在');
  136. return;
  137. }
  138. const { course } = row;
  139. this.setState({ data: row, module: course.courseModule });
  140. this.refresh();
  141. });
  142. }
  143. refresh() {
  144. // const { id } = this.params;
  145. const { module } = this.state;
  146. switch (module) {
  147. case 'video':
  148. this.refreshVideo();
  149. break;
  150. case 'online':
  151. break;
  152. case 'vs':
  153. this.refreshVs();
  154. break;
  155. default:
  156. }
  157. }
  158. refreshVideo() {
  159. const { id } = this.params;
  160. User.allCourseRecord(Object.assign({ recordId: id }, this.state.search)).then(result => {
  161. this.setTableData(result, result ? result.length : 0);
  162. });
  163. }
  164. refreshVs() {
  165. const { id } = this.params;
  166. User.listCourseAppointment(Object.assign({ recordId: id }, this.state.search)).then(result => {
  167. result.list = result.list.map(row => {
  168. row.startTime = moment(row.startTime);
  169. row.endTime = moment(row.endTime);
  170. return row;
  171. });
  172. this.setTableData(result.list, result.total);
  173. });
  174. }
  175. changeAppointment(id, data) {
  176. data.id = id;
  177. return User.editCourseAppointment(data).then(() => {
  178. this.refreshVs();
  179. this.cleanInfo();
  180. });
  181. }
  182. addAppointmentAction() {
  183. const { id } = this.params;
  184. asyncForm('添加', this.vsList, {}, info => {
  185. const { data } = this.state;
  186. ([info.startTime, info.endTime] = info.timerange);
  187. return User.addCourseAppointment(Object.assign({ recordId: id, userId: data.userId, courseId: data.courseId, noteList: [], supplyList: [] }, info)).then(() => {
  188. asyncSMessage('添加成功!');
  189. this.refreshVs();
  190. });
  191. }).catch(err => {
  192. console.log(err);
  193. });
  194. }
  195. noteAction(record) {
  196. this.open(record, 'note');
  197. }
  198. supplyAction(record) {
  199. this.open(record, 'supply');
  200. }
  201. deleteAppointment(row) {
  202. User.delCourseAppointment({ id: row.id }).then(() => {
  203. asyncSMessage('删除成功!');
  204. this.refresh();
  205. });
  206. }
  207. changeInfo(key, data) {
  208. const info = this.state[key] || {};
  209. this.setState({ [key]: Object.assign(info, data) });
  210. }
  211. cleanInfo() {
  212. this.setState({ supplyInfo: null, noteInfo: null });
  213. }
  214. renderVs() {
  215. const { data, page } = this.state;
  216. return <div flex>
  217. {data.number > page.total && <ActionLayout
  218. itemList={this.vsAction}
  219. selectedKeys={this.state.selectedKeys}
  220. onAction={key => this.onAction(key)}
  221. />}
  222. <TableLayout
  223. columns={this.vsColumns}
  224. list={this.state.list}
  225. pagination={this.state.page}
  226. loading={this.props.core.loading}
  227. onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
  228. onSelect={(keys, rows) => this.tableSelect(keys, rows)}
  229. selectedKeys={this.state.selectedKeys}
  230. />
  231. {this.state.note && <Modal visible closable title='课后笔记' footer={null} onCancel={() => {
  232. this.cleanInfo();
  233. this.close(false, 'note');
  234. }}>
  235. {(this.state.note.noteList || []).map(row => {
  236. return <p>{formatDate(row.time)}: {<a href={row.url} target='_blank'>{row.name}</a>}</p>;
  237. })}
  238. <Form>
  239. <Row>
  240. <Col span={1}><Upload
  241. showUploadList={false}
  242. beforeUpload={(file) => System.uploadImage(file).then((result) => {
  243. this.changeInfo('noteInfo', { url: result.url, name: file.name, time: new Date() });
  244. return Promise.reject();
  245. })}
  246. >
  247. <Button>上传文档{(this.state.noteInfo || {}).url ? '(已上传)' : ''}</Button>
  248. </Upload></Col>
  249. <Col span={1} offset={20}><Button type='primary' onClick={() => {
  250. if (!this.state.noteInfo || !this.state.noteInfo.url) return;
  251. let { noteList = [] } = this.state.note;
  252. noteList = noteList || [];
  253. noteList.push(this.state.noteInfo);
  254. this.changeAppointment(this.state.note.id, { noteList });
  255. }}>发布</Button></Col>
  256. </Row>
  257. </Form>
  258. </Modal>}
  259. {this.state.supply && <Modal visible closable title='课后补充' footer={null} onCancel={() => {
  260. this.cleanInfo();
  261. this.close(false, 'supply');
  262. }}>
  263. {(this.state.supply.supplyList || []).map(row => {
  264. return [<p>{formatDate(row.time)}:{<a href={row.url} target='_blank'>{row.name}</a>}</p>, <p>留言 - {row.content}</p>];
  265. })}
  266. <Form>
  267. <Row>
  268. <Col span={12}>
  269. <Input value={(this.state.supplyInfo || {}).content || ''} onChange={value => {
  270. this.changeInfo('supplyInfo', { content: value });
  271. }} />
  272. </Col>
  273. <Col span={1}><Upload
  274. showUploadList={false}
  275. beforeUpload={(file) => System.uploadImage(file).then((result) => {
  276. this.changeInfo('supplyInfo', { url: result.url, name: file.name, time: new Date() });
  277. return Promise.reject();
  278. })}
  279. >
  280. <Button>上传文档{(this.state.supplyInfo || {}).url ? '(已上传)' : ''}</Button>
  281. </Upload></Col>
  282. <Col span={1} offset={8}><Button type='primary' onClick={() => {
  283. if (!this.state.supplyInfo || !this.state.supplyInfo.url) return;
  284. let { supplyList = [] } = this.state.supply;
  285. supplyList = supplyList || [];
  286. supplyList.push(this.state.supplyInfo);
  287. this.changeAppointment(this.state.supply.id, { supplyList });
  288. }}>发布</Button></Col>
  289. </Row>
  290. </Form>
  291. </Modal>}
  292. </div>;
  293. }
  294. renderVideo() {
  295. return <div flex>
  296. <TableLayout
  297. columns={this.videoColumns}
  298. list={this.state.list}
  299. pagination={this.state.page}
  300. loading={this.props.core.loading}
  301. onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
  302. onSelect={(keys, rows) => this.tableSelect(keys, rows)}
  303. selectedKeys={this.state.selectedKeys}
  304. />
  305. </div>;
  306. }
  307. renderDetail() {
  308. switch (this.state.module) {
  309. case 'online':
  310. return [];
  311. case 'vs':
  312. return [this.renderVs()];
  313. case 'video':
  314. return [this.renderVideo()];
  315. default:
  316. return <div />;
  317. }
  318. }
  319. renderView() {
  320. const { data = {} } = this.state;
  321. const { course = {} } = data;
  322. return <Block flex>
  323. <h1>{course.title}{data.vsNo > 0 ? `V${data.vsNo}` : ''}{data.number > 0 ? `(${data.number}课时)` : ''}</h1>
  324. {this.renderDetail()}
  325. </Block>;
  326. }
  327. }