|
@@ -0,0 +1,213 @@
|
|
|
+import React from 'react';
|
|
|
+import { Form, Button, Row, Col, List, Icon, Switch, Typography, Input } from 'antd';
|
|
|
+import './index.less';
|
|
|
+import Editor from '@src/components/Editor';
|
|
|
+import Page from '@src/containers/Page';
|
|
|
+import Block from '@src/components/Block';
|
|
|
+import DragList from '@src/components/DragList';
|
|
|
+// import FileUpload from '@src/components/FileUpload';
|
|
|
+import { formatFormError, formatDate, getMap } from '@src/services/Tools';
|
|
|
+import { asyncSMessage } from '@src/services/AsyncTools';
|
|
|
+import { UserUrl, AskTarget, QuestionType } from '../../../../Constant';
|
|
|
+// import { User } from '../../../stores/user';
|
|
|
+import { Question } from '../../../stores/question';
|
|
|
+
|
|
|
+const QuestionTypeMap = getMap(QuestionType, 'value', 'label');
|
|
|
+const AskTargetMap = getMap(AskTarget, 'value', 'label');
|
|
|
+export default class extends Page {
|
|
|
+ init() {
|
|
|
+ // Exercise.allStruct().then(result => {
|
|
|
+ // result = result.filter(row => row.level === 2).map(row => { row.title = `${row.titleZh}/${row.titleEn}`; row.value = row.id; return row; });
|
|
|
+ // this.setState({ exercise: result });
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+ initData() {
|
|
|
+ const { id } = this.params;
|
|
|
+ let handler;
|
|
|
+ if (id) {
|
|
|
+ handler = Question.getAsk({ id });
|
|
|
+ } else {
|
|
|
+ handler = Promise.resolve({ others: [] });
|
|
|
+ }
|
|
|
+ handler
|
|
|
+ .then(result => {
|
|
|
+ result.ignoreStatus = result.answerStatus === 2;
|
|
|
+ const { getFieldDecorator, setFieldsValue } = this.props.form;
|
|
|
+ getFieldDecorator('id');
|
|
|
+ getFieldDecorator('answer');
|
|
|
+ getFieldDecorator('showStatus');
|
|
|
+ setFieldsValue({ id: result.id, answer: result.answer, showStatus: result.showStatus });
|
|
|
+ this.setState({ data: result });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ orderQuestion(oldIndex, newIndex) {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { others = [] } = data;
|
|
|
+ const tmp = others[oldIndex];
|
|
|
+ others[oldIndex] = others[newIndex];
|
|
|
+ others[newIndex] = tmp;
|
|
|
+ this.setState({ others });
|
|
|
+ }
|
|
|
+
|
|
|
+ addOrder() {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { others } = data;
|
|
|
+ others.push(data);
|
|
|
+ this.setState({ data });
|
|
|
+ }
|
|
|
+
|
|
|
+ removeOrder() {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { others } = data;
|
|
|
+ data.others = others.filter(row => row.id !== data.id);
|
|
|
+ this.setState({ data });
|
|
|
+ }
|
|
|
+
|
|
|
+ submit() {
|
|
|
+ const { form } = this.props;
|
|
|
+ form.validateFields((err) => {
|
|
|
+ if (!err) {
|
|
|
+ const data = form.getFieldsValue();
|
|
|
+ data.showStatus = data.showStatus ? 1 : 0;
|
|
|
+ data.ignoreStatus = data.ignoreStatus ? 1 : 0;
|
|
|
+ data.other = this.state.data.others.map(row => row.id);
|
|
|
+ Question.editAsk(data).then(() => {
|
|
|
+ asyncSMessage('保存成功');
|
|
|
+ }).catch((e) => {
|
|
|
+ if (e.result) form.setFields(formatFormError(data, e.result));
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ renderBase() {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { question = {}, questionNo = {} } = data;
|
|
|
+ return <Block>
|
|
|
+ <h1>题目信息</h1>
|
|
|
+ <Form>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='题型'>
|
|
|
+ {QuestionTypeMap[question.type]}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='题目id'>
|
|
|
+ <a href='' target='_blank'>{questionNo.no}</a>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAsk() {
|
|
|
+ const { getFieldDecorator, getFieldValue } = this.props.form;
|
|
|
+ const { data, editContent } = this.state;
|
|
|
+ const { user = {}, createTime, target, originContent, content } = data;
|
|
|
+ return <Block>
|
|
|
+ <h1>提问信息</h1>
|
|
|
+ <Form>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户姓名'>
|
|
|
+ {user.realName}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问时间'>
|
|
|
+ {formatDate(createTime)}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问模块'>
|
|
|
+ {AskTargetMap[target]}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问内容'>
|
|
|
+ {originContent}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='提问详情'>
|
|
|
+ {!editContent && content}
|
|
|
+ {getFieldDecorator('content', {
|
|
|
+ })(
|
|
|
+ editContent ? <Input.TextArea placeholder='输入内容' /> : <input hidden />,
|
|
|
+ )}
|
|
|
+ <Switch checked={editContent} checkedChildren='编辑模式' unCheckedChildren='关闭' onChange={(value) => {
|
|
|
+ data.content = getFieldValue('content');
|
|
|
+ this.setState({ editContent: value, data });
|
|
|
+ }} />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderQuestionList() {
|
|
|
+ return <Block>
|
|
|
+ <h1>该题目的展示中问题</h1>
|
|
|
+ <DragList
|
|
|
+ loading={this.props.core.loading}
|
|
|
+ dataSource={this.state.data.others || []}
|
|
|
+ handle={'.icon'}
|
|
|
+ onMove={(oldIndex, newIndex) => {
|
|
|
+ this.orderQuestion(oldIndex, newIndex);
|
|
|
+ }}
|
|
|
+ renderItem={(item) => (
|
|
|
+ <List.Item actions={[<Icon type='bars' className='icon' />, <Typography.Text copyable={{ text: `${UserUrl}/paper/question/${this.state.data.userQuestionId}?askId=${item.id}` }} />]}>
|
|
|
+ <Row style={{ width: '100%' }}>
|
|
|
+ <Col span={11}>问题:<span dangerouslySetInnerHTML={{ __html: item.content }} /></Col>
|
|
|
+ <Col span={11} offset={1}>答复:<span dangerouslySetInnerHTML={{ __html: item.answer }} /></Col>
|
|
|
+ </Row>
|
|
|
+ </List.Item>
|
|
|
+ )}
|
|
|
+ /></Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAnswer() {
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
|
+ return <Block>
|
|
|
+ <Form>
|
|
|
+ {getFieldDecorator('id')(<input hidden />)}
|
|
|
+ <Form.Item label='教师回复'>
|
|
|
+ {getFieldDecorator('answer', {
|
|
|
+ })(
|
|
|
+ <Editor placeholder='输入内容' />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Row type="flex" justify="center">
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 10 }} label='显示状态'>
|
|
|
+ {getFieldDecorator('showStatus', {
|
|
|
+ valuePropName: 'checked',
|
|
|
+ })(
|
|
|
+ <Switch onChange={(value) => {
|
|
|
+ if (value) {
|
|
|
+ this.addOrder();
|
|
|
+ } else {
|
|
|
+ this.removeOrder();
|
|
|
+ }
|
|
|
+ }} checkedChildren='on' unCheckedChildren='off' />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 10 }} label='是否忽略'>
|
|
|
+ {getFieldDecorator('ignoreStatus', {
|
|
|
+ valuePropName: 'checked',
|
|
|
+ })(
|
|
|
+ <Switch checkedChildren='on' unCheckedChildren='off' />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Form>
|
|
|
+ </Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderView() {
|
|
|
+ return <div flex>
|
|
|
+ {this.renderBase()}
|
|
|
+ {this.renderAsk()}
|
|
|
+ {this.renderQuestionList()}
|
|
|
+ {this.renderAnswer()}
|
|
|
+
|
|
|
+ <Row type="flex" justify="center">
|
|
|
+ <Col>
|
|
|
+ <Button type="primary" onClick={() => {
|
|
|
+ this.submit();
|
|
|
+ }}>保存</Button>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+}
|