File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<li class="cursor">
<div :class="{ 'tree-container flex align-center': true, 'selected': selectLayout.layout_nm === splitInfo.layout_nm }" @click.stop="clickLayout(splitInfo)" >
<p><svg-icon type="mdi" :width="18" :height="18" :path="arrowPath"></svg-icon></p>
<p><svg-icon type="mdi" :width="18" :height="18" :path="folderPath" :color="'#fbbe28'"></svg-icon></p>
<p class="node-text">{{ splitInfo.layout_nm}}</p>
</div>
<ul v-if="splitInfo.children.length > 0 " class="children-node" style="height: auto;">
<TreeItem v-for="(node , indx) in splitInfo.children" :splitInfo="node" :selectLayout = 'selectLayout' :key="indx" @changeselectLayout = "changeselectLayout" />
</ul>
<!-- <ul v-if="item.children" class="children-node" :style="{ 'height': toggleSelect === idx ? 'auto' : '0' }">
<TreeItem :connection="connection" :selectedNode="parentSelectNode" v-for="(child, idx) in item.children" :item="child" :idx="child.id"
:key="idx" @selectForder="emit"/>
</ul> -->
</li>
</template>
<script>
import axios from 'axios';
import SvgIcon from '@jamescoyle/vue-icon';
import {mdiLandPlots, mdiChevronRight, mdiChevronDown, mdiRhombusSplit, mdiFolderOpen } from '@mdi/js';
export default {
props: {
splitInfo:{
type: Object,
},
selectLayout : {
type: Object,
}
},
data() {
return {
currentSelectLayout : this.selectLayout,
toggleSelect: false,
clidrunNode: false,
folderPath: mdiLandPlots,
arrowPath: mdiChevronRight,
filePath: mdiRhombusSplit,
selectedId: null,
// host_code: null,
parentSelectNode: null,
}
},
methods: {
handleClick: function (idx, event, item) {
},
emit(path){
this.$emit('selectForder', path)
},
getChildren(path, children) {
const vm = this;
vm.connection.path = path
vm.connection.type = 'folder'
vm.connection.depth = 1
axios.get('/files/list', {params: vm.connection})
.then(response => {
let chilerenList = response.data.resultData.fileList
chilerenList.forEach ( item => {
children.push(item)
})
this.$emit('selectForder', path)
}).catch(error => {
})
},
clickLayout : function(splitInfo){
this.toggleSelect = !this.toggleSelect;
this.$emit('changeselectLayout', splitInfo);
},
changeselectLayout : function(layout){
this.$emit('changeselectLayout', layout);
},
},
watch: {
selectLayout: function (v) {
this.currentSelectLayout = v;
},
},
computed: {
},
components: {
'SvgIcon': SvgIcon
},
beforeCreate() {
this.$options.components.TreeItem = require('./LayoutTree.vue').default;
},
mounted() {
}
}
</script>
<style scoped>
.tree-container {
padding: 5px 10px;
}
.children-node {
padding: 0 0 0 10px;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.node-text {
font-size: 1.4rem;
margin-left: 5px;
}
</style>