句子模板

src/components/Adult/preview/EditDiv.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="edit-div"
+         v-html="innerText"
+         :contenteditable="TaskModel=='ANSWER'?'false':'true'"
+         @focus="isLocked = true"
+         @blur="isLocked = false"
+         @input="changeText"
+         placeholder="输入">
+    </div>
+</template>
+<script>
+export default {
+        name: 'editDiv',
+        props: {
+            value: {
+                type: String,
+                default: ''
+            },
+            TaskModel: {
+                type: String,
+                default: ''
+            }
+        },
+        data(){
+            return {
+                innerText: this.value,
+                isLocked: false
+            }
+        },
+        watch: {
+            'value'(){
+                if (!this.isLocked || !this.innerText) {
+                    this.innerText = this.value;
+                }
+            }
+        },
+        methods: {
+            changeText(){
+                if(this.$el.innerHTML.length<210){
+                    this.$emit('input', this.$el.innerHTML);
+                }else{
+                    this.$el.innerHTML= this.$el.innerHTML.substring(0,210)
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" rel="stylesheet/scss">
+    .edit-div {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        word-break: break-all;
+        outline: none;
+        user-select: text;
+        white-space: pre-wrap;
+        text-align: left;
+        &[contenteditable=true]{
+            user-modify: read-write-plaintext-only;
+            &:empty:before {
+                content: attr(placeholder);
+                display: block;
+                color: #ccc;
+            }
+        }
+    }
+</style>

src/components/Adult/preview/SentenceInput.vue

@@ -99,20 +99,21 @@
                   <!-- 
                     v-model="answerList[indexs].pinyin"
                    -->
-                  <p class="pinyin" v-if="conent.pinyin != '__'">
+                  <p class="pinyin" v-if="conent.pinyin.indexOf('__')==-1">
                     {{ conent.pinyin }}
                   </p>
                 </template>
-                <template v-if="conent.chs == '__'">
-                  <div
-                    contenteditable="true"
+                <template v-if="conent.chs.indexOf('__')>-1">
+                  <EditDiv class="input chs" v-model='curQue.Bookanswer[indexs].answerList[items.detail.resArr[conIndex].inputNumber].chs' :TaskModel="TaskModel"></EditDiv>
+                  <!-- <el-input
                     class="input chs"
-                    v-html="answerList[indexs].chs"
-                    @change="changeAnswerList($event, indexs, 'chs')"
-                    @copy.native.capture.prevent="handleFalse"
-                    @paste.native.capture.prevent="handleFalse"
-                    @cut.native.capture.prevent="handleFalse"
-                  ></div>
+                    type="textarea"
+                    autosize
+                    placeholder="输入"
+                    v-model="curQue.Bookanswer[indexs].answerList[items.detail.resArr[conIndex].inputNumber].chs"
+                    :readonly="TaskModel=='ANSWER'"
+                    maxlength="200">
+                </el-input> -->
                 </template>
                 <template v-else>
                   <p class="chs">
@@ -130,7 +131,7 @@
                     v-html="answerList[indexs].pinyin"
                     @change="changeAnswerList($event, indexs, 'pinyin')"
                   ></div> -->
-                  <p class="pinyin" v-if="conent.pinyin != '__'">
+                  <p class="pinyin" v-if="conent.pinyin.indexOf('__')==-1">
                     {{ conent.pinyin }}
                   </p>
                 </template>
@@ -142,23 +143,23 @@
           <input
             @input="handleInput"
             :class="['item-input']"
-            v-model="curQue.Bookanswer[indexs]"
+            v-model="curQue.Bookanswer[indexs].answer"
             placeholder="输入"
           />
         </template>
         <template v-if="dataType.indexOf('sentence_judge_chs') > -1">
-          <div class="judge-box">
+          <div class="judge-box" :class="[TaskModel == 'ANSWER'?'notAllow':'']">
             <a
               :class="[
                 'right-btn',
-                curQue.Bookanswer[indexs] == 'right' ? 'active' : '',
+                curQue.Bookanswer[indexs].answer == 'right' ? 'active' : '',
               ]"
               @click="handleSelectJudge('right', indexs)"
             ></a>
             <a
               :class="[
                 'error-btn',
-                curQue.Bookanswer[indexs] == 'error' ? 'active' : '',
+                curQue.Bookanswer[indexs].answer == 'error' ? 'active' : '',
               ]"
               @click="handleSelectJudge('error', indexs)"
             ></a>
@@ -168,6 +169,9 @@
           <template v-if="dataType.indexOf('sentence_input_chs') != -1">
             <Soundrecord
               @handleWav="handleWav"
+              :answerRecordList="curQue.Bookanswer[indexs].recordList"
+              :tmIndex="indexs"
+              :TaskModel="TaskModel"
               type="normal"
               v-if="items.IsRecord"
             />
@@ -175,6 +179,9 @@
           <template v-else>
             <Soundrecord
               @handleWav="handleWav"
+              :answerRecordList="curQue.Bookanswer[indexs].recordList"
+              :tmIndex="indexs"
+              :TaskModel="TaskModel"
               type="mini"
               class="luyin-box"
               v-if="items.IsRecord"
@@ -188,9 +195,10 @@
 
 <script>
 import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import EditDiv from "../preview/EditDiv.vue"
 export default {
-  components: { Soundrecord },
-  props: ["curQue"],
+  components: { Soundrecord, EditDiv },
+  props: ["curQue","TaskModel"],
   data() {
     return {
       audio: new Audio(),
@@ -232,36 +240,50 @@ export default {
     handleData() {
       let _this = this;
       this.dataType = [];
+      this.curQue.fn_list.forEach((item) => {
+        if (item.isFn) {
+          _this.dataType.push(item.type);
+        }
+      });
       if (!this.curQue.Bookanswer) {
+        let answerList = []
         let curCorrect = [];
         this.curQue.option.forEach((item) => {
-          curCorrect.push("");
+        if (this.dataType.indexOf("sentence_input_chs") != -1) {
+            answerList = []
+            item.answer.forEach((it) => {
+                answerList.push({
+                    chs: "",
+                    pinyin: "",
+                });
+            });
+        }
+        curCorrect.push({
+            answer: "",
+            recordList: [],
+            answerList: answerList
+          });
         });
         this.$set(this.curQue, "Bookanswer", curCorrect);
       }
-      this.curQue.fn_list.forEach((item) => {
-        if (item.isFn) {
-          _this.dataType.push(item.type);
-        }
-      });
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       curQue.option.forEach((dItem, dIndex) => {
         let paraArr = [];
+        let inputNumber = 0
         dItem.detail.wordsList.forEach((sItem, sIndex) => {
           this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
           let obj = {
             pinyin: sItem.pinyin,
             chs: sItem.chs,
             isShow: sItem.isShow,
+            inputNumber: sItem.chs.indexOf('__')>-1?inputNumber:''
           };
           paraArr.push(obj);
+          if(sItem.chs.indexOf('__')>-1){
+              inputNumber++
+          }
         });
         this.$set(_this.curQue.option[dIndex].detail, "resArr", paraArr);
-        console.log();
-        if (paraArr.length == 0) {
-          let str = "就那天___";
-          let arrs = str.split(/_{2,}/g);
-        }
       });
     },
     //词和标点合一起
@@ -277,9 +299,14 @@ export default {
     },
     // 判断题选择
     handleSelectJudge(obj, index) {
-      this.$set(this.curQue.Bookanswer, index, obj);
+        if(!this.TaskModel||this.TaskModel!='ANSWER'){
+            this.curQue.Bookanswer[index].answer = obj
+        }
+    },
+    handleWav(list, tmIndex) {
+        tmIndex = tmIndex ? tmIndex : 0;
+        this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
     },
-    handleWav(data) {},
     handleDatas(str, type) {
       str = str.trim();
       str = str.replace(/_{2,}/g, "^ ");
@@ -288,12 +315,11 @@ export default {
       let resArr = type == "hanzi" ? str.split("") : str.split(/\s+/);
       return resArr;
     },
-    changeAnswerList(e, index, type) {
+    changeAnswerList(e, index, type, indexs) {
       if (type == "pinyin") {
-        this.answerList[index].pinyin += e.target.innerHTML;
+        this.curQue.Bookanswer[index].answerList[indexs].pinyin += e.target.innerHTML;
       } else {
-        this.answerList[index].chs += e.target.innerHTML;
-        console.log(e.target.innerHTML)
+        this.curQue.Bookanswer[index].answerList[indexs].chs += e.target.innerHTML;
       }
     },
     handleFalse(){
@@ -303,16 +329,6 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.handleData();
-    if (this.dataType.indexOf("sentence_input_chs") != -1) {
-      this.curQue.option.forEach((item) => {
-        item.answer.forEach((it) => {
-          this.answerList.push({
-            chs: "",
-            pinyin: "",
-          });
-        });
-      });
-    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -400,7 +416,7 @@ export default {
             border-bottom: 1px solid black;
           }
           .pinyin {
-            font-weight: "GB-PINYINOK-B";
+            font-family: "GB-PINYINOK-B";
             font-size: 14px;
             line-height: 130%;
             color: rgba(0, 0, 0, 0.6);
@@ -480,6 +496,11 @@ export default {
       .judge-box {
         display: flex;
         justify-content: center;
+        &.notAllow{
+            a,a.error-btn{
+                cursor: not-allowed;
+            }
+        }
         a {
           width: 32px;
           height: 32px;

src/components/Adult/preview/SentenceListenRead.vue

@@ -109,7 +109,7 @@
           </template>
           <b class="content-en" v-if="items.en">{{ items.en }}</b>
         </div>
-        <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" />
+        <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" :answerRecordList="curQue.Bookanswer[index].recordList" :tmIndex="index" :TaskModel="TaskModel" />
       </div>
     </div>
   </div>
@@ -120,7 +120,7 @@ import AudioLine from "../preview/AudioLine.vue";
 import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 export default {
   components: { AudioLine, Soundrecord },
-  props: ["curQue", "themeColor"],
+  props: ["curQue", "themeColor", "TaskModel"],
   data() {
     return {
       curTime: 0,
@@ -141,7 +141,9 @@ export default {
       if (!this.curQue.Bookanswer) {
         let curCorrect = [];
         this.curQue.option.forEach((item) => {
-          curCorrect.push("");
+          curCorrect.push({
+              recordList: []
+          });
         });
         this.$set(this.curQue, "Bookanswer", curCorrect);
       }
@@ -179,7 +181,10 @@ export default {
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
-    handleWav(data) {},
+    handleWav(list, tmIndex) {
+        tmIndex = tmIndex ? tmIndex : 0;
+        this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
+    },
     //点击播放某个句子
     handleChangeTime(time,edTime) {
       let _this = this;