From a51f499f01954c989be900aefbf09e2a4f80ca4e Mon Sep 17 00:00:00 2001 From: harry Date: Thu, 26 Mar 2020 19:48:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=95=E5=8D=B7=E6=96=B0=E5=A2=9E=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E9=80=89=E6=8B=A9=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/courses/exercise/ExerciseNew.js | 3 +- .../courses/exercise/ExerciseNewCommon.js | 468 +++++++----------- .../exercise/exercise-new-form/index.jsx | 101 ++++ .../exercise/exercise-new-form/index.scss | 47 ++ 4 files changed, 333 insertions(+), 286 deletions(-) create mode 100644 public/react/src/modules/courses/exercise/exercise-new-form/index.jsx create mode 100644 public/react/src/modules/courses/exercise/exercise-new-form/index.scss diff --git a/public/react/src/modules/courses/exercise/ExerciseNew.js b/public/react/src/modules/courses/exercise/ExerciseNew.js index e605b2f07..f5b60cfd4 100644 --- a/public/react/src/modules/courses/exercise/ExerciseNew.js +++ b/public/react/src/modules/courses/exercise/ExerciseNew.js @@ -53,5 +53,4 @@ class ExerciceNew extends Component { ) } } -// RouteHOC() -export default (ExerciceNew); +export default ExerciceNew; diff --git a/public/react/src/modules/courses/exercise/ExerciseNewCommon.js b/public/react/src/modules/courses/exercise/ExerciseNewCommon.js index 0f61b9942..9101a4974 100644 --- a/public/react/src/modules/courses/exercise/ExerciseNewCommon.js +++ b/public/react/src/modules/courses/exercise/ExerciseNewCommon.js @@ -1,19 +1,10 @@ -import React,{ Component } from "react"; +import React, { Component } from "react"; -import { - Form, Input, InputNumber, Switch, Radio, - Slider, Button, Upload, Icon, Rate, Checkbox, message, - Row, Col, Select, Modal, Tooltip -} from 'antd'; -import { Q_TYPE_SINGLE, Q_TYPE_MULTI, Q_TYPE_JUDGE, Q_TYPE_NULL, Q_TYPE_MAIN, Q_TYPE_SHIXUN } from './new/common' -import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor'; +import { Tooltip } from 'antd' +import { Q_TYPE_SINGLE, Q_TYPE_MULTI, Q_TYPE_JUDGE, Q_TYPE_NULL, Q_TYPE_MAIN, Q_TYPE_SHIXUN } from './new/common' import axios from 'axios' -// import './board.css' import "../common/formCommon.css" - -// import { RouteHOC } from './common.js' -import CBreadcrumb from '../common/CBreadcrumb' -import {getUrl, ActionBtn} from 'educoder'; +import { ActionBtn } from 'educoder'; import SingleEditor from './new/SingleEditor' import SingleDisplay from './new/SingleDisplay' @@ -27,22 +18,20 @@ import ShixunEditor from './new/ShixunEditor' import ShixunDisplay from './new/ShixunDisplay' import ShixunChooseModal from '../coursesPublic/ShixunChooseModal' +import ExerciseForm from './exercise-new-form' + import update from 'immutability-helper' import './new/common.css' import '../css/Courses.css' -const { TextArea } = Input; -const confirm = Modal.confirm; const $ = window.$ -const { Option } = Select; -const TITLE_MAX_LENGTH = 60; -class ExerciseNewCommon extends Component{ - constructor(props){ +class ExerciseNewCommon extends Component { + constructor(props) { super(props); - this.state = { exercise_questions: [], exercise_name: '', + is_md: false, exercise_description: '', exercise_types: {}, editMode: !this.props.match.params.Id, @@ -50,30 +39,30 @@ class ExerciseNewCommon extends Component{ } // 已发布试卷编辑保存的确认弹框 - changeScore = (question_id,answerArray) =>{ + changeScore = (question_id, answerArray) => { this.props.confirm({ - content:'修改了标准答案', - subContent:"是否重新计算学生答题的成绩？", - onOk:()=>{ - this.sureChangeScore(question_id,answerArray) + content: '修改了标准答案', + subContent: "是否重新计算学生答题的成绩？", + onOk: () => { + this.sureChangeScore(question_id, answerArray) }, - onCancel:()=>{ + onCancel: () => { this.addSuccess(); } }) } // 已发布试卷修改答案确认修改分数 - sureChangeScore = (question_id,answerArray) =>{ - let url=`/exercise_questions/${question_id}/update_scores.json` - axios.post((url),{ - standard_answers:answerArray - }).then((result)=>{ - if(result){ + sureChangeScore = (question_id, answerArray) => { + let url = `/exercise_questions/${question_id}/update_scores.json` + axios.post((url), { + standard_answers: answerArray + }).then((result) => { + if (result) { this.props.showNotification(`${result.data.message}`); this.addSuccess(); } - }).catch((error)=>{ + }).catch((error) => { console.log(error); }) } @@ -82,7 +71,7 @@ class ExerciseNewCommon extends Component{ const Id = this.props.match.params.Id this.isEdit = this.props.isEdit || !!Id if (this.isEdit) { - const url = this.props.exercise_url ? `/${this.props.exercise_url }/${Id}.json` : `/exercises/${Id}/edit.json` + const url = this.props.exercise_url ? `/${this.props.exercise_url}/${Id}.json` : `/exercises/${Id}/edit.json` axios.get(url) .then((response) => { if (response.data.exercise) { @@ -101,7 +90,7 @@ class ExerciseNewCommon extends Component{ console.log(error); }); } else { - const courseId=this.props.match.params.coursesId; + const courseId = this.props.match.params.coursesId; const newUrl = `/courses/${courseId}/exercises/new.json` axios.get(newUrl) @@ -120,63 +109,54 @@ class ExerciseNewCommon extends Component{ componentDidMount = () => { this.fetchExercise() } - // handleSubmit = (e) => { - // - // } - onSaveExercise = () => { - const { exercise_name, exercise_description } = this.state; + + onSaveExercise = (data) => { const exercise_id = this.props.match.params.Id const courseId = this.props.match.params.coursesId + if (this.isEdit) { - // /exercise_banks/:id.json const editUrl = `/${this.props.exercise_url ? this.props.exercise_url : 'exercises'}/${exercise_id}.json` - axios.put(editUrl, { - exercise_name, - exercise_description - }) + axios.put(editUrl, { ...data }) .then((response) => { if (response.data.status == 0) { - this.setState({editMode: false}) + this.setState({ ...data, editMode: false }) this.props.showNotification('试卷编辑成功') } }) .catch(function (error) { - console.log(error); + console.log(error); }); } else { const url = `/courses/${courseId}/exercises.json` axios.post(url, { - exercise_name, - exercise_description + ...data }) .then((response) => { if (response.data.status == 0) { - this.setState({editMode: false}) - - this.props.showNotification('试卷新建成功') - const exercise_id = response.data.data.exercise_id; - this.isEdit = true; - - this.props.history.replace(`/classrooms/${courseId}/exercises/${exercise_id}/edit`); + this.setState({ ...data, editMode: false }) + this.props.showNotification('试卷新建成功') + const exercise_id = response.data.data.exercise_id; + this.isEdit = true; + this.props.history.replace(`/classrooms/${courseId}/exercises/${exercise_id}/edit`); } }) .catch(function (error) { - console.log(error); + console.log(error); }); } } exercise_name_change = (e) => { - this.setState({exercise_name: e.target.value}) + this.setState({ exercise_name: e.target.value }) } exercise_description_change = (e) => { - this.setState({exercise_description: e.target.value}) + this.setState({ exercise_description: e.target.value }) } // #问题的类型，0为单选题，1为多选题，2为判断题，3为填空题，4为主观题，5为实训题 _checkIsEditing = () => { - if (this.editingId && $(this.editingId).length ) { + if (this.editingId && $(this.editingId).length) { this.props.showNotification('请先保存或取消当前正在编辑的问题。') - $("html").animate({ scrollTop: $(this.editingId).offset().top - 100}) + $("html").animate({ scrollTop: $(this.editingId).offset().top - 100 }) return true } return false @@ -186,7 +166,7 @@ class ExerciseNewCommon extends Component{ // 找到编辑或新建的item，新建就删掉item，编辑就isNew改为false const { exercise_questions } = this.state let index = -1; - for(let i = 0; i < exercise_questions.length; i++) { + for (let i = 0; i < exercise_questions.length; i++) { if (exercise_questions[i].isNew == true) { index = i; break; @@ -195,14 +175,14 @@ class ExerciseNewCommon extends Component{ if (exercise_questions[index].question_id) { // 编辑 this.setState( (prevState) => ({ - exercise_questions : update(prevState.exercise_questions, {[index]: { isNew: {$set: false}}}) + exercise_questions: update(prevState.exercise_questions, { [index]: { isNew: { $set: false } } }) // update(prevState.exercise_questions, {$splice: [[index, 1]]}) }) ) } else { // 新建 this.setState( (prevState) => ({ - exercise_questions : update(prevState.exercise_questions, {$splice: [[index, 1]]}) + exercise_questions: update(prevState.exercise_questions, { $splice: [[index, 1]] }) }) ) } @@ -241,10 +221,6 @@ class ExerciseNewCommon extends Component{ this.refs.shixunChooseModal.setVisible(true) this.question_id_to_insert_after = question_id_to_insert_after; return; - // 拉取实训items - this.addEditingQuestion(Q_TYPE_SHIXUN, question_id_to_insert_after, { - shixun_id: 50 - }) } editQestion = (index) => { if (this._checkIsEditing()) { @@ -254,7 +230,7 @@ class ExerciseNewCommon extends Component{ this.setState( (prevState) => ({ - exercise_questions : update(prevState.exercise_questions, {[index]: { isNew: {$set: true}}}) + exercise_questions: update(prevState.exercise_questions, { [index]: { isNew: { $set: true } } }) }) ) } @@ -264,16 +240,16 @@ class ExerciseNewCommon extends Component{ } const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}/up_down.json` - axios.post(url, { opr: isUp ? 'up' : 'down'}) - .then((response) => { - if (response.data.status == 0) { - // this.props.showNotification('移动成功') - this.fetchExercise() - } - }) - .catch(function (error) { - console.log(error); - }); + axios.post(url, { opr: isUp ? 'up' : 'down' }) + .then((response) => { + if (response.data.status == 0) { + // this.props.showNotification('移动成功') + this.fetchExercise() + } + }) + .catch(function (error) { + console.log(error); + }); } onSortDown = (index, question_id) => { this.onSort(index, question_id, false) @@ -304,7 +280,7 @@ class ExerciseNewCommon extends Component{ } const _indexBefore = question_id_to_insert_after ? this.findIndexById(question_id_to_insert_after) : this.state.exercise_questions.length - 1 for (let i = _indexBefore; i >= 0; i--) { - if(this.state.exercise_questions[i].question_type == question_type) { + if (this.state.exercise_questions[i].question_type == question_type) { init_question_score = this.state.exercise_questions[i].question_score break; } @@ -315,7 +291,7 @@ class ExerciseNewCommon extends Component{ let init_question_score = this.getInitScore(question_type, question_id_to_insert_after) - let questionObj = { + let questionObj = { question_type: question_type, // 需要这个通过类型判断 init_question_score: init_question_score, isNew: true, // 新建或编辑，用是否有id区分是新建还是编辑 @@ -336,13 +312,13 @@ class ExerciseNewCommon extends Component{ this.editingId = `#question_${newIndex}` this.setState({ exercise_questions: new_exercise_questions }, () => { setTimeout(() => { - $(this.editingId).length && $("html").animate({ scrollTop: $(this.editingId).offset().top - 100}) + $(this.editingId).length && $("html").animate({ scrollTop: $(this.editingId).offset().top - 100 }) }, 500) }) } findIndexById = (id) => { const { exercise_questions } = this.state - for(let i = 0; i < exercise_questions.length; i++) { + for (let i = 0; i < exercise_questions.length; i++) { if (exercise_questions[i].question_id == id) { return i; } @@ -354,24 +330,15 @@ class ExerciseNewCommon extends Component{ onOk: () => { const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}.json` axios.delete(url) - .then((response) => { - if (response.data.status == 0) { - this.props.showNotification('删除成功') - this.fetchExercise() - - // const { exercise_questions } = this.state - // const index = this.findIndexById(question_id) - - // this.setState( - // (prevState) => ({ - // exercise_questions : update(prevState.exercise_questions, {$splice: [[index, 1]]}) - // }) - // ) - } - }) - .catch(function (error) { - console.log(error); - }); + .then((response) => { + if (response.data.status == 0) { + this.props.showNotification('删除成功') + this.fetchExercise() + } + }) + .catch(function (error) { + console.log(error); + }); } }) } @@ -393,40 +360,33 @@ class ExerciseNewCommon extends Component{ const editUrl = this.props.exercise_url_questions ? `/${this.props.exercise_url_questions}/${question_id}.json` : `/exercise_questions/${question_id}.json` return editUrl; } + onCancel = () => { + this.setState({ + editMode: false + }) + } render() { - let { exercise_name, exercise_description, course_id, exercise_types, - exercise_questions, left_banner_id } = this.state; - // if (this.isEdit && !exercise_types) { - // return '' - // } - // const { getFieldDecorator } = this.props.form; + let { exercise_name, exercise_description, exercise_types, exercise_questions, is_md } = this.state; const { q_counts, q_scores, q_doubles, q_doubles_scores, q_judges, q_judges_scores, - q_mains, q_mains_scores, q_nulls, q_nulls_scores, q_shixuns, q_shixuns_scores, q_singles, q_singles_scores} = exercise_types; - const formItemLayout = { - labelCol: { - xs: { span: 24 }, - // sm: { span: 8 }, - sm: { span: 24 }, - }, - wrapperCol: { - xs: { span: 24 }, - // sm: { span: 16 }, - sm: { span: 24 }, - }, - }; + q_mains, q_mains_scores, q_nulls, q_nulls_scores, q_shixuns, q_shixuns_scores, q_singles, q_singles_scores } = exercise_types; + + const exerciseFormOpt = { + exercise_name, + exercise_description, + is_md, + onCancel: this.onCancel, + isEdit: this.isEdit, + onSaveHandler: this.onSaveExercise + } - const { current_user } = this.props - const isAdmin = this.props.isAdmin() - const courseId=this.props.match.params.coursesId; const exercise_id = this.props.match.params.Id - const isEdit = this.isEdit const commonHandler = { onQestionDelete: this.onQestionDelete, addSuccess: this.addSuccess, addQuestion: this.addQuestion, onEditorCancel: this.onEditorCancel, - changeScore:this.changeScore, + changeScore: this.changeScore, editQestion: this.editQestion, onSortDown: this.onSortDown, onSortUp: this.onSortUp, @@ -438,16 +398,16 @@ class ExerciseNewCommon extends Component{ getEditQuestionUrl: this.getEditQuestionUrl, exercise_url: this.props.exercise_url, } - return( - - - - {!this.state.editMode &&
-
- {exercise_name} - { this.setState({editMode: true}) }} style={{ lineHeight: '32px'}}> - - -
-
- -
} - {this.state.editMode &&
-
- - {/* {getFieldDecorator('subject', { - rules: [{ - required: true, message: '请输入标题', - }, { - max: 20, message: '最大限制为20个字符', - }], - })( */} - - - {/* )} */} - - - - {/* {getFieldDecorator('select_board_id', { - // initialValue: '3779', - })( */} -