page.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import moment from 'moment';
  4. import { Form, Input, Button, Row, Col, InputNumber, Upload, DatePicker, Checkbox } from 'antd';
  5. import './index.less';
  6. import Editor from '@src/components/Editor';
  7. import Page from '@src/containers/Page';
  8. import Block from '@src/components/Block';
  9. import TreeSelect from '@src/components/TreeSelect';
  10. import Select from '@src/components/Select';
  11. import EditTableCell from '@src/components/EditTableCell';
  12. import Radio from '@src/components/Radio';
  13. import ActionLayout from '@src/layouts/ActionLayout';
  14. import TableLayout from '@src/layouts/TableLayout';
  15. // import FileUpload from '@src/components/FileUpload';
  16. import { formatFormError, formatSeconds, formatTreeData, getMap } from '@src/services/Tools';
  17. import { asyncSMessage } from '@src/services/AsyncTools';
  18. import { CrowdList, CourseStatus, CourseVideoType } from '../../../../Constant';
  19. import { Course } from '../../../stores/course';
  20. import { System } from '../../../stores/system';
  21. import { Exercise } from '../../../stores/exercise';
  22. const CourseStatusMap = getMap(CourseStatus, 'value', 'label');
  23. export default class extends Page {
  24. init() {
  25. this.exerciseMap = {};
  26. this.actionList = [{
  27. key: 'add',
  28. type: 'primary',
  29. name: '上传视频',
  30. render: (item) => {
  31. return <Upload
  32. showUploadList={false}
  33. beforeUpload={(file) => System.uploadVideo(file).then((result) => {
  34. return Course.addNo({ courseId: this.params.id, resource: result.url, time: result.time });
  35. }).then(() => {
  36. this.refreshNo();
  37. })}
  38. >
  39. <Button>{item.name}</Button>
  40. </Upload>;
  41. },
  42. }];
  43. this.noColumns = [{
  44. title: '课程序号',
  45. dataIndex: 'no',
  46. }, {
  47. title: '名称',
  48. dataIndex: 'title',
  49. render: (text, record) => {
  50. return <EditTableCell value={text} onChange={(v) => {
  51. this.changeNo('title', record.id, v);
  52. }} />;
  53. },
  54. }, {
  55. title: '时长',
  56. dataIndex: 'time',
  57. render: (text) => {
  58. return formatSeconds(text);
  59. },
  60. }, {
  61. title: '视频地址',
  62. dataIndex: 'resource',
  63. render: (text) => {
  64. return <a href={text} target='_blank'>访问</a>;
  65. },
  66. }, {
  67. title: '试用视频',
  68. dataIndex: 'isTrail',
  69. render: (text, record) => {
  70. return <div>
  71. <Checkbox checked={!!text} onChange={(v) => {
  72. this.changeNo('isTrail', record.id, v.target.checked ? 1 : 0);
  73. }} />
  74. {text > 0 && <InputNumber value={record.startTrail} onChange={(v) => {
  75. this.changeNo('startTrail', record.id, v);
  76. }} />}
  77. {text > 0 && <InputNumber value={record.endTrail} onChange={(v) => {
  78. this.changeNo('endTrail', record.id, v);
  79. }} />}
  80. {text > 0 && <Upload
  81. showUploadList={false}
  82. beforeUpload={(file) => System.uploadVideo(file).then((result) => {
  83. return this.changeNo('trailResource', record.id, result.url);
  84. })}
  85. >
  86. <Button>上传视频{record.trailResource ? '(已上传)' : ''}</Button>
  87. </Upload>}
  88. </div>;
  89. },
  90. }, {
  91. title: '操作',
  92. dataIndex: 'handler',
  93. render: (text, record) => {
  94. const { total } = this.state;
  95. return <div className="table-button">
  96. {record.no > 1 && (
  97. <a onClick={() => {
  98. this.changeNo('no', record.id, record.no - 1);
  99. }}>上移</a>
  100. )}
  101. {record.no <= total && (
  102. <a onClick={() => {
  103. this.changeNo('no', record.id, record.no + 1);
  104. }}>下移</a>
  105. )}
  106. {(
  107. <a onClick={() => {
  108. this.delNo(record.id);
  109. }}>删除</a>
  110. )}
  111. </div>;
  112. },
  113. }];
  114. this.timeColumns = [{
  115. title: '时间段',
  116. dataIndex: 'time',
  117. render: (text, record) => {
  118. return <DatePicker.RangePicker value={[record.startTime, record.endTime]} onChange={(value) => {
  119. this.changeTime(record.id, { startTime: value[0], endTime: value[1] });
  120. }} />;
  121. },
  122. }, {
  123. title: '学员数量',
  124. dataIndex: 'studentNumber',
  125. render: (text, record) => {
  126. return <Link to={`/course/student/${this.params.id}?timeId=${record.id}`}>{text || 0}</Link>;
  127. },
  128. }, {
  129. title: '状态',
  130. dataIndex: 'status',
  131. render: (text, record) => {
  132. let status = 0;
  133. const start = new Date(record.startTime);
  134. const end = new Date(record.endTime);
  135. if (new Date().getTime() > start.getTime()) {
  136. status = 1;
  137. if (new Date().getTime() > end.getTime()) {
  138. status = 2;
  139. }
  140. }
  141. return CourseStatusMap[status] || status;
  142. },
  143. }];
  144. Exercise.courseStruct().then((result) => {
  145. const list = result.map(row => { row.title = `${row.titleZh}`; row.value = row.id; return row; });
  146. const tree = formatTreeData(list, 'id', 'title', 'parentId');
  147. this.exerciseMap = getMap(result.map(row => {
  148. row.title = `${row.titleZh}`;
  149. row.value = row.id;
  150. return row;
  151. }), 'id');
  152. this.setState({ exercise: tree });
  153. });
  154. }
  155. initData() {
  156. const { id } = this.params;
  157. const { module } = this.state.search;
  158. let handler;
  159. if (id) {
  160. handler = Course.get({ id });
  161. } else {
  162. handler = Promise.resolve({ structId: 0, courseModule: module });
  163. }
  164. handler
  165. .then(result => {
  166. this.setState({ module: result.courseModule });
  167. const { form } = this.props;
  168. result.structId = `${result.structId}`;
  169. form.setFieldsValue(result);
  170. if (id) {
  171. switch (result.courseModule) {
  172. case 'video':
  173. this.refreshNo();
  174. break;
  175. case 'online':
  176. this.refreshTime();
  177. break;
  178. default:
  179. }
  180. }
  181. this.setState({ data: result });
  182. });
  183. }
  184. refreshNo() {
  185. const { id } = this.params;
  186. Course.allNo({ courseId: id }).then(result => {
  187. this.setState({ list: result, total: result.length, no: true });
  188. });
  189. }
  190. changeNo(field, id, value) {
  191. Course.editNo({ id, [field]: value }).then(() => {
  192. this.refreshNo();
  193. });
  194. }
  195. delNo(id) {
  196. Course.delNo({ id }).then(() => {
  197. this.refreshNo();
  198. });
  199. }
  200. refreshTime() {
  201. const { id } = this.params;
  202. Course.listTime({ courseId: id }).then(result => {
  203. result.list = result.list.map(row => {
  204. row.startTime = moment(row.startTime);
  205. row.endTime = moment(row.endTime);
  206. return row;
  207. });
  208. this.setState({ list: result.list, total: result.total, time: true });
  209. });
  210. }
  211. changeTime(id, data) {
  212. data.id = id;
  213. Course.editTime(data).then(() => {
  214. this.refreshTime();
  215. });
  216. }
  217. submit() {
  218. const { form } = this.props;
  219. const { module } = this.state;
  220. form.validateFields((err) => {
  221. if (!err) {
  222. const data = form.getFieldsValue();
  223. data.parentStructId = this.exerciseMap[data.structId] ? this.exerciseMap[data.structId].parentId : 0;
  224. data.extend = this.exerciseMap[data.structId] ? this.exerciseMap[data.structId].extend : '';
  225. let handler;
  226. if (data.id) {
  227. handler = Course.edit(data);
  228. } else {
  229. data.courseModule = module;
  230. handler = Course.add(data);
  231. }
  232. handler.then((result) => {
  233. asyncSMessage('保存成功');
  234. if (data.id) {
  235. linkTo(`/course/detail/${data.id}`);
  236. } else {
  237. linkTo(`/course/detail/${result.id}`);
  238. }
  239. }).catch((e) => {
  240. if (e.result) form.setFields(formatFormError(data, e.result));
  241. });
  242. }
  243. });
  244. }
  245. renderVideo() {
  246. const { exercise, data } = this.state;
  247. const { getFieldDecorator } = this.props.form;
  248. return <Block>
  249. <Form>
  250. {getFieldDecorator('id')(<input hidden />)}
  251. {exercise && data.structId && <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学科'>
  252. {getFieldDecorator('structId', {
  253. rules: [{
  254. required: true, message: '请选择学科',
  255. }],
  256. initialValue: data.structId,
  257. })(
  258. <TreeSelect treeData={exercise} />,
  259. )}
  260. </Form.Item>}
  261. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='类型'>
  262. {getFieldDecorator('videoType', {
  263. rules: [
  264. { required: true, message: '请选择' },
  265. ],
  266. })(
  267. <Select select={CourseVideoType} />,
  268. )}
  269. </Form.Item>
  270. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='适合人群'>
  271. {getFieldDecorator('crowd', {
  272. rules: [
  273. { required: true, message: '请选择' },
  274. ],
  275. })(
  276. <Radio select={CrowdList} />,
  277. )}
  278. </Form.Item>
  279. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='定价'>
  280. {getFieldDecorator('price', {
  281. rules: [
  282. { required: true, message: '请输入价格' },
  283. ],
  284. })(
  285. <InputNumber placeholder='请输入' />,
  286. )}
  287. </Form.Item>
  288. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程名称'>
  289. {getFieldDecorator('title', {
  290. rules: [
  291. { required: true, message: '请输入课程名称' },
  292. ],
  293. })(
  294. <Input placeholder='请输入课程名称' />,
  295. )}
  296. </Form.Item>
  297. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='教师'>
  298. {getFieldDecorator('teacher', {
  299. rules: [
  300. { required: true, message: '请输入教师' },
  301. ],
  302. })(
  303. <Input placeholder='请输入教师' />,
  304. )}
  305. </Form.Item>
  306. </Form>
  307. </Block>;
  308. }
  309. renderNo() {
  310. const { no } = this.state;
  311. if (!no) return null;
  312. return <Block>
  313. <h1>上传正式视频</h1>
  314. <ActionLayout
  315. itemList={this.actionList}
  316. selectedKeys={this.state.selectedKeys}
  317. onAction={key => this.onAction(key)}
  318. />
  319. <TableLayout
  320. columns={this.noColumns}
  321. list={this.state.list}
  322. pagination={false}
  323. loading={this.props.core.loading}
  324. onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
  325. onSelect={(keys, rows) => this.tableSelect(keys, rows)}
  326. selectedKeys={this.state.selectedKeys}
  327. />
  328. </Block>;
  329. }
  330. renderInfoVideo() {
  331. const { getFieldDecorator } = this.props.form;
  332. return <Block flex>
  333. <h1>课程介绍</h1>
  334. <Form>
  335. <Form.Item label='老师资历'>
  336. {getFieldDecorator('teacherContent', {
  337. })(
  338. <Editor placeholder='输入内容' />,
  339. )}
  340. </Form.Item>
  341. <Form.Item label='基本参数'>
  342. {getFieldDecorator('baseContent', {
  343. })(
  344. <Editor placeholder='输入内容' />,
  345. )}
  346. </Form.Item>
  347. <Form.Item label='授课内容'>
  348. {getFieldDecorator('courseContent', {
  349. })(
  350. <Editor placeholder='输入内容' />,
  351. )}
  352. </Form.Item>
  353. <Form.Item label='授课重点'>
  354. {getFieldDecorator('pointContent', {
  355. })(
  356. <Editor placeholder='输入内容' />,
  357. )}
  358. </Form.Item>
  359. <Form.Item label='适合人群'>
  360. {getFieldDecorator('crowdContent', {
  361. })(
  362. <Editor placeholder='输入内容' />,
  363. )}
  364. </Form.Item>
  365. </Form>
  366. </Block>;
  367. }
  368. renderSyllabus() {
  369. const { getFieldDecorator } = this.props.form;
  370. return <Block flex>
  371. <Form>
  372. <Form.Item label='授课大纲'>
  373. {getFieldDecorator('syllabusContent', {
  374. })(
  375. <Editor placeholder='输入内容' />,
  376. )}
  377. </Form.Item>
  378. </Form>
  379. </Block>;
  380. }
  381. renderPromote() {
  382. const { getFieldDecorator } = this.props.form;
  383. return <Block flex>
  384. <Form>
  385. <Form.Item label='优惠信息'>
  386. {getFieldDecorator('promoteContent', {
  387. })(
  388. <Editor placeholder='输入内容' />,
  389. )}
  390. </Form.Item>
  391. </Form>
  392. </Block>;
  393. }
  394. renderOnline() {
  395. const { exercise, data } = this.state;
  396. const { getFieldDecorator } = this.props.form;
  397. return <Block>
  398. <Form>
  399. {getFieldDecorator('id')(<input hidden />)}
  400. {exercise && data.structId && <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学科'>
  401. {getFieldDecorator('structId', {
  402. rules: [{
  403. required: true, message: '请选择学科',
  404. }],
  405. initialValue: data.structId,
  406. })(
  407. <TreeSelect treeData={exercise} />,
  408. )}
  409. </Form.Item>}
  410. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程名称'>
  411. {getFieldDecorator('title', {
  412. rules: [
  413. { required: true, message: '请输入课程名称' },
  414. ],
  415. })(
  416. <Input placeholder='请输入课程名称' />,
  417. )}
  418. </Form.Item>
  419. </Form>
  420. </Block>;
  421. }
  422. renderTime() {
  423. const { time, timerange } = this.state;
  424. if (!time) return null;
  425. return <Block>
  426. <h1>课时管理</h1>
  427. <TableLayout
  428. columns={this.timeColumns}
  429. list={this.state.list}
  430. pagination={false}
  431. loading={this.props.core.loading}
  432. onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
  433. onSelect={(keys, rows) => this.tableSelect(keys, rows)}
  434. selectedKeys={this.state.selectedKeys}
  435. />
  436. <Row>
  437. <Col span={8}>
  438. <Form.Item>
  439. <DatePicker.RangePicker value={timerange} onChange={(value) => {
  440. this.setState({ timerange: value });
  441. }} />
  442. </Form.Item>
  443. </Col>
  444. <Col span={1}>
  445. <Form.Item>
  446. <Button onClick={() => {
  447. Course.addTime({ courseId: this.params.id, startTime: timerange[0], endTime: timerange[1] }).then(() => {
  448. this.refreshTime();
  449. this.setState({ timerange: null });
  450. });
  451. }}>添加</Button>
  452. </Form.Item>
  453. </Col>
  454. </Row>
  455. </Block>;
  456. }
  457. renderContent() {
  458. switch (this.state.module) {
  459. case 'online':
  460. return [this.renderOnline(), this.renderTime()];
  461. case 'video':
  462. return [this.renderVideo(), this.renderNo(), this.renderInfoVideo(), this.renderSyllabus(), this.renderPromote()];
  463. default:
  464. return <div />;
  465. }
  466. }
  467. renderView() {
  468. return <div flex>
  469. {this.renderContent()}
  470. <Row type="flex" justify="center">
  471. <Col>
  472. <Button type="primary" onClick={() => {
  473. this.submit();
  474. }}>保存</Button>
  475. </Col>
  476. </Row>
  477. </div>;
  478. }
  479. }