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 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">X</button>
</div>
</div>
<div class="modal-content-monthly">
<div class="flex-column justify-between">
<div class="flex justify-end align-center flex10">
<div class="flex justify-end flex100">
<div class="search-bar">
<div class="flex justify-end align-center">
<input
type="date"
name="start-date"
id="start-date"
class="square-date"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value"
/>
<span class="coupler">~</span>
<input
type="date"
name="end-date"
id="end-date"
class="square-date"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value2"
/>
<select
name=""
id="searchItm1"
class="square-select"
v-model="search_data.key"
>
<option value="conect_nm">연계명</option>
<option value="conect_ip">접속IP</option>
</select>
<div class="search-square">
<input
type="text"
class="square-input"
placeholder="Search"
v-model="search_data.value"
v-on:keyup.enter="searchData()"
/>
<button class="square-button" @click="searchData()">
<svg-icon
type="mdi"
:path="this.$getIconPath()"
class="square-icon"
></svg-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="table-zone flex90">
<div class="list-info flex justify-between align-center">
<div class="count-zone">
<p>
총 <span>{{ search.totalRows }}</span
>건
</p>
</div>
<div class="cunt-selectZone">
<select id="pageCount" v-model="search.perPage">
<option value="10">10개 보기</option>
<option value="20">20개 보기</option>
</select>
</div>
</div>
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 5%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 16%" />
<col style="width: 14%" />
</colgroup>
<thead>
<tr>
<th>순서</th>
<th>연계명</th>
<th>타입</th>
<th>DB명</th>
<th>IP</th>
<th>id</th>
<th>생성자</th>
<th>생성일</th>
<th>선택</th>
</tr>
</thead>
<tbody>
<tr v-for="(itm, indx) in dbConnectionList" :key="indx">
<td>{{ indx + 1 }}</td>
<td>{{ itm.conectNm }}</td>
<td>{{ itm.databaseType }}</td>
<td>{{ itm.databaseNm }}</td>
<td>{{ itm.conectIp }}</td>
<td>{{ itm.userId }}</td>
<td>{{ itm.creatId }}</td>
<td>{{ $filters.dateTime(itm.creatDt) }}</td>
<td>
<button
class="blue-border-btn small-btn"
@click="selectItm(itm)"
>
선택
</button>
</td>
</tr>
</tbody>
</table>
<PaginationButton
v-model:currentPage="search.currentPage"
:perPage="search.perPage"
:totalCount="search.totalRows"
:maxRange="5"
:click="searchData"
/>
</div>
</div>
</div>
<div class="modal-end flex justify-end">
<button class="blue-btn small-btn" @click="closeModal">닫기</button>
</div>
</div>
</div>
</template>
<script>
import CodeList from "../../component/common/Component_CodeList.vue";
import axios from "axios";
import SvgIcon from "@jamescoyle/vue-icon";
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
export default {
name: "dbcon-search",
props: {
openPopup: {
type: Boolean,
default: false,
},
},
data() {
return {
isModalOpen: this.openPopup,
// 검색 객체
search: this.$getDefaultSerchVO(),
search_data: this.$getDefaultSerchItem("conect_nm", "string"),
search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
dbConnectionList: [],
};
},
methods: {
closeModal: function () {
this.isModalOpen = false;
this.$emit("modalclose", false);
},
// 데이터 커넥션 등록
createDbConnect: function () {
this.$router.push("/insertDBConnection.page");
},
searchData: function () {
const vm = this;
axios({
url: "/data/selectDbConnectionList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: JSON.stringify(vm.search),
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.dbConnectionList = response.data.resultData.dbConnectionList;
vm.search.totalRows = response.data.resultData.totalRow;
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 데이터 선택
selectItm: function (itm) {
this.$emit("selectItm", itm);
this.closeModal();
},
// 초기화
init: function () {
this.search.searchObjectList.push(this.search_data);
this.search.searchObjectList.push(this.search_date);
},
},
watch: {
openPopup: function (v) {
this.isModalOpen = v;
},
},
computed: {
CodeList: CodeList,
PageNavigation: PageNavigation,
SvgIcon: SvgIcon,
PaginationButton: PaginationButton,
},
components: {},
mounted() {
this.init();
this.searchData();
},
};
</script>