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;

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

@ -1,19 +1,10 @@
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 { 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 { 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) {
super(props);
this.state = {
exercise_questions: [],
exercise_name: '',
is_md: false,
exercise_description: '',
exercise_types: {},
editMode: !this.props.match.params.Id,
@ -120,23 +109,17 @@ 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('试卷编辑成功')
}
})
@ -146,17 +129,14 @@ class ExerciseNewCommon extends Component{
} 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.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`);
}
@ -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()) {
@ -358,15 +334,6 @@ class ExerciseNewCommon extends Component{
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) {
@ -393,34 +360,27 @@ 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 },
},
};
const { current_user } = this.props
const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId;
const exerciseFormOpt = {
exercise_name,
exercise_description,
is_md,
onCancel: this.onCancel,
isEdit: this.isEdit,
onSaveHandler: this.onSaveExercise
}
const exercise_id = this.props.match.params.Id
const isEdit = this.isEdit
const commonHandler = {
onQestionDelete: this.onQestionDelete,
addSuccess: this.addSuccess,
@ -472,66 +432,7 @@ class ExerciseNewCommon extends Component{
></div>
</div>}
{this.state.editMode && <Form {...formItemLayout}
// onSubmit={this.handleSubmit}
>
<div className="formBlock" style={{paddingBottom: '2px',borderBottom:"none"}}>
<Form.Item
label="试卷标题"
required
className="topicTitle "
>
{/* {getFieldDecorator('subject', {
rules: [{
required: true, message: '请输入标题',
}, {
max: 20, message: '最大限制为20个字符',
}],
})( */}
<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>}
{this.state.editMode && <ExerciseForm {...exerciseFormOpt} />}
<p className="clearfix padding20-30 color-grey-9">
@ -610,7 +511,6 @@ class ExerciseNewCommon extends Component{
</ActionBtn>
{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>}

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