批注功能

src/components/components/correctText.vue

@@ -0,0 +1,48 @@
+<template>
+	<div style="white-space: pre-line;" v-html="result"></div>
+</template>
+
+<script>
+import * as Diff from 'diff'
+	export default {
+		props:{
+			newText:{
+				type:String,
+				default:""
+			},
+			oldData:{
+				type:String,
+				default:""
+			},
+		},
+		data(){
+			return {
+				text:"",
+			}
+		},
+		computed:{
+			result(){
+				let w = "";
+        let a = Diff.diffWordsWithSpace(this.oldData,this.newText);
+        for(var k = 0;k<a.length;k++){
+          if(a.length > 1){
+              if(a[k].added == true){
+                w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
+              }else if(a[k].removed == true){
+                w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
+              }else{
+                w += '<span>' + a[k].value + '</span>';
+              }
+          }else{
+            w = this.newText
+          }
+        }
+        return w;
+			}
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>

src/components/easy2/studyStudent.vue

@@ -11668,7 +11668,8 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
+									<correctText :newText="newEnglishList.engText" :oldData="oldEnglishJson.engText"/>
+                  <!-- <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div> -->
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11693,7 +11694,7 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="oldEnglishJson1.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText)"></div>
+                  <correctText v-else :newText="oldEnglishJson1.engText" :oldData="oldEnglishJson.engText"/>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11711,7 +11712,7 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
+                  <correctText v-else :newText="newEnglishList.engText" :oldData="oldEnglishJson.engText"/>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11731,15 +11732,15 @@
                 </div>
                 <div class="oldDetail">
                   <div>正文：</div>
-                  <div v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" v-html="newEnglishList1[newEngIndex].cWork.engText"></div>
+									<correctText v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" :newText="newEnglishList1[newEngIndex].cWork.engText" :oldData="oldEnglishJson.engText"/>
                   <div v-else>
                     <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList1[newEngIndex].cWork.engText"  @input="gx"/>
-                    <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText)"></div>
+                    <correctText v-else :newText="newEnglishList1[newEngIndex].cWork.engText" :oldData="oldEnglishJson.engText"/>
                   </div>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
-                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
-                <el-button @click="aiCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -70px;right: 110px;background: #409eff;color: #fff;" v-if="!greyType">AI批注</el-button>
+                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }" v-if="!greyType && userMes[0].userid == newEnglishList1[newEngIndex].correct">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="aiCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -70px;right: 110px;background: #409eff;color: #fff;" v-if="!greyType && userMes[0].userid == newEnglishList1[newEngIndex].correct">AI批注</el-button>
                 <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
@@ -11845,6 +11846,7 @@ import englishEva from "../components/englishEva";
 import * as Diff from 'diff'
 import EnglishVoice from '../EnglishVoice2/index.vue'
 import checkEnglishVoice from '../checkEnglishVoice/index.vue'
+import correctText from '../components/correctText.vue'
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -11916,7 +11918,8 @@ export default {
     onlineWrite,
     englishEva,
     EnglishVoice,
-    checkEnglishVoice
+    checkEnglishVoice,
+		correctText
   },
   data() {
     return {

src/components/easy3/studyStudent.vue

@@ -11655,7 +11655,8 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
+									<correctText :newText="newEnglishList.engText" :oldData="oldEnglishJson.engText"/>
+                  <!-- <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText,correctWord)"></div> -->
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11680,7 +11681,8 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="oldEnglishJson1.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText)"></div>
+									<correctText v-else :newText="oldEnglishJson1.engText" :oldData="oldEnglishJson.engText"/>
+                  <!-- <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText,correctWord)"></div> -->
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11698,7 +11700,8 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
+									<correctText v-else :newText="newEnglishList.engText" :oldData="oldEnglishJson.engText"/>
+                  <!-- <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText,correctWord)"></div> -->
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11714,20 +11717,21 @@
                   <div v-else>
                     <el-input v-if="greyType" v-model="newEnglishList1[newEngIndex].cWork.engTitle" />
                     <div v-else v-html="newEnglishList1[newEngIndex].cWork.engTitle"></div>
-                    
                   </div>
                 </div>
                 <div class="oldDetail">
                   <div>正文：</div>
-                  <div v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" v-html="newEnglishList1[newEngIndex].cWork.engText"></div>
+                  <!-- <div v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" v-html="newEnglishList1[newEngIndex].cWork.engText"></div> -->
+									<correctText v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" :newText="newEnglishList1[newEngIndex].cWork.engText" :oldData="oldEnglishJson.engText"/>
                   <div v-else>
                     <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList1[newEngIndex].cWork.engText" @input="gx"/>
-                    <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText)"></div>
+										<correctText v-else :newText="newEnglishList1[newEngIndex].cWork.engText" :oldData="oldEnglishJson.engText"/>
+                    <!-- <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText,correctWord)"></div> -->
                   </div>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
-                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
-                <el-button @click="aiCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -70px;right: 110px;background: #409eff;color: #fff;" v-if="!greyType">AI批注</el-button>
+                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }" v-if="!greyType && userMes[0].userid == newEnglishList1[newEngIndex].correct">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="aiCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -70px;right: 110px;background: #409eff;color: #fff;" v-if="!greyType && userMes[0].userid == newEnglishList1[newEngIndex].correct">AI批注</el-button>
                 <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
@@ -11833,6 +11837,7 @@ import englishEva from "../components/englishEva";
 import * as Diff from 'diff'
 import EnglishVoice from '../EnglishVoice2/index.vue'
 import checkEnglishVoice from '../checkEnglishVoice/index.vue'
+import correctText from '../components/correctText.vue'
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -11904,7 +11909,8 @@ export default {
     onlineWrite,
     englishEva,
     EnglishVoice,
-    checkEnglishVoice
+    checkEnglishVoice,
+		correctText
   },
   data() {
     return {
@@ -12349,15 +12355,15 @@ export default {
           //   }
           // }
           if(p == 1){
-            this.newEnglishList.engText = aiText;
-          }else if(p == 2){
-            this.oldEnglishJson1.engText = aiText;
-          }else if(p == 3){
-            this.newEnglishList.engText = aiText;
-          }else{
-            this.newEnglishList1[this.newEngIndex].cWork.engText = aiText;
-          }
-          loading.close();
+					 this.newEnglishList.engText = aiText;
+					}else if(p == 2){
+					 this.oldEnglishJson1.engText = aiText;
+					}else if(p == 3){
+					 this.newEnglishList.engText = aiText;
+					}else{
+					 this.newEnglishList1[this.newEngIndex].cWork.engText = aiText;
+					}
+					loading.close();
         },
         (err) => {
           console.log(err);
@@ -19831,7 +19837,7 @@ export default {
       };
     },
     Correct() {
-      return function (c) {
+      return function (c,d) {
         let w = "";
         let a = this.correctWord;
         for(var k = 0;k<a.length;k++){
@@ -19847,7 +19853,8 @@ export default {
           }else{
             w = c
           }
-
+					console.log("👇👇！+++==")
+					console.log(w)
           //diffChars方法
           // if(w == ""){
           //   if(a.length > 1){

src/components/studyStudent.vue

@@ -11641,7 +11641,7 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
+									<correctText :newText="newEnglishList.engText" :oldData="oldEnglishJson.engText"/>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11666,7 +11666,7 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="oldEnglishJson1.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText)"></div>
+                  <correctText v-else :newText="oldEnglishJson1.engText" :oldData="oldEnglishJson.engText"/>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11684,7 +11684,7 @@
                 <div class="oldDetail">
                   <div>正文：</div>
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
-                  <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
+                  <correctText v-else :newText="newEnglishList.engText" :oldData="oldEnglishJson.engText"/>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
                 <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
@@ -11704,15 +11704,15 @@
                 </div>
                 <div class="oldDetail">
                   <div>正文：</div>
-                  <div v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" v-html="newEnglishList1[newEngIndex].cWork.engText"></div>
+                  <correctText v-if="userMes[0].userid != newEnglishList1[newEngIndex].correct" :newText="newEnglishList1[newEngIndex].cWork.engText" :oldData="oldEnglishJson.engText"/>
                   <div v-else>
                     <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList1[newEngIndex].cWork.engText" @input="gx"/>
-                    <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText)"></div>
+                    <correctText v-else :newText="newEnglishList1[newEngIndex].cWork.engText" :oldData="oldEnglishJson.engText"/>
                   </div>
                 </div>
                 <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
-                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
-                <el-button @click="aiCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -70px;right: 110px;background: #409eff;color: #fff;" v-if="!greyType">AI批注</el-button>
+                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }" v-if="!greyType && userMes[0].userid == newEnglishList1[newEngIndex].correct">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="aiCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -70px;right: 110px;background: #409eff;color: #fff;" v-if="!greyType && userMes[0].userid == newEnglishList1[newEngIndex].correct">AI批注</el-button>
                 <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
@@ -11818,6 +11818,7 @@ import englishEva from "./components/englishEva";
 import * as Diff from 'diff'
 import EnglishVoice from './EnglishVoice2/index.vue'
 import checkEnglishVoice from './checkEnglishVoice/index.vue'
+import correctText from './components/correctText.vue'
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -11889,7 +11890,8 @@ export default {
     onlineWrite,
     englishEva,
     EnglishVoice,
-    checkEnglishVoice
+    checkEnglishVoice,
+		correctText
   },
   data() {
     return {
@@ -19513,6 +19515,7 @@ export default {
     },
     setEngText(i){
       this.newEngIndex = i;
+			
       this.$forceUpdate();
     },
     addCorrect(){