From 8de8ffd91ab6f96f35cf1357fd025051471ad4af Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期四, 23 十二月 2021 13:59:08 +0800
Subject: [PATCH] 完善国标树配置功能
---
src/components/giantTree/zTree/ztree.vue | 49 +++++++++++++++++++++++++++++--------------------
1 files changed, 29 insertions(+), 20 deletions(-)
diff --git a/src/components/giantTree/zTree/ztree.vue b/src/components/giantTree/zTree/ztree.vue
index 1db7a4a..69175d2 100644
--- a/src/components/giantTree/zTree/ztree.vue
+++ b/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;
--
Gitblit v1.8.0