From 6cca98e3494062263b8dbe160095acae698566ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=9E=97?= <904079904@qq.com> Date: Tue, 24 Dec 2019 23:48:03 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A2=98=E5=BA=93=20=E5=8D=95=E9=80=89?= =?UTF-8?q?=E9=A2=98=20=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/question/Questionitem_banks.js | 63 +++- .../question/component/Choicequestion.js | 5 +- .../question/component/Itembankstop.js | 37 +- .../question/component/SingleEditor.js | 334 ++++++++++++++++++ .../question/questioncss/questioncom.css | 62 ++++ 5 files changed, 492 insertions(+), 9 deletions(-) create mode 100644 public/react/src/modules/question/component/SingleEditor.js diff --git a/public/react/src/modules/question/Questionitem_banks.js b/public/react/src/modules/question/Questionitem_banks.js index 96f174aeb..70f146d9d 100644 --- a/public/react/src/modules/question/Questionitem_banks.js +++ b/public/react/src/modules/question/Questionitem_banks.js @@ -15,9 +15,15 @@ import {TPMIndexHOC} from "../tpm/TPMIndexHOC"; import Itembankstop from "./component/Itembankstop"; import NoneData from './component/NoneData'; import './questioncss/questioncom.css'; +import Choicequestion from './component/Choicequestion'; +import SingleEditor from "./component/SingleEditor"; +var itembankstop=null; +var singleEditor=null; class Questionitem_banks extends Component { constructor(props) { super(props); + this.contentMdRef = React.createRef(); + this.answerMdRef = React.createRef(); this.state = { } @@ -69,10 +75,40 @@ class Questionitem_banks extends Component { // }); } + getcontentMdRef=(Ref)=>{ + this.contentMdRef=Ref; + } + getanswerMdRef=(Ref)=>{ + this.answerMdRef=Ref; + } + preservation=()=>{ + console.log("preservation"); + // console.log(this.contentMdRef); + // console.log(this.answerMdRef); + console.log("preservation222"); + console.log(this.contentMdRef.Getdatas()); + console.log("preservation3333"); + console.log(this.answerMdRef.onSave()); + } render() { let {page,limit,count,Headertop,visible,placement,modalsType}=this.state; return ( -
+
+ + +
试题库 @@ -80,10 +116,33 @@ class Questionitem_banks extends Component {
- + this.getcontentMdRef(ref)} + > +
+ this.getanswerMdRef(ref)} + > + + +
+
+ +
+ +

取消

+

this.preservation()}>保存

+
diff --git a/public/react/src/modules/question/component/Choicequestion.js b/public/react/src/modules/question/component/Choicequestion.js index 8c944f722..dbba533b4 100644 --- a/public/react/src/modules/question/component/Choicequestion.js +++ b/public/react/src/modules/question/component/Choicequestion.js @@ -16,6 +16,7 @@ import { Col, Row, InputNumber, DatePicker, AutoComplete,Button,Tag } from "antd"; import './../questioncss/questioncom.css'; +import SingleEditor from './../component/SingleEditor'; class Choicequestion extends Component { constructor(props) { super(props); @@ -35,9 +36,9 @@ class Choicequestion extends Component { return (
+ - - +
) diff --git a/public/react/src/modules/question/component/Itembankstop.js b/public/react/src/modules/question/component/Itembankstop.js index e48face42..56377bb18 100644 --- a/public/react/src/modules/question/component/Itembankstop.js +++ b/public/react/src/modules/question/component/Itembankstop.js @@ -55,6 +55,7 @@ const options = [ class Itembankstop extends Component { constructor(props) { super(props); + this.contentMdRef = React.createRef() this.state = { page:1, Knowpoints:[] @@ -62,6 +63,11 @@ class Itembankstop extends Component { } //初始化 componentDidMount(){ + try { + this.props.getcontentMdRef(this); + }catch (e) { + + } console.log("componentDidMount"); console.log(this.state); console.log(this.props); @@ -79,7 +85,23 @@ class Itembankstop extends Component { onChange=(e)=> { console.log(`checked = ${e.target.checked}`); } + Getdatas=()=>{ + return this.handleSubmits(); + } + handleSubmits=()=>{ + var data=[]; + this.props.form.validateFields((err, values) => { + data=[] + if (!err) { + // console.log("获取的form 数据"); + // console.log(values); + data= values; + } + }); + + return data; + } handleSubmit=(e)=>{ e.preventDefault(); this.props.form.validateFields((err, values) => { @@ -312,6 +334,10 @@ class Itembankstop extends Component { border:0px !important; } + ant-radio-button-wrapper:focus-within { + outline: 0px solid #ffffff; + } + ` } @@ -330,13 +356,14 @@ class Itembankstop extends Component { )} - - - + {/**/} + {/* */} + {/**/} +
) diff --git a/public/react/src/modules/question/component/SingleEditor.js b/public/react/src/modules/question/component/SingleEditor.js new file mode 100644 index 000000000..166b1faf9 --- /dev/null +++ b/public/react/src/modules/question/component/SingleEditor.js @@ -0,0 +1,334 @@ +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 TPMMDEditor from '../../../modules/tpm/challengesnew/TPMMDEditor'; +import axios from 'axios' +import update from 'immutability-helper' +import './../questioncss/questioncom.css'; +import {getUrl, ActionBtn, DMDEditor, ConditionToolTip} from 'educoder'; +const { TextArea } = Input; +const confirm = Modal.confirm; +const $ = window.$ +const { Option } = Select; + +const tagArray = [ + 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', + 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', + 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' +] + +//题库的试卷 单选题 组件 +class SingleEditor extends Component{ + constructor(props){ + super(props); + /** + choice_id: 32076 + choice_position: 1 + choice_text: "1" + standard_boolean: true + */ + const {question_choices} = this.props; + let _standard_answers = undefined; + let _question_choices = undefined; + if (question_choices) { + _standard_answers = [] + _question_choices = [] + + question_choices.forEach((item, index) => { + _standard_answers.push(item.standard_boolean) + _question_choices.push(item.choice_text) + }) + } + this.state = { + question_choices: _question_choices || ['', '', '', ''], + standard_answers: _standard_answers || [false, false, false, false], + question_title: this.props.question_title || '', + question_type: this.props.question_type || 0, + question_score: this.props.question_score || this.props.init_question_score, + question_titles:this.props.question_titles||'', + } + } + addOption = () => { + const { question_choices, standard_answers } = this.state; + question_choices.push('') + standard_answers.push(false) + this.setState({ question_choices, standard_answers }) + } + deleteOption = (index) => { + let {question_choices}=this.state; + + // console.log("deleteOption"); + // console.log(question_choices); + + if(question_choices[index]===""){ + // repeat code + this.toMDMode(null) + this.setState( + (prevState) => ({ + question_choices : update(prevState.question_choices, {$splice: [[index, 1]]}), + standard_answers : update(prevState.standard_answers, {$splice: [[index, 1]]}) + }) + ) + }else{ + this.props.confirm({ + content: `确认要删除这个选项吗？`, + onOk: () => { + this.toMDMode(null) + this.setState( + (prevState) => ({ + question_choices : update(prevState.question_choices, {$splice: [[index, 1]]}), + standard_answers : update(prevState.standard_answers, {$splice: [[index, 1]]}) + }) + ) + } + }) + } + } + onSave = () => { + var editordata=[]; + const {question_title, question_score, question_type,question_titles, question_choices, standard_answers } = this.state; + const { question_id_to_insert_after, question_id } = this.props + // TODO check + const answerArray = standard_answers.map((item, index) => { return item == true ? index+1 : -1 }).filter(item => item != -1); + if(!question_title) { + this.refs['titleEditor'].showError() + this.props.showNotification('请您输入题干'); + return editordata; + } + + if(!answerArray || answerArray.length == 0) { + this.props.showNotification('请先点击选择本选择题的正确选项'); + return editordata; + } + + + for(let i = 0; i < question_choices.length; i++) { + if (!question_choices[i]) { + this.refs[`optionEditor${i}`].showError() + this.props.showNotification(`请先输入 ${tagArray[i]} 选项的内容`); + return editordata; + } + } + + if(!question_titles) { + this.refs['titleEditor2'].showError() + this.props.showNotification('请您输入题目解析'); + return editordata; + } + /** + { + "question_title":"同学朋友间常用的沟通工具是什么？", + "question_type":1, + "question_score":5, + "question_choices":["a答案","b答案","c答案","d答案"], + "standard_answers":[1] + }*/ + editordata=[question_title,answerArray,question_choices,question_titles]; + // question_title, + // question_type: answerArray.length > 1 ? 1 : 0, + // question_score, + // question_choices, + // standard_answers: answerArray, + // insert_id: question_id_to_insert_after || undefined + return editordata; + } + onCancel = () => { + this.props.onEditorCancel() + } + + + + componentDidMount = () => { + try { + this.props.getanswerMdRef(this); + }catch (e) { + + } + } + onOptionClick = (index) => { + + let standard_answers = this.state.standard_answers.slice(0); + // console.log("onOptionClick"); + // console.log(standard_answers); + // console.log(standard_answers[index]); + // console.log(!standard_answers[index]); + for (var i=0;i { + if (index >= this.state.question_choices.length) { + // TODO 新建，然后删除CD选项，再输入题干，会调用到这里，且index是3 + return; + } + let question_choices = this.state.question_choices.slice(0); + question_choices[index] = value; + this.setState({ question_choices }) + } + on_question_score_change = (e) => { + this.setState({ question_score: e }) + } + toMDMode = (that) => { + if (this.mdReactObject) { + let mdReactObject = this.mdReactObject; + this.mdReactObject = null + mdReactObject.toShowMode() + } + this.mdReactObject = that; + + } + toShowMode = () => { + + } + render() { + let { question_title, question_score, question_type, question_choices, standard_answers,question_titles} = this.state; + let { question_id, index, exerciseIsPublish, + // question_title, + // question_type, + // question_score, + isNew } = this.props; + + // const { getFieldDecorator } = this.props.form; + + // const isAdmin = this.props.isAdmin() + // const courseId=this.props.match.params.coursesId; + // const isEdit = !!this.props.question_id + const qNumber = `question_`; + // TODO show模式 isNew为false isEdit为false + + // [true, false, true] -> [0, 2] + + const answerTagArray = standard_answers.map((item, index) => { return item == true ? tagArray[index] : -1 }).filter(item => item != -1); + // console.log("xuanzheshijuan"); + // console.log(answerTagArray); + // console.log(!exerciseIsPublish); + + return( +
+ +

+ {/* {!question_id ? '新建' : '编辑'} */} + * + 题干： +

+ + this.setState({ question_title: val})} + ref="titleEditor" + + > + +
+ {/* {!question_id ? '新建' : '编辑'} */} + * + 答案选项：点击答案可设置正确答案 +
+ + {question_choices.map( (item, index) => { + const bg = standard_answers[index] ? 'check-option-bg' : '' + return
+ {/* 点击设置答案 */} + {/* TODO 加了tooltip后，会丢失掉span的class */} + {/* */} + this.onOptionClick(index)} style={{flex: '0 0 38px'}}> + +
{tagArray[index]}
+ + + {/* */} +
+ this.onOptionContentChange(value, index)} + initValue={item} + > +
+ {exerciseIsPublish || index<=1? + + : + this.deleteOption(index)}> + } + { !exerciseIsPublish && + this.addOption()} + style={{float: 'right', visibility: index == question_choices.length - 1 ? '' : 'hidden', marginTop: '2px'}} + > + } + +
+ }) } + + + +
+ + + +

+ {/* {!question_id ? '新建' : '编辑'} */} + * + 题目解析： +

+ + this.setState({ question_titles: val})} + ref="titleEditor2" + + > + +
+ + +
+ ) + } +} +// RouteHOC() +export default (SingleEditor); diff --git a/public/react/src/modules/question/questioncss/questioncom.css b/public/react/src/modules/question/questioncss/questioncom.css index 5e02237e9..8861eb902 100644 --- a/public/react/src/modules/question/questioncss/questioncom.css +++ b/public/react/src/modules/question/questioncss/questioncom.css @@ -444,3 +444,65 @@ .lh32{ line-height: 32px; } + +.h20{ + height: 20px; + min-height: 20px; + line-height: 20px; +} +.xingcolor{ + color: rgba(224, 64, 64, 1); +} +.xingtigan{ + font-size:14px; + color:rgba(51, 51, 51, 1); +} +.mr4{ + margin-right: 4px; +} + +.xingtigans{ + width:100%; + font-size:14px; + color:rgba(136,136,136,1); +} + +.bottomdivs{ + width:100%; + height:55px; + background:rgba(255,255,255,1); + box-shadow:0px -2px 7px 0px rgba(1,6,22,0.04); +} +.mt50{ + margin-top: 50px; +} + +.divquxiao{ + width:88px; + height:32px; + background:rgba(255,255,255,1); + border-radius:4px; + border:1px solid rgba(204,204,204,1); +} +.divquxiaotest{ + width:100%; + height:32px; + font-size:12px; + color:rgba(136,136,136,1); + line-height:32px; + text-align: center; +} +.divbaocuntests{ + width:100%; + height:32px; + font-size:12px; + color:#ffffff; + line-height:32px; + text-align: center; +} +.divbaocun{ + width:88px; + height:32px; + background:rgba(76,172,255,1); + border-radius:4px; +}