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 class="container">
<div class="page-titleZone flex justify-between align-center">
<p class="main-title flex80">호스트 관리</p>
<PageNavigation />
</div>
<div class="content-wrap">
<div class="content content-box flex100">
<div class="column-list">
<div class="search-bar">
<div class="flex justify-end align-center">
<select name="" id="" class="square-select" v-model="search_data.key">
<option :value="null" disabled>선택</option>
<option value="host_nm">호스트명</option>
<option value="host_ip">호스트(IP)</option>
<option value="rgtr_id">등록자</option>
</select>
<div class="search-square">
<div class="flex justify-end align-center no-gutter">
<input type="text" class="square-input flex90" v-model="search_data.value" placeholder="검색어를 입력해주세요." @keyup.enter="selectHosts" />
<button class="square-button blue-btn flex10" @click="selectHosts">
<svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
</button>
</div>
</div>
</div>
</div>
<div class="content-zone" style="overflow-y: auto">
<div class="table-zone">
<div class="list-info flex justify-between align-center">
<div class="count-zone">
<p> 총 <span>{{ hosts.length }}</span>건 중 <span>{{ selectedHosts.length }}</span>건 선택</p>
</div>
<div class="cunt-selectZone">
<select name="" id="">
<option value="">10개 보기</option>
<option value="">20개 보기</option>
</select>
</div>
</div>
<table class="list-table">
<colgroup>
<col style="width: 5%" />
<col style="width: 5%" />
<col style="width: 15%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 15%" />
</colgroup>
<thead>
<tr>
<th>
<input type="checkbox" @click="hostCheckAll" v-model="checkAll" />
</th>
<th>No</th>
<th>호스트명</th>
<th>프로토콜</th>
<th>호스트(IP)</th>
<th>사용자명</th>
<th>포트</th>
<th>등록자</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr v-for="(host, index) in hosts" :key="index" @click="loadHostData(host)">
<td>
<input type="checkbox" @click.stop="" v-model="selectedHosts" :value="host.host_code" name="hosts" />
</td>
<td>{{ hostIdx - index }}</td>
<td>{{ host.host_nm }}</td>
<td>{{ host.host_protocol }}</td>
<td>{{ host.host_ip }}</td>
<td>{{ host.host_id }}</td>
<td>{{ host.host_port }}</td>
<td>{{ host.rgtr_id }}</td>
<td>{{ $filters.dateTime(host.reg_dt) }}</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<button class="red-border-btn small-btn" @click="deleteSelectedHosts">선택 삭제</button>
</div>
<PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="selectHosts" />
</div>
</div>
<div class="data-set">
<div class="form-box">
<div class="content-titleZone">
<p class="box-title" v-if="dataLoaded">호스트 수정</p>
<p class="box-title" v-else>호스트 등록</p>
</div>
<div class="table-zone">
<table class="form-table2">
<colgroup>
<col style="width: 10%" />
<col style="width: 40%" />
<col style="width: 10%" />
<col style="width: 40%" />
</colgroup>
<tbody>
<tr>
<th>프로토콜</th>
<td>
<select name="" id="host_protocol" class="full-input" v-model="hostData.host_protocol">
<option :value="null" disabled> 프로토콜을 선택해주세요. </option>
<option value="ftp">FTP - 파일 전송 프로토콜</option>
<option value="sftp"> SFTP - SSH 파일 전송 프로토콜 </option>
</select>
</td>
<th>호스트(IP)</th>
<td>
<input type="text" id="host_ip" class="full-input" v-model="hostData.host_ip" />
</td>
</tr>
<tr>
<th>포트</th>
<td>
<input type="number" id="host_port" class="full-input" v-model="hostData.host_port" />
</td>
<th>호스트명(별칭)</th>
<td>
<input type="text" id="host_nm" class="full-input" v-model="hostData.host_nm" />
</td>
</tr>
<tr>
<th>사용자ID</th>
<td>
<input type="text" id="host_id" class="full-input" v-model="hostData.host_id" />
</td>
<th v-if="dataLoaded">비밀번호 변경</th>
<th v-else>비밀번호</th>
<td>
<input v-if="dataLoaded" type="password" class="full-input" v-model="changPw" />
<input v-else id="host_pw" type="password" class="full-input" v-model="hostData.host_pw" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<!-- 데이터가 로드되었을 때는 '수정' 버튼과 '초기화' 버튼을 보여줍니다. -->
<template v-if="dataLoaded">
<button class="blue-btn small-btn" @click="updateHost">수정</button>
<button class="blue-border-btn small-btn" @click="insertForm()">취소</button>
</template>
<!-- 데이터가 로드되지 않았을 때는 '등록' 버튼과 '초기화' 버튼을 보여줍니다. -->
<template v-else>
<button class="blue-btn small-btn" @click="hostInsertCheck">등록</button>
<button class="blue-border-btn small-btn" @click="resetForm">초기화</button>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import axios from "axios";
export default {
data() {
return {
// 검색 객체
search: this.$getDefaultSerchVO(),
search_data: this.$getDefaultSerchItem(null, "String"),
hostData: {
host_code: null,
host_protocol: null,
host_ip: null,
host_nm: null,
host_id: null,
host_pw: null,
host_port: null,
},
changPw: null,
hosts: [],
hostIdx: 0,
dataLoaded: false,
selectedHosts: [],
searchPath: mdiMagnify,
inputValue: null,
checkAll: false,
hostTest: true,
};
},
methods: {
// 검색 객체 초기화
searchInit: function () {
this.search.searchObjectList.push(this.search_data);
},
selectHosts() {
const vm = this;
axios({
url: "/host/list",
method: "post",
headers: {},
data: vm.search,
})
.then(function (response) {
vm.hosts = response.data.resultData.hostList;
vm.search.totalRows = response.data.resultData.totalRow;
vm.hostIdx =
vm.search.totalRows -
(vm.search.currentPage - 1) * vm.search.perPage;
})
.catch(function (error) {
vm.$showAlert(
"호스트 목록",
"목록 불러오기 오류, 관리자에게 문의바랍니다."
);
});
},
hostInsert: function () {
const vm = this;
if (vm.hostTest === false) {
vm.$showAlert("호스트 등록", "접속테스트를 실행해주세요.");
return;
}
axios({
url: "/host",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.hostData,
})
.then(function (response) {
let result = response.data;
if (result > 0) {
vm.$showAlert("호스트 등록", "호스트 등록이 완료되었습니다.");
vm.selectHosts();
vm.resetForm();
vm.hostTest = false;
} else {
vm.$showAlert(
"호스트 등록",
"호스트 등록에 실패했습니다. 다시 시도해주세요."
);
}
})
.catch(function (error) {
vm.$showAlert("호스트 등록", "등록오류, 관리자에게 문의바랍니다.");
});
},
updateHost: async function () {
const vm = this;
if (
JSON.stringify(vm.hostData) === JSON.stringify(vm.originalHostData) &&
(vm.changPw === null || vm.changPw === "")
) {
vm.$showAlert("호스트 수정", "수정된 정보가 없습니다.");
return;
}
if (vm.changPw != null && vm.changPw != "") {
vm.hostData.host_pw = vm.changPw;
if (vm.hostTest === false) {
vm.$showAlert("호스트 수정", "접속테스트를 실행해주세요.");
return;
}
}
axios
.put("/host", vm.hostData)
.then((response) => {
if (response.data > 0) {
vm.$showAlert("호스트 수정", "호스트 정보가 수정되었습니다.");
vm.changPw = null;
vm.resetData();
vm.selectHosts();
vm.hostTest = false;
} else {
vm.$showAlert(
"호스트 수정",
"호스트 정보 수정에 실패하였습니다. 다시 시도해주세요."
);
}
})
.catch((error) => {
vm.$showAlert("호스트 수정", "수정 오류, 관리자에게 문의해주세요.");
});
},
async deleteSelectedHosts() {
const vm = this;
if (vm.selectedHosts.length === 0) {
vm.$showAlert("호스트 삭제", "선택한 호스트가 없습니다.");
return;
}
if (
!(await vm.$showConfirm(
"호스트삭제",
"선택한 호스트를 삭제하시겠습니까?"
))
) {
return;
}
axios({
url: "/host",
method: "delete",
headers: {
"Content-Type": "application/json",
},
data: vm.selectedHosts,
})
.then(function (response) {
// 삭제가 성공하면 화면에서도 호스트를 제거합니다.
if (response.data > 0) {
vm.$showAlert("호스트 삭제", "선택한 호스트가 삭제되었습니다.");
vm.checkAll = false;
vm.selectedHosts = [];
vm.selectHosts();
} else {
vm.$showAlert(
"호스트 삭제",
"선택한 호스트 삭제에 실패하였습니다. 다시 시도해주세요."
);
}
})
.catch(function (error) {
vm.$showAlert("호스트 삭제", "삭제오류, 관리자에게 문의바랍니다.");
});
},
insertForm: function () {
this.dataLoaded = false;
this.resetForm();
},
hostInsertCheck: async function () {
const vm = this;
if (vm.$isEmpty(vm.hostData.host_protocol)) {
vm.$showAlert("호스트 등록", "프로토콜을 선택해주세요.");
document.getElementById("host_ip").focus();
return false;
}
if (vm.$isEmpty(vm.hostData.host_ip)) {
vm.$showAlert("호스트 등록", "호스트(IP)를 입력해주세요.");
document.getElementById("host_ip").focus();
return false;
}
if (vm.$ipv4(vm.hostData.host_ip) === false) {
vm.$showAlert("호스트 등록", "IP형식을 확인해주세요.");
document.getElementById("host_ip").focus();
return false;
}
if (vm.$isEmpty(vm.hostData.host_port)) {
vm.$showAlert("호스트 등록", "포트를 입력해주세요.");
document.getElementById("host_port").focus();
return false;
}
if (vm.hostData.host_port > 65535) {
vm.$showAlert("호스트 등록", "포트는 65535이하 숫자입니다.");
document.getElementById("host_port").focus();
return false;
}
if (vm.$isEmpty(vm.hostData.host_nm)) {
vm.$showAlert("호스트 등록", "호스트명(별칭)을 입력해주세요.");
document.getElementById("host_nm").focus();
return false;
}
if (vm.$isEmpty(vm.hostData.host_id)) {
vm.$showAlert("호스트 등록", "사용자ID를 입력해주세요.");
document.getElementById("host_id").focus();
return false;
}
if (vm.$isEmpty(vm.hostData.host_pw)) {
vm.$showAlert("호스트 등록", "비밀번호를 입력해주세요.");
document.getElementById("host_pw").focus();
return false;
}
if (vm.hostTest === false) {
vm.$showAlert("호스트 등록", "접속테스트를 실행해주세요.");
return false;
}
vm.hostInsert();
},
check: function (host) {
this.selectedHosts.push(host.host_code);
},
hostCheckAll() {
this.checkAll = !this.checkAll;
if (this.checkAll) {
this.hosts.forEach((host) => {
this.selectedHosts.push(host.host_code);
});
} else {
this.selectedHosts = [];
}
},
loadHostData(host) {
this.hostData = Object.assign({}, host); // 클릭한 호스트의 데이터를 복사하여 저장합니다.
this.originalHostData = Object.assign({}, host);
this.dataLoaded = true; // 데이터가 로드되었음을 표시합니다.
},
resetData() {
this.hostData = {}; // 데이터를 초기화합니다.
this.dataLoaded = false; // 데이터 로드 상태를 초기화합니다.
},
resetForm() {
this.hostData = {
host_code: null,
host_protocol: null,
host_ip: null,
host_nm: null,
host_id: null,
host_pw: null,
host_port: null,
};
},
},
components: {
PageNavigation: PageNavigation,
PaginationButton: PaginationButton,
SvgIcon: SvgIcon,
},
mounted() {
this.selectHosts();
this.searchInit();
},
};
</script>