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

优化书签目录的编辑功能样式

Browse Source
This commit is contained in:
WangHao
2021-11-07 18:27:50 +08:00
parent 375215a031
commit 62703cb746
3 changed files with 237 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div> <div @click="closePopup()">
<el-container class="isbookmarkContainer"> <el-container class="isbookmarkContainer">
<el-aside class="isBookmarkAside" :style="asideHeight"> <el-aside class="isBookmarkAside" :style="asideHeight">
@ -442,6 +442,9 @@
mounted() { mounted() {
this.closeIsMain(); this.closeIsMain();
window['closePopup'] = (e) => {
this.closePopup(e)
}
}, },
methods: { methods: {
@ -981,6 +984,11 @@
// this.title = "修改书签菜单"; // this.title = "修改书签菜单";
// }); // });
}, },
//关闭弹窗
closePopup: function() {
document.getElementById("popupDiv").style.display = 'none';
}
}, },
@ -1068,14 +1076,14 @@
/*font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;*/ /*font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;*/
} }
.editBookamrk { /*.editBookamrk {*/
width: 270px; /* width: 270px;*/
height: 70px; /* height: 70px;*/
position: absolute; /* position: absolute;*/
background-color: #acd7ff; /* background-color: #acd7ff;*/
right: 0; /* right: 0;*/
display: none; /* display: none;*/
} /*}*/
.editlist { .editlist {
display: flex; display: flex;

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

@ -1,5 +1,5 @@
<template> <template>
<div class="box" ref="box"> <div class="box" ref="box" @click="closePopup()">
<el-container class="box" ref="box"> <el-container class="box" ref="box">
<transition name="el-zoom-in-left"> <transition name="el-zoom-in-left">
@ -42,17 +42,23 @@
<!-- </div>--> <!-- </div>-->
<div class="aside-titleB" @click="menuListShowCk" @mouseenter="eidtMenuText=!eidtMenuText" @mouseleave="eidtMenuText=!eidtMenuText"> <div class="aside-titleB" @click="menuListShowCk" @mouseenter="eidtMenuText=!eidtMenuText" @mouseleave="eidtMenuText=!eidtMenuText">
<i :class="menuListShow ? 'el-icon-caret-bottom aside-titleB_childi_one':'el-icon-caret-right aside-titleB_childi_one'" ></i> <i :class="menuListShow ? 'el-icon-caret-bottom aside-titleB_childi_one':'el-icon-caret-right aside-titleB_childi_one'" ></i>
<i class="el-icon-folder-opened aside-titleB_childi_two"></i> <i class="el-icon-folder-opened aside-titleB_childi_two"></i>
<span >我的收藏</span> <span style="width: 100%">我的收藏</span>
<div style="margin-left: 40%" v-show="eidtMenuText"> <span style="display: flex;flex-direction:row;min-width: 65px" v-show="eidtMenuText">
<i class="el-icon-search" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click.stop="searchBkMenuCk"></i> <i class="el-icon-search" style="font-size: 16px;margin-left: 5px;margin-top: 1px;" @click.stop="searchBkMenuCk"></i>
<i class="el-icon-folder-add" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click.stop="addBkMenuCk"></i> <i class="el-icon-folder-add" style="font-size: 16px;margin-left: 5px;margin-top: 1px;" @click.stop="addBkMenuCk"></i>
</div> </span>
</div> </div>
<!-- <div class="reminder" style="display: flex;">--> <!-- <div class="reminder" style="display: flex;">-->
<!-- <span @click="menuListShowCk">我的收藏</span>--> <!-- <span @click="menuListShowCk">我的收藏</span>-->
<!-- <div style="margin-left: 55%">--> <!-- <div style="margin-left: 55%">-->
@ -129,6 +135,10 @@
</div> </div>
</el-aside> </el-aside>
</transition> </transition>
@ -152,29 +162,29 @@
</el-container> </el-container>
<!-- 编辑弹窗--> <!-- 编辑弹窗-->
<el-dialog :title="title" :visible.sync="open" width="500px" class="menuedit" append-to-body> <el-dialog :title="title" :show-close="false" :visible.sync="open" width="500px" class="menuedit" append-to-body>
<el-form ref="form" :model="form" :rules="rules" > <el-form ref="form" :model="form" :rules="rules" >
<el-form-item prop="menuName"> <el-form-item prop="menuName">
<div class="labelname">菜单名称</div> <el-input class="custom-input" v-model="form.menuName" placeholder="请输入目录名称"/>
<el-input class="custom-input" v-model="form.menuName" placeholder="请输入菜单名称"/>
</el-form-item> </el-form-item>
<el-form-item prop="menuIcon">
<div class="labelname">菜单图标</div>
<br/> <br/>
<el-form-item prop="menuIcon">
<el-avatar :src="form.menuIcon" style="float: left"></el-avatar> <el-avatar :src="form.menuIcon" style="float: left"></el-avatar>
<el-input class="custom-input" style="float: left;margin-left:5px;width: 90%" v-model="form.menuIcon" placeholder="请输入远程图片地址(建议高:120宽:120)"/> <el-input class="custom-input" style="float: left;margin-left:5px;width: 90%" v-model="form.menuIcon" placeholder="请输入远程图片地址(建议高:120宽:120)"/>
</el-form-item> </el-form-item>
<br/>
<el-form-item prop="parentId"> <el-form-item prop="parentId">
<div class="labelname">上级菜单</div>
<treeselect class="menutreeselect" v-model="form.parentId" :options="menuOptions" :normalizer="normalizer"/> <treeselect class="menutreeselect" v-model="form.parentId" :options="menuOptions" :normalizer="normalizer"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer">
<el-button type="danger" @click="deleteMmenu(form.menuId)">删除</el-button>
<el-button type="primary" @click="submitForm">确定</el-button> <el-button class="butWidth" size="small" type="primary" @click="submitForm()">确 定</el-button>
<el-button @click="cancel">取消</el-button> <el-button class="butWidth" style="margin-left: 0px" size="small" @click="cancel">取 消</el-button>
</div>
<!-- <el-button type="danger" @click="deleteMmenu(form.menuId)">删除</el-button>-->
</el-dialog> </el-dialog>
@ -183,9 +193,18 @@
<canvas id="evanyou"></canvas> <canvas id="evanyou"></canvas>
</div> </div>
</template> </template>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style scoped src="../ztree/demo.css"/> <style scoped src="../ztree/demo.css"/>
<script> <script>
// 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用 // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
import {addBookmark} from "@/api/bookmark/bookmark"; import {addBookmark} from "@/api/bookmark/bookmark";
@ -348,8 +367,17 @@
} }
}, },
mounted() { mounted() {
window['editBookmark'] = (e) => { window['editBookmark'] = (e,b) => {
this.editBookmark(e) this.editBookmark(e,b)
},
window['deleteMmenu'] = (e) => {
this.deleteMmenu(e)
},
window['openPopup'] = (e) => {
this.openPopup(e)
},
window['closePopup'] = (e) => {
this.closePopup(e)
}, },
window['removeHoverDoms'] = (e) => { window['removeHoverDoms'] = (e) => {
this.removeHoverDoms(e) this.removeHoverDoms(e)
@ -764,7 +792,7 @@
// console.log("addHoverDom...........") // console.log("addHoverDom...........")
if (this.treeNodeClick !=null && this.treeNodeClick !=undefined){ if (this.treeNodeClick !=null && this.treeNodeClick !=undefined){
//解决节点选中后 移出鼠标无法触发 removeHoverDom 方法的问题 //解决节点选中后 移出鼠标无法触发 removeHoverDom 方法的问题
this.removeHoverDom(null,this.treeNodeClick); // this.removeHoverDom(null,this.treeNodeClick);
} }
var confCount = $("." + treeNode.tId + "_sz").length; var confCount = $("." + treeNode.tId + "_sz").length;
if (confCount > 0) return; if (confCount > 0) return;
@ -773,7 +801,13 @@
//if (treeNode.parentNode && treeNode.parentNode.id!=1) return; //if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
var switchObjspan = $("#" + treeNode.tId + "_span"); var switchObjspan = $("#" + treeNode.tId + "_span");
// onmouseout='removeHoverDoms(this)' //选中删除切换 // onmouseout='removeHoverDoms(this)' //选中删除切换
var editStr = "<span class=" + treeNode.tId + "_sz data-parentId=" + treeNode.parentId + " data-menuId=" + treeNode.menuId + " data-treetId="+ treeNode.tId +" data-bookmarkCount="+treeNode.bookmarkCount+" onclick='editBookmark(this)' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'><i style='margin-top: 9px;font-size: 16px' class='el-icon-edit'></i></span>"; // var editStr = "<span class=" + treeNode.tId + "_sz data-parentId=" + treeNode.parentId + " data-menuId=" + treeNode.menuId + " data-treetId="+ treeNode.tId +" data-bookmarkCount="+treeNode.bookmarkCount+" onclick='editBookmark(this)' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'><i style='margin-top: 9px;font-size: 16px' class='el-icon-edit'></i></span>";
var editStr = "<span class=" + treeNode.tId + "_sz data-parentId=" + treeNode.parentId + " data-menuId=" + treeNode.menuId + " data-treetId="+ treeNode.tId +" data-bookmarkCount="+treeNode.bookmarkCount+" onclick='openPopup(this)' style='z-index:888;color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'><i style='margin-top: 9px;font-size: 16px' class='el-icon-edit'></i></span>";
//var editStr = "<el-popover placement='bottom-start' width='200' trigger='click' ><ul class='item-menu'><li class='item-menu-title '><span>新增嵌套目录</span></li><el-divider></el-divider><li class='item-menu-title '><span>修改名称</span></li><li class='item-menu-title '><span>修改图标</span></li><li class='item-menu-title '><span>分享</span></li></ul><el-button style='float: right' slot='reference'>click 激活</el-button></el-popover>"
switchObjspan.after(editStr); switchObjspan.after(editStr);
}, },
@ -960,13 +994,16 @@
}) })
} }
}, },
editBookmark: function (e) { editBookmark: function (menuId,parentId) {
//关闭弹窗
this.closePopup();
this.reset(); this.reset();
//菜单树
this.getTreeselect(); this.getTreeselect();
if (e.getAttribute("data-menuId") != null && e.getAttribute("data-parentId") != null) { if (menuId != null && parentId != null) {
this.form.parentId = e.getAttribute("data-parentId"); this.form.parentId = parentId;
} }
getMenu(e.getAttribute("data-menuId")).then(response => { getMenu(menuId).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改书签菜单"; this.title = "修改书签菜单";
@ -984,6 +1021,8 @@
//删除书签目录 //删除书签目录
deleteMmenu(menuId) { deleteMmenu(menuId) {
//关闭弹窗
this.closePopup();
this.$confirm('是否删除此目录菜单?', '提示', { this.$confirm('是否删除此目录菜单?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -1004,6 +1043,74 @@
}); });
}); });
}, },
openPopup: function(e) {
console.log("openPopup................")
console.log("当前菜单的目录数据............")
console.log("[data-menuId]............" + e.getAttribute("data-menuId"))
console.log("[data-parentId]............" + e.getAttribute("data-parentId"))
var menuId = e.getAttribute("data-menuId");
var parentId = e.getAttribute("data-parentId");
var posX = 0, posY = 0;
var event = event || window.event;
event.stopPropagation();
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
this.creatDiv(menuId,parentId);
//判断浏览器是否Chrome
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
if (isChrome) {
document.getElementById("popupDiv").style.left = posX + "px";
document.getElementById("popupDiv").style.top = posY + "px";
} else {
//不是Chrome，默认为IE
document.getElementById("popupDiv").style.pixelLeft = posX;
document.getElementById("popupDiv").style.pixelTop = posY;
}
},
//创建弹窗DIV
creatDiv: function(menuIdval,parentIdval) {
if (document.getElementById("popupDiv")) {
document.getElementById("popupDiv").style.display = "block";
} else {
var s = document.createElement("div");
// s.innerHTML = "<div id = 'popupDiv' style = 'cursor : hand'> <div id = 'closeDiv'><img src = 'delete.png' onclick = 'closePopup()' style='cursor : hand; width:14px;'/></div><div id = 'contentDiv'><input οnclick='this.select();' type=\"text\" size = \"40\" id = \"ccomephone\" value=" + content + " style='width: 232PX;margin-top: 26px;margin-left: 13px;margin-bottom: 7px;'><input id = \"bcome\" style='margin-left: 108px;' type=\"button\" value=\"提交\" οnclick=\"doSubmit();\"/></div></div>";
s.innerHTML = "<div id = 'popupDiv' style=\"width:200px\">" +
"<ul class=\"item-menu\">" +
"<li class=\"item-menu-title\"><span>移动目录</span></li>" +
"<hr size=\"1px\" noshade=true >" +
"<li class=\"item-menu-title\" onclick='editBookmark(" + menuIdval + "," + parentIdval + ")'><span>新增嵌套目录</span></li>" +
"<hr size=\"1px\" noshade=true>" +
"<li class=\"item-menu-title\"><span>改名称</span></li>" +
"<li class=\"item-menu-title\"><span>改图标</span></li>" +
"<li class=\"item-menu-title\" onclick='deleteMmenu(" + menuIdval + ")'><span>刪除</span></li>" +
"<li class=\"item-menu-title\"><span>分享</span></li>" +
"</ul>" +
"</div>";
document.getElementsByTagName("body")[0].appendChild(s);
}
},
//提交数据
doSubmit: function() {
//dosomething
document.getElementById("popupDiv").style.display = 'none';
},
//关闭弹窗
closePopup: function() {
document.getElementById("popupDiv").style.display = 'none';
}
}, },
@ -1012,8 +1119,7 @@
}, },
handleCommand(command) { handleCommand(command) {
this.$message('click on item ' + command); this.$message('click on item ' + command);
}, }
} }
</script> </script>
<style scoped> <style scoped>
@ -1463,8 +1569,55 @@
z-index: -1; z-index: -1;
} }
.butWidth{
width: 100%;
margin-top: 10px;
}
</style> </style>
<style>
#popupDiv {
position: absolute;
z-index: 1;
background-color: #ffffff;
border:1px solid #dedede;
border-radius: 3px;
}
/** 菜单栏的弹窗*/
.item-menu{
}
.item-menu-title{
margin-left:-40px;
list-style:none;
height: 28px;
line-height: 28px;
font-size: 14px;
color: #000;
}
.item-menu-title:hover{
background-color: #1987e1;
color:#FFFFFF;
}
.item-menu-title span{
margin-left:15px;
}
.item-menu hr{
margin-left:-40px;
border-color:#dedede;
}
/** 菜单栏的弹窗*/
</style>

52
ruoyi-ui/src/views/bookmark/tag/usertag.vue
View File

@ -4,7 +4,7 @@
<i :class="tagListShow ? 'el-icon-caret-bottom aside-titleB_childi_one':'el-icon-caret-right aside-titleB_childi_one'" ></i> <i :class="tagListShow ? 'el-icon-caret-bottom aside-titleB_childi_one':'el-icon-caret-right aside-titleB_childi_one'" ></i>
<i class="el-icon-price-tag aside-titleB_childi_two"></i> <i class="el-icon-price-tag aside-titleB_childi_two"></i>
<span style="width: 100%">标签管理</span> <span style="width: 100%">标签管理</span>
<span style="min-width: 70px" v-show="eidtTAGText"> <span style="min-width: 65px" v-show="eidtTAGText">
<i class="el-icon-search title-name" @click.stop="searchBkTagCk"></i> <i class="el-icon-search title-name" @click.stop="searchBkTagCk"></i>
<i class="el-icon-folder-add title-name" @click.stop="addBkTagCk"></i> <i class="el-icon-folder-add title-name" @click.stop="addBkTagCk"></i>
</span> </span>
@ -48,16 +48,27 @@
<div v-if=" !(tagList == undefined ||tagList == null || tagList.length <= 0)" v-for="item in tagList" @mouseover="enter(item.id)" @mouseleave="leave()" > <div v-if=" !(tagList == undefined ||tagList == null || tagList.length <= 0)" v-for="item in tagList" @mouseover="enter(item.id)" @mouseleave="leave()" >
<div class="aside-title name transition-box" id="item.id" > <div class="aside-title name transition-box" id="item.id" >
<!-- <i class="el-icon-collection-tag" style="font-size: 15px"/>--> <!-- <i class="el-icon-collection-tag" style="font-size: 15px"/>
<el-tag type="info" size="mini">{{item.name}}</el-tag>
-->
# {{item.name}} # {{item.name}}
<i v-show="seen&&item.id == current" class="el-icon-delete tag_coomon" @click="deleteTagOpen(item.id)"></i> <el-popconfirm
confirm-button-text="确认"
cancel-button-text="取消"
title="确认要删除该书签？"
@onConfirm="deleteTagOpen(item.id)"
>
<el-button type="text" slot="reference" class="tag_coomon">
<i v-show="seen&&item.id == current" class="el-icon-delete" ></i>
</el-button>
</el-popconfirm>
<i v-show="seen&&item.id == current" class="el-icon-edit tag_coomon_eidt" @click="updateTagOpen(item.id,item.name)"></i> <i v-show="seen&&item.id == current" class="el-icon-edit tag_coomon_eidt" @click="updateTagOpen(item.id,item.name)"></i>
<!-- <el-tag type="info" size="mini">{{item.name}}</el-tag>-->
</div> </div>
</div> </div>
<div v-if=" tagList != undefined && tagList != null && total > 8 " class="aside-title name transition-box" @click="getListTag()">加载更多</div> <div v-if=" tagList != undefined && tagList != null && total > 8 " class="aside-title name transition-box" @click="getListTag()">加载更多</div>
@ -141,6 +152,14 @@
editByUser(){ editByUser(){
var that = this; var that = this;
that.tagParams.name = that.newName; that.tagParams.name = that.newName;
if (that.tagParams.name == undefined || that.tagParams.name == null ||that.tagParams.name.trim() == ''){
this.msgInfo("标签名称不能为空!")
return;
}
if (that.tagParams.name.trim().length >10){
that.msgInfo("书签名称过长")
return;
}
editByUser(this.tagParams).then(response => { editByUser(this.tagParams).then(response => {
if (response.code === 200) { if (response.code === 200) {
that.listByUsers(); that.listByUsers();
@ -154,11 +173,11 @@
/** 删除书签*/ /** 删除书签*/
deleteTagOpen(id){ deleteTagOpen(id){
this.$confirm('是否确认删除此条书签数据项?', "警告", { // this.$confirm('是否确认删除此条书签数据项?', "警告", {
confirmButtonText: "确定", // confirmButtonText: "确定",
cancelButtonText: "取消", // cancelButtonText: "取消",
type: "warning" // type: "warning"
}).then(() => { // }).then(() => {
deleteTag(id).then(response => { deleteTag(id).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.listByUsers(); this.listByUsers();
@ -169,9 +188,9 @@
}); });
}).catch(function () { // }).catch(function () {
// 取消删除 // // 取消删除
}); // });
}, },
handleClose(done) { handleClose(done) {
@ -379,11 +398,12 @@
} }
.tag_coomon{ .tag_coomon{
float: right; float: right;
margin-right: 15px;
margin-top: 9px;
font-size: 16px; font-size: 16px;
z-index: 100; z-index: 100;
color: #9e9e9e; color: #9e9e9e;
margin-right: 12px;
margin-top: -3px;
} }
.tag_coomon:hover{ .tag_coomon:hover{
font-weight: 800; font-weight: 800;
@ -395,9 +415,9 @@
} }
.tag_coomon_eidt{ .tag_coomon_eidt{
float: right; float: right;
margin-right: 5px; margin-right: 8px;
margin-top: 9px;
font-size: 16px; font-size: 16px;
margin-top: 10px;
color: #9e9e9e; color: #9e9e9e;
} }
.butWidth{ .butWidth{