笔记列表后台对接

nuxt.config.js

@@ -112,6 +112,7 @@ export default {
             "catalog": "目录",
             "del": "删除",
             "edit": "编辑",
+            "jump_note": "定位笔记",
             "ok": "确定",
             "query": "查询",
             "rating": "提交评分",
@@ -276,6 +277,7 @@ export default {
             "catalog": "",
             "del": "",
             "edit": "",
+            "jump_note": "",
             "ok": "",
             "query": "",
             "rating": "",

pages/index/note.vue

@@ -10,20 +10,23 @@
              <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>
            <el-form-item class="center">
-             <el-button>{{$t('button.query')}}</el-button>
+             <el-button @click="findNote">{{$t('button.query')}}</el-button>
            </el-form-item>
          </el-form>
       </el-col>
     </el-row>
      <el-table :data="tableData" border>
-       <el-table-column align="center" prop="paper_name" :label="$t('note.table.paper_name')" />
+       <el-table-column align="center" :label="$t('note.table.paper_name')">
-       <el-table-column align="center" prop="original_text" :label="$t('note.table.original_text')" />
+         <template slot-scope="scope" >
-       <el-table-column align="center" prop="note_name" :label="$t('read.form.note_title')" />
+           《{{scope.row.paper.title}}》
-       <el-table-column align="center" prop="note_content" :label="$t('read.form.note_content')" />
+         </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" :label="$t('action')" >
          <template slot-scope="scope" >
-           <el-button>{{$t('button.edit')}}</el-button>
+           <el-button @click="read(scope.row)">{{$t('button.jump_note')}}</el-button>
-           <el-button type="danger" @click="del">{{$t('button.del')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -31,7 +34,7 @@
     <div class="block center mt1">
       <el-pagination
         layout="prev, pager, next"
-        :total="1000">
+        :total="total">
       </el-pagination>
     </div>
   </div>
@@ -44,14 +47,9 @@
     name: 'note',
     data(){
       return {
-        tableData:[{
+        tableData:[],
-            note_name:'笔记',
-            original_text:'注释原文',
-            note_content:'笔记内容',
-            paper_name: '《论文》'
-        }],
         form:{
-          note_name:'',
+          note_title:'',
           note_content:''
         },
         rules:{
@@ -65,16 +63,51 @@
             message: this.$t('input_please', { keyword: this.$t('read.form.note_content') }),
             trigger: 'blur'
           }]
-        }
+        },
+        total:1
       }
     },
     methods:{
-      del(){
+      //查找笔记
-        this.$confirm(this.$t('note.tip.confirm_del').toString(),this.$t('tip').toString(),{
+      findNote(){
-          confirmButtonText:this.$t('button.ok').toString(),
+        let that=this
-          cancelButtonText:this.$t('button.cancel').toString()
+        this.GLOBAL.fetchGet("/v1/api/notes/list",{
+          noteTitle:that.form.note_title,
+          noteContent:that.form.note_content
+        },function(res) {
+          if(res.code==='200'){
+            that.tableData=[]
+            that.tableData=res.data.data
+            that.total=res.data.total
+          }else{
+            that.$message.error(that.$t('error_500').toString())
+          }
+        })
+      },
+      //打开笔记
+      read(row){
+        let that=this
+        let item=row.paper
+        this.GLOBAL.fetchGet("/v1/api/file/find",{
+          paperId:item.id,
+        },function(res) {
+          if(res.code==='200'){
+            item.content=res.msg
+            that.$store.commit('menus/read')
+            that.$store.commit('read/open', item)
+            // that.$router.push({that.localePath('/read')})
+            that.$router.push({
+              path:that.localePath('/read'),
+              query:row
             })
+          }else{
+            that.$message.error(that.$t('error_500').toString())
           }
+        })
+      }
+    },
+    mounted() {
+      this.findNote()
     }
   })
 </script>

pages/index/read.vue

@@ -59,10 +59,10 @@
                  @contextmenu="selectText" @scroll="scrollContent" v-html="item.content"
             />
           </el-col>
-          <el-col :span="5" class="ml3 note-list">
+          <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>
+                  <el-card :class="{'active_card':item.isActive}">
                     <div slot="header" class="clearfix">
                       <el-row type="flex" justify="space-around">
                         <span>{{item.title}}</span>
@@ -440,6 +440,12 @@
       },
       //跳转到笔记位置
       jump(item: any) {
+        this.noteList.forEach(i=>{
+          if(i.id!==item.id){
+            this.$set(i,'isActive',false)
+          }
+        })
+        this.$set(item,'isActive',true)
         let ele = document.getElementById(item.id)
         if (ele) {
           ele.scrollIntoView({
@@ -570,12 +576,26 @@
         this.GLOBAL.fetchGet(`/v1/api/notes/list/${this.activeContent.id}`,{},function(res) {
             if(res.code==='200'){
               that.noteList=[]
+
               res.data.data.forEach(item=>{
-                that.noteList.push({
+                let obj={
                   id: item.noteId,
                   title: item.noteTitle,
-                  content: item.noteContent
+                  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())
@@ -604,7 +624,9 @@
         } else if ('ESCAPE' === event.key.toUpperCase()) {
           that.showSearch = false
         }
+        if(that.activeContent) {
           that.updateFind(that.showSearch)
+        }
       }, true)
     }
 
@@ -616,6 +638,10 @@
     font-size: larger;
   }
 
+  .active_card{
+    border: 1px solid black;
+  }
+
   .search-light {
     color: blue;
   }