笔记

src/views/bookShelf/components/NotesModel.vue

@@ -6,8 +6,8 @@
             <h2>
                 <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}">
                         <span
-                            class="NNPE-chs"
-                            >{{ itemR.text }}</span
+                            class="NNPE-chs" v-html="itemR.text"
+                            ></span
                         >
                     <!-- {{itemR.tokens[2]}} -->
                 </span>
@@ -41,8 +41,7 @@
             :key="'detail' + index"
             >
                 <template v-if="index!==0">
-                    <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}" @mousedown="mouseupClick(pItem)">
-                            {{ pItem.text }}
+                    <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}" @mousedown="mouseupClick(pItem)" v-html="pItem.text">
                     </span>
                 </template>
             </div>
@@ -140,7 +139,8 @@ export default {
         pos: ''
       },
       activeSentObj: null, // 点击的句子
-      loading: false
+      loading: false,
+      highDataList: []
     };
   },
   computed: {
@@ -187,6 +187,7 @@ export default {
             resArr[item.pno].wordsList.push(item)
         });
         this.resArr = resArr;
+        this.handleHighSentence()
         setTimeout(() => {
             _this.highlighter = new Highlighter({
                 $root: document.getElementById("notes-model"),
@@ -203,7 +204,6 @@ export default {
                 })
                 .on('selection:create', ({sources}) => {
                     // sources = sources.map(hs => ({hs}));
-                    console.log(sources)
                     if(sources&&sources[0]){
                         _this.notesObj.title = sources[0].text
                         _this.notesObj.pos = JSON.stringify({
@@ -211,24 +211,62 @@ export default {
                             s: sources[0].startMeta.textOffset,
                             e: sources[0].endMeta.textOffset,
                         })
+                        _this.notesObj.notes = ''
+                        _this.notesObj.id = ''
                         _this.notesId = sources[0].id
                         _this.notesFlag = true
                     }
                     
                     // 存储
                     // store.save(sources);
-                    document.getElementsByClassName('highlight-mengshou-wrap').forEach((itemH,indexH)=>{
-                        if(indexH===0){
-                            itemH.addEventListener("mousedown", function () {
-                                _this.notesFlag = true
-                                console.log(itemH.getAttribute('data-highlight-id'))
-                            });
-                        }
-                    })
                 });
             _this.highlighter.run()
         }, 1000);
     },
+    // 高亮笔记句子
+    async handleHighSentence(){
+        let _this = this
+        let MethodName = '/PaperServer/Client/Article/ArtNoteListInArt'
+            let data = {
+                id: this.$route.query.id
+            }
+            await getLogin(MethodName, data)
+            .then((res) => {
+                if(res.status===1){
+                    this.highDataList = res.data
+                    this.highDataList.forEach(itemh=>{
+                        if(JSON.parse(itemh.pos).sent_id){
+                            this.resArr.forEach(itemr=>{
+                                itemr.wordsList.forEach(itemw=>{
+                                    if(itemw.id===JSON.parse(itemh.pos).sent_id){
+                                        itemw.text = itemw.text.replace(itemh.select_text, "<span class='selece-high-sent' attr-id='"+itemh.id+"'>"+itemh.select_text+"</span>")
+                                    }
+                                })
+                            })
+                        }
+                    })
+                    setTimeout(() => {
+                        document.getElementsByClassName('selece-high-sent').forEach((itemH,indexH)=>{
+                            // if(indexH===0){
+                                itemH.addEventListener("mousedown", function () {
+                                    _this.notesFlag = true
+                                    _this.notesObj.id = itemH.getAttribute('attr-id')
+                                    for(let i = 0; i < _this.highDataList.length; i++){
+                                        if(_this.highDataList[i].id===itemH.getAttribute('attr-id')){
+                                            _this.notesObj.title = _this.highDataList[i].select_text
+                                            _this.notesObj.pos = _this.highDataList[i].pos
+                                            _this.notesObj.notes = _this.highDataList[i].note
+                                            break
+                                        }
+                                    }
+                                });
+                            // }
+                        })
+                    }, 200);
+                    
+                }
+            })
+    },
     mouseupClick(obj){
         this.activeSentObj = obj
     },
@@ -249,9 +287,12 @@ export default {
         }
         getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            this.notesFlag = false
-            this.$message.success('保存成功')
+            if(res.status===1){
+                this.loading = false
+                this.notesFlag = false
+                this.handleHighSentence()
+                this.$message.success('保存成功')
+            }
         }).catch(()=>{
             this.loading = false
         })
@@ -263,7 +304,18 @@ export default {
             cancelButtonText: "取消",
             type: "warning",
         }).then(() => {
-            
+            let MethodName = '/PaperServer/Client/Article/ArtNoteDelete'
+            let data = {
+                id: this.notesObj.id
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                if(res.status===1){
+                    this.notesFlag = false
+                    this.handleData()
+                    this.$message.success('删除成功')
+                }
+            })
         });
     }
   },
@@ -379,8 +431,11 @@ export default {
 <style lang="scss">
 .highlight-mengshou-wrap{
     background: #FFF3B7 !important;
+}
+.selece-high-sent{
     text-decoration: underline dotted;
     text-decoration-color: #175DFF;
+    cursor: pointer;
 }
 .notes-dialog{
     .el-dialog__header{