File name
Commit message
Commit date
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>
<div :class="{
'tree-container flex align-center cursor': true,
selected: currentDeptCode.id === node.id,
}" @click="toggleNode(node)">
<div>
<svg-icon type="mdi" :width="18" :height="18" :path="arrowPath"></svg-icon>
</div>
<div>
<svg-icon type="mdi" :width="18" :height="18" :path="notePath" :color="'#fbbe28'"></svg-icon>
</div>
<p class="node-text">{{ node.nm }}</p>
</div>
<template v-if="node.childList.length > 0">
<ul v-if="isOpen" class="children-node">
<li v-for="(item, idx) of node.childList" :key="idx">
<TreeMenu :node="item" :currentDeptCode="currentDeptCode" @changeCurrent="changeCurrentNode" />
</li>
</ul>
</template>
</li>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiNote, mdiChevronRight, mdiChevronDown, mdiNoteOutline } from "@mdi/js";
export default {
name: "TreeMenu",
components: {
SvgIcon: SvgIcon,
},
props: {
node: {
type: Object,
required: true,
},
currentDeptCode: {
type: Object,
},
},
data() {
return {
isOpen: false,
notePath: mdiNote,
arrowPath: mdiChevronRight,
};
},
watch: {
currentDeptCode: {
deep: true,
handler(v) {
if (this.$isEmpty(v)) {
this.isOpen = false;
this.notePath = mdiNote;
this.arrowPath = mdiChevronRight;
}
},
}
},
methods: {
toggleNode(node) {
this.isOpen = !this.isOpen;
if (this.isOpen) {
this.notePath = mdiNote;
this.arrowPath = mdiChevronRight;
} else {
this.notePath = mdiNoteOutline;
this.arrowPath = mdiChevronDown;
}
this.changeCurrentNode(node);
},
changeCurrentNode(node) {
this.$emit("changeCurrent", node);
}
},
};
</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>