笔记列表后台对接

master
pan 4 years ago
parent 6928ef4fef
commit 85b0ebf6fe
  1. 2
      nuxt.config.js
  2. 73
      pages/index/note.vue
  3. 34
      pages/index/read.vue

@ -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": "",

@ -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" prop="original_text" :label="$t('note.table.original_text')" />
<el-table-column align="center" prop="note_name" :label="$t('read.form.note_title')" />
<el-table-column align="center" prop="note_content" :label="$t('read.form.note_content')" />
<el-table-column align="center" :label="$t('note.table.paper_name')">
<template slot-scope="scope" >
{{scope.row.paper.title}}
</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 type="danger" @click="del">{{$t('button.del')}}</el-button>
<el-button @click="read(scope.row)">{{$t('button.jump_note')}}</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:[{
note_name:'笔记',
original_text:'注释原文',
note_content:'笔记内容',
paper_name: '《论文》'
}],
tableData:[],
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(),{
confirmButtonText:this.$t('button.ok').toString(),
cancelButtonText:this.$t('button.cancel').toString()
//
findNote(){
let that=this
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>

@ -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;
}

Loading…
Cancel
Save