From 25a315ab37d34335e82f22c9c25f1aad8bd18c19 Mon Sep 17 00:00:00 2001
From: "mail_yanpeng@163.com" <yyyq94581017>
Date: Wed, 1 Jul 2020 17:56:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 views/note.html | 200 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 131 insertions(+), 69 deletions(-)

diff --git a/views/note.html b/views/note.html
index 8cdf821..ac6b132 100644
--- a/views/note.html
+++ b/views/note.html
@@ -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>
\ No newline at end of file