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>
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title">
<div class="flex justify-between align-center">
<h2>폴더 선택</h2>
<button class="close-btn" @click="closeModal()"><svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon></button>
</div>
<div>
<h2>현재 경로</h2>
<p>
<span>{{ selectedPath }}</span>
</p>
</div>
</div>
<div class="modal-content-monthly">
<TreeItem :connection="modalConnection" :closeModal="isCloseModal" v-for="(item, idx) in modalNodes" :item="item" :idx="item.id" :key="idx" @selectFolder="selectFolder" @selectItem="handleSelectItem" />
</div>
<div class="modal-end flex justify-end">
<button class="blue-btn small-btn" v-if="selectType === 'copy'" @click="submit('복사')">복사</button>
<button class="blue-btn small-btn" v-else-if="selectType === 'move'" @click="submit('이동')">이동</button>
<button class="blue-btn small-btn" v-else-if="selectType === 'choose'" @click="submit('선택')">선택</button>
<button class="blue-btn small-btn" v-else-if="selectType === 'update'" @click="submit('수정')">수정</button>
<button class="gray-btn small-btn" @click="closeModal()">취소</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import SvgIcon from '@jamescoyle/vue-icon';
import TreeItem from '../component/FileTree.vue';
import { mdiClose } from '@mdi/js';
export default {
props: {
modalNodes: Object,
modalConnection: {
type: Object,
default: {},
},
modalOpen: Boolean,
selectType: Number,
},
data() {
return {
// host_code: null,
// parentSelectNode: null,
closePath: mdiClose,
isModalOpen: false,
isCloseModal: false,
selectedPath: null,
selectItem: null,
}
},
methods: {
selectFolder(path) {
this.$emit('modalSelectFolder', path)
this.modalConnection.path = path;
this.selectedPath = path;
},
closeModal() {
this.isCloseModal = true;
this.isModalOpen = false;
this.$emit('closeTreeModal', this.isModalOpen);
},
async submit(type) {
this.$emit('modalSubmit', type);
this.$emit('modalSelectItem', this.selectItem);
},
handleSelectItem(item, parentItem) {
// 현재 선택된 폴더와 클릭한 폴더가 같을 때
if (this.selectedPath == item.id) {
this.selectItem = parentItem;
} else {
this.selectItem = item;
}
},
},
watch: {
'modalOpen': function (v) {
this.isModalOpen = v;
this.isCloseModal = !v;
},
},
computed: {
},
components: {
'SvgIcon': SvgIcon,
'TreeItem': TreeItem,
},
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>