You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
10 KiB
340 lines
10 KiB
<template>
|
|
<div>
|
|
<v-contextmenu ref="contextmenu" :disabled="disabled">
|
|
<v-contextmenu-item>
|
|
<el-popover
|
|
v-model="visible"
|
|
trigger="click"
|
|
>
|
|
<el-form ref="form" :model="note_form" :rules="rules" label-width="80px">
|
|
<el-form-item :label="$t('read.tip.form.note_title')" prop="note_title">
|
|
<el-input v-model="note_form.note_title" :placeholder="$t('input_please', { keyword: this.$t('read.tip.form.note_title') })"></el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('read.tip.form.note_content')" prop="note_content">
|
|
<el-input type="textarea" v-model="note_form.note_content" :placeholder="$t('input_please', { keyword: this.$t('read.tip.form.note_content') })"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="addNote">{{$t('button.add')}}</el-button>
|
|
<el-button @click="visible=false">{{$t('button.cancel')}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button slot="reference">{{$t('read.contextmenu.add')}}</el-button>
|
|
</el-popover>
|
|
</v-contextmenu-item>
|
|
</v-contextmenu>
|
|
<el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab">
|
|
<el-tab-pane :label="key" :name="key" v-for="(item,key) in openList" :key="key">
|
|
<el-row>
|
|
<el-col :span="18">
|
|
<div class="content" v-contextmenu:contextmenu :ref="'edit'+item.title" @mouseup="show"
|
|
@contextmenu="selectText" v-html="item.content"/>
|
|
</el-col>
|
|
<el-col :span="5" class="ml3 note-list">
|
|
<el-row v-for="(item,index) in noteList" :key="index" class="mb2">
|
|
<el-card>
|
|
<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 type="textarea" v-model="item.content"></el-input>
|
|
</el-tooltip>
|
|
</transition>
|
|
<template v-else>{{item.content}}</template>
|
|
</div>
|
|
</el-card>
|
|
<el-alert v-if="item.message"
|
|
@close="item.message=null;item.type=null"
|
|
:title="item.message"
|
|
:type="item.type">
|
|
</el-alert>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-col :span="21">
|
|
<el-row class="mt2">
|
|
<el-col :span="7" v-for="(item,index) in stars" :key="index">
|
|
<h3 class="center">{{$t('read.tip.rating_'+(index+1))}}</h3>
|
|
<el-rate
|
|
class="center star-icon"
|
|
v-model="item.value"
|
|
show-score
|
|
score-template="{value}分"
|
|
:disabled="item.value>0">
|
|
</el-rate>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="mt2" type="flex" justify="center">
|
|
<el-col :span="3">
|
|
<el-button class="star-button" v-if="show_star_button" @click="submitRating">{{$t('button.rating')}}
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import Vue from 'vue'
|
|
|
|
export default Vue.extend({
|
|
name: 'read',
|
|
data() {
|
|
return {
|
|
//显示笔记表单
|
|
visible: false,
|
|
//笔记表单
|
|
note_form:{
|
|
note_title:'',
|
|
note_content:''
|
|
},
|
|
rules:{
|
|
note_title:[{
|
|
required: true,
|
|
message: this.$t('input_please', { keyword: this.$t('read.tip.form.note_title') }),
|
|
trigger: 'blur'
|
|
}],
|
|
note_content:[{
|
|
required: true,
|
|
message: this.$t('input_please', { keyword: this.$t('read.tip.form.note_content') }),
|
|
trigger: 'blur'
|
|
}]
|
|
},
|
|
//活动的论文标签
|
|
activeName: '',
|
|
//笔记列表
|
|
noteList: [],
|
|
//禁用右键菜单标志位
|
|
disabled: true,
|
|
//替换目标
|
|
replace: [],
|
|
stars: [{ value: 0 }, { value: 0 }, { value: 0 }],
|
|
show_star_button: true
|
|
}
|
|
},
|
|
computed: {
|
|
//打开的论文标签
|
|
openList() {
|
|
return this.$store.state.read.read
|
|
}
|
|
},
|
|
watch: {
|
|
//激活的论文标签
|
|
activeName(newVal) {
|
|
this.$store.commit('read/choose', newVal)
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
//编辑笔记
|
|
edit(item: any) {
|
|
if ('isEdit' in item) {
|
|
item.isEdit = !item.isEdit
|
|
} else {
|
|
this.$set(item, 'isEdit', true)
|
|
}
|
|
},
|
|
//保存笔记
|
|
save(item: any) {
|
|
this.$set(item, 'type', 'success')
|
|
this.$set(item, 'message', '保存成功')
|
|
},
|
|
//删除笔记
|
|
del(item: any,index:number) {
|
|
this.$set(item, 'type', 'success')
|
|
this.$set(item, 'message', '删除成功')
|
|
this.noteList.splice(index,1)
|
|
},
|
|
//提交评分
|
|
submitRating() {
|
|
console.info(this.stars)
|
|
},
|
|
//高亮笔记
|
|
highlighting(item: any) {
|
|
let ele = document.getElementById(item.id)
|
|
if (ele && this.GLOBAL.visible_in_container(this.$refs['edit' + this.activeName][0], ele)) {
|
|
ele.classList.add('heightlight')
|
|
}
|
|
},
|
|
reset(item: any) {
|
|
let ele = document.getElementById(item.id)
|
|
if (ele) {
|
|
ele.classList.remove('heightlight')
|
|
}
|
|
},
|
|
//跳转到笔记位置
|
|
jump(item: any) {
|
|
let ele = document.getElementById(item.id)
|
|
if (ele) {
|
|
ele.scrollIntoView({
|
|
block: 'center'
|
|
})
|
|
}
|
|
},
|
|
//是否显示右键菜单
|
|
show() {
|
|
let s = getSelection()
|
|
if (s) {
|
|
this.disabled = s.isCollapsed
|
|
} else {
|
|
this.disabled = true
|
|
}
|
|
},
|
|
//关闭标签
|
|
removeTab(name: string) {
|
|
this.$store.commit('read/close', name)
|
|
if (Object.keys(this.openList).length === 0) {
|
|
this.$router.push(this.localePath('/document'))
|
|
this.$store.commit('menus/none')
|
|
}
|
|
this.activeName = this.$store.state.read.activeName
|
|
},
|
|
//添加笔记
|
|
addNote() {
|
|
this.$refs.form.validate((valid: boolean)=>{
|
|
if (valid) {
|
|
for (let index in this.replace) {
|
|
if (this.replace[index].val && this.replace[index].replaceVal) {
|
|
this.replace[index].val.replaceWith(this.replace[index].replaceVal)
|
|
}
|
|
}
|
|
this.noteList.unshift({
|
|
id: `fuck${(Math.random()*10).toFixed()}`,
|
|
title: this.note_form.note_title,
|
|
content: this.note_form.note_content
|
|
})
|
|
this.replace = []
|
|
this.visible=false
|
|
this.note_form.note_title=''
|
|
this.note_form.note_content=''
|
|
} else {
|
|
return false;
|
|
}
|
|
})
|
|
|
|
},
|
|
//显示选中文本
|
|
selectText() {
|
|
let selection = getSelection()
|
|
console.info(selection)
|
|
if (selection && !this.disabled) {
|
|
let range = selection.getRangeAt(0)
|
|
console.info(range)
|
|
if (range.startContainer === range.endContainer) {
|
|
let tip = '不跨节点'
|
|
let anchorNode = range.startContainer
|
|
let bold = document.createElement('span')
|
|
bold.classList.add('bold')
|
|
if (range.endOffset - range.startOffset === anchorNode.length) {
|
|
console.info(tip + '全选')
|
|
bold.innerText = anchorNode.wholeText
|
|
this.replace.push({
|
|
val: anchorNode,
|
|
replaceVal: bold
|
|
})
|
|
|
|
} else {
|
|
console.info(tip + '选中一部分')
|
|
let start = document.createTextNode(anchorNode.substringData(0, range.startOffset))
|
|
let end = document.createTextNode(anchorNode.substringData(range.endOffset, anchorNode.length))
|
|
let span = document.createElement('span')
|
|
bold.innerText = anchorNode.substringData(range.startOffset, range.endOffset - range.startOffset)
|
|
span.append(start, bold, end)
|
|
this.replace.push({
|
|
val: anchorNode,
|
|
replaceVal: span
|
|
})
|
|
}
|
|
} else {
|
|
let tip = '跨节点'
|
|
let startNode = range.startContainer
|
|
let endNode = range.endContainer
|
|
console.info()
|
|
}
|
|
} else {
|
|
this.$message.error({
|
|
message: this.$t('read.tip.contextmenu_err').toString(),
|
|
showClose: true,
|
|
duration: 1000
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.activeName = this.$store.state.read.activeName
|
|
for (let n = 0; n < 10; n++) {
|
|
this.noteList.push({
|
|
id: `fuck${n}`,
|
|
title: `笔记${n}`,
|
|
content: `内容${n}`
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
.heightlight {
|
|
color: #74f2ff;
|
|
font-size: larger;
|
|
}
|
|
|
|
.choose-note {
|
|
cursor: pointer;
|
|
}
|
|
|
|
pre {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.content {
|
|
height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.note-list {
|
|
height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.clearfix::before,
|
|
.clearfix::after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.clearfix::after {
|
|
clear: both
|
|
}
|
|
|
|
.star-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.star-icon i {
|
|
font-size: 30px;
|
|
}
|
|
</style>
|
|
|