|
|
|
|
@ -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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
pan
4 years ago