page.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import React from 'react';
  2. import { Form, Button, Row, Col, List, Icon, Switch, Typography, Input } from 'antd';
  3. import './index.less';
  4. // import Editor from '@src/components/Editor';
  5. import Page from '@src/containers/Page';
  6. import Block from '@src/components/Block';
  7. import DragList from '@src/components/DragList';
  8. // import FileUpload from '@src/components/FileUpload';
  9. import { formatFormError, formatDate, formatTreeData, getMap } from '@src/services/Tools';
  10. import { asyncSMessage } from '@src/services/AsyncTools';
  11. import { UserUrl } from '../../../../Constant';
  12. import { Exercise } from '../../../stores/exercise';
  13. import { Course } from '../../../stores/course';
  14. export default class extends Page {
  15. init() {
  16. Exercise.courseStruct().then((result) => {
  17. const list = result.map(row => { row.title = `${row.titleZh}`; row.value = row.id; return row; });
  18. this.filterForm[0].tree = formatTreeData(list, 'id', 'title', 'parentId');
  19. this.exerciseMap = getMap(result.map(row => {
  20. row.title = `${row.titleZh}`;
  21. row.value = row.id;
  22. return row;
  23. }), 'id', 'title');
  24. this.setState({ exercise: result });
  25. });
  26. }
  27. initData() {
  28. const { id } = this.params;
  29. let handler;
  30. if (id) {
  31. handler = Course.getAsk({ id });
  32. } else {
  33. handler = Promise.resolve({ others: [] });
  34. }
  35. handler
  36. .then(result => {
  37. const { getFieldDecorator, setFieldsValue } = this.props.form;
  38. getFieldDecorator('id');
  39. getFieldDecorator('answer');
  40. getFieldDecorator('showStatus');
  41. setFieldsValue({ id: result.id, answer: result.answer, showStatus: result.showStatus });
  42. this.setState({ data: result });
  43. });
  44. }
  45. orderQuestion(oldIndex, newIndex) {
  46. const { data } = this.state;
  47. const { others = [] } = data;
  48. const tmp = others[oldIndex];
  49. others[oldIndex] = others[newIndex];
  50. others[newIndex] = tmp;
  51. this.setState({ others });
  52. }
  53. addOrder() {
  54. const { data } = this.state;
  55. const { others } = data;
  56. others.push(data);
  57. this.setState({ data });
  58. }
  59. removeOrder() {
  60. const { data } = this.state;
  61. const { others } = data;
  62. data.others = others.filter(row => row.id !== data.id);
  63. this.setState({ data });
  64. }
  65. submit() {
  66. const { form } = this.props;
  67. form.validateFields((err) => {
  68. if (!err) {
  69. const data = form.getFieldsValue();
  70. data.other = this.state.data.others.map(row => row.id);
  71. Course.editAsk(data).then(() => {
  72. asyncSMessage('保存成功');
  73. }).catch((e) => {
  74. if (e.result) form.setFields(formatFormError(data, e.result));
  75. });
  76. }
  77. });
  78. }
  79. renderBase() {
  80. const { data } = this.state;
  81. const { course = {} } = data;
  82. return <Block>
  83. <h1>提问信息</h1>
  84. <Form>
  85. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学科'>
  86. {this.exerciseMap[course.structId]}
  87. </Form.Item>
  88. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程'>
  89. <a href='' target='_blank'>{course.title}</a>
  90. </Form.Item>
  91. </Form>
  92. </Block>;
  93. }
  94. renderAsk() {
  95. const { data } = this.state;
  96. const { user = {}, createTime, courseNo, position, originContent, content } = data;
  97. return <Block>
  98. <h1>提问信息</h1>
  99. <Form>
  100. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户姓名'>
  101. {user.realName}
  102. </Form.Item>
  103. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问时间'>
  104. {formatDate(createTime)}
  105. </Form.Item>
  106. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问位置'>
  107. {`P${courseNo.no}:${position}`}
  108. </Form.Item>
  109. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问内容'>
  110. {originContent}
  111. </Form.Item>
  112. <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问详情'>
  113. {content}
  114. </Form.Item>
  115. </Form>
  116. </Block>;
  117. }
  118. renderQuestionList() {
  119. return <Block>
  120. <h1>该时段的展示中问题</h1>
  121. <DragList
  122. loading={this.props.core.loading}
  123. dataSource={this.state.data.others || []}
  124. handle={'.icon'}
  125. onMove={(oldIndex, newIndex) => {
  126. this.orderQuestion(oldIndex, newIndex);
  127. }}
  128. renderItem={(item) => (
  129. <List.Item actions={[<Icon type='bars' className='icon' />, <Typography.Text copyable={{ text: `${UserUrl}/course/ask?askId=${item.id}` }} />]}>
  130. <Row style={{ width: '100%' }}>
  131. <Col span={11}>问题:{item.content}</Col>
  132. <Col span={11} offset={1}>答复:{item.answer}</Col>
  133. </Row>
  134. </List.Item>
  135. )}
  136. /></Block>;
  137. }
  138. renderAnswer() {
  139. const { getFieldDecorator } = this.props.form;
  140. return <Block>
  141. <Form>
  142. {getFieldDecorator('id')(<input hidden />)}
  143. <Form.Item label='教师回复'>
  144. {getFieldDecorator('answer', {
  145. })(
  146. <Input.TextArea placeholder='输入内容' />,
  147. )}
  148. </Form.Item>
  149. <Row type="flex" justify="center">
  150. <Col span={12}>
  151. <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 10 }} label='显示状态'>
  152. {getFieldDecorator('showStatus', {
  153. valuePropName: 'checked',
  154. })(
  155. <Switch onChange={(value) => {
  156. if (value) {
  157. this.addOrder();
  158. } else {
  159. this.removeOrder();
  160. }
  161. }} checkedChildren='on' unCheckedChildren='off' />,
  162. )}
  163. </Form.Item>
  164. </Col>
  165. </Row>
  166. </Form>
  167. </Block>;
  168. }
  169. renderView() {
  170. return <div flex>
  171. {this.renderBase()}
  172. {this.renderAsk()}
  173. {this.renderQuestionList()}
  174. {this.renderAnswer()}
  175. <Row type="flex" justify="center">
  176. <Col>
  177. <Button type="primary" onClick={() => {
  178. this.submit();
  179. }}>保存</Button>
  180. </Col>
  181. </Row>
  182. </div>;
  183. }
  184. }