|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <div :class="{ 'u-tree_pop': title }">
|
|
|
+ <div class="u-tree_pop">
|
|
|
<h4 v-if="title" class="dg-words-title-second">{{ title }}</h4>
|
|
|
<slot></slot>
|
|
|
- <div v-if="search" class="u-tree__seach">
|
|
|
+ <div v-if="search" class="u-tree__search">
|
|
|
<!--<el-input placeholder="关键字搜索" suffix-icon="el-icon-search" v-model="filterText" />-->
|
|
|
<el-input
|
|
|
placeholder="关键字搜索"
|
|
|
@@ -12,13 +12,11 @@
|
|
|
size="mini"
|
|
|
@keyup.enter.native="handleSearch"
|
|
|
></el-input>
|
|
|
- <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
|
|
|
- </div>
|
|
|
- <div v-if="search && searchResultList.length == 0 && isclickSearch" class="no-search-data">
|
|
|
- 没有数据或权限不足
|
|
|
+ <dg-button type="primary" @click="handleSearch" icon="el-icon-search" class="u-tree__search-btn" size="mini">查询</dg-button>
|
|
|
</div>
|
|
|
+ <div v-if="searchResultList.length == 0 && isclickSearch && !loading" class="no-search-data">查无数据</div>
|
|
|
<div class="u-tree__bar" :style="{ height: treeHeight }">
|
|
|
- <dg-scrollbar v-show="!isShowSearchResult">
|
|
|
+ <dg-scrollbar v-show="!isclickSearch" :key="key">
|
|
|
<dg-tree
|
|
|
ref="tree"
|
|
|
node-key="id"
|
|
|
@@ -30,7 +28,7 @@
|
|
|
v-bind="$attrs"
|
|
|
v-on="$listeners"
|
|
|
:expand-on-click-node="true"
|
|
|
- :style="{'padding-right': paddingRight}"
|
|
|
+ :style="{ 'padding-right': paddingRight }"
|
|
|
>
|
|
|
<div slot-scope="{ node, data }" class="u-tree-label">
|
|
|
<p @dblclick="handlerNodeDoubleClick(data)" @click="handleNodeClick(data)">
|
|
|
@@ -41,9 +39,9 @@
|
|
|
</div>
|
|
|
</dg-tree>
|
|
|
</dg-scrollbar>
|
|
|
- <dg-scrollbar v-show="isShowSearchResult" load-distance @scroll-bottom="handleScrollToBottomLoading">
|
|
|
- <ul class="search-result">
|
|
|
- <li v-for="(item, index) in searchResultList" :key="index" @click="doClickSearchItem(item)">
|
|
|
+ <dg-scrollbar load-distance @scroll-bottom="handleScrollToBottomLoading" v-loading="loading">
|
|
|
+ <ul class="search-result" v-show="searchResultList.length > 0">
|
|
|
+ <li :class="{'is-active': item.selected}" v-for="(item, index) in searchResultList" :key="index" @click="doClickSearchItem(item,index)">
|
|
|
{{ item.fullName }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -110,7 +108,7 @@ export default {
|
|
|
name: "",
|
|
|
mtType: "app",
|
|
|
pageNum: 1,
|
|
|
- pageSize: 20
|
|
|
+ pageSize: 50
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
@@ -131,7 +129,7 @@ export default {
|
|
|
},
|
|
|
paddingRight: {
|
|
|
type: String,
|
|
|
- default: '0px'
|
|
|
+ default: "0px"
|
|
|
},
|
|
|
lazy: {
|
|
|
type: Boolean,
|
|
|
@@ -166,44 +164,58 @@ export default {
|
|
|
timer: null,
|
|
|
isShowSearchResult: false,
|
|
|
searchResultList: [],
|
|
|
- isclickSearch: false
|
|
|
+ isclickSearch: false,
|
|
|
+ key: 0,
|
|
|
+ loading: false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
// 滚动条触底加载数据
|
|
|
handleScrollToBottomLoading() {
|
|
|
- let self = this;
|
|
|
- console.log("scroll bottom");
|
|
|
+ if (this.isLast) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
setTimeout(function () {
|
|
|
- self.searchForm.pageNum++;
|
|
|
- self.treeMatch();
|
|
|
+ this.searchForm.pageNum++;
|
|
|
+ this.treeMatch();
|
|
|
}, 500);
|
|
|
},
|
|
|
// 加载数据
|
|
|
treeMatch() {
|
|
|
- const that = this;
|
|
|
const { searchForm } = this;
|
|
|
-
|
|
|
commonApi.treeMatch(searchForm).then((res) => {
|
|
|
- if (res) {
|
|
|
- that.searchResultList = [...that.searchResultList, ...res];
|
|
|
- }
|
|
|
- that.isclickSearch = true;
|
|
|
- if (that.searchResultList.length > 0) {
|
|
|
- that.isShowSearchResult = true;
|
|
|
+ let { content, totalElements } = res.data;
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ content[i].selected = false;
|
|
|
}
|
|
|
+ this.searchResultList = [...this.searchResultList, ...content];
|
|
|
+ this.isLast = this.searchResultList.length == totalElements;
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
handleSearch() {
|
|
|
- this.$set(this.searchForm, "pageNum", 1);
|
|
|
- this.$set(this, "searchResultList", []);
|
|
|
-
|
|
|
- this.treeMatch();
|
|
|
+ if (this.searchForm.name) {
|
|
|
+ this.loading = true;
|
|
|
+ this.isclickSearch = true;
|
|
|
+ this.$set(this.searchForm, "pageNum", 1);
|
|
|
+ this.$set(this, "searchResultList", []);
|
|
|
+ this.treeMatch();
|
|
|
+ } else {
|
|
|
+ this.searchResultList = [];
|
|
|
+ this.isclickSearch = false;
|
|
|
+ this.key++;
|
|
|
+ }
|
|
|
},
|
|
|
- doClickSearchItem(item) {
|
|
|
- this.isShowSearchResult = false;
|
|
|
- this.searchForm.name = item.fullName;
|
|
|
+ doClickSearchItem(item, index) {
|
|
|
+ // 清空选中效果
|
|
|
+ for (let i = 0; i < this.searchResultList.length; i++) {
|
|
|
+ this.searchResultList[i].selected = false;
|
|
|
+ }
|
|
|
+ // 设置选中效果
|
|
|
+ this.searchResultList[index].selected = true;
|
|
|
this.$emit("doClickSearchItem", item);
|
|
|
+ this.$emit("handleGetNode", { ...item, code: item.id });
|
|
|
},
|
|
|
handlerNodeDoubleClick(data) {
|
|
|
const that = this;
|
|
|
@@ -276,7 +288,7 @@ export default {
|
|
|
if (that.ifCheckedFirstNode) {
|
|
|
that.setCurrentKey(that.rootNode);
|
|
|
}
|
|
|
- that.$emit("submitRootNode", { id: that.rootNode, name: res[0].name, code: res[0].code});
|
|
|
+ that.$emit("submitRootNode", { id: that.rootNode, name: res[0].name, code: res[0].code });
|
|
|
}
|
|
|
})
|
|
|
.catch(() => resolve([]));
|
|
|
@@ -312,13 +324,20 @@ export default {
|
|
|
margin-left: 7px;
|
|
|
}
|
|
|
|
|
|
- .u-tree__seach {
|
|
|
+ .u-tree__search {
|
|
|
margin: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &-btn {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.no-search-data {
|
|
|
- color: #ff684d;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
+ margin-top: 40px;
|
|
|
}
|
|
|
.search-result {
|
|
|
li {
|
|
|
@@ -331,6 +350,9 @@ export default {
|
|
|
li:hover {
|
|
|
background-color: rgba(24, 144, 255, 0.12);
|
|
|
}
|
|
|
+ .is-active {
|
|
|
+ background-color: rgba(24, 144, 255, 0.12);
|
|
|
+ }
|
|
|
}
|
|
|
.u-tree-label {
|
|
|
width: 85%;
|
林倩