句子模板的填空+录音

src/components/Adult/common/LigatureModule.vue

@@ -16,7 +16,7 @@
           </div>
         </div>
         <div>
-          <div class="adult-book-input-item">
+          <!-- <div class="adult-book-input-item">
             <span class="adult-book-lable">内容：</span>
             <el-input
               style="width: 200px"
@@ -32,8 +32,8 @@
               src="../../../assets/adult/del-close.png"
               alt=""
             />
-          </div>
-          <div class="adult-book-input-item">
+          </div> -->
+          <!-- <div class="adult-book-input-item">
             <span class="adult-book-lable">序号：</span>
             <el-input
               style="width: 200px"
@@ -43,6 +43,21 @@
               v-model="curQueItem.Number"
               @blur="curQueItem.Number = curQueItem.Number.trim()"
             ></el-input>
+            <img
+              @click="romveoptionCon"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+          </div> -->
+          <div class="NPC-sentence-Segword">
+            <img
+              @click="romveoptionCon"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+            <SentenceSegwordChs :curQue="curQueItem.detail" />
           </div>
           <div class="adult-book-input-item">
             <Upload
@@ -68,7 +83,7 @@
           </div>
         </div>
         <div>
-          <div class="adult-book-input-item">
+          <!-- <div class="adult-book-input-item">
             <span class="adult-book-lable">内容：</span>
             <el-input
               style="width: 200px"
@@ -84,8 +99,8 @@
               src="../../../assets/adult/del-close.png"
               alt=""
             />
-          </div>
-          <div class="adult-book-input-item">
+          </div> -->
+          <!-- <div class="adult-book-input-item">
             <span class="adult-book-lable">序号：</span>
             <el-input
               style="width: 200px"
@@ -95,6 +110,21 @@
               v-model="curQueItem.Number"
               @blur="curQueItem.Number = curQueItem.Number.trim()"
             ></el-input>
+            <img
+              @click="romveoptionCon"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+          </div> -->
+          <div class="NPC-sentence-Segword">
+            <img
+              @click="romveoptionCon"
+              class="close"
+              src="../../../assets/adult/del-close.png"
+              alt=""
+            />
+            <SentenceSegwordChs :curQue="curQueItem.detail" />
           </div>
           <div class="adult-book-input-item">
             <Upload
@@ -114,11 +144,14 @@
 import Upload from "./Upload.vue";
 import "@/utils/pinyin_dict_withtone";
 import "@/utils/pinyinUtil";
+import SentenceSegwordChs from "./SentenceSegwordChs/index.vue";
+
 export default {
   components: {
     Upload,
+    SentenceSegwordChs,
   },
-  props: ["curQueItem", "index", "deleteOptionOne", "type"],
+  props: ["curQueItem", "index", "deleteOptionOne", "type",],
   data() {
     return {
       imgNumber: 1,
@@ -222,7 +255,12 @@ export default {
 //@import url(); 引入公共css类
 .Big-Book-ligatureModule {
   .Big-Book-content {
+    .NPC-sentence-Segword {
+      position: relative;
+    }
     .close {
+      position: absolute;
+      right: 0;
       cursor: pointer;
       width: 24px;
       height: 24px;
@@ -238,6 +276,7 @@ export default {
       margin-right: 15px;
     }
     .Big-Book-con-main {
+      position: relative;
       margin-bottom: 16px;
       display: flex;
       > :nth-child(1) {

src/components/Adult/common/SentenceModule.vue

@@ -33,8 +33,8 @@
         @blur="onBlur(curQueItem, 'en')"
       ></el-input>
     </div>
-    <div v-for="(item, i) in fn_list" :key="i+'answer'">
-      <template v-if="item.type == 'sentence_input_chs'&&item.isFn">
+    <div v-for="(item, i) in fn_list" :key="i + 'answer'">
+      <template v-if="item.type == 'sentence_input_chs' && item.isFn">
         <div class="adult-book-input-item">
           <span class="adult-book-lable">答案：</span>
           <div>
@@ -68,7 +68,7 @@
         </div>
       </template>
     </div>
-    <div v-for="(item, i) in fn_list" :key="i+'judge'">
+    <div v-for="(item, i) in fn_list" :key="i + 'judge'">
       <div
         class="adult-book-input-item"
         v-if="item.type == 'sentence_judge_chs' && item.isFn"
@@ -81,16 +81,7 @@
       </div>
     </div>
 
-    <div
-      class="adult-book-input-item"
-      v-if="
-        type == 'sentence_input_record_chs' || type == 'sentence_record_chs'
-      "
-    >
-      <span class="adult-book-lable">录音组件：</span>
-      <img src="../../../assets/adult/mini.png" alt="" />
-    </div>
-    <div v-for="(item, i) in fn_list" :key="i+'record'">
+    <div v-for="(item, i) in fn_list" :key="i + 'record'">
       <div
         class="adult-book-input-item"
         v-if="item.type == 'sentence_record_chs' && item.isFn"
@@ -104,6 +95,15 @@
     </div>
     <div
       class="adult-book-input-item"
+      v-if="
+        (type == 'sentence_input_record_chs'&&curQueItem.IsRecord) || type == 'sentence_record_chs'
+      "
+    >
+      <span class="adult-book-lable">录音组件：</span>
+      <img src="../../../assets/adult/mini.png" alt="" />
+    </div>
+    <div
+      class="adult-book-input-item"
       v-if="type == 'recordHZ_inputPY_chs' && curQueItem.IsRecord"
     >
       <img src="../../../assets/adult/pro-plus.png" alt="" />

src/components/Adult/common/SingleModule.vue

@@ -57,7 +57,7 @@
               >答案</el-radio
             >
           </template>
-          <template v-if="type == 'checkbox'">
+          <template v-if="type == 'checkbox_chs'">
             <el-checkbox
               style="margin-left: 7px"
               @change="changeIsAnswer"

src/components/Adult/inputModules/Ligature.vue

@@ -14,14 +14,20 @@
       </div>
       <div
         class="Big-Book-main"
-        style="
-          border-bottom: 1px #ccc solid;
-          margin-bottom: 20px;
-          display: flex;
-        "
+        style="border-bottom: 1px #ccc solid; margin-bottom: 20px"
       >
         <div>
           <p>问题</p>
+          <div class="adult-book-input-item">
+              <span class="adult-book-lable">问题标题：</span>   <el-input
+              class="adult-book-input"
+              type="textarea"
+              autosize
+              placeholder="请输入问题标题"
+              v-model="curQue.conTitle"
+              @blur="curQue.conTitle = curQue.conTitle.trim()"
+            ></el-input>
+          </div>
           <div v-for="(item, index) in curQue.con" :key="index">
             <LigatureModule
               :curQueItem="item"
@@ -34,6 +40,16 @@
         </div>
         <div>
           <p>答案</p>
+          <div class="adult-book-input-item">
+              <span class="adult-book-lable">答案标题：</span>   <el-input
+              class="adult-book-input"
+              type="textarea"
+              autosize
+              placeholder="请输入答案标题"
+              v-model="curQue.optionTitle"
+              @blur="curQue.optionTitle = curQue.optionTitle.trim()"
+            ></el-input>
+          </div>
           <div v-for="(item, index) in curQue.option" :key="index">
             <LigatureModule
               :curQueItem="item"
@@ -49,15 +65,15 @@
         <el-divider content-position="center">答案配置</el-divider>
         <div class="answerList">
           <div v-for="(item, index) in curQue.con" :key="index">
-            <span v-if="item.con">{{ item.con }}：</span>
+            <span v-if="item.detail.sentence">{{ item.detail.sentence }}：</span>
             <el-radio-group
               @change="changeAnswer(index)"
               v-model="item.AnswerList"
               class="checkbox-group"
             >
               <span v-for="(op, OPindex) in curQue.option" :key="OPindex">
-                <el-radio v-if="item.con && op.con" :label="OPindex">{{
-                  op.con
+                <el-radio v-if="item.detail.sentence && op.detail.sentence" :label="OPindex">{{
+                  op.detail.sentence
                 }}</el-radio>
               </span>
             </el-radio-group>
@@ -90,71 +106,72 @@ export default {
           mp3_url: [],
         },
       },
-        data_structure: {
-            type: 'ligature_chs',
-            name: "连线",
-            title: "",
-            con: [{
-                    hanzi: '',
-                    Number: '',
-                    mp3_list: [],
-                    img_list: [],
-                    definition_list: [],
-                    Answer: "",
-                    isAnswer: '',
-                    isChecked: '',
-                    judge: '',
-                    correctInput: '',
-                    AnswerList: [],
-                },
-                {
-                    hanzi: '',
-                    Number: '',
-                    mp3_list: [],
-                    img_list: [],
-                    definition_list: [],
-                    Answer: "",
-                    isAnswer: '',
-                    isChecked: '',
-                    judge: '',
-                    correctInput: '',
-                    AnswerList: [],
-
-                },
-            ],
-            option: [{
-                    roleName: "",
-                    site: "left",
-                    hanzi: '',
-                    pinyin: '',
-                    mp3_list: [],
-                    img_list: [],
-                    definition_list: [],
-                    Answer: "",
-                    isAnswer: '',
-                    isChecked: '',
-                    judge: '',
-                    correctInput: ''
-                },
-                {
-                    roleName: "",
-                    site: "left",
-                    hanzi: '',
-                    pinyin: '',
-                    mp3_list: [],
-                    img_list: [],
-                    definition_list: [],
-                    Answer: "",
-                    isAnswer: '',
-                    isChecked: '',
-                    judge: '',
-                    correctInput: ''
-                },
-            ],
-            correct: [{
-                input: ["", ""],
-            }]
-        },
+      data_structure: {
+        type: "ligature_chs",
+        name: "连线",
+        title: "",
+        conTitle: "",
+        optionTitle: "",
+        con: [
+          {
+            mp3_list: [],
+            img_list: [],
+            AnswerList: [],
+            detail: {
+              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+              sentence: "", //句子
+              segList: [], //分词结果
+              seg_words: "",
+              wordsList: [],
+            },
+          },
+          {
+            mp3_list: [],
+            img_list: [],
+            AnswerList: [],
+            detail: {
+              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+              sentence: "", //句子
+              segList: [], //分词结果
+              seg_words: "",
+              wordsList: [],
+            },
+          },
+        ],
+        option: [
+          {
+            con: "",
+            mp3_list: [],
+            img_list: [],
+            AnswerList: [],
+            detail: {
+              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+              sentence: "", //句子
+              segList: [], //分词结果
+              seg_words: "",
+              wordsList: [],
+            },
+          },
+          {
+            con: "",
+            mp3_list: [],
+            img_list: [],
+            AnswerList: [],
+            detail: {
+              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+              sentence: "", //句子
+              segList: [], //分词结果
+              seg_words: "",
+              wordsList: [],
+            },
+          },
+        ],
+        correct: [
+          {
+            input: ["", ""],
+          },
+        ],
+      },
     };
   },
   computed: {},
@@ -205,14 +222,11 @@ export default {
       //   this.$message.warning("数据不能全是空");
       //   return;
       // }
-      let type = this.curQue.type;
-      let cur_fn_data_arr = this.fn_data.filter((item) => item.type == type);
-      let cur_fn_data = JSON.parse(JSON.stringify(cur_fn_data_arr[0]));
       if (CorO == "con") {
-        let obj = cur_fn_data.data_structure.con[0];
+        let obj = this.data_structure.con[0];
         this.curQue.con.push(obj);
       } else {
-        let obj = cur_fn_data.data_structure.option[0];
+        let obj = this.data_structure.option[0];
         this.curQue.option.push(obj);
       }
     },
@@ -262,11 +276,10 @@ export default {
       }
     }
     > :nth-child(2) {
-      margin-left: 40px;
+      // margin-left: 40px;
     }
   }
   .addoption {
-    margin: 0 auto;
     width: 300px;
     height: 40px;
     left: 40px;

src/components/Adult/inputModules/Single.vue

@@ -61,7 +61,7 @@ import SingleModule from "../common/SingleModule.vue";
 
 export default {
   name: "Single",
-  props: ["curQue", "fn_data", "changeCurQue"],
+  props: ["curQue", "fn_data", "changeCurQue","type"],
   components: {
     Inputmodule,
     SingleModule,
@@ -91,7 +91,61 @@ export default {
               img_list: [],
               mp3_list: [],
             },
-            con:"",
+            con: "",
+            img_list: [],
+            mp3_list: [],
+            isAnswer: "",
+          },
+          {
+            topic: {
+              con: "",
+              img_list: [],
+              mp3_list: [],
+            },
+            con: "",
+            img_list: [],
+            mp3_list: [],
+            isAnswer: "",
+          },
+        ],
+        correct: [],
+        numberList: {
+          type: "number",
+          name: "每行几个",
+          con: "2",
+          arr: [
+            {
+              id: 1,
+              value: 1,
+            },
+            {
+              id: 2,
+              value: 2,
+            },
+            {
+              id: 3,
+              value: 3,
+            },
+            {
+              id: 4,
+              value: 4,
+            },
+          ],
+        },
+      },
+      data_structure2: {
+        type: "checkbox_chs",
+        name: "多选题",
+        title: "",
+        IsRecord: false,
+        option: [
+          {
+            topic: {
+              con: "",
+              img_list: [],
+              mp3_list: [],
+            },
+            con: "",
             img_list: [],
             mp3_list: [],
             isAnswer: "",
@@ -152,7 +206,7 @@ export default {
           }
         });
         this.curQue.correct = arr;
-      } else if (this.curQue.type == "checkbox") {
+      } else if (this.curQue.type == "checkbox_chs") {
         this.curQue.option.forEach((item, i) => {
           if (index == i && item.isAnswer != "") {
             this.curQue.correct.push(i);
@@ -179,7 +233,13 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     if (!this.curQue) {
+      if(this.type=='single_chs'){
       this.changeCurQue(this.data_structure);
+
+      }else if(this.type == 'checkbox_chs'){
+      this.changeCurQue(this.data_structure2);
+
+      }
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）

src/components/Adult/preview/Ligature.vue

@@ -3,6 +3,7 @@
     <div id="container" class="container">
       <div class="left">
         <ul>
+          <div>{{ curQue.conTitle }}</div>
           <li
             :class="'left' + index"
             v-for="(item, index) in curQue.con"
@@ -20,9 +21,35 @@
                 :src="item.img_list[0].url"
                 alt=""
               />
-              <p>
-                {{ item.con }}
-              </p>
+              <div class="text">
+                <!-- 大于0就说明分词了 -->
+                <template v-if="item.detail.wordsList.length > 0">
+                  <div
+                    v-for="(it, wordIndex) in item.detail.wordsList"
+                    :key="'word' + wordIndex"
+                  >
+                    <template v-if="item.detail.pyPosition == 'top'">
+                      <p>
+                        {{ it.pinyin }}
+                      </p>
+                      <p>
+                        {{ it.chs }}
+                      </p>
+                    </template>
+                    <template v-else>
+                      <p>
+                        {{ it.chs }}
+                      </p>
+                      <p>
+                        {{ it.pinyin }}
+                      </p>
+                    </template>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ item.detail.sentence }}
+                </template>
+              </div>
             </div>
             <span>{{ item.Number }}</span>
             <img
@@ -44,6 +71,8 @@
       </div>
       <div class="right">
         <ul>
+          <div>{{ curQue.optionTitle }}</div>
+
           <li
             :class="'right' + index"
             v-for="(item, index) in curQue.option"
@@ -76,9 +105,35 @@
                 :src="item.img_list[0].url"
                 alt=""
               />
-              <p>
-                {{ item.con }}
-              </p>
+              <div class="text">
+                <!-- 大于0就说明分词了 -->
+                <template v-if="item.detail.wordsList.length > 0">
+                  <div
+                    v-for="(it, wordIndex) in item.detail.wordsList"
+                    :key="'word' + wordIndex"
+                  >
+                    <template v-if="item.detail.pyPosition == 'top'">
+                      <p>
+                        {{ it.pinyin }}
+                      </p>
+                      <p>
+                        {{ it.chs }}
+                      </p>
+                    </template>
+                    <template v-else>
+                      <p>
+                        {{ it.chs }}
+                      </p>
+                      <p>
+                        {{ it.pinyin }}
+                      </p>
+                    </template>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ item.detail.sentence }}
+                </template>
+              </div>
             </div>
           </li>
         </ul>
@@ -278,6 +333,17 @@ export default {
     this.showPlumb();
     // 根据记录自动连起来
     setTimeout(() => {
+      for (let i = 0; i < this.curQue.con.length; i++) {
+        let nodeleft = document.getElementsByClassName(`left${i}`)[0];
+        let noderight = document.getElementsByClassName(`right${i}`)[0];
+        if (nodeleft && noderight) {
+          if (nodeleft.offsetHeight > noderight.offsetHeight) {
+            noderight.style.height = nodeleft.offsetHeight + "px";
+          } else {
+            nodeleft.style.height = noderight.offsetHeight + "px";
+          }
+        }
+      }
       if (this.data.length > 0) {
         this.data.forEach((item) => {
           this.jsPlumb.connect({
@@ -286,18 +352,7 @@ export default {
           });
         });
       }
-    }, 500);
-    for (let i = 0; i < this.curQue.con.length; i++) {
-      let nodeleft = document.getElementsByClassName(`left${i}`)[0];
-      let noderight = document.getElementsByClassName(`right${i}`)[0];
-      if (nodeleft && noderight) {
-        if (nodeleft.clientHeight > noderight.clientHeight) {
-          noderight.style.height = nodeleft.clientHeight + "px";
-        } else {
-          nodeleft.style.height = noderight.clientHeight + "px";
-        }
-      }
-    }
+    }, 1000);
   },
   //生命周期-创建之前
   beforeCreated() {},
@@ -341,8 +396,17 @@ export default {
     }
     .left {
       ul {
+        > div {
+          width: 334px;
+          text-align: center;
+          font-weight: bold;
+          font-size: 16px;
+          line-height: 150%;
+          color: #000000;
+          margin-bottom: 16px;
+        }
         li {
-          padding-top: 8px;
+          padding: 8px 0;
           position: relative;
           > div {
             width: 238px;
@@ -354,6 +418,13 @@ export default {
               width: 238px;
               height: 158px;
             }
+            .text {
+              display: flex;
+              flex-wrap: wrap;
+              > div {
+                margin-right: 2px;
+              }
+            }
           }
           span {
             margin-left: 16px;
@@ -372,9 +443,17 @@ export default {
     .right {
       margin-left: 64px;
       ul {
+        > div {
+          width: 334px;
+          text-align: center;
+          font-weight: bold;
+          font-size: 16px;
+          line-height: 150%;
+          color: #000000;
+          margin-bottom: 16px;
+        }
         li {
-          padding-top: 8px;
-
+          padding: 8px 0;
           > img {
             margin-left: 12px;
           }
@@ -385,11 +464,17 @@ export default {
             color: #7663ec;
           }
           div {
-            margin-left: 16px;
             img {
               width: 238px;
               height: 158px;
             }
+            .text {
+              display: flex;
+              flex-wrap: wrap;
+              > div {
+                margin-right: 2px;
+              }
+            }
           }
         }
       }

src/views/adultInput3.vue

@@ -268,7 +268,12 @@
                       </template>
                       <template v-else> </template>
                     </template>
-                    <template v-if="topicIitem.type == 'single_chs'">
+                    <template
+                      v-if="
+                        topicIitem.type == 'single_chs' ||
+                        topicIitem.type == 'checkbox_chs'
+                      "
+                    >
                       <template v-if="topicIitem.is_edit">
                         <Single
                           :curQue="topicIitem.data"
@@ -614,9 +619,19 @@ export default {
       };
       getContent(MethodName, data)
         .then((res) => {
-          this.question_list = JSON.parse(res.content);
-          this.cur_page_que_index =
-            this.question_list[this.tabIndex].cur_fn_data.length - 1;
+          if (res.content) {
+            this.question_list = JSON.parse(res.content);
+            this.cur_page_que_index =
+              this.question_list[this.tabIndex].cur_fn_data.length - 1;
+          } else {
+            this.question_list = [
+              {
+                name: "tab1",
+                title: "第1页",
+                cur_fn_data: [],
+              },
+            ];
+          }
         })
         .catch((error) => {});
     },