<template>
<div class="notes" >
<div class="notebar">
<notebar @setCurNote="getcurNote"></notebar>
</div>
<div class="edit">
<div class="title" style="height: 50px;padding: 10px;padding-left: 16px">
<h2 style="float: left">{{curNote.title||""}}</h2>
<span style="float: right">已保存</span>
</div>
<mavon-editor
v-model="curNote.content"
@change = "updateNote"
>
</mavon-editor>
</div>
</div>
</template>
<script>
import Notes from '../apis/Notes'
import Notebook from '../apis/Notebooks'
import notebar from './Notebar'
import BUS from '../utils/bus'
import {mapMutations} from 'vuex'
export default {
components: {
notebar
},
data(){
return {
notes: [],
openModal: false,
deleteId: "",
notebooks: null,
curNote: {}
}
},
created(){
},
methods: {
getcurNote(note){
this.curNote = note
},
updateNote(val){
console.log(val)
},
onDelte(){
Notes.deleteNote({noteId:this.deleteId}).then(res=>{
this.notes = this.notes.filter(item=>item.id!==this.deleteId)
this.openModal = false
setTimeout(() => {
this.$Message.success('笔记删除成功')
}, 500);
})
},
},
beforeRouteUpdate(to,from,next){
if(!to.query.notebookId){
Notebook.getNotebooks().then(res=>{
let curNotebookId = res.data[0].id
Notes.getNotes({notebookId:this.router.replace({
path: '/notes',
query: {
notebookId: curNotebookId,
noteId: res.data[0].id
}
})
})
})
}
next()
}
}
</script>
<style lang="less" scoped>
.notes {
margin-top: -16px;
margin-left: -16px;
height: calc(~ '100vh - 60px');
.notebar {
width: 220px;
height: 100%;;
border-right: 2px solid #e8eaec;
}
.edit {
position: absolute;
// right: 0;
margin-left: 221px;
top: 0px;
padding-top: 60px;
width: 940px;
height: 800px;
.title {
background-color: #fff;
}
}
}
.noteSiderbar {
// padding-top: 16px;
width: 260px;
height: calc(~ '100vh - 60px');
// border-right: 1px solid #ccc;
}
.note-card {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.card {
width: 20%;
margin-right: 5%;
margin-bottom: 32px
}
}
</style>
