完善国标树配置功能

zhangzengfei

2021-12-23 8de8ffd91ab6f96f35cf1357fd025051471ad4af

 src/components/giantTree/zTree/ztree.vue

@@ -1,8 +1,8 @@
<template>
  <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 placeholder="搜索" v-model="keyWord" size="mini" v-show="search">
        <i slot="suffix" class="el-input__icon el-icon-search" :id="searchBtnId"></i>
      </el-input>
    </div>
    <div class="ztree" :id="ztreeId"></div>
@@ -26,6 +26,7 @@
    showCheckbox: { type: Boolean, default: false },
    readonly: { type: Boolean, default: true },
    gb28181: { type: Boolean, default: false },
    search: { type: Boolean, default: false },
    setting: {
      type: Object,
      require: false,
@@ -44,8 +45,10 @@
  data() {
    return {
      ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
      searchBtnId: "search_" + parseInt(Math.random() * 1e10),
      ztreeObj: null,
      list: [],
      loading: false,
      ztreeSetting: {
        view: {
          showLine: true,
@@ -127,7 +130,7 @@
            Object.assign({}, this.ztreeSetting, this.setting),
            this.list
          )
          this.fuzzySearch(this.ztreeObj, "#key", null, true) //初始化模糊搜索方法
          this.fuzzySearch(this.ztreeObj, this.searchBtnId, false, true) //初始化模糊搜索方法
          this.$emit("onCreated", this.ztreeObj)
        })
      },
@@ -382,6 +385,7 @@

        var nodesShow = zTreeObj.getNodesByFilter(filterFunc) //get all nodes that would be shown
        processShowNodes(nodesShow, _keywords) //nodes should be reprocessed to show correctly
        _this.$emit("onAfterSearch", null)
      }

      /**
@@ -412,33 +416,37 @@
      }

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

      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)
        if (lastKeyword === _keywords) {
          return
        }
        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)
        ztreeFilter(zTreeObj, _keywords) //lazy load ztreeFilter function
        // $(searchField).focus();//focus input field again after filtering
        lastKeyword = _keywords
      }
    },
    handleSearch() {
      this.loading = true
      searchNodeLazy(this.keyWord) //call lazy load
      this.loading = false
    }
  }
}
@@ -777,7 +785,8 @@

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

  ::v-deep .el-input__suffix {
    right: 0;