Merge branch 'feature/yuananting/20210221/question-bank-tools' of…

Merge branch 'feature/yuananting/20210221/question-bank-tools' of https://xmgit.ixm5.cn/xiaomai-cloud-class/xiaomai-cloud-class-web into feature/yuananting/20210221/question-bank-tools

src/modules/teach-tool/components/NewQuestionTab.jsx

@@ -2,7 +2,7 @@
  * @Author: yuananting
  * @Date: 2021-02-25 14:34:29
  * @LastEditors: yuananting
- * @LastEditTime: 2021-03-18 14:52:18
+ * @LastEditTime: 2021-03-18 15:08:11
  * @Description: 助学工具-题库-题目管理-新建题目Tab
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -98,9 +98,28 @@ class NewQuestionTab extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     const { questionInfo } = nextProps;
     if (this.props.questionInfo !== questionInfo) {
-      this.setState({
-        stemContent: JSON.parse(JSON.stringify(questionInfo.questionStemList)),
-      }); // 题干内容
+      if (questionInfo.gapFillingAnswerList !== this.state.gapFillingAnswer) {
+        console.log(999, questionInfo.gapFillingAnswerList)
+        this.setState({
+          gapFillingAnswer: questionInfo.gapFillingAnswerList
+        })
+      }
+      this.setState(
+        {
+          stemContent: JSON.parse(
+            JSON.stringify(questionInfo.questionStemList)
+          ),
+        },
+        () => {
+          const con = questionInfo.questionStemList[0].content;
+          const input = con.match(/<input([^<>]*)>/g)
+          const _blanksList = input.map(item => {
+            return this.transferStemDocument(item).firstChild
+          })
+          console.log("-----", _blanksList)
+          this.setState({blanksList:_blanksList})
+        }
+      ); // 题干内容
       this.setState({
         chooseOptions: JSON.parse(JSON.stringify(questionInfo.optionList)),
       }); // 单选多选不定项-选项列表
@@ -184,7 +203,7 @@ class NewQuestionTab extends Component {
     const { chooseOptions } = this.state;
     if (this.props.questionTypeKey === "GAP_FILLING") {
       this.state.blanksList.forEach((item, index) => {
-        if (item.answerTagList.length === 0) {
+        if (item.correctAnswerList.length === 0) {
           this.setState({ [`optionsValidate_${index}`]: "error" });
           this.setState({ [`optionsText_${index}`]: "请输入答案" });
           validateError++;
@@ -512,9 +531,10 @@ class NewQuestionTab extends Component {
   }
 
   changeBlankCount = (data) => {
-    data.forEach((item) => {
-      if (!item.answerTagList) {
-        item.answerTagList = [];
+    console.log("data:", data);
+    data && data.length > 0 && data.forEach((item) => {
+      if (!item.correctAnswerList) {
+        item.correctAnswerList = [];
       }
       item.inputVisible = false;
       item.errorHold = false;
@@ -523,7 +543,7 @@ class NewQuestionTab extends Component {
     });
     this.setState({ blanksList: data });
   };
-
+    
   addAnswerTag = (optionItem) => {
     const _blanksList = this.state.blanksList;
     _blanksList.forEach((item) => {
@@ -536,19 +556,26 @@ class NewQuestionTab extends Component {
 
   handleInputConfirm = (optionItem, val) => {
     const _blanksList = this.state.blanksList;
-    var gapFillingAnswer = [];
-    _blanksList.forEach((item) => {
+    // const { gapFillingAnswer } = this.state;
+    let _gapFillingAnswer = [];
+    _blanksList.forEach((item, index) => {
       gapFillingAnswer.push({ correctAnswerList: item.answerTagList });
+      // if (gapFillingAnswer[index] && gapFillingAnswer[index].correctAnswerList) {
+      //   _gapFillingAnswer[index] = gapFillingAnswer[index]
+      // } else {
+      //   _gapFillingAnswer.push({ correctAnswerList: item.correctAnswerList });
+      // }
       if (item.id === optionItem.id) {
         if (val) {
-          optionItem.answerTagList.push(val);
+          optionItem.correctAnswerList.push(val);
           optionItem.inputVisible = false;
         } else {
           optionItem.errorHold = true;
         }
       }
     });
-    this.setState({ gapFillingAnswer }, () => this._onSetState());
+    console.log(8888, _gapFillingAnswer)
+    this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState());
     this.setState({ blanksList: _blanksList });
   };
 
@@ -556,7 +583,7 @@ class NewQuestionTab extends Component {
     const _blanksList = this.state.blanksList;
     _blanksList.forEach((item) => {
       if (item.id === optionItem.id) {
-        optionItem = optionItem.answerTagList.filter(
+        optionItem = optionItem.correctAnswerList.filter(
           (tag) => tag !== removedTag
         );
       }
@@ -568,13 +595,17 @@ class NewQuestionTab extends Component {
     const _blanksList = this.state.blanksList;
     _blanksList.forEach((item) => {
       if (item.id === optionItem.id) {
-        item.answerTagList.map();
+        item.correctAnswerList.map();
       }
     });
     this.setState({ blanksList: _blanksList });
   };
 
   renderGapFillingAnswer = (optionItem, optionIndex) => {
+    console.log(11111, optionItem)
+    const { gapFillingAnswer } = this.state;
+    console.log(222, gapFillingAnswer)
+    const list = gapFillingAnswer[optionIndex] && gapFillingAnswer[optionIndex].correctAnswerList;
     return (
       <div className="gap-answer-box" key={optionIndex}>
         <span className="gap-answer-label">
@@ -582,7 +613,7 @@ class NewQuestionTab extends Component {
           {optionIndex + 1}.
         </span>
         <div className="gap-answer-content">
-          {optionItem.answerTagList.map((tag, index) => {
+          {list && list.map((tag, index) => {
             return optionItem.editInput ? (
               <Input
                 placeholder={optionItem.errorHold ? "请输入" : ""}
@@ -659,6 +690,7 @@ class NewQuestionTab extends Component {
     contentType,
     validateStatus
   ) => {
+    const { blanksList } = this.state;
     const isGapFilling = this.props.questionTypeKey === "GAP_FILLING";
     const editorContent = _.find(
       contentList,
@@ -688,6 +720,7 @@ class NewQuestionTab extends Component {
             isGapFilling={isGapFilling}
             contentType={contentType}
             mediaBtn={mediaBtn}
+            blanksList={blanksList}
             changeBlankCount={this.changeBlankCount.bind(this)}
             bindChangeContent={(cb, textElemId) => {
               this.setState({ textElemId });

src/modules/teach-tool/components/QuestionEditor.jsx

@@ -56,12 +56,18 @@ class QuestionEditor extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    const { detailInfo } = nextProps;
+    const { detailInfo, blanksList } = nextProps;
     if (this.state.detailInfo !== detailInfo) {
       this.setState({ detailInfo: nextProps.detailInfo }, () => {
         this.renderEditor();
       });
     }
+    if (blanksList !== this.state.blanksList) {
+      console.log("+++++++", blanksList)
+      this.setState({
+        blanksList
+      })
+    }
     return true;
   }
 
@@ -148,6 +154,7 @@ class QuestionEditor extends Component {
         this.setState({ isShowSingleInput: true });
       }
       if (this.state.isGapFilling) {
+        console.log(9999, this.state.isGapFilling)
         this.props.changeBlankCount(this.state.blanksList);
       }
       this.setState(
@@ -204,7 +211,7 @@ class QuestionEditor extends Component {
   }
 
   insertBlank = (blanks) => {
-    var blanks = `<input class="add-fill-line" disabled answerTagList="" id=${window.random_string(
+    var blanks = `<input class="add-fill-line" disabled correctAnswerList="[]" id=${window.random_string(
       16
     )} value="填空"/>`;
     this.editorRoot.cmd.do("insertHTML", blanks);
@@ -215,7 +222,7 @@ class QuestionEditor extends Component {
     this.setState({
       visiblePlacehold: false,
     });
-    // this.props.changeBlankCount(_blanksList);
+    this.props.changeBlankCount(_blanksList);
   };
 
   render() {