fix: 修复ops 快捷命令搜索树不生效的问题

This commit is contained in:
Aaron3S
2023-05-10 16:03:34 +08:00
committed by Jiangjie.Bai
parent 43b2ad3104
commit d6a7d93398
2 changed files with 236 additions and 233 deletions

View File

@@ -148,12 +148,12 @@ export default {
rootNodeAddDom(rootNode) { rootNodeAddDom(rootNode) {
const { showSearch, showRefresh } = this.treeSetting const { showSearch, showRefresh } = this.treeSetting
const searchIcon = ` const searchIcon = `
<a class="tree-action-btn" id='search-btn' onclick="onSearch()"> <a class="tree-action-btn" id="search-btn" onclick="onSearch()">
<i class='fa fa-search tree-banner-icon'></i> <i class="fa fa-search tree-banner-icon"></i>
</a>` </a>`
const refreshIcon = ` const refreshIcon = `
<a id='tree-refresh' class="tree-action-btn" onclick='refresh()'> <a id="tree-refresh" class="tree-action-btn" onclick="refresh()">
<i class='fa fa-refresh'></i> <i class="fa fa-refresh"></i>
</a>` </a>`
const treeActions = `${showSearch ? searchIcon : ''}${showRefresh ? refreshIcon : ''}` const treeActions = `${showSearch ? searchIcon : ''}${showRefresh ? refreshIcon : ''}`
const icons = ` const icons = `
@@ -306,7 +306,7 @@ export default {
this.zTree.hideNodes(treeNodes) this.zTree.hideNodes(treeNodes)
} }
let treeUrl = this.treeSetting.treeUrl let treeUrl = this.treeSetting.searchUrl ? this.treeSetting.searchUrl : this.treeSetting.treeUrl
const filterField = treeUrl.includes('?') ? `&search=${keyword}` : `?search=${keyword}` const filterField = treeUrl.includes('?') ? `&search=${keyword}` : `?search=${keyword}`
if (treeUrl.indexOf('assets/nodes/children/tree') > -1) { if (treeUrl.indexOf('assets/nodes/children/tree') > -1) {
treeUrl = treeUrl + '&all=all' treeUrl = treeUrl + '&all=all'
@@ -336,15 +336,17 @@ export default {
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-track:horizontal {
::-webkit-scrollbar-track:horizontal {
background: #FFFFFF; background: #FFFFFF;
border-radius: 10px; border-radius: 10px;
} }
div.rMenu {
div.rMenu {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
text-align: left; text-align: left;
@@ -356,20 +358,20 @@ export default {
margin: 2px 0 0; margin: 2px 0 0;
list-style: none; list-style: none;
background-clip: padding-box; background-clip: padding-box;
} }
.dataTables_wrapper .dataTables_processing { .dataTables_wrapper .dataTables_processing {
opacity: .9; opacity: .9;
border: none; border: none;
} }
div.rMenu li { div.rMenu li {
margin: 6px 0; margin: 6px 0;
cursor: pointer; cursor: pointer;
list-style: none outside none; list-style: none outside none;
} }
.dropdown-menu { .dropdown-menu {
border: medium none; border: medium none;
min-width: 160px; min-width: 160px;
background-color: #fff; background-color: #fff;
@@ -385,17 +387,17 @@ export default {
text-shadow: none; text-shadow: none;
top: 100%; top: 100%;
z-index: 1000; z-index: 1000;
} }
.ztree ::v-deep .fa { .ztree ::v-deep .fa {
font: normal normal normal 14px/1 FontAwesome !important; font: normal normal normal 14px/1 FontAwesome !important;
} }
.dropdown a:hover { .dropdown a:hover {
background-color: #f1f1f1 background-color: #f1f1f1
} }
.dropdown-menu > li > a { .dropdown-menu > li > a {
border-radius: 3px; border-radius: 3px;
color: inherit; color: inherit;
line-height: 25px; line-height: 25px;
@@ -406,18 +408,18 @@ export default {
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
white-space: nowrap; white-space: nowrap;
} }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #262626; color: #262626;
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.treebox { .treebox {
background-color: transparent; background-color: transparent;
>>> .ztree { > > > .ztree {
overflow: auto; overflow: auto;
background-color: transparent; background-color: transparent;
height: calc(100vh - 237px); height: calc(100vh - 237px);
@@ -434,13 +436,13 @@ export default {
} }
} }
} }
} }
::v-deep #tree-refresh { ::v-deep #tree-refresh {
margin-left: 3px; margin-left: 3px;
} }
::v-deep .tree-banner-icon-zone { ::v-deep .tree-banner-icon-zone {
position: absolute; position: absolute;
right: 7px; right: 7px;
height: 30px; height: 30px;
@@ -453,9 +455,9 @@ export default {
color: #606266 !important;; color: #606266 !important;;
} }
} }
} }
::v-deep .tree-search { ::v-deep .tree-search {
position: relative; position: relative;
top: -2px; top: -2px;
width: 20px; width: 20px;
@@ -473,9 +475,9 @@ export default {
.fa-search { .fa-search {
padding-top: 1px; padding-top: 1px;
} }
} }
::v-deep .tree-search .tree-banner-icon { ::v-deep .tree-search .tree-banner-icon {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 6px; left: 6px;
@@ -486,18 +488,18 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
::v-deep .tree-search.active { ::v-deep .tree-search.active {
width: 160px; width: 160px;
background-color: #ffffff !important; background-color: #ffffff !important;
} }
::v-deep .tree-search.active:hover { ::v-deep .tree-search.active:hover {
border-radius: 12px; border-radius: 12px;
} }
::v-deep .tree-search input { ::v-deep .tree-search input {
position: relative; position: relative;
left: 20px; left: 20px;
width: 133px; width: 133px;
@@ -509,9 +511,9 @@ export default {
align-items: center; align-items: center;
border: none; border: none;
outline: none; outline: none;
} }
.tree-header { .tree-header {
position: relative; position: relative;
.title { .title {
@@ -542,13 +544,13 @@ export default {
top: 1px !important; top: 1px !important;
} }
} }
} }
.tree-empty { .tree-empty {
margin-left: 4px; margin-left: 4px;
} }
.fixed-tree-search { .fixed-tree-search {
margin-bottom: 10px; margin-bottom: 10px;
& > > > .el-input__inner { & > > > .el-input__inner {
@@ -568,9 +570,9 @@ export default {
& > > > .el-input__suffix-inner { & > > > .el-input__suffix-inner {
line-height: 30px; line-height: 30px;
} }
} }
.icon-refresh { .icon-refresh {
border-radius: 4px; border-radius: 4px;
padding: 0 1px; padding: 0 1px;
z-index: 1; z-index: 1;
@@ -581,14 +583,14 @@ export default {
border-color: #d2d2d2; border-color: #d2d2d2;
background-color: #e6e6e6; background-color: #e6e6e6;
} }
} }
.icon { .icon {
cursor: pointer; cursor: pointer;
} }
.tree-action-btn { .tree-action-btn {
padding: 0 2px; padding: 0 2px;
color: red; color: red;
} }
</style> </style>

View File

@@ -225,6 +225,7 @@ export default {
}, },
treeSetting: { treeSetting: {
treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/', treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/',
searchUrl: '/api/v1/perms/users/self/assets/tree/',
showRefresh: true, showRefresh: true,
showMenu: false, showMenu: false,
showSearch: true, showSearch: true,