网页和文本 切换

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}")
+    @GetMapping(value = "/userGetNoteInfo/{noteId}")
-    public AjaxResult userGetInfo(@PathVariable("noteId") Long noteId)
+    public AjaxResult userGetNoteInfo(@PathVariable("noteId") Long noteId)
     {
         SysUser sysUser=getAuthUser();
         return AjaxResult.success(nmNoteService.selectNmNoteuserById(noteId,sysUser.getUserId()));

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({

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 v-for="bm in bookmarkList" class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
-        <div class="bookmark-item">
+      <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>
 
+        <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>

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>

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;*/