diff --git a/public/react/src/modules/courses/exercise/ExerciseNew.js b/public/react/src/modules/courses/exercise/ExerciseNew.js index 017fff71e..80f837686 100644 --- a/public/react/src/modules/courses/exercise/ExerciseNew.js +++ b/public/react/src/modules/courses/exercise/ExerciseNew.js @@ -5,440 +5,63 @@ import { 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 axios from 'axios' // import './board.css' -import "../common/formCommon.css" +// import "../common/formCommon.css" // import { RouteHOC } from './common.js' -import CBreadcrumb from '../common/CBreadcrumb' -import {getUrl, ActionBtn} from 'educoder'; -import SingleEditor from './new/SingleEditor' -import SingleDisplay from './new/SingleDisplay' -import JudgeEditor from './new/JudgeEditor' -import JudgeDisplay from './new/JudgeDisplay' -import NullEditor from './new/NullEditor' -import NullDisplay from './new/NullDisplay' -import MainEditor from './new/MainEditor' -import MainDisplay from './new/MainDisplay' -import ShixunEditor from './new/ShixunEditor' -import ShixunDisplay from './new/ShixunDisplay' +// 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 CBreadcrumb from '../common/CBreadcrumb' +import {getUrl, ActionBtn, CBreadcrumb} from 'educoder'; + +// import SingleEditor from './new/SingleEditor' +// import SingleDisplay from './new/SingleDisplay' +// import JudgeEditor from './new/JudgeEditor' +// import JudgeDisplay from './new/JudgeDisplay' +// import NullEditor from './new/NullEditor' +// import NullDisplay from './new/NullDisplay' +// import MainEditor from './new/MainEditor' +// import MainDisplay from './new/MainDisplay' +// import ShixunEditor from './new/ShixunEditor' +// import ShixunDisplay from './new/ShixunDisplay' -import ShixunChooseModal from '../coursesPublic/ShixunChooseModal' import update from 'immutability-helper' import './new/common.css' import '../css/Courses.css' + +import ExerciseNewCommon from './ExerciseNewCommon' const { TextArea } = Input; -const confirm = Modal.confirm; -const $ = window.$ -const { Option } = Select; -const TITLE_MAX_LENGTH = 60; + class ExerciceNew extends Component{ constructor(props){ super(props); this.state = { - exercise_questions: [], - exercise_name: '', - exercise_description: '', - exercise_types: {}, - editMode: !this.props.match.params.Id, - } - } - - // 已发布试卷编辑保存的确认弹框 - changeScore = (question_id,answerArray) =>{ - this.props.confirm({ - content:'修改了标准答案', - subContent:"是否重新计算学生答题的成绩？", - onOk:()=>{ - this.sureChangeScore(question_id,answerArray) - }, - 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){ - this.props.showNotification(`${result.data.message}`); - this.addSuccess(); - } - }).catch((error)=>{ - console.log(error); - }) - } - - fetchExercise = () => { - const Id = this.props.match.params.Id - this.isEdit = !!Id - if (Id) { - const url = `/exercises/${Id}/edit.json` - axios.get(url) - .then((response) => { - if (response.data.status == 0) { - const { exercise, ...others } = response.data - this.setState({ - ...exercise, - ...others, - editMode: false - }) - } - }) - .catch(function (error) { - console.log(error); - }); - } else { - const courseId=this.props.match.params.coursesId; - - const newUrl = `/courses/${courseId}/exercises/new.json` - axios.get(newUrl) - .then((response) => { - if (response.data.status == 0) { - this.setState({ - ...response.data - }) - } - }) - .catch(function (error) { - console.log(error); - }); + } } componentDidMount = () => { - this.fetchExercise() - } - handleSubmit = (e) => { } - onSaveExercise = () => { - const { exercise_name, exercise_description } = this.state; - const exercise_id = this.props.match.params.Id - const courseId = this.props.match.params.coursesId - if (this.isEdit) { - const editUrl = `/exercises/${exercise_id}.json` - axios.put(editUrl, { - exercise_name, - exercise_description - }) - .then((response) => { - if (response.data.status == 0) { - this.setState({editMode: false}) - this.props.showNotification('试卷编辑成功') - } - }) - .catch(function (error) { - console.log(error); - }); - } else { - const url = `/courses/${courseId}/exercises.json` - axios.post(url, { - exercise_name, - exercise_description - }) - .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(`/courses/${courseId}/exercises/${exercise_id}/edit`); - - } - }) - .catch(function (error) { - console.log(error); - }); - } - } - exercise_name_change = (e) => { - this.setState({exercise_name: e.target.value}) - } - exercise_description_change = (e) => { - this.setState({exercise_description: e.target.value}) - } - // #问题的类型，0为单选题，1为多选题，2为判断题，3为填空题，4为主观题，5为实训题 - _checkIsEditing = () => { - if (this.editingId && $(this.editingId).length ) { - this.props.showNotification('请先保存或取消当前正在编辑的问题。') - $("html").animate({ scrollTop: $(this.editingId).offset().top - 100}) - return true - } - return false - } - onEditorCancel = () => { - this.editingId = null; - // 找到编辑或新建的item，新建就删掉item，编辑就isNew改为false - const { exercise_questions } = this.state - let index = -1; - for(let i = 0; i < exercise_questions.length; i++) { - if (exercise_questions[i].isNew == true) { - index = i; - break; - } - } - if (exercise_questions[index].question_id) { // 编辑 - this.setState( - (prevState) => ({ - 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]]}) - }) - ) - } - } - addQuestion = (question_id_to_insert_after, type) => { - if (!this.isEdit) { - this.props.showNotification('请先输入试卷标题，并保存试卷') - return; - } - if (this._checkIsEditing()) { - return; - } - if (type == Q_TYPE_SHIXUN) { - this.addShixun(question_id_to_insert_after) - } else { - this.addEditingQuestion(type, question_id_to_insert_after) - } - } - chooseShixun = (array) => { - this.addEditingQuestion(Q_TYPE_SHIXUN, this.question_id_to_insert_after, { - shixun_id: array[0] - }) - } - chooseShixunSuccess = () => { - this.refs.shixunChooseModal.setVisible(false) - } - addShixun = (question_id_to_insert_after) => { - if (!this.isEdit) { - this.props.showNotification('请先输入试卷标题，并保存试卷') - return; - } - // TODO 弹框选择实训 - if (this._checkIsEditing()) { - return; - } - 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()) { - return; - } - this.editingId = `#question_${index}` - - this.setState( - (prevState) => ({ - exercise_questions : update(prevState.exercise_questions, {[index]: { isNew: {$set: true}}}) - }) - ) - } - onSort = (index, question_id, isUp) => { - if (this._checkIsEditing()) { - return; - } - const url = `/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); - }); - } - onSortDown = (index, question_id) => { - this.onSort(index, question_id, false) - } - onSortUp = (index, question_id) => { - this.onSort(index, question_id, true) - } - getInitScore = (question_type, question_id_to_insert_after) => { - /** - 1.每个题型的首个题目默认值规则如下： - 选择题：5分 01 - 判断题：2分 2 - 填空题：2分 3 - 简答题：10分 4 - 实训题：每个关卡5分 5 - */ - let init_question_score = 0; - if (question_type == 0 || question_type == 1) { - init_question_score = 5 - } else if (question_type == 2) { - init_question_score = 2 - } else if (question_type == 3) { - init_question_score = 2 - } else if (question_type == 4) { - init_question_score = 10 - } else if (question_type == 5) { - init_question_score = 5 - } - 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) { - init_question_score = this.state.exercise_questions[i].question_score - break; - } - } - return init_question_score; - } - addEditingQuestion = (question_type, question_id_to_insert_after, otherAttributes) => { - - let init_question_score = this.getInitScore(question_type, question_id_to_insert_after) - - let questionObj = { - question_type: question_type, // 需要这个通过类型判断 - init_question_score: init_question_score, - isNew: true, // 新建或编辑，用是否有id区分是新建还是编辑 - question_id_to_insert_after, - ...otherAttributes - } - const { exercise_questions } = this.state; - let new_exercise_questions = exercise_questions.slice(0) - let newIndex = new_exercise_questions.length; - - if (question_id_to_insert_after) { - const _indexBefore = this.findIndexById(question_id_to_insert_after) - new_exercise_questions.splice(_indexBefore + 1, 0, questionObj) - newIndex = _indexBefore + 1 - } else { - new_exercise_questions.push(questionObj) - } - this.editingId = `#question_${newIndex}` - this.setState({ exercise_questions: new_exercise_questions }, () => { - setTimeout(() => { - $(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++) { - if (exercise_questions[i].question_id == id) { - return i; - } - } - } - onQestionDelete = (question_id) => { - this.props.confirm({ - content: `确认要删除这个问题吗？`, - onOk: () => { - const url = `/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); - }); - } - }) - } - addSuccess = () => { - this.editingId = null; - this.fetchExercise() - } - goToPreview = () => { - const exercise_id = this.props.match.params.Id - const courseId = this.props.match.params.coursesId - this.props.history.push(`/courses/${courseId}/exercises/${exercise_id}/student_exercise_list?tab=2`) + initData = (data) => { + this.setState({left_banner_id: data.left_banner_id}) } 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; - 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 }, - }, - }; + let { left_banner_id } = this.state; + 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, - editQestion: this.editQestion, - onSortDown: this.onSortDown, - onSortUp: this.onSortUp, - displayCount: exercise_questions.length, - exercise_status: this.state.exercise_status, - exerciseIsPublish: this.state.exercise_status >= 2 - } + return(
- - +
{ current_user &&

- {!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', - })( */} -