Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

调整Head头部布局,动态接口加载书签列表

Browse Source
This commit is contained in:
WangHao
2020-08-17 22:00:59 +08:00
parent b712dd1aa7
commit ff7b4da8a6
7 changed files with 156 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ruoyi-admin/src/main/java/com/ruoyi/web/controller/yunbookmark/SqBookmarkController.java
View File

@ -4,6 +4,7 @@ import java.util.List;
import com.ruoyi.bookmark.domain.SqBookmark; import com.ruoyi.bookmark.domain.SqBookmark;
import com.ruoyi.bookmark.service.ISqBookmarkService; import com.ruoyi.bookmark.service.ISqBookmarkService;
import com.ruoyi.common.core.domain.entity.SysUser;
import org.springframework.security.access.prepost.PreAuthorize; import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.GetMapping;
@ -52,9 +53,10 @@ public class SqBookmarkController extends BaseController
*/ */
@GetMapping("/selectBymenuIdUserID") @GetMapping("/selectBymenuIdUserID")
@PreAuthorize("@ss.hasPermi('bookmark:bookmark:list')") @PreAuthorize("@ss.hasPermi('bookmark:bookmark:list')")
public TableDataInfo selectBymenuIdUserID(Long menuID, Long userID) { public TableDataInfo selectBymenuIdUserID(Long menuId) {
SysUser sysUser=getAuthUser();
startPage(); startPage();
List<SqBookmark> list = sqBookmarkService.selectBymenuIdUserID(menuID,userID); List<SqBookmark> list = sqBookmarkService.selectBymenuIdUserID(menuId,sysUser.getUserId());
return getDataTable(list); return getDataTable(list);
} }

29
ruoyi-common/src/main/java/com/ruoyi/common/core/controller/BaseController.java
View File

@ -3,8 +3,14 @@ package com.ruoyi.common.core.controller;
import java.beans.PropertyEditorSupport; import java.beans.PropertyEditorSupport;
import java.util.Date; import java.util.Date;
import java.util.List; import java.util.List;
import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.LoginUser;
import org.slf4j.Logger; import org.slf4j.Logger;
import org.slf4j.LoggerFactory; import org.slf4j.LoggerFactory;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.User;
import org.springframework.web.bind.WebDataBinder; import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder; import org.springframework.web.bind.annotation.InitBinder;
import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageHelper;
@ -26,6 +32,29 @@ import com.ruoyi.common.utils.sql.SqlUtil;
public class BaseController public class BaseController
{ {
protected final Logger logger = LoggerFactory.getLogger(BaseController.class); protected final Logger logger = LoggerFactory.getLogger(BaseController.class);
/**
* @auther: Wang
* @date: 2020/08/17 20:19
* 功能描述:获取当前用户的信息
*/
protected SysUser getAuthUser()
{
Authentication auth = SecurityContextHolder.getContext().getAuthentication();
LoginUser user = (LoginUser) auth.getPrincipal();
return user.getUser();
}
// /**
// * @auther: Wang
// * @date: 2020/08/17 20:19
// * 功能描述:获取当前用户UserID
// */
// protected Long getAuthUserId()
// {
// Authentication auth = SecurityContextHolder.getContext().getAuthentication();
// LoginUser user = (LoginUser) auth.getPrincipal();
// return user.getUser().getUserId();
// }
/** /**
* 将前台传递过来的日期格式的字符串，自动转化为Date类型 * 将前台传递过来的日期格式的字符串，自动转化为Date类型

2
ruoyi-ui/package.json
View File

@ -55,12 +55,14 @@
"path-to-regexp": "2.4.0", "path-to-regexp": "2.4.0",
"screenfull": "4.2.0", "screenfull": "4.2.0",
"sortablejs": "1.8.4", "sortablejs": "1.8.4",
"timeago.js": "^4.0.2",
"vue": "2.6.10", "vue": "2.6.10",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.4.9", "vue-cropper": "0.4.9",
"vue-quill-editor": "3.0.6", "vue-quill-editor": "3.0.6",
"vue-router": "3.0.2", "vue-router": "3.0.2",
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",
"vue-timeago": "^5.1.2",
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",
"vuex": "3.1.0" "vuex": "3.1.0"
}, },

11
ruoyi-ui/src/api/bookmark/bookmark.js
View File

@ -1,5 +1,16 @@
import request from '@/utils/request' import request from '@/utils/request'
export function selectBymenuIdUserID(query) {
return request({
url: '/bookmark/bookmark/selectBymenuIdUserID',
method: 'get',
params: query
})
}
// 查询书签管理列表 // 查询书签管理列表
export function listBookmark(query) { export function listBookmark(query) {
return request({ return request({

3
ruoyi-ui/src/assets/styles/base.css
View File

@ -14,6 +14,9 @@
.transition-box{ .transition-box{
width: 250px!important; width: 250px!important;
} }
.sousouright-icon{
margin-right: 18px;
}
} }

68
ruoyi-ui/src/views/bookmark/content/index.vue
View File

@ -3,13 +3,13 @@
<template> <template>
<div> <div>
<div class="filter"> <div class="filter" >
<div class="filter-sort"> <div class="filter-sort">
<el-dropdown trigger="click" size="small"> <el-dropdown trigger="click" size="small">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<span>按时间排序(正)</span> <i class="el-icon-caret-bottom"></i> <span>按时间排序(正)</span> <i class="el-icon-caret-bottom"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown" >
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
@ -53,10 +53,10 @@
</div> </div>
<div class="bookmarklist"> <div class="bookmarklist">
<el-row> <el-row >
<hr class="bookamrk-hr"/> <hr class="bookamrk-hr"/>
<el-col :span="24" v-for="bm in bookmark"> <el-col :span="24" v-for="bm in bookmarkList">
<div class="bookmark"> <div class="bookmark">
<p class="bookmark-title">{{bm.title}}</p> <p class="bookmark-title">{{bm.title}}</p>
@ -68,7 +68,7 @@
<div class="bookmark-icon"> <div class="bookmark-icon">
<img :err-src='bm.icon' :ng-src="bm.icon" :src="bm.icon" /> <img :err-src='bm.icon' :ng-src="bm.icon" :src="bm.icon" />
</div> </div>
<div class="bookmark-official">{{bm.official}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.time}}</div> <div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -92,14 +92,20 @@
</div> </div>
</template> </template>
<script> <script>
export default {
components: {},
import { selectBymenuIdUserID, getBookmark, delBookmark, addBookmark, updateBookmark, exportBookmark } from "@/api/bookmark/bookmark";
import { format } from 'timeago.js';
export default {
components: {
format
},
data: function () { data: function () {
return { return {
loading:true,
bookmark:[ bookmark:[
{id:1,title:"最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎",description:"阅读使人充实，会谈使人敏捷，写作使人精确。——培根",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"}, {id:1,title:"最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎",description:"阅读使人充实，会谈使人敏捷，写作使人精确。——培根",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
{id:1,title:"意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德",description:"最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"}, {id:1,title:"意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德",description:"最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
@ -111,9 +117,51 @@
{id:1,title:"我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知。——笛卡儿",description:"少而好学，如日出之阳；壮而好学，如日中之光；志而好学，如炳烛之光。——刘向",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"}, {id:1,title:"我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知。——笛卡儿",description:"少而好学，如日出之阳；壮而好学，如日中之光；志而好学，如炳烛之光。——刘向",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
], ],
queryParams: {
pageNum: 1,
pageSize: 15,
userid: undefined,
title: undefined,
url: undefined,
urls: undefined,
description: undefined,
image: undefined,
label: undefined,
menuId: undefined,
zcount: undefined,
idelete: undefined,
start: undefined,
},
bookmarkList:[],
} }
}, },
methods: {} filters: {
//timeago.js插件
//计算时间，类似于几分钟前，几小时前，几天前等
changeTime(val){
let time = new Date(val); //先将接收到的json格式的日期数据转换成可用的js对象日期
return format(time, 'zh_CN'); //转换成类似于几天前的格式
}
},
created() {
this.queryParams.menuId=1;
this.getList();
},
methods: {
/** 查询书签管理列表 */
getList() {
this.loading = true;
selectBymenuIdUserID(this.queryParams).then(response => {
this.bookmarkList = response.rows;
this.total = response.total;
this.loading = false;
});
},
},
} }
</script> </script>

166
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@ -12,8 +12,8 @@
<div class="aside-title"><i class="el-icon-s-tools"></i><span>所有书签</span></div> <div class="aside-title"><i class="el-icon-s-tools"></i><span>全部书签</span></div>
<div class="aside-title"><i class="el-icon-help"></i><span>发现书签</span></div> <div class="aside-title"><i class="el-icon-help"></i><span>发现</span></div>
<div class="aside-title"><i class="el-icon-s-platform"></i><span>任意门</span></div> <div class="aside-title"><i class="el-icon-s-platform"></i><span>任意门</span></div>
<div class="aside-title"><i class="el-icon-message-solid"></i><span>收件箱</span></div> <div class="aside-title"><i class="el-icon-message-solid"></i><span>收件箱</span></div>
<div class="reminder">我的收藏</div> <div class="reminder">我的收藏</div>
@ -44,9 +44,6 @@
<!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>--> <!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->
<el-container> <el-container>
@ -54,7 +51,6 @@
<div class="sousou-left"> <div class="sousou-left">
<div class="sousouleft-switch" @click="drawer = true"><i class="el-icon-s-unfold"/></div> <div class="sousouleft-switch" @click="drawer = true"><i class="el-icon-s-unfold"/></div>
<div class="sousou-leftico" @click="drawer = true"><img src="https://favicon.lucq.fun/?url=https://www.baidu.com"/></div> <div class="sousou-leftico" @click="drawer = true"><img src="https://favicon.lucq.fun/?url=https://www.baidu.com"/></div>
</div> </div>
<div class="sousou-input"> <div class="sousou-input">
@ -62,30 +58,40 @@
<el-input placeholder="请输入书签名字" v-model="sousou" size="small"> <el-input placeholder="请输入书签名字" v-model="sousou" size="small">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input> </el-input>
</div> </div>
<div class="header-list">
<el-dropdown trigger="click" size="small" :hide-on-click="false">
<span class="el-dropdown-link">
<i class="el-icon-s-operation margintop"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">按时间排序(正序)</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">按时间排序(到序)</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="c">按字母A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" divided>按网站A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="e">按网站A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="f">按网站A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" divided>
<el-switch
v-model="swictxuanran"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
开启渲染
</el-dropdown-item>
<el-dropdown-item class="filter-item" divided>关闭</el-dropdown-item> <div class="sousouright-icon"><el-badge :value="5" :max="99" class="item" ><i class="el-icon-message-solid" style="font-size: 17px;"></i></el-badge></div>
<div class="sousouright-icon">
<el-dropdown trigger="click" size="small" :hide-on-click="false" >
<span class="el-dropdown-link">
<i class="el-icon-plus" style="font-size: 18px;"/>
</span>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">添加连接</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">添加文本</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" >导入书签</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="header-list">
<el-dropdown trigger="click" size="small" :hide-on-click="false" >
<span class="el-dropdown-link">
<el-avatar :size="28" src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">外观显示</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">用户中心</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" >建议反馈</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="e" divided>退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -95,95 +101,8 @@
</el-header> </el-header>
<el-main class="bookmarkmain" > <el-main class="bookmarkmain" >
<!-- <div class="filter">-->
<!-- <div class="filter-sort">-->
<!-- <el-dropdown trigger="click" size="small">-->
<!-- <span class="el-dropdown-link">-->
<!-- <span>选择排序方式</span> <i class="el-icon-bottom"></i> <i class="el-icon-caret-bottom"></i>-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正序)</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(到序)</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- </div>-->
<!-- <div >-->
<!-- <el-divider direction="vertical" ></el-divider>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="bookmarklist">-->
<!-- <el-row>-->
<!--<hr>-->
<!-- <el-col :span="24" v-for="bm in bookmark">-->
<!-- <div class="bookmark">-->
<!-- <p class="bookmark-title">{{bm.title}}</p>-->
<!-- <div class="">-->
<!-- <p class="description">{{bm.description}}</p>-->
<!-- </div>-->
<!-- <div class="info-wrap">-->
<!-- <div class="info">-->
<!-- <div class="bookmark-icon">-->
<!-- <img :err-src='bm.icon' :ng-src="bm.icon" :src="bm.icon" />-->
<!-- </div>-->
<!-- <div class="bookmark-official">{{bm.official}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.time}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-divider class="bookmark-hr"></el-divider>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<router-view></router-view> <router-view></router-view>
<!--&lt;!&ndash; <div class="announcement"></div>&ndash;&gt;-->
</el-main> </el-main>
<el-footer>Footer</el-footer> <el-footer>Footer</el-footer>
@ -229,7 +148,6 @@
drawerS:false, drawerS:false,
drawer: false, drawer: false,
direction: 'ltr', direction: 'ltr',
swictxuanran:true, swictxuanran:true,
sousou:'',//搜索书签 sousou:'',//搜索书签
enterable:false, enterable:false,
@ -629,14 +547,17 @@
.sousou-input{ .sousou-input{
float: left;
width: 100%; width: 82.5%;
margin-right: 15px;
} }
.header-list{ .header-list{
line-height: 50px; /*line-height: 50px;*/
margin-top: 3px; margin-top: 10px;
/*align-content: center;*/
/*justify-content: center;*/
} }
.header-list:hover{ .header-list:hover{
color: #7a6df0; color: #7a6df0;
@ -782,6 +703,11 @@
/*background-color: #fff;*/ /*background-color: #fff;*/
float: left float: left
} }
.sousouright-icon{
margin-right: 24px;
margin-top: 10px;
}