搜索

ZZJ

2021-12-20 d7fe3b19ab7a906b30ad8ba73e6cd56cb5deedef

搜索

 src/components/giantTree/zTree/ztree.vue

@@ -1,15 +1,25 @@
<template>
  <div class="ztree" :id="ztreeId"></div>
  <div>
    <div class="search">
      <el-input placeholder="搜索" v-model="keyWord">
        <i slot="suffix" class="el-input__icon el-icon-search" id="key"></i>
      </el-input>
    </div>
    <div class="ztree" :id="ztreeId"></div>
  </div>
</template>

<script>
import * as $ from "jquery";
import { Loading } from "element-ui";

if (!window.jQuery) {
  window.jQuery = $;
}

// require("@ztree/ztree_v3/js/jquery.ztree.all");
require("./ztree_v3/jquery.ztree.all");
require("./ztree_v3/jquery.ztree.exhide");

export default {
  props: {
@@ -96,6 +106,10 @@
          },
        },
      },
      keyWord: "",
      options: {
        target: "",
      },
    };
  },
  watch: {
@@ -113,6 +127,8 @@
            Object.assign({}, this.ztreeSetting, this.setting),
            this.list
          );
          console.log("---------");
          this.fuzzySearch(this.ztreeObj, "#key", null, true); //初始化模糊搜索方法
          this.$emit("onCreated", this.ztreeObj);
        });
      },
@@ -322,6 +338,138 @@
        if (btn) {
          item.removeChild(item.querySelector(".icontupian1"));
        }
      }
    },
    fuzzySearch(zTreeObj, searchField, isHighLight, isExpand) {
      const _this = this;

      if (!zTreeObj) {
        alert("fail to get ztree object");
      }
      var nameKey = zTreeObj.setting.data.key.name; //get the key of the node name
      isHighLight = isHighLight === false ? false : true; //default true, only use false to disable highlight
      isExpand = isExpand ? true : false; // not to expand in default
      zTreeObj.setting.view.nameIsHTML = isHighLight; //allow use html in node name for highlight use

      var metaChar = "[\\[\\]\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]"; //js meta characters
      var rexMeta = new RegExp(metaChar, "gi"); //regular expression to match meta characters

      // keywords filter function
      function ztreeFilter(zTreeObj, _keywords, callBackFunc) {
        if (!_keywords) {
          _keywords = ""; //default blank for _keywords
        }

        // function to find the matching node
        function filterFunc(node) {
          if (node && node.oldname && node.oldname.length > 0) {
            node[nameKey] = node.oldname; //recover oldname of the node if exist
          }
          zTreeObj.updateNode(node); //update node to for modifications take effect
          if (_keywords.length == 0) {
            //return true to show all nodes if the keyword is blank
            zTreeObj.showNode(node);
            zTreeObj.expandNode(node, isExpand);
            return true;
          }
          //transform node name and keywords to lowercase
          if (
            node[nameKey] &&
            node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase()) != -1
          ) {
            if (isHighLight) {
              //highlight process
              //a new variable 'newKeywords' created to store the keywords information
              //keep the parameter '_keywords' as initial and it will be used in next node
              //process the meta characters in _keywords thus the RegExp can be correctly used in str.replace
              var newKeywords = _keywords.replace(rexMeta, function (matchStr) {
                //add escape character before meta characters
                return "\\" + matchStr;
              });
              node.oldname = node[nameKey]; //store the old name
              var rexGlobal = new RegExp(newKeywords, "gi"); //'g' for global,'i' for ignore case
              //use replace(RegExp,replacement) since replace(/substr/g,replacement) cannot be used here
              node[nameKey] = node.oldname.replace(
                rexGlobal,
                function (originalText) {
                  //highlight the matching words in node name
                  var highLightText =
                    '<span style="color: whitesmoke;background-color: darkred;">' +
                    originalText +
                    "</span>";
                  return highLightText;
                }
              );
              zTreeObj.updateNode(node); //update node for modifications take effect
            }
            zTreeObj.showNode(node); //show node with matching keywords
            return true; //return true and show this node
          }

          zTreeObj.hideNode(node); // hide node that not matched
          return false; //return false for node not matched
        }

        var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //get all nodes that would be shown
        processShowNodes(nodesShow, _keywords); //nodes should be reprocessed to show correctly
      }

      /**
       * reprocess of nodes before showing
       */
      function processShowNodes(nodesShow, _keywords) {
        if (nodesShow && nodesShow.length > 0) {
          //process the ancient nodes if _keywords is not blank
          if (_keywords.length > 0) {
            $.each(nodesShow, function (n, obj) {
              var pathOfOne = obj.getPath(); //get all the ancient nodes including current node
              if (pathOfOne && pathOfOne.length > 0) {
                //i < pathOfOne.length-1 process every node in path except self
                for (var i = 0; i < pathOfOne.length - 1; i++) {
                  zTreeObj.showNode(pathOfOne[i]); //show node
                  zTreeObj.expandNode(pathOfOne[i], true); //expand node
                }
              }
            });
          } else {
            //show all nodes when _keywords is blank and expand the root nodes
            var rootNodes = zTreeObj.getNodesByParam("level", "0"); //get all root nodes
            $.each(rootNodes, function (n, obj) {
              zTreeObj.expandNode(obj, true); //expand all root nodes
            });
          }
        }
      }

      //listen to change in input element
      $(searchField).bind("click", function () {
        _this.options.target = document.querySelector(
          "#" + _this.ztreeId
        ).parentNode.parentNode;
        console.log(_this.options.target);
        let loadingInstance = Loading.service(_this.options);
        console.log(_this.keyWord);
        // var _keywords = $(this).val();
        searchNodeLazy(_this.keyWord); //call lazy load
        loadingInstance.close();
      });

      var timeoutId = null;
      var lastKeyword = "";
      // excute lazy load once after input change, the last pending task will be cancled
      function searchNodeLazy(_keywords) {
        if (timeoutId) {
          //clear pending task
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(function () {
          if (lastKeyword === _keywords) {
            return;
          }
          ztreeFilter(zTreeObj, _keywords); //lazy load ztreeFilter function
          // $(searchField).focus();//focus input field again after filtering
          lastKeyword = _keywords;
        }, 500);
      }
    },
  },
@@ -659,3 +807,18 @@
  position: absolute;
}
</style>

<style scoped lang="scss">
.search {
  width: 300px;

  ::v-deep .el-input__suffix {
    right: 0;
    width: 50px;
    background: skyblue;
    color: #fff;
    cursor: pointer;
    background-color: rgb(61, 104, 255);
  }
}
</style>

 src/components/giantTree/zTree/ztree_v3/jquery.ztree.exhide.js

New file
@@ -0,0 +1,285 @@
!(function(e) {

  var i = {

    view: {

      clearOldFirstNode: function(e, i) {

        for (var o = i.getNextNode(); o; ) {

          if (o.isFirstNode) {

            (o.isFirstNode = !1), c.setNodeLineIcos(e, o);

            break;

          }

          if (o.isLastNode) break;

          o = o.getNextNode();

        }

      },

      clearOldLastNode: function(e, i, o) {

        for (var d = i.getPreNode(); d; ) {

          if (d.isLastNode) {

            (d.isLastNode = !1), o && c.setNodeLineIcos(e, d);

            break;

          }

          if (d.isFirstNode) break;

          d = d.getPreNode();

        }

      },

      makeDOMNodeMainBefore: function(e, i, o) {

        var d = h.isHidden(i, o);

        e.push(

          "<li ",

          d ? "style='display:none;' " : "",

          "id='",

          o.tId,

          "' class='",

          n.className.LEVEL,

          o.level,

          "' tabindex='0' hidefocus='true' treenode>"

        );

      },

      showNode: function(e, i, o) {

        h.isHidden(e, i, !1), h.initShowForExCheck(e, i), d(i, e).show();

      },

      showNodes: function(e, i, o) {

        if (i && 0 != i.length) {

          var d,

            t,

            n = {};

          for (d = 0, t = i.length; d < t; d++) {

            var s = i[d];

            if (!n[s.parentTId]) {

              var r = s.getParentNode();

              n[s.parentTId] = null === r ? h.getRoot(e) : s.getParentNode();

            }

            c.showNode(e, s, o);

          }

          for (var a in n) {

            var N = h.nodeChildren(e, n[a]);

            c.setFirstNodeForShow(e, N), c.setLastNodeForShow(e, N);

          }

        }

      },

      hideNode: function(e, i, o) {

        h.isHidden(e, i, !0),

          (i.isFirstNode = !1),

          (i.isLastNode = !1),

          h.initHideForExCheck(e, i),

          c.cancelPreSelectedNode(e, i),

          d(i, e).hide();

      },

      hideNodes: function(e, i, o) {

        if (i && 0 != i.length) {

          var d,

            t,

            n = {};

          for (d = 0, t = i.length; d < t; d++) {

            var s = i[d];

            if ((s.isFirstNode || s.isLastNode) && !n[s.parentTId]) {

              var r = s.getParentNode();

              n[s.parentTId] = null === r ? h.getRoot(e) : s.getParentNode();

            }

            c.hideNode(e, s, o);

          }

          for (var a in n) {

            var N = h.nodeChildren(e, n[a]);

            c.setFirstNodeForHide(e, N), c.setLastNodeForHide(e, N);

          }

        }

      },

      setFirstNode: function(e, i) {

        var o = h.nodeChildren(e, i),

          d = h.isHidden(e, o[0], !1);

        0 < o.length && !d

          ? (o[0].isFirstNode = !0)

          : 0 < o.length && c.setFirstNodeForHide(e, o);

      },

      setLastNode: function(e, i) {

        var o = h.nodeChildren(e, i),

          d = h.isHidden(e, o[0]);

        0 < o.length && !d

          ? (o[o.length - 1].isLastNode = !0)

          : 0 < o.length && c.setLastNodeForHide(e, o);

      },

      setFirstNodeForHide: function(e, i) {

        var o, d, t;

        for (d = 0, t = i.length; d < t && !(o = i[d]).isFirstNode; d++) {

          if (!h.isHidden(e, o) && !o.isFirstNode) {

            (o.isFirstNode = !0), c.setNodeLineIcos(e, o);

            break;

          }

          o = null;

        }

        return o;

      },

      setFirstNodeForShow: function(e, i) {

        var o, d, t, n, s;

        for (d = 0, t = i.length; d < t; d++) {

          o = i[d];

          var r = h.isHidden(e, o);

          if (!n && !r && o.isFirstNode) {

            n = o;

            break;

          }

          if (n || r || o.isFirstNode) {

            if (n && o.isFirstNode) {

              (o.isFirstNode = !1), (s = o), c.setNodeLineIcos(e, o);

              break;

            }

            o = null;

          } else (o.isFirstNode = !0), (n = o), c.setNodeLineIcos(e, o);

        }

        return { new: n, old: s };

      },

      setLastNodeForHide: function(e, i) {

        var o, d;

        for (d = i.length - 1; 0 <= d && !(o = i[d]).isLastNode; d--) {

          if (!h.isHidden(e, o) && !o.isLastNode) {

            (o.isLastNode = !0), c.setNodeLineIcos(e, o);

            break;

          }

          o = null;

        }

        return o;

      },

      setLastNodeForShow: function(e, i) {

        var o, d, t, n;

        for (d = i.length - 1; 0 <= d; d--) {

          o = i[d];

          var s = h.isHidden(e, o);

          if (!t && !s && o.isLastNode) {

            t = o;

            break;

          }

          if (t || s || o.isLastNode) {

            if (t && o.isLastNode) {

              (o.isLastNode = !1), (n = o), c.setNodeLineIcos(e, o);

              break;

            }

            o = null;

          } else (o.isLastNode = !0), (t = o), c.setNodeLineIcos(e, o);

        }

        return { new: t, old: n };

      },

    },

    data: {

      initHideForExCheck: function(e, i) {

        h.isHidden(e, i) &&

          e.check &&

          e.check.enable &&

          (void 0 === i._nocheck &&

            ((i._nocheck = !!i.nocheck), (i.nocheck = !0)),

          (i.check_Child_State = -1),

          c.repairParentChkClassWithSelf &&

            c.repairParentChkClassWithSelf(e, i));

      },

      initShowForExCheck: function(e, i) {

        if (!h.isHidden(e, i) && e.check && e.check.enable) {

          if (

            (void 0 !== i._nocheck &&

              ((i.nocheck = i._nocheck), delete i._nocheck),

            c.setChkClass)

          ) {

            var o = d(i, n.id.CHECK, e);

            c.setChkClass(e, o, i);

          }

          c.repairParentChkClassWithSelf &&

            c.repairParentChkClassWithSelf(e, i);

        }

      },

    },

  };

  e.extend(!0, e.fn.zTree._z, i);

  var o = e.fn.zTree,

    t = o._z.tools,

    n = o.consts,

    c = o._z.view,

    h = o._z.data,

    d = (o._z.event, t.$);

  (h.isHidden = function(e, i, o) {

    if (!i) return !1;

    var d = e.data.key.isHidden;

    return (

      void 0 !== o

        ? ("string" == typeof o && (o = t.eqs(o, "true")),

          (o = !!o),

          (i[d] = o))

        : "string" == typeof i[d]

        ? (i[d] = t.eqs(i[d], "true"))

        : (i[d] = !!i[d]),

      i[d]

    );

  }),

    h.exSetting({ data: { key: { isHidden: "isHidden" } } }),

    h.addInitNode(function(e, i, o, d, t, n, s) {

      var r = h.isHidden(e, o);

      h.isHidden(e, o, r), h.initHideForExCheck(e, o);

    }),

    h.addBeforeA(function(e, i, o) {}),

    h.addZTreeTools(function(t, n) {

      (n.showNodes = function(e, i) {

        c.showNodes(t, e, i);

      }),

        (n.showNode = function(e, i) {

          e && c.showNodes(t, [e], i);

        }),

        (n.hideNodes = function(e, i) {

          c.hideNodes(t, e, i);

        }),

        (n.hideNode = function(e, i) {

          e && c.hideNodes(t, [e], i);

        });

      var s = n.checkNode;

      s &&

        (n.checkNode = function(e, i, o, d) {

          (e && h.isHidden(t, e)) || s.apply(n, arguments);

        });

    });

  var a = h.initNode;

  h.initNode = function(e, i, o, d, t, n, s) {

    var r = (d || h.getRoot(e))[e.data.key.children];

    (h.tmpHideFirstNode = c.setFirstNodeForHide(e, r)),

      (h.tmpHideLastNode = c.setLastNodeForHide(e, r)),

      s &&

        (c.setNodeLineIcos(e, h.tmpHideFirstNode),

        c.setNodeLineIcos(e, h.tmpHideLastNode)),

      (t = h.tmpHideFirstNode === o),

      (n = h.tmpHideLastNode === o),

      a && a.apply(h, arguments),

      s && n && c.clearOldLastNode(e, o, s);

  };

  var s = h.makeChkFlag;

  s &&

    (h.makeChkFlag = function(e, i) {

      (i && h.isHidden(e, i)) || s.apply(h, arguments);

    });

  var r = h.getTreeCheckedNodes;

  r &&

    (h.getTreeCheckedNodes = function(e, i, o, d) {

      if (i && 0 < i.length) {

        var t = i[0].getParentNode();

        if (t && h.isHidden(e, t)) return [];

      }

      return r.apply(h, arguments);

    });

  var N = h.getTreeChangeCheckedNodes;

  N &&

    (h.getTreeChangeCheckedNodes = function(e, i, o) {

      if (i && 0 < i.length) {

        var d = i[0].getParentNode();

        if (d && h.isHidden(e, d)) return [];

      }

      return N.apply(h, arguments);

    });

  var l = c.expandCollapseSonNode;

  l &&

    (c.expandCollapseSonNode = function(e, i, o, d, t) {

      (i && h.isHidden(e, i)) || l.apply(c, arguments);

    });

  var f = c.setSonNodeCheckBox;

  f &&

    (c.setSonNodeCheckBox = function(e, i, o, d) {

      (i && h.isHidden(e, i)) || f.apply(c, arguments);

    });

  var u = c.repairParentChkClassWithSelf;

  u &&

    (c.repairParentChkClassWithSelf = function(e, i) {

      (i && h.isHidden(e, i)) || u.apply(c, arguments);

    });

})(jQuery);


 src/pages/gb28181/index/App.vue

@@ -270,6 +270,10 @@
        check: {

          enable: true,

        },

        view: {

          showLine: true,

          showIcon: true, // default to hide icon

        },

      },

      rules: {

        ip: [