ztree 增删改查功能

<template>
  <div class="ztreebox">
    <div v-if="editEnable" class="searchContainer">
      <el-input
        v-model="searchtext"
        class="searchinput"
        type="text"
        size="small"
        @focus="showMenu"
      />
      <el-button
        size="small"
        type="primary"
        style=" 25%;"
        @click="searchFun"
        >搜索</el-button
      >
    </div>

    <ul id="treeDemo" class="ztree" />
    <el-row>
      <el-col :span="12">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="text"
          @click="addRoot"
          v-if="editEnable"
          >新增根节点</el-button
        >
      </el-col>
    </el-row>
    <div v-show="isShow">没有找到哦~</div>
  </div>
</template>
<script>
import $ from "jquery";
window.$ = $;
window.jQuery = $;
import "../plugin/ztreeJS/js/jquery.ztree.core";
import "../plugin/ztreeJS/js/jquery.ztree.excheck";
import "../plugin/ztreeJS/js/jquery.ztree.exedit";
import "../plugin/ztreeJS/js/jquery.ztree.exhide.js";
export default {
  $,
  props: {
    zNodes: {
      type: Array,
      default: () => [],
    },
    editEnable: {
      type: Boolean,
      default: false,
    },
    disabledId: {
      type: String,
      default: "",
    },
    status: Boolean,
    // selectedNodeId: ''
  },
  data() {
    return {
      selectedNode: {},
      setting: {
        treeId: "id", // 节点id
        view: {
          showIcon: false,
          addDiyDom: this.addDiyDom,
          addHoverDom: this.editEnable ? this.addHoverDom : "",
          removeHoverDom: this.editEnable ? this.removeHoverDom : "",
          selectedMulti: false,
        },
        edit: {
          enable: this.editEnable, // 根据条件判断是否显示编辑删除按钮
          editNameSelectAll: true, // 编辑名称 input 初次显示时,设置 txt 内容是否为全选状态
          removeTitle: "删除",
          renameTitle: "重命名",
        },
        data: {
          key: {
            name: "name", //
            children: "children", //zTree 节点数据中保存子节点数据的属性名称。
            isParent: "isParent", //zTree 节点数据保存节点是否为父节点的属性名称。
          },
          keep: {
            parent: true,
            leaf: true,
          },
          simpleData: {
            enable: true, // 显示层级
            idKey: "id", // 唯一标识的属性名称
            parentIdKey: "parentId", // 父节点唯一标识的属性名称
            // idPKey: "parentId",
            rootparentId: 0, // 修正根节点父节点数据
          },
        },
        callback: {
          onClick: this.zTreeOnClick,
          onRename: this.zTreeOnRename,
          beforeRemove: this.zTreeBeforeRemove, // 删除之前的确定操作
          // onRemove: this.zTreeOnRemove,
          beforeClick: this.zTreeBeforeClick,
        },
      },
      searchtext: "",
      isShow: false,
      treeObj: "",
      nodes: [],
      allNodes: [],
      nodesShow: [],
    };
  },
  watch: {
    // 监听树节点的变化更新树
    zNodes: function () {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化ztree
    init() {
      this.treeObj = $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
      // console.log(this.treeObj)
      var nodes = this.treeObj.getNodes();
      // this.treeObj.expandNode(nodes[0]); // 默认展开第一个节点
      this.treeObj.expandAll(true); // 设置全部展开
      this.allNodes = this.queryFun(nodes);
    },
    // 树节点点击事件
    zTreeOnClick: function (event, treeId, treeNode) {
      this.selectedNode = treeNode;
      this.$emit("treeClick", treeNode);
    },
    // 树节点编辑名称回调 新增节点也会调用
    zTreeOnRename(event, treeId, treeNode) {
      // console.log(treeNode);
      this.$emit("editNode", treeNode);
    },
    // 删除之前
    zTreeBeforeRemove(treeId, treeNode) {
      console.log(treeNode);
      console.log("删除之前");
      if (treeNode.children.length !== 0) {
        this.$message.warning("该节点存在子节点不能删除");
        return false;
      } else {
        console.log("queding");
        this.$confirm("此操作将永久删除该节点, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        console.log("....");
        this.$emit("removeNode", treeNode); // 真正的删除
      }
      return false; // 返回false不会自动删除
    },
    // 添加根节点 -------------------->如果增加根节点，请设置 parentNode 为 null 即可。
    addRoot() {
      let newCount = 1;
      let zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取操作 zTree 的各种方法
      let newNode = {
        isParent: true,
        parentNode: null,
        pid: "0",
        name: "new node" + newCount++,
      };
      newNode = zTree.addNodes(null, newNode);
      this.$emit("addRootNode", newNode);
      // zTree.editName(treeNode[0]);
    },
    // 添加子节点
    add(treeId, treeNode) {
      let newCount = 1;
      const zTree = $.fn.zTree.getZTreeObj("treeDemo");
      // 新建的根节点就不能添加子节点，需要先保存该节点的信息才能新建子节点。
      if (treeNode.parentNode === null) {
        this.$message.error("请先保存父节点信息！");
        return false;
      }
      let PtreeNodeName = treeNode.name;
      if (treeNode) {
        // 之前存在，判断是否有孩子，有孩子就说明是父节点，没有孩子就是子节点
        if (treeNode.level === 3) {
          this.$message("分类不能超过四级");
          return;
        } else if (treeNode.level === 2) {
          treeNode = zTree.addNodes(treeNode, {
            parentId: treeNode.id,
            parentName: PtreeNodeName,
            name: "new node" + newCount++,
            newid: "00", // 标识新建的子节点
          });
          // console.log("新增节点：", treeNode);
        } else {
          treeNode = zTree.addNodes(treeNode, {
            isParent: true,
            parentId: treeNode.id,
            parentName: PtreeNodeName,
            name: "new node" + newCount++,
            newid: "00",
          });
          // console.log("新增节点：", treeNode);
        }
      } else {
        // 之前不存在，新生成一个树节点
        treeNode = zTree.addNodes(null, {
          // id: 100 + newCount,
          isParent: true,
          parentId: 0,
          name: "new node" + newCount++,
          newid: "00",
        });
      }
      // zTree.editName(treeNode[0]);
      this.$emit("addTreeNode", PtreeNodeName, treeNode);
    },
    // 禁用
    disabled(treeNode) {
      console.log("禁用：", treeNode);
      // const zTree = $.fn.zTree.getZTreeObj("treeDemo");
      // 调后端接口
      // zTree.setChkDisabled(treeNode, true); // 设置禁用，仅当setting.check.enable = true 时有效
      this.$emit("disabledNode", treeNode);
    },
    //启用
    run(treeNode) {
      console.log("启用", treeNode);
      // const zTree = $.fn.zTree.getZTreeObj("treeDemo");
      // 调后端接口
      // zTree.setChkDisabled(treeNode, true); // 设置禁用，仅当setting.check.enable = true 时有效
      this.$emit("runNode", treeNode);
    },
    // 搜索
    queryFun(node) {
      for (var i in node) {
        this.nodes.push(node[i]);
        if (node[i].children) {
          this.queryFun(node[i].children);
        }
      }
      return this.nodes;
    },
    filterzTree(key, nodes, isExpand, isHighLight) {
      var metaChar = "[\[\]\\^\$\.\|\?\*\+\(\)]";
      var rexMeta = new RegExp(metaChar, "gi");
      var nameKey = this.treeObj.setting.data.key.name;
      for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] && nodes[i].oldname && nodes[i].oldname.length > 0) {
          nodes[i][nameKey] = nodes[i].oldname;
        }
        this.treeObj.updateNode(nodes[i]);
        if (key === "") {
          this.initzTree();
          break;
        } else {
          if (
            nodes[i][nameKey] &&
            nodes[i][nameKey].toLowerCase().indexOf(key.toLowerCase()) !== -1
          ) {
            if (isHighLight) {
              var newKeywords = key.replace(rexMeta, (matchStr) => {
                return "//" + matchStr;
              });
              nodes[i].oldname = nodes[i][nameKey];
              var rexGlobal = new RegExp(newKeywords, "gi");
              nodes[i][nameKey] = nodes[i].oldname.replace(
                rexGlobal,
                (originalText) => {
                  // var highLightText =
                  // '<span style="color: whitesmoke;background-color: darkred;">'
                  // + originalText
                  // +'</span>'
                  return originalText;
                }
              );
              this.treeObj.updateNode(nodes[i]);
            }
            this.treeObj.showNode(nodes[i]);
            this.nodesShow.push(nodes[i]);
          } else {
            this.treeObj.hideNode(nodes[i]);
          }
        }
      }
    },
    showNodesFun(nodesShow, key) {
      if (key.length > 0) {
        nodesShow.forEach((node) => {
          var pathOfOne = node.getPath();
          if (pathOfOne && pathOfOne.length > 0) {
            for (var i = 0; i < pathOfOne.length - 1; i++) {
              this.treeObj.showNode(pathOfOne[i]);
              this.treeObj.expandNode(pathOfOne[i], true);
            }
          }
        });
      } else {
        var rootNodes = this.treeObj.getNodesByParam("level", "0");
        rootNodes.forEach((node) => {
          this.treeObj.expandNode(node, true);
        });
      }
    },
    searchFun(val, isHighLight, isExpand) {
      var key = this.searchtext.replace(/(^s*)|(s*$)/g, "");
      this.nodesShow = [];
      isHighLight = isHighLight !== false;
      isExpand = !!isExpand;
      this.filterzTree(key, this.allNodes, isExpand, isHighLight);
      if (this.keyValue === "") {
        this.noData = false;
      } else {
        if (this.nodesShow.length === 0) {
          this.noData = true;
        } else {
          this.noData = false;
        }
      }
      this.showNodesFun(this.nodesShow, key);
    },

    // 鼠标移入显示添加按钮
    addHoverDom(treeId, treeNode) {
      const _this = this;
      var sObj = $("#" + treeNode.tId + "_span");
      if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
        return;
      // 增加按钮
      var addStr =
        "<span class='button add' id='addBtn_" +
        treeNode.tId +
        "' title='添加子节点' onfocus='this.blur();'></span>";
      sObj.after(addStr);
      let removeObj = $("#" + treeNode.tId + "_remove");
      // 动态决定显示禁用还是启用按钮
      if (this.status === true && this.disabledId === treeNode.id) {
        var disableStr =
          "<span class=' disabled' id='disabledBtn_" +
          treeNode.tId +
          "' title='启用' onfocus='this.blur();'><i class='el-icon-lock'/></span>";
        removeObj.after(disableStr);
      } else {
        // 禁用
        var runStr =
          "<span class='run' id='runBtn_" +
          treeNode.tId +
          "' title='禁用' onfocus='this.blur();'><i class='el-icon-unlock'/></span>";
        removeObj.after(runStr);
      }

      let btn = $("#addBtn_" + treeNode.tId);
      let disabledBtn = $("#runBtn_" + treeNode.tId);
      let runBtn = $("#disabledBtn_" + treeNode.tId);
      // 点击事件
      if (btn) {
        btn.bind("click", function () {
          _this.add(treeId, treeNode);
          return false;
        });
      }
      if (disabledBtn) {
        disabledBtn.bind("click", function () {
          _this.disabled(treeNode);
          return false;
        });
      }
      if (runBtn) {
        runBtn.bind("click", function () {
          _this.run(treeNode);
          return false;
        });
      }
    },
    // 鼠标移除隐藏按钮
    removeHoverDom(treeId, treeNode) {
      $("#addBtn_" + treeNode.tId)
        .unbind()
        .remove();
      $("#disabledBtn_" + treeNode.tId)
        .unbind()
        .remove();
      $("#runBtn_" + treeNode.tId)
        .unbind()
        .remove();
    },

    showMenu() {
      this.searchtext = "";
      this.isShow = false;
      this.init();
    },
    // 点击之前
    zTreeBeforeClick(treeId, treeNode) {
      console.log("BeforeClick:", treeNode);
    },
  },
};
</script>
<style lang="scss" scoped>
.searchContainer {
  margin: 10px;
}
.searchinput {
  width: 75%;
  height: 26px;
}
.button {
  width: 20%;
  height: 29px;
}
.ztree * {
  font-size: 30px;
}
.ztree li {
  margin: 20px 0;
}
.ztree li a {
  margin: 20px 0;
  font-size: 30px !important;
}
</style>