m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

试卷新增编辑器选择项

Browse Source
dev_chen
harry 5 years ago
parent 5cba3eda8a
commit a51f499f01
4 changed files with 333 additions and 286 deletions
Show Stats Download Patch File Download Diff File

3
public/react/src/modules/courses/exercise/ExerciseNew.js
Unescape View File

@ -53,5 +53,4 @@ class ExerciceNew extends Component {
) )
} }
} }
// RouteHOC() export default ExerciceNew;
export default (ExerciceNew);

468
public/react/src/modules/courses/exercise/ExerciseNewCommon.js
Unescape View File

@ -1,19 +1,10 @@
import React,{ Component } from "react"; import React, { Component } from "react";
import { import { Tooltip } from 'antd'
Form, Input, InputNumber, Switch, Radio, import { Q_TYPE_SINGLE, Q_TYPE_MULTI, Q_TYPE_JUDGE, Q_TYPE_NULL, Q_TYPE_MAIN, Q_TYPE_SHIXUN } from './new/common'
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 axios from 'axios'
// import './board.css'
import "../common/formCommon.css" import "../common/formCommon.css"
import { ActionBtn } from 'educoder';
// import { RouteHOC } from './common.js'
import CBreadcrumb from '../common/CBreadcrumb'
import {getUrl, ActionBtn} from 'educoder';
import SingleEditor from './new/SingleEditor' import SingleEditor from './new/SingleEditor'
import SingleDisplay from './new/SingleDisplay' import SingleDisplay from './new/SingleDisplay'
@ -27,22 +18,20 @@ import ShixunEditor from './new/ShixunEditor'
import ShixunDisplay from './new/ShixunDisplay' import ShixunDisplay from './new/ShixunDisplay'
import ShixunChooseModal from '../coursesPublic/ShixunChooseModal' import ShixunChooseModal from '../coursesPublic/ShixunChooseModal'
import ExerciseForm from './exercise-new-form'
import update from 'immutability-helper' import update from 'immutability-helper'
import './new/common.css' import './new/common.css'
import '../css/Courses.css' import '../css/Courses.css'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$ const $ = window.$
const { Option } = Select; class ExerciseNewCommon extends Component {
const TITLE_MAX_LENGTH = 60; constructor(props) {
class ExerciseNewCommon extends Component{
constructor(props){
super(props); super(props);
this.state = { this.state = {
exercise_questions: [], exercise_questions: [],
exercise_name: '', exercise_name: '',
is_md: false,
exercise_description: '', exercise_description: '',
exercise_types: {}, exercise_types: {},
editMode: !this.props.match.params.Id, 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({ this.props.confirm({
content:'修改了标准答案', content: '修改了标准答案',
subContent:"是否重新计算学生答题的成绩？", subContent: "是否重新计算学生答题的成绩？",
onOk:()=>{ onOk: () => {
this.sureChangeScore(question_id,answerArray) this.sureChangeScore(question_id, answerArray)
}, },
onCancel:()=>{ onCancel: () => {
this.addSuccess(); this.addSuccess();
} }
}) })
} }
// 已发布试卷修改答案确认修改分数 // 已发布试卷修改答案确认修改分数
sureChangeScore = (question_id,answerArray) =>{ sureChangeScore = (question_id, answerArray) => {
let url=`/exercise_questions/${question_id}/update_scores.json` let url = `/exercise_questions/${question_id}/update_scores.json`
axios.post((url),{ axios.post((url), {
standard_answers:answerArray standard_answers: answerArray
}).then((result)=>{ }).then((result) => {
if(result){ if (result) {
this.props.showNotification(`${result.data.message}`); this.props.showNotification(`${result.data.message}`);
this.addSuccess(); this.addSuccess();
} }
}).catch((error)=>{ }).catch((error) => {
console.log(error); console.log(error);
}) })
} }
@ -82,7 +71,7 @@ class ExerciseNewCommon extends Component{
const Id = this.props.match.params.Id const Id = this.props.match.params.Id
this.isEdit = this.props.isEdit || !!Id this.isEdit = this.props.isEdit || !!Id
if (this.isEdit) { 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) axios.get(url)
.then((response) => { .then((response) => {
if (response.data.exercise) { if (response.data.exercise) {
@ -101,7 +90,7 @@ class ExerciseNewCommon extends Component{
console.log(error); console.log(error);
}); });
} else { } else {
const courseId=this.props.match.params.coursesId; const courseId = this.props.match.params.coursesId;
const newUrl = `/courses/${courseId}/exercises/new.json` const newUrl = `/courses/${courseId}/exercises/new.json`
axios.get(newUrl) axios.get(newUrl)
@ -120,63 +109,54 @@ class ExerciseNewCommon extends Component{
componentDidMount = () => { componentDidMount = () => {
this.fetchExercise() this.fetchExercise()
} }
// handleSubmit = (e) => {
// onSaveExercise = (data) => {
// }
onSaveExercise = () => {
const { exercise_name, exercise_description } = this.state;
const exercise_id = this.props.match.params.Id const exercise_id = this.props.match.params.Id
const courseId = this.props.match.params.coursesId const courseId = this.props.match.params.coursesId
if (this.isEdit) { if (this.isEdit) {
// /exercise_banks/:id.json
const editUrl = `/${this.props.exercise_url ? this.props.exercise_url : 'exercises'}/${exercise_id}.json` const editUrl = `/${this.props.exercise_url ? this.props.exercise_url : 'exercises'}/${exercise_id}.json`
axios.put(editUrl, { axios.put(editUrl, { ...data })
exercise_name,
exercise_description
})
.then((response) => { .then((response) => {
if (response.data.status == 0) { if (response.data.status == 0) {
this.setState({editMode: false}) this.setState({ ...data, editMode: false })
this.props.showNotification('试卷编辑成功') this.props.showNotification('试卷编辑成功')
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
} else { } else {
const url = `/courses/${courseId}/exercises.json` const url = `/courses/${courseId}/exercises.json`
axios.post(url, { axios.post(url, {
exercise_name, ...data
exercise_description
}) })
.then((response) => { .then((response) => {
if (response.data.status == 0) { if (response.data.status == 0) {
this.setState({editMode: false}) this.setState({ ...data, editMode: false })
this.props.showNotification('试卷新建成功')
this.props.showNotification('试卷新建成功') const exercise_id = response.data.data.exercise_id;
const exercise_id = response.data.data.exercise_id; this.isEdit = true;
this.isEdit = true; this.props.history.replace(`/classrooms/${courseId}/exercises/${exercise_id}/edit`);
this.props.history.replace(`/classrooms/${courseId}/exercises/${exercise_id}/edit`);
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
} }
} }
exercise_name_change = (e) => { exercise_name_change = (e) => {
this.setState({exercise_name: e.target.value}) this.setState({ exercise_name: e.target.value })
} }
exercise_description_change = (e) => { exercise_description_change = (e) => {
this.setState({exercise_description: e.target.value}) this.setState({ exercise_description: e.target.value })
} }
// #问题的类型，0为单选题，1为多选题，2为判断题，3为填空题，4为主观题，5为实训题 // #问题的类型，0为单选题，1为多选题，2为判断题，3为填空题，4为主观题，5为实训题
_checkIsEditing = () => { _checkIsEditing = () => {
if (this.editingId && $(this.editingId).length ) { if (this.editingId && $(this.editingId).length) {
this.props.showNotification('请先保存或取消当前正在编辑的问题。') this.props.showNotification('请先保存或取消当前正在编辑的问题。')
$("html").animate({ scrollTop: $(this.editingId).offset().top - 100}) $("html").animate({ scrollTop: $(this.editingId).offset().top - 100 })
return true return true
} }
return false return false
@ -186,7 +166,7 @@ class ExerciseNewCommon extends Component{
// 找到编辑或新建的item，新建就删掉item，编辑就isNew改为false // 找到编辑或新建的item，新建就删掉item，编辑就isNew改为false
const { exercise_questions } = this.state const { exercise_questions } = this.state
let index = -1; 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) { if (exercise_questions[i].isNew == true) {
index = i; index = i;
break; break;
@ -195,14 +175,14 @@ class ExerciseNewCommon extends Component{
if (exercise_questions[index].question_id) { // 编辑 if (exercise_questions[index].question_id) { // 编辑
this.setState( this.setState(
(prevState) => ({ (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]]}) // update(prevState.exercise_questions, {$splice: [[index, 1]]})
}) })
) )
} else { // 新建 } else { // 新建
this.setState( this.setState(
(prevState) => ({ (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.refs.shixunChooseModal.setVisible(true)
this.question_id_to_insert_after = question_id_to_insert_after; this.question_id_to_insert_after = question_id_to_insert_after;
return; return;
// 拉取实训items
this.addEditingQuestion(Q_TYPE_SHIXUN, question_id_to_insert_after, {
shixun_id: 50
})
} }
editQestion = (index) => { editQestion = (index) => {
if (this._checkIsEditing()) { if (this._checkIsEditing()) {
@ -254,7 +230,7 @@ class ExerciseNewCommon extends Component{
this.setState( this.setState(
(prevState) => ({ (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` const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}/up_down.json`
axios.post(url, { opr: isUp ? 'up' : 'down'}) axios.post(url, { opr: isUp ? 'up' : 'down' })
.then((response) => { .then((response) => {
if (response.data.status == 0) { if (response.data.status == 0) {
// this.props.showNotification('移动成功') // this.props.showNotification('移动成功')
this.fetchExercise() this.fetchExercise()
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
} }
onSortDown = (index, question_id) => { onSortDown = (index, question_id) => {
this.onSort(index, question_id, false) 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 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--) { 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 init_question_score = this.state.exercise_questions[i].question_score
break; break;
} }
@ -315,7 +291,7 @@ class ExerciseNewCommon extends Component{
let init_question_score = this.getInitScore(question_type, question_id_to_insert_after) let init_question_score = this.getInitScore(question_type, question_id_to_insert_after)
let questionObj = { let questionObj = {
question_type: question_type, // 需要这个通过类型判断 question_type: question_type, // 需要这个通过类型判断
init_question_score: init_question_score, init_question_score: init_question_score,
isNew: true, // 新建或编辑，用是否有id区分是新建还是编辑 isNew: true, // 新建或编辑，用是否有id区分是新建还是编辑
@ -336,13 +312,13 @@ class ExerciseNewCommon extends Component{
this.editingId = `#question_${newIndex}` this.editingId = `#question_${newIndex}`
this.setState({ exercise_questions: new_exercise_questions }, () => { this.setState({ exercise_questions: new_exercise_questions }, () => {
setTimeout(() => { setTimeout(() => {
$(this.editingId).length && $("html").animate({ scrollTop: $(this.editingId).offset().top - 100}) $(this.editingId).length && $("html").animate({ scrollTop: $(this.editingId).offset().top - 100 })
}, 500) }, 500)
}) })
} }
findIndexById = (id) => { findIndexById = (id) => {
const { exercise_questions } = this.state 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) { if (exercise_questions[i].question_id == id) {
return i; return i;
} }
@ -354,24 +330,15 @@ class ExerciseNewCommon extends Component{
onOk: () => { onOk: () => {
const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}.json` const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}.json`
axios.delete(url) axios.delete(url)
.then((response) => { .then((response) => {
if (response.data.status == 0) { if (response.data.status == 0) {
this.props.showNotification('删除成功') this.props.showNotification('删除成功')
this.fetchExercise() this.fetchExercise()
}
// const { exercise_questions } = this.state })
// const index = this.findIndexById(question_id) .catch(function (error) {
console.log(error);
// this.setState( });
// (prevState) => ({
// exercise_questions : update(prevState.exercise_questions, {$splice: [[index, 1]]})
// })
// )
}
})
.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` const editUrl = this.props.exercise_url_questions ? `/${this.props.exercise_url_questions}/${question_id}.json` : `/exercise_questions/${question_id}.json`
return editUrl; return editUrl;
} }
onCancel = () => {
this.setState({
editMode: false
})
}
render() { render() {
let { exercise_name, exercise_description, course_id, exercise_types, let { exercise_name, exercise_description, exercise_types, exercise_questions, is_md } = this.state;
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, 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; 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: { const exerciseFormOpt = {
xs: { span: 24 }, exercise_name,
// sm: { span: 8 }, exercise_description,
sm: { span: 24 }, is_md,
}, onCancel: this.onCancel,
wrapperCol: { isEdit: this.isEdit,
xs: { span: 24 }, onSaveHandler: this.onSaveExercise
// sm: { span: 16 }, }
sm: { span: 24 },
},
};
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 exercise_id = this.props.match.params.Id
const isEdit = this.isEdit
const commonHandler = { const commonHandler = {
onQestionDelete: this.onQestionDelete, onQestionDelete: this.onQestionDelete,
addSuccess: this.addSuccess, addSuccess: this.addSuccess,
addQuestion: this.addQuestion, addQuestion: this.addQuestion,
onEditorCancel: this.onEditorCancel, onEditorCancel: this.onEditorCancel,
changeScore:this.changeScore, changeScore: this.changeScore,
editQestion: this.editQestion, editQestion: this.editQestion,
onSortDown: this.onSortDown, onSortDown: this.onSortDown,
onSortUp: this.onSortUp, onSortUp: this.onSortUp,
@ -438,16 +398,16 @@ class ExerciseNewCommon extends Component{
getEditQuestionUrl: this.getEditQuestionUrl, getEditQuestionUrl: this.getEditQuestionUrl,
exercise_url: this.props.exercise_url, exercise_url: this.props.exercise_url,
} }
return( return (
<React.Fragment> <React.Fragment>
<ShixunChooseModal <ShixunChooseModal
ref="shixunChooseModal" ref="shixunChooseModal"
chooseShixun={this.chooseShixun} chooseShixun={this.chooseShixun}
{...this.props} {...this.props}
singleChoose={true} singleChoose={true}
shixunsUrl={this.props.shixunsUrl} shixunsUrl={this.props.shixunsUrl}
></ShixunChooseModal> ></ShixunChooseModal>
<style>{` <style>{`
.courseForm .formBlock { .courseForm .formBlock {
padding: 20px 30px 30px 30px; padding: 20px 30px 30px 30px;
border-bottom: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED;
@ -460,166 +420,106 @@ class ExerciseNewCommon extends Component{
`}</style> `}</style>
{!this.state.editMode && <div className="padding20-30" style={{ background: '#fff'}}> {!this.state.editMode && <div className="padding20-30" style={{ background: '#fff' }}>
<div className="displayTitle font-16"> <div className="displayTitle font-16">
<span>{exercise_name}</span> <span>{exercise_name}</span>
<a className="fr mr6" onClick={() => { this.setState({editMode: true}) }} style={{ lineHeight: '32px'}}> <a className="fr mr6" onClick={() => { this.setState({ editMode: true }) }} style={{ lineHeight: '32px' }}>
<Tooltip title="编辑"><i className="iconfont icon-bianjidaibeijing font-20 color-green"></i></Tooltip> <Tooltip title="编辑"><i className="iconfont icon-bianjidaibeijing font-20 color-green"></i></Tooltip>
</a> </a>
</div> </div>
<div className="displayDescription color-grey-9" dangerouslySetInnerHTML={{__html: exercise_description}} <div className="displayDescription color-grey-9" dangerouslySetInnerHTML={{ __html: exercise_description }}
style={{whiteSpace: 'pre-wrap'}} style={{ whiteSpace: 'pre-wrap' }}
></div> ></div>
</div>} </div>}
{this.state.editMode && <Form {...formItemLayout} {this.state.editMode && <ExerciseForm {...exerciseFormOpt} />}
// onSubmit={this.handleSubmit}
>
<div className="formBlock" style={{paddingBottom: '2px',borderBottom:"none"}}> <p className="clearfix padding20-30 color-grey-9">
<Form.Item <span className="fl">
label="试卷标题" {!!q_singles && <span className="mr20">单选题{q_singles}题，共{q_singles_scores}分</span>}
required {!!q_doubles && <span className="mr20">多选题{q_doubles}题，共{q_doubles_scores}分</span>}
className="topicTitle " {!!q_judges && <span className="mr20">判断题{q_judges}题，共{q_judges_scores}分</span>}
> {!!q_nulls && <span className="mr20">填空题{q_nulls}题，共{q_nulls_scores}分</span>}
{/* {getFieldDecorator('subject', { {!!q_mains && <span className="mr20">简答题{q_mains}题，共{q_mains_scores}分</span>}
rules: [{ {!!q_shixuns && <span className="mr20">实训题{q_shixuns}题，共{q_shixuns_scores}分</span>}
required: true, message: '请输入标题', </span>
}, { <span className="fr">
max: 20, message: '最大限制为20个字符', {!!q_counts &&
}], <span>
})( */} 合计 <span className="color-blue">{q_counts}</span> 题，
<style>
{
`
.exercicenewinputysl .ant-input{
border-right: none !important;
height: 40px !important;
}
`
}
</style>
<Input placeholder={`请输入试卷标题，最大限制${TITLE_MAX_LENGTH}个字符`} maxLength={TITLE_MAX_LENGTH} className="mt5 exercicenewinputysl" value={exercise_name}
onChange={this.exercise_name_change} addonAfter={`${exercise_name ? exercise_name.length : 0}/${TITLE_MAX_LENGTH}`}
/>
{/* )} */}
</Form.Item>
<Form.Item
label="&nbsp;&nbsp;试卷须知"
>
{/* {getFieldDecorator('select_board_id', {
// initialValue: '3779',
})( */}
<TextArea placeholder="请在此输入本次试卷答题的相关说明，最大限制100个字符" className="mt5" style={{height:"120px"}} value={exercise_description}
onChange={this.exercise_description_change}
/>
{/* )} */}
</Form.Item>
<Form.Item>
{/* defalutSubmitbtn */}
<a className="task-btn task-btn-orange fr mt4" style={{height: '30px', width: '70px'}}
onClick={this.onSaveExercise}
>保存</a>
{ this.isEdit && <a onClick={() => this.setState({editMode: false})} className="defalutCancelbtn fr mt4"
style={{height: '30px', width: '70px', fontSize: '14px', lineHeight: '30px', marginRight: '16px'}}>取消</a>}
{/* <Button type="primary" onClick={this.onSaveExercise} className="fr">保存</Button> */}
</Form.Item>
</div>
{/* <div className="clearfix mt30 mb30">
<a className="defalutCancelbtn fl" onClick={() => {}}>取消</ a>
</div> */}
</Form>}
<p className="clearfix padding20-30 color-grey-9">
<span className="fl">
{ !!q_singles && <span className="mr20">单选题{q_singles}题，共{q_singles_scores}分</span>}
{ !!q_doubles && <span className="mr20">多选题{q_doubles}题，共{q_doubles_scores}分</span>}
{ !!q_judges && <span className="mr20">判断题{q_judges}题，共{q_judges_scores}分</span>}
{ !!q_nulls && <span className="mr20">填空题{q_nulls}题，共{q_nulls_scores}分</span>}
{ !!q_mains && <span className="mr20">简答题{q_mains}题，共{q_mains_scores}分</span>}
{ !!q_shixuns && <span className="mr20">实训题{q_shixuns}题，共{q_shixuns_scores}分</span> }
</span>
<span className="fr">
{ !!q_counts &&
<span>
合计 <span className="color-blue">{q_counts}</span> 题，
共 <span className={`${q_scores > 100 ? 'color-red font-bd' : 'color-orange'}`}>{q_scores}</span> 分 共 <span className={`${q_scores > 100 ? 'color-red font-bd' : 'color-orange'}`}>{q_scores}</span> 分
</span> </span>
} }
</span> </span>
</p> </p>
<div className="edu-back-white"> <div className="edu-back-white">
{ exercise_questions.map((item, index) => { {exercise_questions.map((item, index) => {
if (item.question_type == 0 || item.question_type == 1) { if (item.question_type == 0 || item.question_type == 1) {
if (item.isNew) { if (item.isNew) {
return <SingleEditor {...this.props} {...item} index={index} {...commonHandler}></SingleEditor> return <SingleEditor {...this.props} {...item} index={index} {...commonHandler}></SingleEditor>
} else { } else {
return <SingleDisplay {...this.props} {...item} index={index} {...commonHandler} return <SingleDisplay {...this.props} {...item} index={index} {...commonHandler}
displayCount={exercise_questions.length} displayCount={exercise_questions.length}
></SingleDisplay> ></SingleDisplay>
} }
} else if (item.question_type == 2) { } else if (item.question_type == 2) {
if (item.isNew) { if (item.isNew) {
return <JudgeEditor {...this.props} {...item} index={index} {...commonHandler}></JudgeEditor> return <JudgeEditor {...this.props} {...item} index={index} {...commonHandler}></JudgeEditor>
} else { } else {
return <JudgeDisplay {...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay> return <JudgeDisplay {...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay>
} }
} else if (item.question_type == 3) { } else if (item.question_type == 3) {
if (item.isNew) { if (item.isNew) {
return <NullEditor {...this.props} {...item} index={index} {...commonHandler}></NullEditor> return <NullEditor {...this.props} {...item} index={index} {...commonHandler}></NullEditor>
} else { } else {
return <NullDisplay {...this.props} {...item} index={index} {...commonHandler} ></NullDisplay> return <NullDisplay {...this.props} {...item} index={index} {...commonHandler} ></NullDisplay>
} }
} else if (item.question_type == 4) { } else if (item.question_type == 4) {
if (item.isNew) { if (item.isNew) {
return <MainEditor {...this.props} {...item} index={index} {...commonHandler} ></MainEditor> return <MainEditor {...this.props} {...item} index={index} {...commonHandler} ></MainEditor>
} else { } else {
return <MainDisplay {...this.props} {...item} index={index} {...commonHandler} ></MainDisplay> return <MainDisplay {...this.props} {...item} index={index} {...commonHandler} ></MainDisplay>
} }
} else if (item.question_type == 5) { } else if (item.question_type == 5) {
if (item.isNew) { if (item.isNew) {
return <ShixunEditor {...this.props} {...item} index={index} {...commonHandler} return <ShixunEditor {...this.props} {...item} index={index} {...commonHandler}
chooseShixunSuccess={this.chooseShixunSuccess} chooseShixunSuccess={this.chooseShixunSuccess}
></ShixunEditor> ></ShixunEditor>
} else { } else {
return <ShixunDisplay {...this.props} {...item} index={index} {...commonHandler} ></ShixunDisplay> return <ShixunDisplay {...this.props} {...item} index={index} {...commonHandler} ></ShixunDisplay>
} }
} }
return <div></div> return <div></div>
})} })}
{!commonHandler.exerciseIsPublish && <div className="problemShow padding30"> {!commonHandler.exerciseIsPublish && <div className="problemShow padding30">
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_SINGLE)}> <ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_SINGLE)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>选择题 <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>选择题
</ActionBtn> </ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_JUDGE)}> <ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_JUDGE)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>判断题 <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>判断题
</ActionBtn> </ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_NULL)}> <ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_NULL)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>填空题 <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>填空题
</ActionBtn> </ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_MAIN)}> <ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_MAIN)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>简答题 <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>简答题
</ActionBtn> </ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addShixun(null)}> <ActionBtn style="green" className="mr20" onClick={() => this.addShixun(null)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>实训题 <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>实训题
</ActionBtn> </ActionBtn>
{exercise_id && !this.props.hidePreviewButton && <ActionBtn style="blue" className="fr" onClick={() => this.goToPreview()}> {exercise_id && !this.props.hidePreviewButton && <ActionBtn style="blue" className="fr" onClick={() => this.goToPreview()}>
{/* <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i> */} 试卷预览
试卷预览
</ActionBtn>} </ActionBtn>}
{this.props.bottomSection && this.props.bottomSection} {this.props.bottomSection && this.props.bottomSection}
</div>} </div>}
</div> </div>
</React.Fragment> </React.Fragment>
) )
} }
} }
// RouteHOC() // RouteHOC()
export default (ExerciseNewCommon); export default (ExerciseNewCommon);

101
public/react/src/modules/courses/exercise/exercise-new-form/index.jsx
Unescape View File

@ -0,0 +1,101 @@
import React, { useState } from 'react'
import { Input, Form, Radio } from 'antd'
import './index.scss'
import { QuillForEditor } from 'educoder'
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 24 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 },
},
}
const { TextArea } = Input
const TITLE_MAX_LENGTH = 60
function EditorTip() {
return <p className='editor-tip'>编辑器选择：<span> (请在下方选择一个您想使用的编辑器) </span></p>
}
const quillOpt = [
'bold',
'italic',
'underline', // 下划线
{ align: [] }, // 对齐方式
{ list: 'ordered' }, // 有序列表
{ list: 'bullet' }, // 无序列表
{ script: 'sub' }, // 下标 x2
{ script: 'super' }, // 上标 平方 (x2)
{ 'color': [] }, // 字体颜色
{ 'background': [] }, // 背景色
'blockquote', // 文件左边加一个边框样式
'image', // 图片
'formula', // 数学公式
'clean' // 清除
]
export default ({ exercise_name = '', exercise_description, is_md, onSaveHandler, isEdit, onCancel }) => {
const [data, setData] = useState({
exercise_name,
exercise_description,
is_md
})
function onChange(prop, value) {
setData({ ...data, [prop]: value })
}
function onNameChange(e) {
onChange('exercise_name', e.target.value)
}
function onDescChange(e) {
onChange('exercise_description', e.target.value)
}
function onEditorChange(e) {
onChange('is_md', e.target.value)
}
function onSave() {
onSaveHandler(data)
}
return (
<Form {...formItemLayout}>
<div className='exercise-new-form'>
<Form.Item label="试卷标题" required className="topicTitle " >
<Input placeholder={`请输入试卷标题，最大限制${TITLE_MAX_LENGTH}个字符`} maxLength={TITLE_MAX_LENGTH} className="mt5 exercicenewinputysl" value={data.exercise_name}
onChange={onNameChange} addonAfter={`${data.exercise_name.length}/${TITLE_MAX_LENGTH}`}
/>
</Form.Item>
<Form.Item label="&nbsp;&nbsp;试卷须知" >
<TextArea placeholder="请在此输入本次试卷答题的相关说明，最大限制100个字符" className="mt5" style={{ height: "120px" }} value={data.exercise_description} onChange={onDescChange} />
</Form.Item>
<Form.Item label={<EditorTip />} colon={false}>
<Radio.Group onChange={onEditorChange} value={data.is_md}>
<Radio value={true}>Markdown 编辑器</Radio>
<Radio value={false}>富文本编辑器</Radio>
</Radio.Group>
</Form.Item>
<Form.Item>
{data.is_md ? <TPMMDEditor height={183} placeholder="体验过程输入的内容不会保存" refreshTimeout={1500} className="courseMessageMD" />
: <QuillForEditor placeholder='体验过程输入的内容不会保存' options={quillOpt} style={{ height: 123 }} />}
</Form.Item>
<Form.Item>
<a className="task-btn task-btn-orange fr mt4" onClick={onSave} >保存</a>
{isEdit && <a onClick={onCancel} className="defalutCancelbtn fr mt4">取消</a>}
</Form.Item>
</div>
</Form >
)
}

47
public/react/src/modules/courses/exercise/exercise-new-form/index.scss
Unescape View File

@ -0,0 +1,47 @@
.exercise-new-form {
padding: 20px 30px 2px 30px;
background: #fff;
.ant-input {
border-right: none;
height: 40px;
}
.task-btn-orange {
height: 30px;
width: 70px;
}
.defalutCancelbtn {
height: '30px';
width: '70px';
font-size: '14px';
line-height: '30px';
margin-right: '16px';
}
.editor-tip {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(51, 51, 51, 1);
padding-left: 12px;
line-height: 22px;
span {
font-size: 14px;
font-weight: normal;
font-family: MicrosoftYaHei;
color: rgba(136, 136, 136, 1);
line-height: 19px;
}
}
.ant-form-item label {
overflow: hidden;
}
.ant-form-item-label {
height: 40px;
}
}
Write Preview
Loading…
Cancel
Save