From 41146e7c6d8a3b3505d74f1d551c667b857b373f Mon Sep 17 00:00:00 2001
From: WangHao <43278047@qq.com>
Date: Thu, 8 Oct 2020 18:27:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E9=A1=B5=E5=92=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=20=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/controller/note/NmNoteController.java |   4 +-
 ruoyi-ui/src/api/note/note.js                 |  27 ++++-
 .../src/components/BookmarkList/index.vue     | 104 ++++++++++++++----
 .../src/views/bookmark/bookmark/index.vue     |  55 +++++++--
 ruoyi-ui/src/views/bookmark/index/index.vue   |   4 +-
 5 files changed, 159 insertions(+), 35 deletions(-)

diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/note/NmNoteController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/note/NmNoteController.java
index 8ee2b8c36..189f79359 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/note/NmNoteController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/note/NmNoteController.java
@@ -69,8 +69,8 @@ public class NmNoteController extends BaseController
      *用户 获取便签详细信息 然后修改
      */
 
-    @GetMapping(value = "/user/{noteId}")
-    public AjaxResult userGetInfo(@PathVariable("noteId") Long noteId)
+    @GetMapping(value = "/userGetNoteInfo/{noteId}")
+    public AjaxResult userGetNoteInfo(@PathVariable("noteId") Long noteId)
     {
         SysUser sysUser=getAuthUser();
         return AjaxResult.success(nmNoteService.selectNmNoteuserById(noteId,sysUser.getUserId()));
diff --git a/ruoyi-ui/src/api/note/note.js b/ruoyi-ui/src/api/note/note.js
index db5cd3b7d..7c4bd6110 100644
--- a/ruoyi-ui/src/api/note/note.js
+++ b/ruoyi-ui/src/api/note/note.js
@@ -1,5 +1,30 @@
 import request from '@/utils/request'
 
+// 查询便签管理列表
+export function selectBymenuNote(query) {
+  return request({
+    url: '/note/note/selectBymenuNote',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询便签管理详细
+export function userGetNoteInfo(noteId) {
+  return request({
+    url: '/note/note/userGetNoteInfo' + noteId,
+    method: 'get'
+  })
+}
+
+
+
+
+
+
+
+
+
 // 查询便签管理列表
 export function listNote(query) {
   return request({
@@ -50,4 +75,4 @@ export function exportNote(query) {
     method: 'get',
     params: query
   })
-}
\ No newline at end of file
+}
diff --git a/ruoyi-ui/src/components/BookmarkList/index.vue b/ruoyi-ui/src/components/BookmarkList/index.vue
index ea1a40f71..843567521 100644
--- a/ruoyi-ui/src/components/BookmarkList/index.vue
+++ b/ruoyi-ui/src/components/BookmarkList/index.vue
@@ -2,35 +2,75 @@
   <div>
 
 
-      <div v-for="bm in bookmarkList" class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
-        <div class="bookmark-item">
-              <span class="title-icon">
-                 <img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
-                      :src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
-                      onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='"
-                      alt="" ng-show="bm.urls"/>
-             </span>
-          <span class="bookmark-title">
-               {{bm.title}}
-             </span>
-
-          <span class="bookmark-time">2020-10-10</span>
+    <div v-for="bm in bookmarkList" class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
+      <div class="bookmark-item">
 
+        <span class="bookmark-title" >{{bm.title}}</span>
+        <div class="bookmark-time" v-if="noteTime">{{bm.createTime|changeTime}}</div>
+      </div>
+      <div class="bookmark-description" v-if="isdescription">
+        <span >{{bm.description}}</span>
+      </div>
+      <div class="info-wrap" v-if="isBookmarkIcon">
+        <div class="info">
+          <div class="bookmark-icon">
+            <img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
+                 :src="'https://favicon.lucq.fun/?url=http://'+bm.urls"
+                 onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='"
+                 alt="" ng-show="bm.urls">
+          </div>
+          <div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div>
+          <div class="bookmark-time">{{bm.createTime|changeTime}}</div>
+          <div class="bookmark-time" v-for="t in bm.sqTags" v-if="false">
+            <el-tag class="bookmark-list-tag" data-bookmarkId="t.bookmarkId" data-tagId="t.tagId"
+                    size="mini">
+              {{t.name}}
+            </el-tag>
+          </div>
         </div>
       </div>
 
+
+    </div>
+
   </div>
 </template>
 <script>
+  import {format} from 'timeago.js';
+
   export default {
-    components: {},
+    components: {format},
     props: {
       bookmarkList: Array,
     },
     data: function () {
       return {
+        isdescription:false,
+        noteTime:true,
+        isBookmarkIcon:false,
       }
     },
+    created() {
+      var a=2;
+      if(a==2){
+        //便签模式 只能这么显示
+      this.isdescription=false;
+      this.noteTime=true;
+      this.isBookmarkIcon=false;
+      }else {
+      this.isdescription=true;
+      this.noteTime=false;
+      this.isBookmarkIcon=true;
+      }
+    },
+    filters: {
+      //timeago.js插件
+      //计算时间，类似于几分钟前，几小时前，几天前等
+      changeTime(val) {
+        let time = new Date(val); //先将接收到的json格式的日期数据转换成可用的js对象日期
+        return format(time, 'zh_CN'); //转换成类似于几天前的格式
+      },
+    },
 
     methods: {
       windowurl(A, B) {
@@ -41,9 +81,6 @@
   }
 </script>
 <style scoped>
-  .bookmarklist {
-
-  }
 
   .bookmark-item {
     display: flex;
@@ -70,14 +107,9 @@
     height: 15px;
   }
 
-  .title-icon {
-    display: inline-flex;
-    align-items: center;
-  }
 
   .bookmark-title {
     display: inline-block;
-    margin-left: 10px;
     color: #393939;
     flex: 1;
     -webkit-flex: 1;
@@ -92,9 +124,35 @@
     display: block;
     color: #c2c2c2;
     margin-right: 10px;
-
+  }
+  .bookmark-description{
+    font-size: 10px;
+    overflow: hidden;
+    color: #b1b1b1;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2;
+  }
+  .bookmark-official {
+    float: left;
   }
 
+  .info {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+  }
 
+  .bookmark-icon {
+    display: flex;
+    float: left;
+    margin-right: 5px;
+  }
+
+  .bookmark-icon img {
+    width: 15px;
+    height: 15px;
+  }
 
 </style>
diff --git a/ruoyi-ui/src/views/bookmark/bookmark/index.vue b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
index 2651c3bc9..a183f9676 100644
--- a/ruoyi-ui/src/views/bookmark/bookmark/index.vue
+++ b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
@@ -290,6 +290,7 @@
                       <i class="el-icon-position"></i>
                     </div>
                   </el-header>
+                  <div class="main-url-title">部分网站不允许内嵌套打开,请在设置中选择自己喜欢的打开方式!</div>
                   <div class="mianUrl-botoom"  v-loading="iframeLoading"  >
 <!--                    webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"-->
                     <iframe sandbox="allow-forms allow-scripts allow-popups" class="openurl" :src="gourl"  target="_self"  tabindex="-1"  />
@@ -318,6 +319,10 @@
     updateBookmark,
     exportBookmark
   } from "@/api/bookmark/bookmark";
+  import {
+    selectBymenuNote,
+    userGetNoteInfo,
+  } from "@/api/note/note";
   import {format} from 'timeago.js';
 
   export default {
@@ -396,9 +401,26 @@
         highlighted: true,//搜索是否高亮
         //点击的网址
         gourl:'https://element.eleme.cn/#/zh-CN/theme',
-
-
-
+        //便签系统开始
+        noteParams: {
+          pageNum: 1,
+          pageSize: 15,
+          userId: undefined,
+          title: undefined,
+          description: undefined,
+          menuId: undefined,
+          background: undefined,
+          noteCount: undefined,
+          noteSort: undefined,
+          isState: undefined,
+          readProgress: undefined,
+          isStar: undefined,
+          isDelete: undefined,
+          topFlag: undefined,
+          isShare: undefined,
+          isEncryption: undefined,
+          createUserName: undefined
+        },
       }
     },
 
@@ -409,8 +431,6 @@
         let time = new Date(val); //先将接收到的json格式的日期数据转换成可用的js对象日期
         return format(time, 'zh_CN'); //转换成类似于几天前的格式
       },
-
-
     },
     mounted() {
 
@@ -426,8 +446,6 @@
     },
     created() {
       var that = this;
-
-
       var routedata = that.$route.query.menuId;
       var sousuo = that.$route.query.sousuo;
       if (routedata == undefined) {
@@ -530,12 +548,20 @@
 
       /**切换显示 全部 网页 文本 其他**/
       showopen(e) {
+        //1 是文本
+        if (e==1){
+          this.getNoteList();
+        }else if(e==0){
+          this.getList();
+        }
         document.getElementsByClassName("classification")[e].classList.add("classification-click");
         for (var i = 0; i < 4; i++) {
           if (i != e) {
             document.getElementsByClassName("classification")[i].classList.remove('classification-click');
           }
         }
+
+
       },
       /** 转换书签菜单数据结构 */
       normalizer(node) {
@@ -724,6 +750,16 @@
           }
         });
       },
+
+      /** 查询便签管理列表 */
+      getNoteList() {
+        this.loading = true;
+        selectBymenuNote(this.queryParams).then(response => {
+            this.bookmarkList = response.rows;
+            this.total = response.total;
+            this.loading = false;
+        });
+      },
       /**网站内打开*/
       windowurl(url,bookmarkId) {
         var that=this;
@@ -1370,6 +1406,11 @@
     width: 100%;
     height: 100%;
   }
+  .main-url-title{
+    width: 100%;
+    color: #565656;
+    text-indent: 15px;
+  }
 
 
 </style>
diff --git a/ruoyi-ui/src/views/bookmark/index/index.vue b/ruoyi-ui/src/views/bookmark/index/index.vue
index 5cdd9ed78..af2741a10 100644
--- a/ruoyi-ui/src/views/bookmark/index/index.vue
+++ b/ruoyi-ui/src/views/bookmark/index/index.vue
@@ -1436,12 +1436,12 @@
     padding: 0;
     margin-bottom: 0;
     /*background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/
-    /*background-color: #F6F6F6;*/
+    background-color: #F6F5F4;
     /*background: url("https://s1.ax1x.com/2020/08/16/dEcqVU.jpg") no-repeat;*/
 
 
     /*background: url("https://s1.ax1x.com/2020/10/03/03WM4K.md.jpg") no-repeat;*/
-    background: url("https://s1.ax1x.com/2020/10/03/03fri6.png") no-repeat;
+    /*background: url("https://s1.ax1x.com/2020/10/03/03fri6.png") no-repeat;*/
 
 
     /*background: url("https://s1.ax1x.com/2020/10/03/03RCSe.jpg") no-repeat;*/