|
|
|
|
@ -26,7 +26,7 @@
|
|
|
|
|
@click='switchMode(`tree`)'
|
|
|
|
|
)
|
|
|
|
|
v-icon(left) mdi-file-tree
|
|
|
|
|
.body-2.text-none {{$t('common:sidebar.tree')}}
|
|
|
|
|
.body-2.text-none {{'Обзор'}}
|
|
|
|
|
v-btn.ml-3(
|
|
|
|
|
v-else-if='currentMode === `tree`'
|
|
|
|
|
depressed
|
|
|
|
|
@ -57,6 +57,7 @@
|
|
|
|
|
v-treeview(
|
|
|
|
|
v-else-if='currentMode === `tree`'
|
|
|
|
|
activatable
|
|
|
|
|
dense
|
|
|
|
|
open-on-click
|
|
|
|
|
:color='"white"'
|
|
|
|
|
:active='treeDefaultActive'
|
|
|
|
|
@ -70,8 +71,8 @@
|
|
|
|
|
v-icon(v-else-if="open") mdi-folder-open
|
|
|
|
|
v-icon(v-else) mdi-folder
|
|
|
|
|
template(v-slot:label="{ item }")
|
|
|
|
|
div(class='tree-item' :class="{ 'tree-item-link': !item.children }")
|
|
|
|
|
a(v-if="!item.children" :href="'/'+item.locale+'/'+item.path" class='tree-item-link')
|
|
|
|
|
div(class='tree-item')
|
|
|
|
|
a(v-if="!item.children" :href="'/'+item.locale+'/'+item.path")
|
|
|
|
|
span {{item.name}}
|
|
|
|
|
span(v-else) {{item.name}}
|
|
|
|
|
|
|
|
|
|
@ -276,7 +277,7 @@ export default {
|
|
|
|
|
return { id: item.id, level: level, path: item.path, locale: item.locale, name: item.title }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
activeTreeItem(id) {
|
|
|
|
|
activeTreeItem([id]) {
|
|
|
|
|
const find = (items) => {
|
|
|
|
|
for (const item of items) {
|
|
|
|
|
if (item.id === id) {
|
|
|
|
|
@ -320,7 +321,7 @@ export default {
|
|
|
|
|
this.treeItems = children.map(item => this.pageItem2TreeItem(item, 0))
|
|
|
|
|
this.checkTreeDefaultOpen(this.treeItems, 0)
|
|
|
|
|
},
|
|
|
|
|
async checkTreeDefaultOpen(items) {
|
|
|
|
|
checkTreeDefaultOpen(items) {
|
|
|
|
|
const item = items.find(item => item.children && this.path.startsWith(item.path))
|
|
|
|
|
if (item) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
@ -361,14 +362,16 @@ export default {
|
|
|
|
|
mounted () {
|
|
|
|
|
this.currentParent.title = `/ ${this.$t('common:sidebar.root')}`
|
|
|
|
|
if (this.navMode === 'TREE') {
|
|
|
|
|
this.currentMode = 'browse'
|
|
|
|
|
} else if (this.navMode === 'STATIC') {
|
|
|
|
|
this.currentMode = 'tree'
|
|
|
|
|
}
|
|
|
|
|
if (this.navMode === 'STATIC') {
|
|
|
|
|
this.currentMode = 'custom'
|
|
|
|
|
} else if (this.navMode === 'NEWTREE') {
|
|
|
|
|
this.currentMode = 'tree'
|
|
|
|
|
} else {
|
|
|
|
|
this.currentMode = window.localStorage.getItem('navPref') || 'custom'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.currentMode === 'browse') {
|
|
|
|
|
this.loadFromCurrentPath()
|
|
|
|
|
}
|
|
|
|
|
@ -380,32 +383,12 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
|
|
|
|
.v-treeview{
|
|
|
|
|
.tree-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 8px 0;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 1rem;
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tree-item-link {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tree-item-link a {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
margin: -8px 0;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
@ -415,4 +398,21 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.v-treeview-node {
|
|
|
|
|
min-height: 32px; /* Уменьшаем минимальную высоту узла */
|
|
|
|
|
|
|
|
|
|
.v-treeview-node__root {
|
|
|
|
|
min-height: 32px; /* Уменьшаем минимальную высоту корневого элемента */
|
|
|
|
|
padding: 2px 0; /* Уменьшаем вертикальные отступы */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.v-treeview-node__content {
|
|
|
|
|
margin: 2px 0; /* Уменьшаем отступы содержимого */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.v-treeview-node__children {
|
|
|
|
|
margin-left: 16px; /* Уменьшаем отступ для дочерних элементов */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|