修改ztree目录树为异步加载方式

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -238,7 +238,8 @@
 <script>
   // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
   import {addBookmark} from "@/api/bookmark/bookmark";
-
+  import { getToken } from '@/utils/auth'
+  import { evanyoucss } from '@/utils/special.js'
   import {listMenu, getMenu, delMenu, addMenu, updateMenu, exportMenu} from "@/api/bookmark/menu";
   import Treeselect from "@riophae/vue-treeselect";
   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -247,7 +248,7 @@
   // import "../ztree/demo.css"
   import "../ztree/zTreeStyle.css"
   import "../ztree/jquery.ztree.exedit.js"
-  import {listMenuByUserId} from "@/api/bookmark/menu";
+  import {listMenuByUserId,listByMenuId} from "@/api/bookmark/menu";
 
   export default {
     name: 'areaTree',
@@ -308,6 +309,7 @@
         curMenu: null,
         zTree_Menu: null,
         setting: {
+
           view: {
             showLine: false,
             showIcon: true,
@@ -316,6 +318,9 @@
             addHoverDom: this.addHoverDom,
             removeHoverDom: this.removeHoverDom,
             addDiyDom: this.addDiyDom,
+            //展开折叠动画
+            expandSpeed: "normal",
+            nameIsHTML: true,
           },
           check: {
             enable: true,
@@ -324,14 +329,33 @@
           },
           data: {
             simpleData: {
-              enable: true
+              enable: true,
+              idKey: "menuId",
+              pIdKey: "parentId",
+              rootPId: 0,
             }
           },
           callback: {
-            beforeClick: this.beforeClick,
+            beforeClick: this.BeforeClick,
             onClick: this.OnClickzTree,
             // onCheck: this.zTreeOnCheck,
-
+            //补获展开和折叠
+            // onExpand: this.zTreeBeforeExpand,
+            beforeExpand: this.beforeExpand,
+          },
+          async: {
+            enable: true, // 开启异步加载
+            url: "/dev-api/bookmark/menu/listByMenuIdP", //对应的后台请求路径
+            dataType: "json",
+            type: "post",
+            dataFilter: this.ajaxDataFilter,
+            autoParam: ["menuId=menuId"], // 异步加载时需要自动提交父节点属性的参数
+            headers:{
+              'Authorization' : 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+            }
+          },
+          key: {
+            isParent: "parent"
           }
         },
         zNodes: [],
@@ -374,7 +398,7 @@
       // this.backgroundcss();
 
       /**ebabyou 背景特效**/
-      // this.evanyoucss();
+      // evanyoucss();
 
       /**粒子球特效**/
       // this.backgroundparticle();
@@ -392,175 +416,9 @@
       errorHandler() {
         return true
       },
-      /**粒子球背景特效**/
-      backgroundparticle: function () {
-        !function () {
-          //封装方法，压缩之后减少文件大小
-          function get_attribute(node, attr, default_value) {
-            return node.getAttribute(attr) || default_value;
-          }
 
-          //封装方法，压缩之后减少文件大小
-          function get_by_tagname(name) {
-            return document.getElementsByTagName(name);
-          }
 
-          //获取配置参数
-          function get_config_option() {
-            var scripts = get_by_tagname("script"),
-              script_len = scripts.length,
-              script = scripts[script_len - 1]; //当前加载的script
-            return {
-              l: script_len, //长度，用于生成id用
-              z: get_attribute(script, "zIndex", -1), //z-index
-              o: get_attribute(script, "opacity", 0.8), //opacity
-              c: get_attribute(script, "color", "255,255,255"), //color
-              n: get_attribute(script, "count", 50) //count数量
-            };
-          }
 
-          //设置canvas的高宽
-          function set_canvas_size() {
-            canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
-              canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-          }
-
-          //绘制过程
-          function draw_canvas() {
-            context.clearRect(0, 0, canvas_width, canvas_height);
-            //随机的线条和当前位置联合数组
-            var e, i, d, x_dist, y_dist, dist; //临时节点
-            //遍历处理每一个点
-            random_points.forEach(function (r, idx) {
-              r.x += r.xa,
-                r.y += r.ya, //移动
-                r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
-                r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
-                context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
-              //从下一个点开始
-              for (i = idx + 1; i < all_array.length; i++) {
-                e = all_array[i];
-                // 当前点存在
-                if (null !== e.x && null !== e.y) {
-                  x_dist = r.x - e.x; //x轴距离 l
-                  y_dist = r.y - e.y; //y轴距离 n
-                  dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
-
-                  dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
-                    d = (e.max - dist) / e.max,
-                    context.beginPath(),
-                    context.lineWidth = d / 2,
-                    context.strokeStyle = "#000000",
-                    context.moveTo(r.x, r.y),
-                    context.lineTo(e.x, e.y),
-                    context.stroke());
-                }
-              }
-            }), frame_func(draw_canvas);
-          }
-
-          //创建画布，并添加到body中
-          var the_canvas = document.createElement("canvas"), //画布
-            config = get_config_option(), //配置
-            canvas_id = "c_n" + config.l, //canvas id
-            context = the_canvas.getContext("2d"), canvas_width, canvas_height,
-            frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
-              window.setTimeout(func, 1000 / 40);
-            }, random = Math.random,
-            current_point = {
-              x: null, //当前鼠标x
-              y: null, //当前鼠标y
-              max: 20000 // 圈半径的平方
-            },
-            all_array;
-          the_canvas.id = canvas_id;
-          the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
-          get_by_tagname("body")[0].appendChild(the_canvas);
-
-          //初始化画布大小
-          set_canvas_size();
-          window.onresize = set_canvas_size;
-          //当时鼠标位置存储，离开的时候，释放当前位置信息
-          window.onmousemove = function (e) {
-            e = e || window.event;
-            current_point.x = e.clientX;
-            current_point.y = e.clientY;
-          }, window.onmouseout = function () {
-            current_point.x = null;
-            current_point.y = null;
-          };
-          //随机生成config.n条线位置信息
-          for (var random_points = [], i = 0; config.n > i; i++) {
-            var x = random() * canvas_width, //随机位置
-              y = random() * canvas_height,
-              xa = 2 * random() - 1, //随机运动方向
-              ya = 2 * random() - 1;
-            // 随机点
-            random_points.push({
-              x: x,
-              y: y,
-              xa: xa,
-              ya: ya,
-              max: 6000 //沾附距离
-            });
-          }
-          all_array = random_points.concat([current_point]);
-          //0.1秒后绘制
-          setTimeout(function () {
-            draw_canvas();
-          }, 100);
-        }();
-      },
-
-      /**evanyou 背景特效**/
-      evanyoucss: function () {
-        var c = document.getElementById('evanyou'),
-          x = c.getContext('2d'),
-          pr = window.devicePixelRatio || 1,
-          w = window.innerWidth,
-          h = window.innerHeight,
-          f = 90,
-          q,
-          m = Math,
-          r = 0,
-          u = m.PI * 2,
-          v = m.cos,
-          z = m.random;
-        c.width = w * pr;
-        c.height = h * pr;
-        x.scale(pr, pr);
-        x.globalAlpha = 0.6;
-
-        function evanyou() {
-          x.clearRect(0, 0, w, h)
-          q = [{x: 0, y: h * .7 + f}, {x: 0, y: h * .7 - f}]
-          while (q[1].x < w + f) d(q[0], q[1])
-        }
-
-        function d(i, j) {
-          x.beginPath()
-          x.moveTo(i.x, i.y)
-          x.lineTo(j.x, j.y)
-          var k = j.x + (z() * 2 - 0.25) * f,
-            n = y(j.y)
-          x.lineTo(k, n)
-          x.closePath()
-          r -= u / -50
-          x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
-          x.fill()
-          q[0] = q[1]
-          q[1] = {x: k, y: n}
-        }
-
-        function y(p) {
-          var t = p + (z() * 2 - 1.1) * f
-          return (t > h || t < 0) ? y(p) : t
-        }
-
-        document.onclick = evanyou
-        document.ontouchstart = evanyou
-        evanyou();
-      },
       /**div拖拽宽度**/
       dragControllerDivs: function () {
         console.log("开始拖拽")
@@ -607,294 +465,7 @@
           };
         }
       },
-      /**背景特效彩带**/
-      backgroundcss: function () {
-        (function (name, factory) {
-          if (typeof window === "object") {
-            window[name] = factory();
-          }
-        })("Ribbons", function () {
-          var _w = window, _b = document.body, _d = document.documentElement;
-          var random = function () {
-            if (arguments.length === 1) {
-              if (Array.isArray(arguments[0])) {
-                var index = Math.round(random(0, arguments[0].length - 1));
-                return arguments[0][index];
-              }
-              return random(0, arguments[0]);
-            } else if (arguments.length === 2) {
-              return Math.random() * (arguments[1] - arguments[0]) + arguments[0];
-            }
-            return 0;
-          };
-          var screenInfo = function (e) {
-            var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
-              height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
-              scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
-              scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
-            return {
-              width: width,
-              height: height,
-              ratio: width / height,
-              centerx: width / 2,
-              centery: height / 2,
-              scrollx: scrollx,
-              scrolly: scrolly
-            };
-          };
-          var mouseInfo = function (e) {
-            var screen = screenInfo(e), mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
-              mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
-            return {
-              mousex: mousex,
-              mousey: mousey,
-              centerx: mousex - screen.width / 2,
-              centery: mousey - screen.height / 2
-            };
-          };
-          var Point = function (x, y) {
-            this.x = 0;
-            this.y = 0;
-            this.set(x, y);
-          };
-          Point.prototype = {
-            constructor: Point, set: function (x, y) {
-              this.x = x || 0;
-              this.y = y || 0;
-            }, copy: function (point) {
-              this.x = point.x || 0;
-              this.y = point.y || 0;
-              return this;
-            }, multiply: function (x, y) {
-              this.x *= x || 1;
-              this.y *= y || 1;
-              return this;
-            }, divide: function (x, y) {
-              this.x /= x || 1;
-              this.y /= y || 1;
-              return this;
-            }, add: function (x, y) {
-              this.x += x || 0;
-              this.y += y || 0;
-              return this;
-            }, subtract: function (x, y) {
-              this.x -= x || 0;
-              this.y -= y || 0;
-              return this;
-            }, clampX: function (min, max) {
-              this.x = Math.max(min, Math.min(this.x, max));
-              return this;
-            }, clampY: function (min, max) {
-              this.y = Math.max(min, Math.min(this.y, max));
-              return this;
-            }, flipX: function () {
-              this.x *= -1;
-              return this;
-            }, flipY: function () {
-              this.y *= -1;
-              return this;
-            }
-          };
-          var Factory = function (options) {
-            this._canvas = null;
-            this._context = null;
-            this._sto = null;
-            this._width = 0;
-            this._height = 0;
-            this._scroll = 0;
-            this._ribbons = [];
-            this._options = {
-              colorSaturation: "80%",
-              colorBrightness: "60%",
-              colorAlpha: 0.65,
-              colorCycleSpeed: 6,
-              verticalPosition: "center",
-              horizontalSpeed: 200,
-              ribbonCount: 4,
-              strokeSize: 0,
-              parallaxAmount: -0.5,
-              animateSections: true
-            };
-            this._onDraw = this._onDraw.bind(this);
-            this._onResize = this._onResize.bind(this);
-            this._onScroll = this._onScroll.bind(this);
-            this.setOptions(options);
-            this.init();
-          };
-          Factory.prototype = {
-            constructor: Factory, setOptions: function (options) {
-              if (typeof options === "object") {
-                for (var key in options) {
-                  if (options.hasOwnProperty(key)) {
-                    this._options[key] = options[key];
-                  }
-                }
-              }
-            }, init: function () {
-              try {
-                this._canvas = document.createElement("canvas");
-                this._canvas.style["display"] = "block";
-                this._canvas.style["position"] = "fixed";
-                this._canvas.style["margin"] = "0";
-                this._canvas.style["padding"] = "0";
-                this._canvas.style["border"] = "0";
-                this._canvas.style["outline"] = "0";
-                this._canvas.style["left"] = "0";
-                this._canvas.style["top"] = "0";
-                this._canvas.style["width"] = "100%";
-                this._canvas.style["height"] = "100%";
-                this._canvas.style["z-index"] = "-1";
-                this._canvas.style["background-color"] = "#ffffff";
-                this._canvas.id = "bgCanvas";
-                this._onResize();
-                this._context = this._canvas.getContext("2d");
-                this._context.clearRect(0, 0, this._width, this._height);
-                this._context.globalAlpha = this._options.colorAlpha;
-                // 这里可以设置是否随着窗口的滚动而滚动
-                window.addEventListener("resize", this._onResize);
-                window.addEventListener("scroll", this._onScroll);
-                // 这里设置添加的位置
-                var body_ = document.getElementsByTagName('body')[0];
-                body_.appendChild(this._canvas);
-              } catch (e) {
-                console.warn("Canvas Context Error: " + e.toString());
-                return;
-              }
-              this._onDraw();
-            }, addRibbon: function () {
-              var dir = Math.round(random(1, 9)) > 5 ? "right" : "left", stop = 1000, hide = 200, min = 0 - hide,
-                max = this._width + hide, movex = 0, movey = 0, startx = dir === "right" ? min : max,
-                starty = Math.round(random(0, this._height));
-              if (/^(top|min)$/i.test(this._options.verticalPosition)) {
-                starty = 0 + hide;
-              } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
-                starty = this._height / 2;
-              } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
-                starty = this._height - hide;
-              }
-              var ribbon = [], point1 = new Point(startx, starty), point2 = new Point(startx, starty), point3 = null,
-                color = Math.round(random(0, 360)), delay = 0;
-              while (true) {
-                if (stop <= 0) break;
-                stop--;
-                movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
-                movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
-                point3 = new Point();
-                point3.copy(point2);
-                if (dir === "right") {
-                  point3.add(movex, movey);
-                  if (point2.x >= max) break;
-                } else if (dir === "left") {
-                  point3.subtract(movex, movey);
-                  if (point2.x <= min) break;
-                }
-                ribbon.push({
-                  point1: new Point(point1.x, point1.y),
-                  point2: new Point(point2.x, point2.y),
-                  point3: point3,
-                  color: color,
-                  delay: delay,
-                  dir: dir,
-                  alpha: 0,
-                  phase: 0
-                });
-                point1.copy(point2);
-                point2.copy(point3);
-                delay += 4;
-                color += this._options.colorCycleSpeed;
-              }
-              this._ribbons.push(ribbon);
-            }, _drawRibbonSection: function (section) {
-              if (section) {
-                if (section.phase >= 1 && section.alpha <= 0) {
-                  return true;
-                }
-                if (section.delay <= 0) {
-                  section.phase += 0.02;
-                  section.alpha = Math.sin(section.phase) * 1;
-                  section.alpha = section.alpha <= 0 ? 0 : section.alpha;
-                  section.alpha = section.alpha >= 1 ? 1 : section.alpha;
-                  if (this._options.animateSections) {
-                    var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
-                    if (section.dir === "right") {
-                      section.point1.add(mod, 0);
-                      section.point2.add(mod, 0);
-                      section.point3.add(mod, 0);
-                    } else {
-                      section.point1.subtract(mod, 0);
-                      section.point2.subtract(mod, 0);
-                      section.point3.subtract(mod, 0);
-                    }
-                    section.point1.add(0, mod);
-                    section.point2.add(0, mod);
-                    section.point3.add(0, mod);
-                  }
-                } else {
-                  section.delay -= 0.5;
-                }
-                var s = this._options.colorSaturation, l = this._options.colorBrightness,
-                  c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
-                this._context.save();
-                if (this._options.parallaxAmount !== 0) {
-                  this._context.translate(0, this._scroll * this._options.parallaxAmount);
-                }
-                this._context.beginPath();
-                this._context.moveTo(section.point1.x, section.point1.y);
-                this._context.lineTo(section.point2.x, section.point2.y);
-                this._context.lineTo(section.point3.x, section.point3.y);
-                this._context.fillStyle = c;
-                this._context.fill();
-                if (this._options.strokeSize > 0) {
-                  this._context.lineWidth = this._options.strokeSize;
-                  this._context.strokeStyle = c;
-                  this._context.lineCap = "round";
-                  this._context.stroke();
-                }
-                this._context.restore();
-              }
-              return false;
-            }, _onDraw: function () {
-              for (var i = 0, t = this._ribbons.length; i < t; ++i) {
-                if (!this._ribbons[i]) {
-                  this._ribbons.splice(i, 1);
-                }
-              }
-              this._context.clearRect(0, 0, this._width, this._height);
-              for (var a = 0; a < this._ribbons.length; ++a) {
-                var ribbon = this._ribbons[a], numSections = ribbon.length, numDone = 0;
-                for (var b = 0; b < numSections; ++b) {
-                  if (this._drawRibbonSection(ribbon[b])) {
-                    numDone++;
-                  }
-                }
-                if (numDone >= numSections) {
-                  this._ribbons[a] = null;
-                }
-              }
-              if (this._ribbons.length < this._options.ribbonCount) {
-                this.addRibbon();
-              }
-              requestAnimationFrame(this._onDraw);
-            }, _onResize: function (e) {
-              var screen = screenInfo(e);
-              this._width = screen.width;
-              this._height = screen.height;
-              if (this._canvas) {
-                this._canvas.width = this._width;
-                this._canvas.height = this._height;
-                if (this._context) {
-                  this._context.globalAlpha = this._options.colorAlpha;
-                }
-              }
-            }, _onScroll: function (e) {
-              var screen = screenInfo(e);
-              this._scroll = screen.scrolly;
-            }
-          };
-          return Factory;
-        });
-        new Ribbons();
-      },
+
 
 
       /**自动获取高度**/
@@ -1000,13 +571,13 @@
       },
       /** 查询部门下拉树结构 */
       getTreeselect() {
-        if (this.zNodes != null && this.zNodes.length != 0) {
-          this.menuOptions = [];
-          const data = {menuId: 0, menuName: '顶级菜单', children: []};
-          data.children = this.handleTree(this.zNodes, "menuId", "parentId");
-          this.menuOptions.push(data);
-          return;
-        }
+        // if (this.zNodes != null && this.zNodes.length != 0) {
+        //   this.menuOptions = [];
+        //   const data = {menuId: 0, menuName: '顶级菜单', children: []};
+        //   data.children = this.handleTree(this.zNodes, "menuId", "parentId");
+        //   this.menuOptions.push(data);
+        //   return;
+        // }
 
         listMenuByUserId().then(response => {
           this.menuOptions = [];
@@ -1020,12 +591,23 @@
         this.open = false;
         this.reset();
       },
+
+
+
       /** 查询用户的书签菜单Menu */
       getList() {
-        listMenuByUserId().then(response => {
+        // this.queryParams.menuId = 0;
+        listByMenuId(0).then(response => {
           this.zNodes = response.data;
+          //判断是否有子节点--通过isContainSon是否大于0（也就是有终端）,添加父节点为true
+          this.zNodes.forEach((item)=>{
+            if(item.subordinate == 1){
+              item.isParent = true;
+            }
+          })
           //加载Ztree树
-          $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(this.expandAll);
+          // $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(this.expandAll);
+          $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
         });
 
       },
@@ -1048,7 +630,8 @@
                 if (response.code === 200) {
                   this.msgSuccess("修改成功");
                   this.open = false;
-                  this.getList();
+                  // this.getList();
+                  //https://www.cnblogs.com/remember-forget/p/8461212.html
                 }
               });
             } else {
@@ -1099,7 +682,34 @@
           };
         this.resetForm("form");
       },
+      beforeExpand: function(treeId, treeNode){
+        console.log("1beforeExpand：treeNode.tId="+treeNode.tId)
+        // var id=treeNode.tId + "_ico";
+        // console.log("id:"+id+"document.getElementById(id):"+document.getElementById(id))
+        // //异步加载动画
+        // var classVal = document.getElementById(id).getAttribute("class");
+        // //添加
+        // classVal = classVal.concat(" sayncIoc");
+        // document.getElementById(id).setAttribute("class",classVal );
+        // console.log("document.getElementById(id).getAttribute(\"class\")="+document.getElementById(id).getAttribute("class"))
+        // //删除
+        //  classVal = classVal.replace("sayncIoc","");
+        // document.getElementById(id).setAttribute("class",classVal );
 
+      },
+      /** 异步获取节点 处理数据*/
+      ajaxDataFilter: function (treeId, parentNode, responseData){
+        console.log("2ajaxDataFilter")
+        var ajaxData = responseData.data;
+        if (responseData&&ajaxData.length!=0) {
+          for(var i =0; i < ajaxData.length; i++) {
+            if(ajaxData[i].subordinate == 1){
+              ajaxData[i].isParent = true;
+            }
+          }
+        }
+        return ajaxData;
+      },
       addDiyDom: function (treeId, treeNode) {
         // console.log("自定义ztree:"+treeId.tId+"___treeNode："+treeNode.tId)
         var spaceWidth = 20;
@@ -1131,14 +741,13 @@
         // console.log("进入addHoverDom:统计"+treeNode.tId+"_sz 的数量:"+confCount);
         // console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount);
         if (confCount > 0) return;
+        $("." + treeNode.tId + "_sz").unbind().remove();
+        $("." + treeNode.tId + "_count").unbind().remove();
         //if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
         var switchObjspan = $("#" + treeNode.tId + "_span");
-        var editStr = "<span class=" + treeNode.tId + "_sz data-parentId=" + treeNode.parentId + " data-menuId=" + treeNode.menuId + " onclick='editBookmark(this)' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'><i class='el-icon-edit'></i></span>";
+        var editStr = "<span class=" + treeNode.tId + "_sz data-parentId=" + treeNode.parentId + " data-menuId=" + treeNode.menuId + "  onclick='editBookmark(this)' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'><i class='el-icon-edit'></i></span>";
         switchObjspan.after(editStr);
 
-        $("." + treeNode.tId + "_count").unbind().remove();
-
-
         //绑定编辑
         // document.getElementsByClassName(treeNode.tId + "_sz").onclick=function(){alert(this.value)};
         //document.getElementsByClassName(treeNode.tId + "_sz").addEventListener('click', editBookmark);
@@ -1148,16 +757,16 @@
       removeHoverDom: function (treeId, treeNode) {
         //console.log("进入removeHoverDom:"+"." + treeNode.tId + "_sz")
         //if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
-
+        $("." + treeNode.tId + "_count").unbind().remove();
         $("." + treeNode.tId + "_sz").unbind().remove();
         var switchObjspan = $("#" + treeNode.tId + "_span");
-        var editStr = "<span class=" + treeNode.tId + "_count onclick='alert(1111111);return false;' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'>" + treeNode.bookmarkCount + "</span>";
+        var editStr = "<span class=" + treeNode.tId + "_count  style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'>" + treeNode.bookmarkCount + "</span>";
         switchObjspan.after(editStr);
 
       },
       //点击展开
-      beforeClick: function (treeId, treeNode) {
-
+      BeforeClick: function (treeId, treeNode) {
+        console.log("展开---")
         //if (treeNode.level != 19990 ) {
         //    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
         //    zTree.expandNode(treeNode);
@@ -1166,6 +775,43 @@
         // }
         //return true;
       },
+      //点击节点 然后异步加载 伪异步加载树
+      zTreeBeforeExpand: function (event, treeId, treeNode) {
+        console.log("捕获展开---异步加载树")
+        console.log("1.开始准备发送请求!")
+        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
+        var parentZNode = treeObj.getNodeByParam("menuId", treeNode.menuId, null);//获取指定父节点
+        const childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
+        //点击事件后将子节点清空后在进行拼接
+        //删除指定节点
+        console.log("childNodes"+JSON.stringify(childNodes))
+        for (var i = 0; i < childNodes.length; i++) {
+          console.log(treeNode+"  "+childNodes[i])
+          if(childNodes[i].menuId!=treeNode.menuId){
+            treeObj.removeNode(childNodes[i]);
+          }
+        }
+        //因为子节点还包括组织，所以这里需要筛选一下
+        // if(treeNode.isParent){
+        console.log("2.开始准备发送请求!")
+        listByMenuId(treeNode.menuId).then(response => {
+          if (response.data.length!=0) {
+            //点击事件后将子节点清空后在进行拼接
+            treeNode.children = [];
+            console.log("当前节点的treeNode.children："+treeNode.children)
+            const childrenData=eval(response.data)
+            console.log("3.获取数据"+JSON.stringify(childrenData))
+            //判断子节点是否包含子元素
+            for(var i in childrenData){
+              if(childrenData[i].subordinate == 1){
+                childrenData[i].isParent = true;
+              }
+            };
+            // treeObj.refresh();
+            treeObj.addNodes(parentZNode,childrenData, false);    //添加节点
+          }
+        });
+      },
       /** 点击跳转**/
       //节点点击
       OnClickzTree: function (event, treeId, treeNode) {
@@ -1183,15 +829,10 @@
           }
         })
 
-
-        // $("." + treeNode.tId + "_sz").unbind().remove();
-        // var switchObjspan = $("#" + treeNode.tId + "_span");
-        //
-        // var confCount = $("#" + treeNode.tId + "_count").length;
-        // if (confCount>0) return;
-        // var editStr = "<span class="+treeNode.tId+"_count onclick='alert(1111111);return false;' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'>12</span>";
-        // switchObjspan.after(editStr);
-        // return false;
+        $("." + treeNode.tId + "_sz").unbind().remove();
+        var switchObjspan = $("#" + treeNode.tId + "_span");
+        var editStr = "<span class=" + treeNode.tId + "_count onclick='alert(1111111);return false;' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:0.8rem' onfocus='this.blur();'>" + treeNode.bookmarkCount + "</span>";
+        switchObjspan.after(editStr);
       },
       //显示隐藏 ztree菜单
       zreaZtree: function () {
@@ -1323,7 +964,13 @@
     font-family: "Merriweather", "Open Sans", "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
   }
 
-
+.sayncIoc{
+  margin-top:-2px;
+  background:url(https://up.raindrop.io/collection/templates/social-media-logos-6/47social.png) 0 0 no-repeat;
+  background-position:center;
+  background-size:21px 21px;
+  border-radius: 50%;
+}
   .ztree li ul {
     margin: 0;
     padding: 0
@@ -1377,9 +1024,14 @@
   }
 
   /*.ztree li a.level0 span {font-size: 100%;font-weight: bold}*/
-  .ztree li span.button {
+  .ztree li span.noline_open {
     background-image: url("../ztree/bottom.png");
   }
+  .ztree li span.ico_loading {
+    background-image: url("../ztree/loading.gif");
+    /*margin-right:2px; background:url(../ztree/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle*/
+  }
+
 
   .ztree li span.button.switch.level0 {
     width: 20px;

ruoyi-ui/src/views/bookmark/ztree/jquery.ztree.core.js

@@ -1366,7 +1366,7 @@
         if (!node.isAjaxing) {
           var isParent = data.nodeIsParent(setting, node);
           var icon = (isParent && node.iconOpen && node.iconClose) ? (node.open ? node.iconOpen : node.iconClose) : node[setting.data.key.icon];
-          if (icon) icoStyle.push("background:url(", icon, ") 0 0 no-repeat;background-position:center;background-size:21px 21px;border-radius: 50%;");
+          if (icon) icoStyle.push("background:url(", icon, ") 0 0 no-repeat;background-position:center;background-size:20px 20px;border-radius: 50%;");
           if (setting.view.showIcon == false || !tools.apply(setting.view.showIcon, [setting.treeId, node], true)) {
             icoStyle.push("display:none;");
           }

ruoyi-ui/src/views/bookmark/ztree/zTreeStyle.css

@@ -70,13 +70,13 @@ website:	http://code.google.com/p/jquerytree/
 .ztree li span.button.bottom_docu{background-position:-56px -36px}
 .ztree li span.button.noline_docu{ background:none;}
 
-.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
 .ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
 .ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
 .ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
 .ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
 
-/*.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}*/
+/*.ztree li span.button.ico_loading{margin-right:2px; background:url(/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}*/
 
 ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}