From eccfb2e321837967abc0c70c7b348cbd1e638713 Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Sat, 1 Aug 2020 17:10:43 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nuxt.config.js       |  12 +-
 pages/index/note.vue |  16 +--
 pages/index/read.vue | 297 +++++++++++++++++++++++--------------------
 3 files changed, 175 insertions(+), 150 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index 14aba45..fb69537 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -188,6 +188,8 @@ export default {
           "new_recommend": "最新推荐",
           "note": {
             "table": {
+              "note_content": "笔记内容",
+              "note_title": "笔记标题",
               "original_text": "注释原文",
               "paper_name": "论文标题"
             },
@@ -201,9 +203,7 @@ export default {
               "search": "查找"
             },
             "form": {
-              "keyword": "关键字",
-              "note_content": "笔记内容",
-              "note_title": "笔记标题"
+              "keyword": "关键字"
             },
             "tip": {
               "add_tip": "是否添加该笔记？",
@@ -362,6 +362,8 @@ export default {
           "new_recommend": "",
           "note": {
             "table": {
+              "note_content": "",
+              "note_title": "",
               "original_text": "",
               "paper_name": ""
             },
@@ -375,9 +377,7 @@ export default {
               "search": ""
             },
             "form": {
-              "keyword": "",
-              "note_content": "",
-              "note_title": ""
+              "keyword": ""
             },
             "tip": {
               "add_tip": "",
diff --git a/pages/index/note.vue b/pages/index/note.vue
index e609560..a3aa17f 100644
--- a/pages/index/note.vue
+++ b/pages/index/note.vue
@@ -3,11 +3,11 @@
     <el-row type="flex" justify="center">
       <el-col :span="5">
          <el-form ref="form" :model="form"  label-width="80px">
-           <el-form-item :label="$t('read.form.note_title')" prop="note_title">
-             <el-input v-model="form.note_title" :placeholder="$t('input_please', { keyword: this.$t('read.form.note_title') })"></el-input>
+           <el-form-item :label="$t('note.table.note_title')" prop="note_title">
+             <el-input v-model="form.note_title" :placeholder="$t('input_please', { keyword: this.$t('note.table.note_title') })"></el-input>
            </el-form-item>
-           <el-form-item :label="$t('read.form.note_content')" prop="note_content">
-             <el-input type="textarea" v-model="form.note_content" :placeholder="$t('input_please', { keyword: this.$t('read.form.note_content') })"></el-input>
+           <el-form-item :label="$t('note.table.note_content')" prop="note_content">
+             <el-input type="textarea" v-model="form.note_content" :placeholder="$t('input_please', { keyword: this.$t('note.table.note_content') })"></el-input>
            </el-form-item>
            <el-form-item class="center">
              <el-button @click="findNote">{{$t('button.query')}}</el-button>
@@ -22,8 +22,8 @@
          </template>
        </el-table-column>
        <el-table-column align="center" prop="originalText" :label="$t('note.table.original_text')" />
-       <el-table-column align="center" prop="noteTitle" :label="$t('read.form.note_title')" />
-       <el-table-column align="center" prop="noteContent" :label="$t('read.form.note_content')" />
+       <el-table-column align="center" prop="noteTitle" :label="$t('note.table.note_title')" />
+       <el-table-column align="center" prop="noteContent" :label="$t('note.table.note_content')" />
        <el-table-column align="center" :label="$t('action')" >
          <template slot-scope="scope" >
            <el-button @click="read(scope.row)">{{$t('button.jump_note')}}</el-button>
@@ -55,12 +55,12 @@
         rules:{
           note_title:[{
             required: true,
-            message: this.$t('input_please', { keyword: this.$t('read.form.note_title') }),
+            message: this.$t('input_please', { keyword: this.$t('note.table.note_title') }),
             trigger: 'blur'
           }],
           note_content:[{
             required: true,
-            message: this.$t('input_please', { keyword: this.$t('read.form.note_content') }),
+            message: this.$t('input_please', { keyword: this.$t('note.table.note_content') }),
             trigger: 'blur'
           }]
         },
diff --git a/pages/index/read.vue b/pages/index/read.vue
index 979ac44..952d26b 100644
--- a/pages/index/read.vue
+++ b/pages/index/read.vue
@@ -10,13 +10,13 @@
             <el-form-item :label="$t('note.table.original_text')">
               <el-input autosize type="textarea" v-model="note_form.original_text" disabled></el-input>
             </el-form-item>
-            <el-form-item :label="$t('read.form.note_title')" prop="note_title">
+            <el-form-item :label="$t('note.table.note_title')" prop="note_title">
               <el-input v-model="note_form.note_title"
-                        :placeholder="$t('input_please', { keyword: this.$t('read.form.note_title') })"></el-input>
+                        :placeholder="$t('input_please', { keyword: this.$t('note.table.note_title') })"></el-input>
             </el-form-item>
-            <el-form-item :label="$t('read.form.note_content')" prop="note_content">
+            <el-form-item :label="$t('note.table.note_content')" prop="note_content">
               <el-input autosize type="textarea" v-model="note_form.note_content"
-                        :placeholder="$t('input_please', { keyword: this.$t('read.form.note_content') })"></el-input>
+                        :placeholder="$t('input_please', { keyword: this.$t('note.table.note_content') })"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button @click="addNote">{{$t('button.add')}}</el-button>
@@ -31,7 +31,7 @@
       </v-contextmenu-item>
     </v-contextmenu>
     <el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab">
-      <el-tab-pane  :name="key" v-for="(item,key) in openList" :key="key">
+      <el-tab-pane :name="key" v-for="(item,key) in openList" :key="key">
         <span slot="label">
           {{item.title}}
           <el-tooltip :content="item.hasCollect?$t('read.tip.cancel_collect'):$t('read.tip.collect')">
@@ -68,36 +68,38 @@
           <el-col :span="5" class="note-list ml3">
             <template v-if="noteList.length>0">
               <el-row v-for="(item,index) in noteList" :key="index" class="mb2">
-                  <el-card :class="{'active_card':item.isActive}">
-                    <div slot="header" class="clearfix">
-                      <el-row type="flex" justify="space-around">
-                        <span>{{item.title}}</span>
-                        <el-button-group>
-                          <el-button size="mini" type="primary" @click="edit(item)" icon="el-icon-edit"></el-button>
-                          <el-popconfirm
-                            @onConfirm="del(item,index)"
-                            :title="$t('read.tip.del_confirm')"
-                          >
-                            <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete"></el-button>
-                          </el-popconfirm>
-                        </el-button-group>
-                      </el-row>
-                    </div>
-                    <div class="text item" @click="jump(item)" @mouseover="highlighting(item)"
-                         @mouseout="reset(item)">
-                      <transition v-if="item.isEdit" @after-leave="save(item)">
-                        <el-tooltip class="item" effect="dark" :content="$t('read.tip.auto_save')"
-                                    v-model="item.isEdit">
-                          <el-input autosize type="textarea" v-model="item.content"></el-input>
-                        </el-tooltip>
-                      </transition>
-                      <template v-else>
-                        <el-tooltip :content="$t('read.tip.click_note_list')" :disabled="item.isEdit">
-                          <pre style="background-color: white">{{item.content}}</pre>
-                        </el-tooltip>
-                      </template>
-                    </div>
-                  </el-card>
+                <el-card :class="{'active_card':item.isActive}">
+                  <div slot="header" class="clearfix">
+                    <el-row type="flex" justify="space-around">
+                      <span>{{item.title}}</span>
+                      <el-button-group>
+                        <el-button size="mini" type="primary" @click="edit(item)" icon="el-icon-edit"></el-button>
+                        <el-popconfirm
+                          @onConfirm="del(item,index)"
+                          :title="$t('read.tip.del_confirm')"
+                        >
+                          <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete"></el-button>
+                        </el-popconfirm>
+                        <el-button size="mini" type="success" @click="download(item)"
+                                   icon="el-icon-download"></el-button>
+                      </el-button-group>
+                    </el-row>
+                  </div>
+                  <div class="text item" @click="jump(item)" @mouseover="highlighting(item)"
+                       @mouseout="reset(item)">
+                    <transition v-if="item.isEdit" @after-leave="save(item)">
+                      <el-tooltip class="item" effect="dark" :content="$t('read.tip.auto_save')"
+                                  v-model="item.isEdit">
+                        <el-input autosize type="textarea" v-model="item.content"></el-input>
+                      </el-tooltip>
+                    </transition>
+                    <template v-else>
+                      <el-tooltip :content="$t('read.tip.click_note_list')" :disabled="item.isEdit">
+                        <pre style="background-color: white">{{item.content}}</pre>
+                      </el-tooltip>
+                    </template>
+                  </div>
+                </el-card>
                 <el-alert v-if="item.message"
                           @close="item.message=null;item.type=null"
                           :title="item.message"
@@ -165,12 +167,12 @@
         rules: {
           note_title: [{
             required: true,
-            message: this.$t('input_please', { keyword: this.$t('read.form.note_title') }),
+            message: this.$t('input_please', { keyword: this.$t('note.table.note_title') }),
             trigger: 'blur'
           }],
           note_content: [{
             required: true,
-            message: this.$t('input_please', { keyword: this.$t('read.form.note_content') }),
+            message: this.$t('input_please', { keyword: this.$t('note.table.note_content') }),
             trigger: 'blur'
           }]
         },
@@ -232,31 +234,53 @@
     },
 
     methods: {
+      //导出笔记
+      download(item) {
+
+        console.info(item)
+        let ele = document.createElement('a')
+        //设置下载文件名
+        ele.download = `${this.$t('note.table.note_title')}.txt`
+        //隐藏元素
+        ele.style.display = 'none'
+        //字符内容转变成blob地址
+        let blob = new Blob([`${this.$t('note.table.note_title')}：${item.title}
+${this.$t('note.table.paper_name')}：《${this.activeContent.title}》
+${this.$t('note.table.original_text')}：${item.originalText}
+${this.$t('note.table.note_content')}：${item.content}`])
+        //如果是链接，这里也可以直接设置链接地址
+        ele.href = URL.createObjectURL(blob)
+        document.body.appendChild(ele)
+        //模拟点击
+        ele.click()
+        //移除元素
+        document.body.removeChild(ele)
+      },
       //收藏
-      star(e,item){
+      star(e, item) {
         e.stopPropagation()
-        let that=this
-        this.GLOBAL.fetchJSON(`/v1/api/collect/${item.id}`,'POST',{},function(res) {
-          if(res.code==='200'){
-            that.$store.commit('read/updateCollect',item.title)
+        let that = this
+        this.GLOBAL.fetchJSON(`/v1/api/collect/${item.id}`, 'POST', {}, function(res) {
+          if (res.code === '200') {
+            that.$store.commit('read/updateCollect', item.title)
             that.$message.info(that.$t(res.msg))
-          }else{
+          } else {
             that.$message.error(that.$t(res.msg))
           }
         })
       },
       //查找评价记录
-      queryRating(){
-        let that=this
-        this.GLOBAL.fetchGet('/v1/api/paper/findRating', { paperId:this.activeContent.id },function(res) {
-          if(res.code==='200'){
-            if(res.data===null){
-              that.stars=[{ value: 0 }, { value: 0 }, { value: 0 }]
-            }else{
-              that.stars=[{ value: res.data.score1 }, { value: res.data.score2 }, { value: res.data.score3 }]
+      queryRating() {
+        let that = this
+        this.GLOBAL.fetchGet('/v1/api/paper/findRating', { paperId: this.activeContent.id }, function(res) {
+          if (res.code === '200') {
+            if (res.data === null) {
+              that.stars = [{ value: 0 }, { value: 0 }, { value: 0 }]
+            } else {
+              that.stars = [{ value: res.data.score1 }, { value: res.data.score2 }, { value: res.data.score3 }]
             }
-            that.show_star_button=res.data===null
-          }else{
+            that.show_star_button = res.data === null
+          } else {
             that.$message.error(that.$t('error_500').toString())
           }
         })
@@ -387,25 +411,25 @@
       },
       //保存笔记
       save(item: any) {
-        let that=this
-        this.GLOBAL.fetchJSON('/v1/api/notes/update','PUT',{
-          noteId:item.id,
-          noteContent:item.content
-        },function(res) {
-            if(res.code==='200'){
-              that.$set(item, 'type', 'success')
-              that.$set(item, 'message', that.$t('read.tip.update_note_ok'))
-            }else {
-              that.$set(item, 'type', 'error')
-              that.$set(item, 'message', that.$t('read.tip.update_note_fail'))
-            }
+        let that = this
+        this.GLOBAL.fetchJSON('/v1/api/notes/update', 'PUT', {
+          noteId: item.id,
+          noteContent: item.content
+        }, function(res) {
+          if (res.code === '200') {
+            that.$set(item, 'type', 'success')
+            that.$set(item, 'message', that.$t('read.tip.update_note_ok'))
+          } else {
+            that.$set(item, 'type', 'error')
+            that.$set(item, 'message', that.$t('read.tip.update_note_fail'))
+          }
         })
       },
       //删除笔记
       del(item: any, index: number) {
-        let that=this
-        let span=document.getElementById(item.id)
-        if(span) {
+        let that = this
+        let span = document.getElementById(item.id)
+        if (span) {
           let text = document.createTextNode(span.innerText)
           span.replaceWith(text)
           that.pre.normalize()
@@ -416,12 +440,12 @@
           }, function(res) {
             if (res.code === '200') {
               that.noteList.splice(index, 1)
-              that.$store.commit('read/updateContent',that.pre.innerHTML)
+              that.$store.commit('read/updateContent', that.pre.innerHTML)
             } else {
               that.$message.error(that.$t('error_500').toString())
             }
           })
-        }else{
+        } else {
           that.$message.error(that.$t('error_500').toString())
         }
 
@@ -429,17 +453,17 @@
       //提交评分
       submitRating() {
         console.info(this.stars)
-        let that=this
-        this.GLOBAL.fetchJSON('/v1/api/paper/rating','POST',{
-          paperId:this.activeContent.id,
-          score1:this.stars[0].value,
-          score2:this.stars[1].value,
-          score3:this.stars[2].value,
-        },function(res) {
-          if(res.code==='200'){
+        let that = this
+        this.GLOBAL.fetchJSON('/v1/api/paper/rating', 'POST', {
+          paperId: this.activeContent.id,
+          score1: this.stars[0].value,
+          score2: this.stars[1].value,
+          score3: this.stars[2].value
+        }, function(res) {
+          if (res.code === '200') {
             that.queryRating()
             that.$message.info(that.$t('read.tip.rating_ok').toString())
-          }else{
+          } else {
             that.$message.error(that.$t('error_500').toString())
           }
         })
@@ -459,12 +483,12 @@
       },
       //跳转到笔记位置
       jump(item: any) {
-        this.noteList.forEach(i=>{
-          if(i.id!==item.id){
-            this.$set(i,'isActive',false)
+        this.noteList.forEach(i => {
+          if (i.id !== item.id) {
+            this.$set(i, 'isActive', false)
           }
         })
-        this.$set(item,'isActive',true)
+        this.$set(item, 'isActive', true)
         let ele = document.getElementById(item.id)
         if (ele) {
           ele.scrollIntoView({
@@ -512,33 +536,33 @@
               that.replace.replaceVal[index - 1].after(that.replace.replaceVal[index])
             }
 
-            that.GLOBAL.fetchJSON('/v1/api/notes/add','POST',{
+            that.GLOBAL.fetchJSON('/v1/api/notes/add', 'POST', {
               noteId: this.note_form.note_id,
               noteTitle: this.note_form.note_title,
               noteContent: this.note_form.note_content,
               paperId: that.activeContent.id,
               fileId: that.activeContent.fileId,
-              originalText:that.note_form.original_text,
+              originalText: that.note_form.original_text,
               content: that.pre.innerHTML
-            },function(res) {
-                if(res.code==='200'){
-                  that.$message.info({
-                    message: that.$t('read.tip.add_tip_ok').toString(),
-                    showClose: true,
-                    duration: 1000,
-                    onClose:function() {
-                      that.$store.commit('read/updateContent',that.pre.innerHTML)
-                      that.noteList.unshift({
-                        id: that.note_form.note_id,
-                        title: that.note_form.note_title,
-                        content: that.note_form.note_content
-                      })
-                      that.resetNote()
-                    }
-                  })
-                }else{
-                  that.$message.error(that.$t('error_500').toString())
-                }
+            }, function(res) {
+              if (res.code === '200') {
+                that.$message.info({
+                  message: that.$t('read.tip.add_tip_ok').toString(),
+                  showClose: true,
+                  duration: 1000,
+                  onClose: function() {
+                    that.$store.commit('read/updateContent', that.pre.innerHTML)
+                    that.noteList.unshift({
+                      id: that.note_form.note_id,
+                      title: that.note_form.note_title,
+                      content: that.note_form.note_content
+                    })
+                    that.resetNote()
+                  }
+                })
+              } else {
+                that.$message.error(that.$t('error_500').toString())
+              }
             })
           } else {
             that.$message.error(that.$t('read.tip.add_tip_fail').toString())
@@ -590,42 +614,43 @@
         }
       },
       //查找笔记
-      findNote(){
-        let that=this
-        this.GLOBAL.fetchGet(`/v1/api/notes/list/${this.activeContent.id}`,{},function(res) {
-            if(res.code==='200'){
-              that.noteList=[]
-
-              res.data.data.forEach(item=>{
-                let obj={
-                  id: item.noteId,
-                  title: item.noteTitle,
-                  content: item.noteContent,
-                  isActive:item.noteId===that.$route.query.noteId
-                }
-                that.noteList.push(obj)
-                if(item.noteId===that.$route.query.noteId){
-                  that.jump(obj)
-                  that.$nextTick(() => {
-                    let ele = document.querySelector('div[class$=active_card]')
-                    if (ele) {
-                      ele.scrollIntoView({
-                        block: 'center'
-                      })
-                    }
-                  })
-                }
-              })
-            }else{
-              that.$message.error(that.$t('error_500').toString())
-            }
+      findNote() {
+        let that = this
+        this.GLOBAL.fetchGet(`/v1/api/notes/list/${this.activeContent.id}`, {}, function(res) {
+          if (res.code === '200') {
+            that.noteList = []
+
+            res.data.data.forEach(item => {
+              let obj = {
+                id: item.noteId,
+                title: item.noteTitle,
+                content: item.noteContent,
+                isActive: item.noteId === that.$route.query.noteId,
+                originalText: item.originalText
+              }
+              that.noteList.push(obj)
+              if (item.noteId === that.$route.query.noteId) {
+                that.jump(obj)
+                that.$nextTick(() => {
+                  let ele = document.querySelector('div[class$=active_card]')
+                  if (ele) {
+                    ele.scrollIntoView({
+                      block: 'center'
+                    })
+                  }
+                })
+              }
+            })
+          } else {
+            that.$message.error(that.$t('error_500').toString())
+          }
         })
       }
     },
     mounted() {
       let that = this
       this.$nextTick(() => {
-        if(this.activeContent) {
+        if (this.activeContent) {
           that.queryRating()
           that.findNote()
         }
@@ -643,7 +668,7 @@
         } else if ('ESCAPE' === event.key.toUpperCase()) {
           that.showSearch = false
         }
-        if(that.activeContent) {
+        if (that.activeContent) {
           that.updateFind(that.showSearch)
         }
       }, true)
@@ -657,7 +682,7 @@
     font-size: larger;
   }
 
-  .active_card{
+  .active_card {
     border: 1px solid black;
   }