page.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import React from 'react';
  2. import { Form, Input, Button, Row, Col, DatePicker } from 'antd';
  3. import './index.less';
  4. import Page from '@src/containers/Page';
  5. import Block from '@src/components/Block';
  6. import Select from '@src/components/Select';
  7. // import FileUpload from '@src/components/FileUpload';
  8. import { formatFormError, generateSearch, getMap } from '@src/services/Tools';
  9. import { asyncSMessage } from '@src/services/AsyncTools';
  10. import QuestionNoList from '../../../components/QuestionNoList';
  11. import { Preview } from '../../../stores/preview';
  12. import { User } from '../../../stores/user';
  13. import { Question } from '../../../stores/question';
  14. import { Exercise } from '../../../stores/exercise';
  15. import config from './index';
  16. export default class extends Page {
  17. constructor(props) {
  18. super(props);
  19. const { id } = this.params;
  20. if (id) {
  21. config.title = '编辑预习作业';
  22. } else {
  23. config.title = '添加预习作业';
  24. }
  25. }
  26. init() {
  27. Exercise.allStruct().then(result => {
  28. result = result.filter(row => row.level === 2).map(row => { row.title = `${row.titleZh}/${row.titleEn}`; row.value = row.id; return row; });
  29. this.setState({ exercise: result });
  30. });
  31. }
  32. initData() {
  33. const { id } = this.params;
  34. const { form } = this.props;
  35. let handler;
  36. if (id) {
  37. handler = Preview.get({ id });
  38. } else {
  39. handler = Promise.resolve({ questionNoIds: [] });
  40. }
  41. handler
  42. .then(result => {
  43. const { questionNoIds } = result;
  44. form.setFieldsValue(result);
  45. generateSearch('userIds', { mode: 'multiple' }, this, (search) => {
  46. return User.list(search);
  47. }, (row) => {
  48. return {
  49. title: `${row.nickname}(${row.mobile})`,
  50. value: row.id,
  51. };
  52. }, result.userIds || [], null);
  53. this.setState({ questionNoIds });
  54. });
  55. }
  56. submit() {
  57. const { form } = this.props;
  58. form.validateFields((err) => {
  59. if (!err) {
  60. const data = form.getFieldsValue();
  61. let handler;
  62. data.questionNoIds = this.state.questionNos.map(row => row.id);
  63. if (data.id) {
  64. handler = Preview.add(data);
  65. } else {
  66. handler = Preview.edit(data);
  67. }
  68. handler.then(() => {
  69. asyncSMessage('保存成功');
  70. }).catch((e) => {
  71. if (e.result) form.setFields(formatFormError(data, e.result));
  72. });
  73. }
  74. });
  75. }
  76. deleteQuestion(index) {
  77. const { questionNos } = this.state;
  78. questionNos.splice(index, 1);
  79. this.setState({ questionNos });
  80. this.props.form.setFieldsValue({ questionNos: questionNos.map(row => row.no) });
  81. }
  82. orderQuestion(oldIndex, newIndex) {
  83. const { questionNos } = this.state;
  84. const tmp = questionNos[oldIndex];
  85. questionNos[oldIndex] = questionNos[newIndex];
  86. questionNos[newIndex] = tmp;
  87. this.setState({ questionNos });
  88. this.props.form.setFieldsValue({ questionNos: questionNos.map(row => row.no) });
  89. }
  90. searchQuestion(values, field = 'nos') {
  91. if (values.length === 0) {
  92. this.setState({ questionNos: [] });
  93. return;
  94. }
  95. // 查找练习题目
  96. Question.listNo({ [field]: values, module: 'exercise' }).then(result => {
  97. const map = getMap(result, 'no');
  98. const questionNos = values.map(no => map[no]).filter(row => row);
  99. this.setState({ questionNos });
  100. this.props.form.setFieldsValue({ questionNos: questionNos.map(row => row.no) });
  101. });
  102. }
  103. renderBase() {
  104. const { getFieldDecorator } = this.props.form;
  105. return <Block>
  106. <Form>
  107. {getFieldDecorator('id')(<input hidden />)}
  108. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='选择课程'>
  109. {getFieldDecorator('category', {
  110. rules: [
  111. { required: true, message: '请选择课程' },
  112. ],
  113. })(
  114. <Select select={this.state.exercise} placeholder='请选择课程' />,
  115. )}
  116. </Form.Item>
  117. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='起止时间'>
  118. {getFieldDecorator('time', {
  119. rules: [
  120. { required: true, message: '请输入起止时间' },
  121. ],
  122. })(
  123. <DatePicker.RangePicker />,
  124. )}
  125. </Form.Item>
  126. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='作业标题'>
  127. {getFieldDecorator('title', {
  128. rules: [
  129. { required: true, message: '请输入作业标题' },
  130. ],
  131. })(
  132. <Input placeholder='请输入作业标题' />,
  133. )}
  134. </Form.Item>
  135. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='指定做题人'>
  136. {getFieldDecorator('userIds', {
  137. rules: [
  138. { required: true, message: '请指定做题人' },
  139. ],
  140. })(
  141. <Select {...this.state.userIds} placeholder='请指定做题人' />,
  142. )}
  143. </Form.Item>
  144. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='选择作业题'>
  145. {getFieldDecorator('questionNos', {
  146. rules: [
  147. { required: true, message: '请选择作业题' },
  148. ],
  149. })(
  150. <Select mode='tags' maxTagCount={200} notFoundContent={null} placeholder='输入题目id, 逗号分隔' tokenSeparators={[',', ',']} onChange={(values) => {
  151. this.setState({ questionNos: values });
  152. }} />,
  153. )}
  154. </Form.Item>
  155. </Form>
  156. </Block>;
  157. }
  158. renderQuestionList() {
  159. const { getFieldDecorator, setFieldsValue } = this.props.form;
  160. return <Block>
  161. <h1>题目预览</h1>
  162. <QuestionNoList module='exercise' loading={false} ids={this.state.questionNoIds} nos={this.state.questionNos} onChange={(questionNos) => {
  163. this.questionNos = questionNos;
  164. getFieldDecorator('questionNos');
  165. setFieldsValue({ questionNos: questionNos.map(row => row.no) });
  166. }} />
  167. </Block>;
  168. }
  169. renderView() {
  170. return <div flex>
  171. {this.renderBase()}
  172. {this.renderQuestionList()}
  173. <Row type="flex" justify="center">
  174. <Col>
  175. <Button type="primary" onClick={() => {
  176. this.submit();
  177. }}>保存</Button>
  178. </Col>
  179. </Row>
  180. </div>;
  181. }
  182. }