网页和文本切换

2020-10-08 18:27:08 +08:00 · 2020-10-08 18:27:08 +08:00 · 41146e7c6d
commit 41146e7c6d
parent d6692f242b
5 changed files with 159 additions and 35 deletions
--- 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()));
--- 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({
--- 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>
--- 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>
--- 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;*/