|
|
|
@ -13,6 +13,7 @@ |
|
|
|
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> |
|
|
|
<link rel="stylesheet" href="/static/editor/css/index.css"> |
|
|
|
<script src="/static/editor/mavon-editor.js"></script> |
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> |
|
|
|
<style> |
|
|
|
html, body { |
|
|
|
height: 100%; |
|
|
|
@ -65,30 +66,45 @@ |
|
|
|
<Modal |
|
|
|
v-model="modal1" |
|
|
|
title="笔记信息" |
|
|
|
:mask-closable="false" |
|
|
|
@on-ok="okHandler" |
|
|
|
@on-cancel="cancelHandler"> |
|
|
|
<i-form :label-width="100"> |
|
|
|
<form-item label="文件夹名称"> |
|
|
|
<i-select v-model="currentNote.pid"> |
|
|
|
<i-select v-model="currentNote.Pid"> |
|
|
|
<i-option v-for="item in noteCols" :value="item.id" :key="item.id">${ item.title }</i-option> |
|
|
|
</i-select> |
|
|
|
</form-item> |
|
|
|
<form-item label="笔记名称"> |
|
|
|
<i-input type="text" v-model="currentNote.title" placeholder="请输入笔记名称"/> |
|
|
|
<i-input type="text" v-model="currentNote.Title" placeholder="请输入笔记名称"/> |
|
|
|
</form-item> |
|
|
|
</i-form> |
|
|
|
</Modal> |
|
|
|
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="meval" @save="saveHandler"></mavon-editor> |
|
|
|
<Modal |
|
|
|
v-model="modal2" |
|
|
|
title="新增文件夹" |
|
|
|
:mask-closable="false" |
|
|
|
@on-ok="okColHandler"> |
|
|
|
<i-form :label-width="100"> |
|
|
|
<form-item label="文件夹名称"> |
|
|
|
<i-input type="text" v-model="colTitle" placeholder="请输入文件夹名称"/> |
|
|
|
</form-item> |
|
|
|
</i-form> |
|
|
|
</Modal> |
|
|
|
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="meval" @imgAdd="$imgAdd" @save="saveHandler" |
|
|
|
@change="changeHandler" ref=md></mavon-editor> |
|
|
|
<Drawer title="目录选择" placement="left" :closable="false" v-model="drawer" width="400"> |
|
|
|
<i-button type="primary" ghost long>添加文件夹</i-button> |
|
|
|
<i-button type="success" ghost long style="margin-top: 5px">添加笔记</i-button> |
|
|
|
<i-button type="primary" ghost long @click="newNoteColHandler">新建文件夹</i-button> |
|
|
|
<i-button type="success" ghost long style="margin-top: 5px" @click="newNoteHandler">新建笔记</i-button> |
|
|
|
<i-menu theme="light" accordion="true" width="380" @on-select="noteSelectHandler"> |
|
|
|
<Submenu :name="item.Id" v-for="(item,key) in notes" :key="key"> |
|
|
|
<template slot="title"> |
|
|
|
<i class="ivu-icon ivu-icon-ios-paper"></i> |
|
|
|
${item.Title} |
|
|
|
</template> |
|
|
|
<menu-item :name="note.Id" v-for="(note,nkey) in item.Notes" :key="nkey">${note.Title}</menu-item> |
|
|
|
<menu-item :name="note.Id" v-for="(note,nkey) in item.Notes" :key="nkey">${note.Title} |
|
|
|
<Icon type="md-trash" style="float: right" @click="delHandler(note.Id)"/> |
|
|
|
</menu-item> |
|
|
|
</Submenu> |
|
|
|
</i-menu> |
|
|
|
</Drawer> |
|
|
|
@ -103,8 +119,10 @@ |
|
|
|
'mavon-editor': MavonEditor.mavonEditor |
|
|
|
}, |
|
|
|
data: { |
|
|
|
modal2: false, |
|
|
|
modal1: false, |
|
|
|
drawer: false, |
|
|
|
colTitle: '', |
|
|
|
externalLink: { |
|
|
|
// markdown_css: function() { |
|
|
|
// // 这是你的markdown css文件路径 |
|
|
|
@ -161,26 +179,122 @@ |
|
|
|
noteCols: [] |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted: function () { |
|
|
|
var _this = this |
|
|
|
$.get("/api/note", function (data, status) { |
|
|
|
_this.notes = data |
|
|
|
data.forEach((el) => { |
|
|
|
_this.noteCols.push({title: el.Title, id: el.Id}) |
|
|
|
}) |
|
|
|
var noteCahche = window.localStorage.getItem("note") |
|
|
|
if (noteCahche) { |
|
|
|
this.currentNote = JSON.parse(noteCahche) |
|
|
|
this.meval = this.currentNote.NoteVal |
|
|
|
} |
|
|
|
this.getData() |
|
|
|
// $vm.$emit('imgAdd', pos, $file); |
|
|
|
this.$refs.md.$on("imgAdd",(pos, $file)=>{ |
|
|
|
_this.$imgAdd(pos, $file) |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
$imgAdd(pos, $file){ |
|
|
|
debugger |
|
|
|
var _this = this |
|
|
|
// 第一步.将图片上传到服务器. |
|
|
|
var formdata = new FormData(); |
|
|
|
formdata.append('image', $file); |
|
|
|
axios({ |
|
|
|
url: '/file/upload', |
|
|
|
method: 'post', |
|
|
|
data: formdata, |
|
|
|
headers: { 'Content-Type': 'multipart/form-data' }, |
|
|
|
}).then((resp) => { |
|
|
|
_this.$refs.md.$img2Url(pos, resp.data.Data); |
|
|
|
}) |
|
|
|
}, |
|
|
|
delHandler (id){ |
|
|
|
var _this = this |
|
|
|
if(!id){ |
|
|
|
return |
|
|
|
} |
|
|
|
$.post('/api/note/del/' + id, |
|
|
|
function (data) { |
|
|
|
if (data.Status == 0) { |
|
|
|
this.currentNote = {} |
|
|
|
this.meval = '' |
|
|
|
_this.getData() |
|
|
|
_this.$Notice.success({ |
|
|
|
title: '删除成功', |
|
|
|
desc: '' |
|
|
|
}) |
|
|
|
} else if (data.Status == 401) { |
|
|
|
window.location.href = "/login" |
|
|
|
} else if (data.Status == 403) { |
|
|
|
this.$Notice.warning({ |
|
|
|
title: '暂无权限', |
|
|
|
desc: '' |
|
|
|
}) |
|
|
|
} else { |
|
|
|
_this.$Notice.error({ |
|
|
|
title: '删除失败', |
|
|
|
desc: '' |
|
|
|
}) |
|
|
|
} |
|
|
|
}, 'json') |
|
|
|
}, |
|
|
|
newNoteColHandler(){ |
|
|
|
this.modal2 = true |
|
|
|
}, |
|
|
|
getData(){ |
|
|
|
var _this = this |
|
|
|
$.get("/api/note", function (data, status) { |
|
|
|
_this.notes = data |
|
|
|
data.forEach((el) => { |
|
|
|
_this.noteCols.push({title: el.Title, id: el.Id}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
okColHandler() { |
|
|
|
var _this = this |
|
|
|
if(!this.colTitle){ |
|
|
|
return |
|
|
|
} |
|
|
|
$.post('/api/notecoll/save', { |
|
|
|
title: this.colTitle |
|
|
|
}, |
|
|
|
function (data) { |
|
|
|
if (data.Status == 500) { |
|
|
|
_this.$Notice.error({ |
|
|
|
title: '保存失败', |
|
|
|
desc: '' |
|
|
|
}) |
|
|
|
} else if (data.Status == 401) { |
|
|
|
window.location.href = "/login" |
|
|
|
} else { |
|
|
|
_this.getData() |
|
|
|
_this.$Notice.success({ |
|
|
|
title: '保存成功', |
|
|
|
desc: '' |
|
|
|
}) |
|
|
|
} |
|
|
|
}, 'json') |
|
|
|
}, |
|
|
|
changeHandler: function (value, render) { |
|
|
|
this.currentNote.NoteVal = value |
|
|
|
this.currentNote.NoteHtml = render |
|
|
|
var jsonStr = JSON.stringify(this.currentNote); |
|
|
|
window.localStorage.setItem("note", jsonStr) |
|
|
|
}, |
|
|
|
newNoteHandler() { |
|
|
|
this.currentNote = {} |
|
|
|
this.meval = '' |
|
|
|
}, |
|
|
|
okHandler() { |
|
|
|
var _this = this |
|
|
|
if (!this.currentNote.pid) { |
|
|
|
if (!this.currentNote.Pid) { |
|
|
|
this.$Notice.warning({ |
|
|
|
title: '请选择文件夹后重新保存', |
|
|
|
desc: '' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
if (!this.currentNote.title) { |
|
|
|
if (!this.currentNote.Title) { |
|
|
|
this.$Notice.warning({ |
|
|
|
title: '请输入笔记名称后重新保存', |
|
|
|
desc: '' |
|
|
|
@ -188,9 +302,9 @@ |
|
|
|
return |
|
|
|
} |
|
|
|
$.post('/api/note/save/', { |
|
|
|
pid: this.currentNote.pid, |
|
|
|
title: this.currentNote.title, |
|
|
|
noteHtml: this.currentNote.NoteHtml |
|
|
|
pid: this.currentNote.Pid, |
|
|
|
title: this.currentNote.Title, |
|
|
|
noteHtml: this.currentNote.NoteHtml, |
|
|
|
noteVal: this.currentNote.NoteVal |
|
|
|
}, |
|
|
|
function (data) { |
|
|
|
@ -203,7 +317,6 @@ |
|
|
|
window.location.href = "/login" |
|
|
|
} else { |
|
|
|
_this.currentNote.Id = data.Id |
|
|
|
debugger |
|
|
|
_this.$Notice.success({ |
|
|
|
title: '保存成功', |
|
|
|
desc: '' |
|
|
|
@ -262,55 +375,4 @@ |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<script> |
|
|
|
// function keyDown(e) { |
|
|
|
// // e.preventDefault(); |
|
|
|
// var currKey = 0, e = e || event || window.event; |
|
|
|
// currKey = e.keyCode || e.which || e.charCode; |
|
|
|
// if (currKey == 83 && (e.ctrlKey || e.metaKey)) { |
|
|
|
// layer.msg("ctrl+s") |
|
|
|
// saveNote() |
|
|
|
// return false; |
|
|
|
// } |
|
|
|
// |
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
$(function () { |
|
|
|
|
|
|
|
$("#delNote").click(function () { |
|
|
|
if (!note || !note.Id) { |
|
|
|
layer.msg('请在右边菜单中选择笔记', function () { |
|
|
|
}); |
|
|
|
return |
|
|
|
} |
|
|
|
layer.confirm('删除确认', { |
|
|
|
btn: ['确认', '手滑了'] //按钮 |
|
|
|
}, function () { |
|
|
|
$.post('/api/note/del/' + note.Id, |
|
|
|
function (data) { |
|
|
|
if (data.Status == 0) { |
|
|
|
var subMenu = $(".sub-menu li a") |
|
|
|
$.each(subMenu, function (index, el) { |
|
|
|
if ($(el).attr("value") == note.Id) { |
|
|
|
$(el).remove() |
|
|
|
return |
|
|
|
} |
|
|
|
}) |
|
|
|
note = null |
|
|
|
layer.msg("删除成功", {icon: 6}); |
|
|
|
} else if (data.Status == 401) { |
|
|
|
window.location.href = "/login" |
|
|
|
} else if (data.Status == 403) { |
|
|
|
layer.msg("暂无权限", {icon: 5}); |
|
|
|
} else { |
|
|
|
layer.msg("服务器异常", {icon: 5}); |
|
|
|
} |
|
|
|
}, 'json') |
|
|
|
}, function () { |
|
|
|
|
|
|
|
}); |
|
|
|
}) |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</html> |
mail_yanpeng@163.com
vor 5 Jahren