
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>
<div :style="isLoading ? { cursor: 'wait' } : {}">
<div v-if="isLoading" class="loading-overlay">
<div class="loading-div">
<span>LOADING </span>
<span class="anima">.</span>
<span class="anima">.</span>
<span class="anima">.</span>
</div>
</div>
</div>
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-title flex justify-between align-center">
<h2>디렉토리 관리</h2>
<button class="close-btn" @click="$emit('closeModal', 'addDrctry')">
<svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
</button>
</div>
<div class="modal-content-monthly">
<div class="table-zone">
<div class="form-box mb10">
<table class="form-table2">
<colgroup>
<col style="width: 25%" />
<col style="width: 75%" />
</colgroup>
<tbody>
<tr>
<th>호스트 정보</th>
<td>{{ deptHostVO.hostNm + ' (' + deptHostVO.hostIp + ')' }}</td>
</tr>
<tr>
<th>디렉토리 이름</th>
<td><input type="text" class="full-input" v-model="deptDrctryVO.deptDrctryNm"></td>
</tr>
<tr>
<th>디렉토리 경로</th>
<td style="display: flex">
<input type="text" class="full-input" v-model="deptDrctryVO.deptDrctryPath" readonly>
<button type="button" class="blue-border-btn small-btn" style="flex-grow: 1" @click="fnOpenModal">찾기</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="fnInsert">등록</button>
</div>
</div>
<div class="overflow-y" style="max-height: 500px">
<table class="sticky-table list-table2">
<colgroup>
<col style="width: 10%" />
<col style="width: 40%" />
<col style="width: 40%" />
<col style="width: 10%" />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>디렉토리 이름</th>
<th>디렉토리 경로</th>
<th>관리</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) of list" :key="idx">
<td>{{ search.totalRows - idx - (search.currentPage - 1) * search.perPage }}</td>
<td>{{ item.deptDrctryNm }}</td>
<td>{{ item.deptDrctryPath }}</td>
<td><button type="button" class="red-border-btn set-btn" @click="fnDelete(item)">삭제</button></td>
</tr>
</tbody>
</table>
</div>
<PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :click="selectUsers" />
</div>
</div>
</div>
<!-- 폴더 목록 모달 -->
<FileTreeModal :modalOpen="isModalOpen" :modalConnection="connectionData" :modalNodes="drctryList" selectType="drctry" @modalSelectFolder="fnSelectFolder" @closeModal="fnCloseModal" @modalSubmit="fnAddDrctry" />
</template>
<script>
import axios from '../../common/defaultAxios.js';
// icon용 svg import
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify, mdiClose } from "@mdi/js";
// 컴포넌트 import
import PaginationButton from "../PaginationButton.vue";
import FileTreeModal from "../treeMenu/FileTreeModal.vue";
export default {
components: { SvgIcon, PaginationButton, FileTreeModal },
props: {
deptHostVO: {
type: Object,
default: {},
},
},
data() {
return {
// icon용 svg path
searchPath: mdiMagnify,
closePath: mdiClose,
isLoading: false,
// 목록
list: [],
search: Object.assign({}, this.$getDefaultSerchVO()),
// 디렉토리 등록 폼
deptDrctryVO: {
deptCode: this.deptHostVO.deptCode,
deptHostId: this.deptHostVO.deptHostId,
deptDrctryId: null,
deptDrctryNm: null,
deptDrctryPath: null,
},
isModalOpen: false,
drctryList: [],
currentPath: null,
connectionData: {},
}
},
mounted() {
this.fnSelectList(); // 디렉토리 목록 조회
},
watch: {
deptHostVO: {
deep: true,
handler() {
this.fnSelectList(); // 디렉토리 목록 조회
}
},
},
methods: {
/* 초기화 */
initSearchVO() {
// searchData 목록 초기화
this.search.searchObjectList = [];
// searchData 목록 추가
let searchData = Object.assign({}, this.$getDefaultSerchItem("currentCode", "string"));
searchData.value = this.deptHostVO.deptHostId;
this.search.searchObjectList.push(searchData);
},
/* 디렉토리 목록 조회 */
fnSelectList() {
const vm = this;
// searchVO 세팅
this.initSearchVO();
// 실행
axios({
url: "/deptDrctry/list",
method: "post",
headers: { "Content-Type": "application/json; charset=UTF-8" },
data: vm.search,
})
.then(response => {
vm.list = response.data.resultData.list;
vm.search = response.data.resultData.searchVO;
})
.catch(error => {
vm.$showAlert("오류", "오류가 발생했습니다.\n관리자에게 문의바랍니다.");
});
},
/* 디렉토리 검색 모달 */
// 모달 열기
fnOpenModal() {
this.isLoading = true; // 로딩 화면 켜기
// 디렉토리 목록 조회
const vm = this;
// 데이터 세팅
vm.connectionData = {
host_code: vm.deptHostVO.hostCode,
path: "#",
depth: 0,
type: "folder",
};
// 실행
axios
.get("/files/tree", { params: vm.connectionData })
.then(response => {
vm.drctryList = response.data.resultData.fileTree;
vm.isLoading = false; // 로딩 화면 끄기
vm.isModalOpen = true; // 모달 열기
})
.catch(error => {
vm.isLoading = false;
vm.$showAlert("파일리스트 조회", "파일리스트 조회 오류, 관리자에게 문의하세요.");
});
},
// 모달 닫기
fnCloseModal() {
this.isModalOpen = false;
},
// 디렉토리 선택
fnSelectFolder(path) {
this.currentPath = path;
},
// 디렉토리 추가
fnAddDrctry() {
this.deptDrctryVO.deptDrctryPath = this.currentPath;
this.fnCloseModal(); // 모달 닫기
},
// 디렉토리 저장
fnInsert() {
const vm = this;
// 유효성 검사
if (vm.$isEmpty(vm.deptDrctryVO.deptDrctryNm)) {
vm.$showAlert("경고", "디렉토리 이름을 작성해주세요.");
return;
}
if (vm.$isEmpty(vm.deptDrctryVO.deptDrctryPath)) {
vm.$showAlert("경고", "디렉토리 경로를 선택해주세요.");
return;
}
// 실행
axios({
url: "/deptDrctry",
method: "post",
headers: { "Content-Type": "application/json; charset=UTF-8" },
data: vm.deptDrctryVO,
})
.then(response => {
if (response.data.checkMessage.status == 200) {
vm.fnDrctryInit(); // 디렉토리 등록 폼 초기화
} else {
vm.$showAlert("오류", "등록에 실패했습니다.")
}
})
.catch(error => {
vm.$showAlert("오류", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
});
},
// 디렉토리 등록 폼 초기화
fnDrctryInit() {
this.currentPath = null;
this.deptDrctryVO = {
deptCode: this.deptHostVO.deptCode,
deptHostId: this.deptHostVO.deptHostId,
deptDrctryId: null,
deptDrctryNm: null,
deptDrctryPath: null,
};
this.fnSelectList(); // 디렉토리 목록 조회
},
// 디렉토리 삭제
async fnDelete(data) {
const vm = this;
// 삭제 확인
let isConfirmChk = await this.$showConfirm("경고", "선택한 데이터를 삭제하시겠습니까?");
if (!isConfirmChk) {
return;
}
// 실행
axios({
url: "/deptDrctry",
method: "delete",
headers: { "Content-Type": "application/json; charset=UTF-8" },
data: data,
})
.then(response => {
this.fnSelectList(); // 디렉토리 목록 조회
})
.catch(error => {
vm.$showAlert("회원 목록", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
});
}
}
}
</script>