From 62703cb74690fa9dab39d77ca4311f43a226c046 Mon Sep 17 00:00:00 2001
From: WangHao <43278047@qq.com>
Date: Sun, 7 Nov 2021 18:27:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B9=A6=E7=AD=BE=E7=9B=AE?=
 =?UTF-8?q?=E5=BD=95=E7=9A=84=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bookmark/bookmark/index.vue     |  28 ++-
 ruoyi-ui/src/views/bookmark/index/index.vue   | 213 +++++++++++++++---
 ruoyi-ui/src/views/bookmark/tag/usertag.vue   |  52 +++--
 3 files changed, 237 insertions(+), 56 deletions(-)

diff --git a/ruoyi-ui/src/views/bookmark/bookmark/index.vue b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
index 0f5aacc78..1ac6ecb1b 100644
--- a/ruoyi-ui/src/views/bookmark/bookmark/index.vue
+++ b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div @click="closePopup()">
 
     <el-container class="isbookmarkContainer">
       <el-aside class="isBookmarkAside" :style="asideHeight">
-      <el-header class="header-sousou">
+      <el-header class="header-sousou" >
         <div class="sousou-left">
           <div class="sousouleft-switch" @click="drawer = true"><i class="el-icon-s-unfold"/></div>
           <div class="sousou-leftico" @click="drawer = true"><img
@@ -442,6 +442,9 @@
     mounted() {
       this.closeIsMain();
 
+      window['closePopup'] = (e) => {
+        this.closePopup(e)
+      }
     },
     methods: {
 
@@ -981,6 +984,11 @@
         //   this.title = "修改书签菜单";
         // });
       },
+      //关闭弹窗
+      closePopup: function() {
+        document.getElementById("popupDiv").style.display = 'none';
+      }
+
     },
 
 
@@ -1068,14 +1076,14 @@
     /*font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;*/
   }
 
-  .editBookamrk {
-    width: 270px;
-    height: 70px;
-    position: absolute;
-    background-color: #acd7ff;
-    right: 0;
-    display: none;
-  }
+  /*.editBookamrk {*/
+  /*  width: 270px;*/
+  /*  height: 70px;*/
+  /*  position: absolute;*/
+  /*  background-color: #acd7ff;*/
+  /*  right: 0;*/
+  /*  display: none;*/
+  /*}*/
 
   .editlist {
     display: flex;
diff --git a/ruoyi-ui/src/views/bookmark/index/index.vue b/ruoyi-ui/src/views/bookmark/index/index.vue
index 9695e6149..6d06667ab 100644
--- a/ruoyi-ui/src/views/bookmark/index/index.vue
+++ b/ruoyi-ui/src/views/bookmark/index/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="box" ref="box">
+  <div class="box" ref="box" @click="closePopup()">
 
     <el-container class="box" ref="box">
       <transition name="el-zoom-in-left">
         <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
-                  style="overflow-x:hidden;overflow-y: hidden;">
+                  style="overflow-x:hidden;overflow-y: hidden;" >
 
           <el-header class="aside-logo ">
             <!--        <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
@@ -18,7 +18,7 @@
 
 
 
-          <div class="main-right">
+          <div class="main-right" >
 <!--            <svg-icon icon-class="tool" class="svgicon"/>-->
             <div class="aside-title" @click="goRouter(8)"><i class="el-icon-folder"></i>
               <span>最新</span>
@@ -42,17 +42,23 @@
 <!--            </div>-->
 
 
+
+
+
             <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="el-icon-folder-opened aside-titleB_childi_two"></i>
-              <span >我的收藏</span>
-              <div style="margin-left: 40%" 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-folder-add" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click.stop="addBkMenuCk"></i>
-              </div>
+              <span  style="width: 100%">我的收藏</span>
+              <span style="display: flex;flex-direction:row;min-width: 65px" v-show="eidtMenuText">
+                <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: 16px;margin-left: 5px;margin-top: 1px;" @click.stop="addBkMenuCk"></i>
+              </span>
             </div>
 
 
+
+
+
 <!--            <div class="reminder" style="display: flex;">-->
 <!--              <span  @click="menuListShowCk">我的收藏</span>-->
 <!--              <div style="margin-left: 55%">-->
@@ -129,6 +135,10 @@
           </div>
 
 
+
+
+
+
         </el-aside>
       </transition>
 
@@ -152,29 +162,29 @@
 
     </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-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>
+        <br/>
         <el-form-item prop="menuIcon">
-          <div class="labelname">菜单图标</div>
-          <br/>
            <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-form-item>
+        <br/>
         <el-form-item prop="parentId">
-          <div class="labelname">上级菜单</div>
           <treeselect class="menutreeselect" v-model="form.parentId" :options="menuOptions" :normalizer="normalizer"/>
         </el-form-item>
 
       </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  @click="cancel">取消</el-button>
-      </div>
+
+
+      <el-button class="butWidth" size="small" type="primary" @click="submitForm()">确 定</el-button>
+      <el-button class="butWidth" style="margin-left: 0px"  size="small" @click="cancel">取 消</el-button>
+
+
+<!--        <el-button type="danger"  @click="deleteMmenu(form.menuId)">删除</el-button>-->
 
     </el-dialog>
 
@@ -183,9 +193,18 @@
     <canvas id="evanyou"></canvas>
   </div>
 
+
+
+
+
+
 </template>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <style scoped src="../ztree/demo.css"/>
+
+
+
+
 <script>
   // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
   import {addBookmark} from "@/api/bookmark/bookmark";
@@ -348,9 +367,18 @@
       }
     },
     mounted() {
-      window['editBookmark'] = (e) => {
-        this.editBookmark(e)
+      window['editBookmark'] = (e,b) => {
+        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) => {
           this.removeHoverDoms(e)
         },
@@ -764,7 +792,7 @@
         // console.log("addHoverDom...........")
         if (this.treeNodeClick !=null && this.treeNodeClick !=undefined){
           //解决节点选中后 移出鼠标无法触发 removeHoverDom 方法的问题
-          this.removeHoverDom(null,this.treeNodeClick);
+          // this.removeHoverDom(null,this.treeNodeClick);
         }
         var confCount = $("." + treeNode.tId + "_sz").length;
         if (confCount > 0) return;
@@ -773,7 +801,13 @@
         //if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
         var switchObjspan = $("#" + treeNode.tId + "_span");
         // 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);
       },
 
@@ -960,13 +994,16 @@
             })
         }
       },
-      editBookmark: function (e) {
+      editBookmark: function (menuId,parentId) {
+        //关闭弹窗
+        this.closePopup();
         this.reset();
+        //菜单树
         this.getTreeselect();
-        if (e.getAttribute("data-menuId") != null && e.getAttribute("data-parentId") != null) {
-          this.form.parentId = e.getAttribute("data-parentId");
+        if (menuId != null && parentId != null) {
+          this.form.parentId = parentId;
         }
-        getMenu(e.getAttribute("data-menuId")).then(response => {
+        getMenu(menuId).then(response => {
           this.form = response.data;
           this.open = true;
           this.title = "修改书签菜单";
@@ -984,6 +1021,8 @@
 
       //删除书签目录
       deleteMmenu(menuId) {
+        //关闭弹窗
+        this.closePopup();
         this.$confirm('是否删除此目录菜单?', '提示', {
           confirmButtonText: '确定',
           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) {
       this.$message('click on item ' + command);
-    },
-
+    }
   }
 </script>
 <style scoped>
@@ -1463,8 +1569,55 @@
     z-index: -1;
   }
 
-
+  .butWidth{
+    width: 100%;
+    margin-top: 10px;
+  }
 
 
 </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>
 
diff --git a/ruoyi-ui/src/views/bookmark/tag/usertag.vue b/ruoyi-ui/src/views/bookmark/tag/usertag.vue
index b4d5132b1..f290708ad 100644
--- a/ruoyi-ui/src/views/bookmark/tag/usertag.vue
+++ b/ruoyi-ui/src/views/bookmark/tag/usertag.vue
@@ -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="el-icon-price-tag aside-titleB_childi_two"></i>
         <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-folder-add title-name"  @click.stop="addBkTagCk"></i>
         </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 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}}
 
 
 
-          <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>
 
 
-<!--          <el-tag type="info" size="mini">{{item.name}}</el-tag>-->
+
         </div>
       </div>
       <div v-if=" tagList != undefined && tagList != null && total > 8 " class="aside-title name transition-box" @click="getListTag()">加载更多</div>
@@ -141,6 +152,14 @@
           editByUser(){
             var that = this;
             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 => {
               if (response.code === 200) {
                 that.listByUsers();
@@ -154,11 +173,11 @@
 
           /** 删除书签*/
           deleteTagOpen(id){
-            this.$confirm('是否确认删除此条书签数据项?', "警告", {
-              confirmButtonText: "确定",
-              cancelButtonText: "取消",
-              type: "warning"
-            }).then(() => {
+            // this.$confirm('是否确认删除此条书签数据项?', "警告", {
+            //   confirmButtonText: "确定",
+            //   cancelButtonText: "取消",
+            //   type: "warning"
+            // }).then(() => {
               deleteTag(id).then(response => {
                 if (response.code === 200) {
                   this.listByUsers();
@@ -169,9 +188,9 @@
               });
 
 
-            }).catch(function () {
-              // 取消删除
-            });
+            // }).catch(function () {
+            //   // 取消删除
+            // });
 
           },
           handleClose(done) {
@@ -379,11 +398,12 @@
   }
   .tag_coomon{
     float: right;
-    margin-right: 15px;
-    margin-top: 9px;
     font-size: 16px;
     z-index: 100;
     color: #9e9e9e;
+    margin-right: 12px;
+    margin-top: -3px;
+
   }
   .tag_coomon:hover{
     font-weight: 800;
@@ -395,9 +415,9 @@
   }
   .tag_coomon_eidt{
     float: right;
-    margin-right: 5px;
-    margin-top: 9px;
+    margin-right: 8px;
     font-size: 16px;
+    margin-top: 10px;
     color: #9e9e9e;
   }
   .butWidth{