|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="u-tree">
|
|
|
<!-- 搜索栏 -->
|
|
|
- <div class="u-tree__seach">
|
|
|
+ <div class="u-tree__search">
|
|
|
<el-input
|
|
|
placeholder="关键字搜索"
|
|
|
v-model="keyword"
|
|
|
- class="tree__search__input"
|
|
|
+ class="u-tree__search-input"
|
|
|
clearable
|
|
|
size="mini"
|
|
|
@keyup.enter.native="handleSearch"
|
|
@@ -13,7 +13,7 @@
|
|
|
<dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
|
|
|
</div>
|
|
|
<!-- 标签树 -->
|
|
|
- <div class="u-tree__bar" style="height: calc(100vh - 19rem)">
|
|
|
+ <div class="u-tree__content">
|
|
|
<dg-scrollbar>
|
|
|
<dg-tree
|
|
|
ref="tree"
|
|
@@ -25,7 +25,7 @@
|
|
|
:filter-node-method="filterNode"
|
|
|
style="padding-right: 15px"
|
|
|
>
|
|
|
- <div slot-scope="{ node, data }" class="u-tree-label">
|
|
|
+ <div slot-scope="{ data }" class="u-tree-label">
|
|
|
<p @click="handleNodeClick(data)">
|
|
|
<i class="el-icon-folder-opened" v-if="data.parent"></i>
|
|
|
<i class="el-icon-document" v-else></i>
|
|
@@ -42,13 +42,12 @@
|
|
|
import { getBusinessTagTree } from "@/api/common";
|
|
|
export default {
|
|
|
name: "BusinessTagTree",
|
|
|
-
|
|
|
props: {
|
|
|
props: {
|
|
|
type: Object,
|
|
|
default() {
|
|
|
return {
|
|
|
- value: "10005",
|
|
|
+ value: "code",
|
|
|
label: "name",
|
|
|
children: "child",
|
|
|
isLeaf(data) {
|
|
@@ -80,7 +79,7 @@ export default {
|
|
|
this.$emit("handleGetNode", node);
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
filterNode(value, data) {
|
|
|
if (!value) return true;
|
|
|
return data.name.indexOf(value) !== -1;
|
|
@@ -88,7 +87,7 @@ export default {
|
|
|
// 获取树
|
|
|
getTree() {
|
|
|
getBusinessTagTree().then((res) => {
|
|
|
- this.treeData = res.data.content.filter(item => item.child);
|
|
|
+ this.treeData = res.data.content.filter((item) => item.child);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -99,54 +98,15 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.u-tree__seach {
|
|
|
- .tree__search__input {
|
|
|
- width: 65%;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-.u-tree_pop {
|
|
|
- width: 100%;
|
|
|
- border: 1px solid #eef2fa;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
-
|
|
|
- & > h4 {
|
|
|
- font-size: 14px;
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- padding: 0 15px;
|
|
|
- border: 0 none;
|
|
|
- background-color: #eef2fa;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .dg-tree-node .el-tree-node__content > .el-tree-node__expand-icon {
|
|
|
- margin-left: 7px;
|
|
|
- }
|
|
|
-
|
|
|
- .u-tree__seach {
|
|
|
- margin: 8px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.no-search-data {
|
|
|
- color: #ff684d;
|
|
|
-}
|
|
|
-.search-result {
|
|
|
- li {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- padding: 5px 12px;
|
|
|
- cursor: pointer;
|
|
|
+.u-tree {
|
|
|
+ &__search {
|
|
|
+ &-input {
|
|
|
+ width: 65%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- li:hover {
|
|
|
- background-color: rgba(24, 144, 255, 0.12);
|
|
|
+ &__content {
|
|
|
+ height: calc(100vh - 19rem);
|
|
|
}
|
|
|
}
|
|
|
-.u-tree-label {
|
|
|
- width: 85%;
|
|
|
- padding-right: 10px;
|
|
|
-}
|
|
|
</style>
|