Skip to content

X
xiaomai-cloud-class-web
Commit 0e339b5e by yuananting
Options

Merge branch 'feature/yuananting/20210221/question-bank-tools' into dev

parents 46c7272a e2c2d3c7
Showing with 166 additions and 149 deletions
src/modules/teach-tool/components/NewQuestionTab.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-02-25 14:34:29 * @Date: 2021-02-25 14:34:29
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-03-22 09:45:05 * @LastEditTime: 2021-03-22 13:22:50
* @Description: 助学工具-题库-题目管理-新建题目Tab * @Description: 助学工具-题库-题目管理-新建题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -100,8 +100,8 @@ class NewQuestionTab extends Component { ...@@ -100,8 +100,8 @@ class NewQuestionTab extends Component {
if (this.props.questionInfo !== questionInfo) { if (this.props.questionInfo !== questionInfo) {
if (questionInfo.gapFillingAnswerList !== this.state.gapFillingAnswer) { if (questionInfo.gapFillingAnswerList !== this.state.gapFillingAnswer) {
this.setState({ this.setState({
gapFillingAnswer: questionInfo.gapFillingAnswerList gapFillingAnswer: questionInfo.gapFillingAnswerList,
}) });
} }
this.setState( this.setState(
{ {
...@@ -111,11 +111,13 @@ class NewQuestionTab extends Component { ...@@ -111,11 +111,13 @@ class NewQuestionTab extends Component {
}, },
() => { () => {
const con = questionInfo.questionStemList[0].content; const con = questionInfo.questionStemList[0].content;
const input = con.match(/<input([^<>]*)>/g) const input = con.match(/<input([^<>]*)>/g);
let _blanksList = input && input.map(item => { let _blanksList =
return this.transferStemDocument(item).firstChild input &&
}) input.map((item) => {
this.setState({ blanksList: _blanksList || [] }) return this.transferStemDocument(item).firstChild;
});
this.setState({ blanksList: _blanksList || [] });
} }
); // 题干内容 ); // 题干内容
this.setState({ this.setState({
...@@ -417,7 +419,7 @@ class NewQuestionTab extends Component { ...@@ -417,7 +419,7 @@ class NewQuestionTab extends Component {
} }
break; break;
} }
var that = this var that = this;
function change() { function change() {
that.setState({ contentType }); that.setState({ contentType });
that.setState({ mediaType: key }); that.setState({ mediaType: key });
...@@ -449,8 +451,8 @@ class NewQuestionTab extends Component { ...@@ -449,8 +451,8 @@ class NewQuestionTab extends Component {
this.setState({ this.setState({
onAudioFinish: function () { onAudioFinish: function () {
change(); change();
} },
}) });
} else { } else {
change(); change();
} }
...@@ -543,19 +545,17 @@ class NewQuestionTab extends Component { ...@@ -543,19 +545,17 @@ class NewQuestionTab extends Component {
changeBlankCount = (data, idx) => { changeBlankCount = (data, idx) => {
const { gapFillingAnswer } = this.state; const { gapFillingAnswer } = this.state;
let _gap = [...gapFillingAnswer]; let _gap = [...gapFillingAnswer];
if (data.length <= idx) {
if (data.length === 0) { _gap.splice(idx, 1);
_gap = [] } else {
}
else {
data.forEach((item, index) => { data.forEach((item, index) => {
if (index === idx) { if (index === idx) {
if (_gap.length < data.length) { if (_gap.length < data.length) {
_gap.splice(idx, 0, { correctAnswerList: [] }) _gap.splice(idx, 0, { correctAnswerList: [] });
} else if (_gap.length > data.length) { } else if (_gap.length > data.length) {
_gap.splice(idx, 1) _gap.splice(idx, 1);
} else { } else {
_gap.splice(idx, 1, { correctAnswerList: [] }) _gap.splice(idx, 1, { correctAnswerList: [] });
} }
} }
if (!item.correctAnswerList) { if (!item.correctAnswerList) {
...@@ -568,10 +568,13 @@ class NewQuestionTab extends Component { ...@@ -568,10 +568,13 @@ class NewQuestionTab extends Component {
}); });
} }
this.setState({ this.setState(
blanksList: data, {
gapFillingAnswer: _gap blanksList: data,
}, () => this._onSetState()); gapFillingAnswer: _gap,
},
() => this._onSetState()
);
}; };
addAnswerTag = (optionItem) => { addAnswerTag = (optionItem) => {
...@@ -602,9 +605,11 @@ class NewQuestionTab extends Component { ...@@ -602,9 +605,11 @@ class NewQuestionTab extends Component {
optionItem.errorHold = true; optionItem.errorHold = true;
} }
} }
}) });
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState()); this.setState({ gapFillingAnswer: _gapFillingAnswer }, () =>
this._onSetState()
);
this.setState({ blanksList: _blanksList }); this.setState({ blanksList: _blanksList });
}; };
...@@ -614,12 +619,14 @@ class NewQuestionTab extends Component { ...@@ -614,12 +619,14 @@ class NewQuestionTab extends Component {
let _gapFillingAnswer = [...gapFillingAnswer]; let _gapFillingAnswer = [...gapFillingAnswer];
_blanksList.forEach((item, index) => { _blanksList.forEach((item, index) => {
if (item.id === optionItem.id) { if (item.id === optionItem.id) {
_gapFillingAnswer[index].correctAnswerList = _gapFillingAnswer[index].correctAnswerList.filter( _gapFillingAnswer[index].correctAnswerList = _gapFillingAnswer[
(tag) => tag !== removedTag index
) ].correctAnswerList.filter((tag) => tag !== removedTag);
} }
}); });
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState()); this.setState({ gapFillingAnswer: _gapFillingAnswer }, () =>
this._onSetState()
);
this.setState({ blanksList: _blanksList }); this.setState({ blanksList: _blanksList });
}; };
...@@ -633,7 +640,7 @@ class NewQuestionTab extends Component { ...@@ -633,7 +640,7 @@ class NewQuestionTab extends Component {
} }
}); });
this.setState({ blanksList: _blanksList }); this.setState({ blanksList: _blanksList });
} };
handleInputEdit = (optionItem, index) => { handleInputEdit = (optionItem, index) => {
const _blanksList = this.state.blanksList; const _blanksList = this.state.blanksList;
...@@ -647,7 +654,9 @@ class NewQuestionTab extends Component { ...@@ -647,7 +654,9 @@ class NewQuestionTab extends Component {
renderGapFillingAnswer = (optionItem, optionIndex) => { renderGapFillingAnswer = (optionItem, optionIndex) => {
const { gapFillingAnswer } = this.state; const { gapFillingAnswer } = this.state;
const list = gapFillingAnswer[optionIndex] && gapFillingAnswer[optionIndex].correctAnswerList; const list =
gapFillingAnswer[optionIndex] &&
gapFillingAnswer[optionIndex].correctAnswerList;
return ( return (
<div className="gap-answer-box" key={optionIndex}> <div className="gap-answer-box" key={optionIndex}>
<span className="gap-answer-label"> <span className="gap-answer-label">
...@@ -655,18 +664,19 @@ class NewQuestionTab extends Component { ...@@ -655,18 +664,19 @@ class NewQuestionTab extends Component {
{optionIndex + 1}. {optionIndex + 1}.
</span> </span>
<div className="gap-answer-content"> <div className="gap-answer-content">
{list && list.map((tag, index) => { {list &&
return ( list.map((tag, index) => {
<Tag return (
className="edit-tag" <Tag
visible className="edit-tag"
closable visible
onClose={() => this.handleTagClose(optionItem, tag)} closable
> onClose={() => this.handleTagClose(optionItem, tag)}
{tag} >
</Tag> {tag}
); </Tag>
})} );
})}
{optionItem.inputVisible && ( {optionItem.inputVisible && (
<Input <Input
placeholder={optionItem.errorHold && "请输入"} placeholder={optionItem.errorHold && "请输入"}
...@@ -675,7 +685,12 @@ class NewQuestionTab extends Component { ...@@ -675,7 +685,12 @@ class NewQuestionTab extends Component {
}} }}
maxLength={60} maxLength={60}
size="small" size="small"
suffix={<CloseOutlined onClick={() => this.handleInputClose(optionItem)} style={{ color: "#999999" }} />} suffix={
<CloseOutlined
onClick={() => this.handleInputClose(optionItem)}
style={{ color: "#999999" }}
/>
}
onBlur={(e) => onBlur={(e) =>
this.handleInputConfirm(optionItem, e.target.value, "save") this.handleInputConfirm(optionItem, e.target.value, "save")
} }
...@@ -1292,30 +1307,30 @@ class NewQuestionTab extends Component { ...@@ -1292,30 +1307,30 @@ class NewQuestionTab extends Component {
{["SINGLE_CHOICE", "JUDGE"].includes( {["SINGLE_CHOICE", "JUDGE"].includes(
this.props.questionTypeKey this.props.questionTypeKey
) && ( ) && (
<Radio <Radio
checked={isCorrectAnswer} checked={isCorrectAnswer}
onClick={() => { onClick={() => {
_.each(chooseOptions, (o) => { _.each(chooseOptions, (o) => {
o.isCorrectAnswer = 0; o.isCorrectAnswer = 0;
}); });
optionItem.isCorrectAnswer = 1; optionItem.isCorrectAnswer = 1;
this._onSetState(); this._onSetState();
}} }}
/> />
)} )}
{/* 多选 or 不定项 */} {/* 多选 or 不定项 */}
{["INDEFINITE_CHOICE", "MULTI_CHOICE"].includes( {["INDEFINITE_CHOICE", "MULTI_CHOICE"].includes(
this.props.questionTypeKey this.props.questionTypeKey
) && ( ) && (
<Checkbox <Checkbox
checked={isCorrectAnswer === 1} checked={isCorrectAnswer === 1}
onChange={(e) => { onChange={(e) => {
const checked = e.target.checked ? 1 : 0; const checked = e.target.checked ? 1 : 0;
optionItem.isCorrectAnswer = checked; optionItem.isCorrectAnswer = checked;
this._onSetState(); this._onSetState();
}} }}
/> />
)} )}
</Form.Item> </Form.Item>
</div> </div>
<div className="question-item_options__sort mr12"> <div className="question-item_options__sort mr12">
...@@ -1331,12 +1346,12 @@ class NewQuestionTab extends Component { ...@@ -1331,12 +1346,12 @@ class NewQuestionTab extends Component {
{isJudge {isJudge
? this.renderJudgeOption(questionOptionContentList) ? this.renderJudgeOption(questionOptionContentList)
: this.renderContent( : this.renderContent(
questionOptionContentList, questionOptionContentList,
placeHold, placeHold,
mediaBtn, mediaBtn,
"QUESTION_OPTION", "QUESTION_OPTION",
this.state[`optionsValidate_${optionIndex}`] this.state[`optionsValidate_${optionIndex}`]
)} )}
</Form.Item> </Form.Item>
</div> </div>
{[ {[
...@@ -1344,41 +1359,41 @@ class NewQuestionTab extends Component { ...@@ -1344,41 +1359,41 @@ class NewQuestionTab extends Component {
"MULTI_CHOICE", "MULTI_CHOICE",
"SINGLE_CHOICE", "SINGLE_CHOICE",
].includes(this.props.questionTypeKey) && ( ].includes(this.props.questionTypeKey) && (
<div className="question-item_options__extra"> <div className="question-item_options__extra">
<React.Fragment> <React.Fragment>
<span
className="option-operate_item__icon icon iconfont"
onClick={() => this.handleDelOption(optionIndex)}
>
&#xe81a;
</span>
{optionIndex > 0 && (
<span <span
className="option-operate_item__icon icon iconfont" className="option-operate_item__icon icon iconfont"
onClick={() => this.handleDelOption(optionIndex)} onClick={() =>
this.handleMoveOption(optionIndex, -1)
}
> >
&#xe81a; &#xe74a;
</span> </span>
{optionIndex > 0 && ( )}
<span {optionIndex < chooseOptions.length - 1 && (
className="option-operate_item__icon icon iconfont" <span
onClick={() => className="option-operate_item__icon icon iconfont"
this.handleMoveOption(optionIndex, -1) style={{
} transform: "rotate(180deg)",
> display: "inline-block",
&#xe74a; }}
</span> onClick={() =>
)} this.handleMoveOption(optionIndex, 1)
{optionIndex < chooseOptions.length - 1 && ( }
<span >
className="option-operate_item__icon icon iconfont" &#xe74a;
style={{ </span>
transform: "rotate(180deg)", )}
display: "inline-block", </React.Fragment>
}} </div>
onClick={() => )}
this.handleMoveOption(optionIndex, 1)
}
>
&#xe74a;
</span>
)}
</React.Fragment>
</div>
)}
</div> </div>
); );
})} })}
...@@ -1401,7 +1416,7 @@ class NewQuestionTab extends Component { ...@@ -1401,7 +1416,7 @@ class NewQuestionTab extends Component {
questionAnswerDesc, questionAnswerDesc,
"1000字以内，可粘贴小图", "1000字以内，可粘贴小图",
["VOICE", "AUDIO", "PICTURE", "VIDEO"], ["VOICE", "AUDIO", "PICTURE", "VIDEO"],
"QUESTION_ANSWER_DESC", "QUESTION_ANSWER_DESC"
)} )}
</div> </div>
</Form.Item> </Form.Item>
......
src/modules/teach-tool/components/QuestionEditor.jsx
...@@ -50,8 +50,8 @@ class QuestionEditor extends Component { ...@@ -50,8 +50,8 @@ class QuestionEditor extends Component {
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(nextProps, prevState) {
return { return {
detailInfo: nextProps.detailInfo detailInfo: nextProps.detailInfo,
} };
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
...@@ -62,10 +62,9 @@ class QuestionEditor extends Component { ...@@ -62,10 +62,9 @@ class QuestionEditor extends Component {
}); });
} }
if (blanksList !== this.state.blanksList) { if (blanksList !== this.state.blanksList) {
console.log("+++++++", blanksList)
this.setState({ this.setState({
blanksList blanksList,
}) });
} }
return true; return true;
} }
...@@ -118,6 +117,7 @@ class QuestionEditor extends Component { ...@@ -118,6 +117,7 @@ class QuestionEditor extends Component {
); );
}; };
editorRoot.config.zIndex = 999; editorRoot.config.zIndex = 999;
editorRoot.config.placeholder = "";
editorRoot.config.pasteFilterStyle = false; editorRoot.config.pasteFilterStyle = false;
// 自定义处理粘贴的文本内容 // 自定义处理粘贴的文本内容
editorRoot.config.pasteTextHandle = function (content) { editorRoot.config.pasteTextHandle = function (content) {
...@@ -136,27 +136,29 @@ class QuestionEditor extends Component { ...@@ -136,27 +136,29 @@ class QuestionEditor extends Component {
return str; return str;
}; };
let prevList = [] let prevList = [];
let counter = 0; let counter = 0;
const isEdit = getParameterByName('id'); const isEdit = getParameterByName("id");
if (isEdit) { if (isEdit) {
const stemDom = document.getElementsByClassName("add-fill-line"); const stemDom = document.getElementsByClassName("add-fill-line");
prevList = [...stemDom].map(item => item.id) prevList = [...stemDom].map((item) => item.id);
localStorage.setItem('gap_ques_prevList', JSON.stringify(prevList)); localStorage.setItem("gap_ques_prevList", JSON.stringify(prevList));
setTimeout(function () { setTimeout(
const divHeight = document.getElementById(`editor${editorId}_content`) function () {
.firstChild.offsetHeight; const divHeight = document.getElementById(`editor${editorId}_content`)
if (divHeight > 30) { .firstChild.offsetHeight;
this.setState({ isShowSingleInput: false }); if (divHeight > 30) {
} else { this.setState({ isShowSingleInput: false });
this.setState({ isShowSingleInput: true }); } else {
} this.setState({ isShowSingleInput: true });
}.bind(this)) }
}.bind(this)
);
if (counter === 0) { if (counter === 0) {
this.props.changeBlankCount(stemDom) this.props.changeBlankCount(stemDom);
} }
} }
...@@ -177,14 +179,17 @@ class QuestionEditor extends Component { ...@@ -177,14 +179,17 @@ class QuestionEditor extends Component {
} else { } else {
this.setState({ isShowSingleInput: true }); this.setState({ isShowSingleInput: true });
} }
if (this.state.isGapFilling && this.state.contentType === "QUESTION_STEM") { if (
this.state.isGapFilling &&
this.state.contentType === "QUESTION_STEM"
) {
const stemHtml = this.transferStemDocument(html); const stemHtml = this.transferStemDocument(html);
var _blanksList = stemHtml.getElementsByClassName("add-fill-line") var _blanksList = stemHtml.getElementsByClassName("add-fill-line");
const ids = [..._blanksList].map(item => item.id); const ids = [..._blanksList].map((item) => item.id);
const isEdit = getParameterByName('id'); const isEdit = getParameterByName("id");
if (isEdit && counter === 1) { if (isEdit && counter === 1) {
const prev = localStorage.getItem('gap_ques_prevList'); const prev = localStorage.getItem("gap_ques_prevList");
prevList = prev && JSON.parse(prev); prevList = prev && JSON.parse(prev);
} }
...@@ -192,16 +197,21 @@ class QuestionEditor extends Component { ...@@ -192,16 +197,21 @@ class QuestionEditor extends Component {
if (prevList && ids) { if (prevList && ids) {
idx = this.getNewArr(prevList, ids); idx = this.getNewArr(prevList, ids);
const oldLen = prevList.length; const oldLen = prevList.length;
idx = idx >= oldLen ? idx - oldLen : idx;
idx = idx >= oldLen ? idx - oldLen : idx
} }
prevList = [...ids]; prevList = [...ids];
this.setState({ blanksList: _blanksList }, () => this.props.changeBlankCount(_blanksList, idx)) this.setState({ blanksList: _blanksList }, () =>
this.props.changeBlankCount(_blanksList, idx)
);
} }
this.setState( this.setState(
{ contentLength, visiblePlacehold: conLen === 0 && !focusFlag }, {
contentLength,
visiblePlacehold:
(conLen === 0 || (conLen === 1 && html === " ")) && !focusFlag,
},
() => { () => {
onChange && onChange(html, this.state.contentLength); onChange && onChange(html, this.state.contentLength);
} }
...@@ -218,24 +228,14 @@ class QuestionEditor extends Component { ...@@ -218,24 +228,14 @@ class QuestionEditor extends Component {
}); });
}; };
editorRoot.config.onfocus = () => {
this.setState({
focusFlag: true,
visibleMediaBox: true,
visiblePlacehold: false,
});
};
editorRoot.create(); editorRoot.create();
this.editorRoot = editorRoot; this.editorRoot = editorRoot;
// if (detailInfo && detailInfo.content) {
const contentHtml = /^\<p/.test(detailInfo.content) const contentHtml = /^\<p/.test(detailInfo.content)
? detailInfo.content ? detailInfo.content
: `<p>${detailInfo.content}</p>`; : `<p>${detailInfo.content}</p>`;
editorRoot.txt.html(detailInfo.content); editorRoot.txt.html(detailInfo.content);
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ") const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ").length;
.length;
const imgLength = contentHtml.match(/<img/g) const imgLength = contentHtml.match(/<img/g)
? contentHtml.match(/<img/g).length * 2 ? contentHtml.match(/<img/g).length * 2
: 0; : 0;
...@@ -249,13 +249,12 @@ class QuestionEditor extends Component { ...@@ -249,13 +249,12 @@ class QuestionEditor extends Component {
onChange && onChange(contentHtml, this.state.contentLength); onChange && onChange(contentHtml, this.state.contentLength);
} }
); );
// }
bindChangeContent && bindChangeContent(this.handleChangeContent); bindChangeContent && bindChangeContent(this.handleChangeContent);
} }
getNewArr(a, b) { getNewArr(a, b) {
const arr = [...a, ...b]; const arr = [...a, ...b];
const idx = arr.findIndex(item => { const idx = arr.findIndex((item) => {
return !(a.includes(item) && b.includes(item)); return !(a.includes(item) && b.includes(item));
}); });
return idx; return idx;
...@@ -358,8 +357,9 @@ class QuestionEditor extends Component { ...@@ -358,8 +357,9 @@ class QuestionEditor extends Component {
</div> </div>
)} )}
<div <div
className={`editor-limit-tip${contentLength > limitLength ? " mt6" : "" className={`editor-limit-tip${
}`} contentLength > limitLength ? " mt6" : ""
}`}
style={{ height: contentLength > limitLength ? 20 : 0 }} style={{ height: contentLength > limitLength ? 20 : 0 }}
> >
最多只能输入1000字 最多只能输入1000字
......
src/modules/teach-tool/components/QuestionEditor.less
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
color: #999999; color: #999999;
margin-top: 8px; margin-top: 8px;
.editor-fill-info_icon { .editor-fill-info_icon {
color: #5289fa; color: #5289fa !important;
font-size: 14px; font-size: 14px;
padding-left: 9px; padding-left: 9px !important;
cursor: pointer; cursor: pointer;
} }
} }
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
.editor-placehold { .editor-placehold {
position: absolute; position: absolute;
top: 0; top: 0px;
left: 0; left: 0;
right: 0; right: 0;
font-size: 14px; font-size: 14px;
...@@ -104,6 +104,8 @@ ...@@ -104,6 +104,8 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
z-index: 999;
pointer-events: none;
} }
.edtior-media_box { .edtior-media_box {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment