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">
<p class="main-title">진단대상DB관리</p>
<PageNavigation />
</div>
<div class="content">
<div class="row">
<div class="content-titleZone">
<p class="box-title">목록</p>
</div>
<div class="searchbar-zone">
<div class="flex justify-start align-center">
<span class="option-title">DBMS유형</span>
<select name="" id="" class="square-select">
<option value="all">전체</option>
<option value="PostgreSQL">PostgreSQL</option>
</select>
<span class="option-title">DBMS명</span>
<div class="search-square">
<input type="text" class="square-input" placeholder="Search">
<button class="square-button">
<svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
</button>
</div>
</div>
</div>
<div class="table-zone">
<div class="flex justify-start">
<button class="red-border-btn small-btn" @click="deleteDbData()">선택항목 삭제</button>
<button class="red-border-btn small-btn" @click="connectDb()">접속테스트</button>
<button class="red-border-btn small-btn" @click="collectSchema()">스키마수집</button>
</div>
<table class="list-table">
<colgroup>
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 5%;">
<col style="width: 12%;">
<col style="width: 12%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th>No</th>
<th>선택</th>
<th>연결상태</th>
<th>*DBMS명</th>
<th>*DBMS유형</th>
<th>DBMS버전</th>
<th>*연결 URL</th>
<th>*드라이버명</th>
<th>*DB접속계정ID</th>
<th>*DB접속계정암호</th>
<th>*기관명</th>
<th>*정보시스템명</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr v-for="(db, index) in dbList" :key="index" @click="selectSchemaList(index)">
<td>{{ index + 1 }}</td>
<td><input type="checkbox" :checked="isSelected(index)" @click="handleClick(index)"></td>
<td>{{ getConnectStatus(db.dbms_connect) }}</td>
<td>{{ db.dbms_name }}</td>
<td>{{ db.dbms_type }}</td>
<td>{{ db.dbms_version }}</td>
<td>{{ db.dbms_url_port }}</td>
<td>{{ db.dbms_drive_nm }}</td>
<td>{{ db.dbms_connect_id }}</td>
<td>{{ db.dbms_connect_pw }}</td>
<td>{{ db.dbms_ag_nm }}</td>
<td>{{ db.dbms_system_nm }}</td>
<td>{{ db.dbms_explain }}</td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">
<button class="red-border-btn small-btn" @click="insertDbData()">신규 DB 추가</button>
</td>
<td><input type="text" v-model="dbInput.dbms_name"> </td>
<td> <select v-model="dbInput.dbms_type" @change="updateDriveNm">
<option value="" disabled selected>선택</option>
<option value="PostgreSQL">PostgreSQL</option>
</select>
</td>
<td></td>
<td><input type="text" v-model="dbInput.dbms_url_port"> </td>
<td><input type="text" v-model="dbInput.dbms_drive_nm"> </td>
<td><input type="text" v-model="dbInput.dbms_connect_id"> </td>
<td><input type="text" v-model="dbInput.dbms_connect_pw"> </td>
<td><input type="text" v-model="dbInput.dbms_ag_nm"> </td>
<td><input type="text" v-model="dbInput.dbms_system_nm"> </td>
<td><input type="text" v-model="dbInput.dbms_explain"> </td>
</tr>
</tbody>
</table>
</div>
<PaginationButton />
</div>
<div class="content-titleZone">
<p class="box-title">DBMS 스키마 정보</p>
</div>
<div class="table-zone">
<table class="list-table" style="text-align: center">
<colgroup>
<col width="5%" />
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="40%" />
</colgroup>
<thead>
<tr>
<th>No.</th>
<th>수집 제외</th>
<th>DB 접속 대상</th>
<th>스키마명</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in schemaList" :key="index">
<td>{{ index + 1 }}</td>
<td>
<input type="checkbox" :checked="item.schema_yn === 'y'" @change="changeYN(item)" />
</td>
<td>{{ item.dbms_name }}</td>
<td>{{ item.schema_name }}</td>
<td>
<input type="text" :placeholder="item.schema_explain" :disabled="isChecked(item)"
@change="chagneExplain(item, $event)" class="explain_input" />
</td>
</tr>
</tbody>
</table>
<div class="flex justify-end">
<button class="red-border-btn small-btn" @click="setSchema">수집제외 여부, 설명 저장</button>
</div>
</div>
<div>{{ update_yn }}</div>
<div>{{ updated_explain }}</div>
<PaginationButton :perPage="perPage" :currentPage.sync="currentPage" :totalCount="totalCount" :maxRange="10" />
</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 {
searchPath: mdiMagnify,
inputValue: null,
dbList: [],
dbInput: {
dbms_name: '',
dbms_type: '',
dbms_version: '',
dbms_url_port: '',
dbms_drive_nm: '',
dbms_connect: '',
dbms_connect_id: '',
dbms_connect_pw: '',
dbms_ag_nm: '',
dbms_system_nm: '',
dbms_explain: '',
user_id: $cookies.get("USER_ID")
},
selectedDb: null, // 선택된 DB의 인덱스를 저장하는 변수
userName: $cookies.get("USER"),
selectedDbIndex: null,
schemaList: [],
perPage: 10,
currentPage: 1,
totalCount: 2,
// 스키마 수정 목록
updateSchemaList: [],
}
},
methods: {
// db유형마다 다른 driver명이 되도록
updateDriveNm() {
if (this.dbInput.dbms_type === 'PostgreSQL') {
this.dbInput.dbms_url_port = 'jdbc:postgresql://{ip}:{port}/{db명}';
this.dbInput.dbms_drive_nm = 'org.postgresql.Driver';
}
},
// 연결 상태 확인
getConnectStatus(connect) {
switch (connect) {
case "0":
return '연결 필요';
case "1":
return '연결 성공';
}
},
isSelected(index) {
// 현재 인덱스가 선택된 인덱스인지 확인
return this.selectedDb === index;
},
handleClick(index) {
// 체크박스 클릭 시 실행되는 메서드
if (this.selectedDb === index) {
this.selectedDb = null;
} else {
this.selectedDb = index;
}
},
insertDbData: function () {
const vm = this;
const inputData = vm.dbInput;
// 유효성 검사
if (!this.dbInput.dbms_name || !this.dbInput.dbms_type || !this.dbInput.dbms_url_port ||
!this.dbInput.dbms_drive_nm || !this.dbInput.dbms_connect_id || !this.dbInput.dbms_connect_pw ||
!this.dbInput.dbms_ag_nm || !this.dbInput.dbms_system_nm) {
if (!this.dbInput.dbms_name) {
alert("DBMS명은 반드시 입력해야 합니다.");
this.$refs.dbmsNameInput.focus();
} else if (!this.dbInput.dbms_type) {
alert("DBMS유형은 반드시 선택해야 합니다.");
this.$refs.dbms_type.focus();
} else if (!this.dbInput.dbms_url_port) {
alert("연결 URL은 반드시 입력해야 합니다.");
this.$refs.dbms_url_port.focus();
} else if (!this.dbInput.dbms_drive_nm) {
alert("드라이버명은 반드시 입력해야 합니다.");
this.$refs.dbms_drive_nm.focus();
} else if (!this.dbInput.dbms_connect_id) {
alert("DB접속계정ID는 반드시 입력해야 합니다.");
this.$refs.dbms_connect_id.focus();
} else if (!this.dbInput.dbms_connect_pw) {
alert("DB접속계정암호는 반드시 입력해야 합니다.");
this.$refs.dbms_connect_pw.focus();
} else if (!this.dbInput.dbms_ag_nm) {
alert("기관명은 반드시 입력해야 합니다.");
this.$refs.dbms_ag_nm.focus();
} else if (!this.dbInput.dbms_system_nm) {
alert("정보시스템명은 반드시 입력해야 합니다.");
this.$refs.dbms_system_nm.focus();
}
return;
}
axios({
url: "insertDbData.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: inputData,
})
.then(function (response) {
console.log("insertDbData - response : ", response.data);
vm.selectDbList();
})
.catch(function (error) {
console.log("insertDbData - error : ", error);
alert("insertDbData 오류");
});
},
selectDbList: function () {
const vm = this;
axios({
url: "selectDbList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
user_id: vm.dbInput.user_id,
},
})
.then(function (response) {
vm.dbList = response.data;
vm.selectedDb = null;
})
.catch(function (error) {
console.log("selectDbList - error : ", error);
alert("selectDbList 오류");
});
},
connectDb: function () {
const vm = this;
if (vm.selectedDb == null) {
alert("접속 테스트할 DB를 선택해주세요!")
return;
}
axios({
url: "connectDb.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.dbList[vm.selectedDb],
})
.then(function (response) {
console.log(response.data);
if (response.data == 1) {
alert("DB 접속이 성공되었습니다!");
vm.selectDbList();
} else {
alert("접속이 실패했습니다! DB 정보를 다시 확인해주세요!");
}
})
.catch(function (error) {
console.log("selectDbList - error : ", error);
alert("접속이 실패했습니다! DB 정보를 다시 확인해주세요");
vm.selectDbList();
});
},
collectSchema: function () {
const vm = this;
if (vm.selectedDb == null) {
alert("접속 테스트할 DB를 선택해주세요!")
return;
}
if (vm.dbList[vm.selectedDb].dbms_connect != 1) {
alert("접속 테스트가 완료된 DB를 선택해주세요!")
return;
}
axios({
url: "collectSchema.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.dbList[vm.selectedDb],
})
.then(function (response) {
console.log(response.data);
if (response.data == 1) {
alert("DB 접속이 성공되었습니다!");
}
})
.catch(function (error) {
console.log("selectDbList - error : ", error);
alert("접속이 실패했습니다! DB 정보를 다시 확인해주세요");
});
},
deleteDbData: function () {
const vm = this;
if (vm.selectedDb == null) {
alert("삭제할 DB를 선택해주세요!")
return;
}
axios({
url: "deleteDbData.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.dbList[vm.selectedDb],
})
.then(function (response) {
console.log(response.data);
vm.selectDbList();
})
.catch(function (error) {
console.log("deleteDbData - error : ", error);
vm.selectDbList();
});
},
//스키마 정보 수집
selectSchemaList(index) {
const vm = this;
if (vm.dbList && vm.dbList.length > index ) {
vm.selectedDbIndex = vm.dbList[index].dbms_id;
}
axios({
url: '/selectSchemaList.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
dbms_id: vm.selectedDbIndex,
},
})
.then((res) => {
console.log('스키마 정보 수집 응답 : ', res.data);
vm.schemaList = res.data;
})
.catch((err) => {
console.log('스키마 정보 수집 에러 : ', err);
alert('스키마 수집 에러');
});
},
/* 수정 정보 저장 하기 */
//인덱스 찾기
findSchemaIndex(schemaList, schemaId) {
return schemaList.findIndex((schema) => schema.schema_id === schemaId);
},
// 수집 제외 여부
changeYN(item) {
const updateSchemaList = this.updateSchemaList;
const existSchema = this.findSchemaIndex(updateSchemaList, item.schema_id);
console.log(existSchema); //updateSchemaList의 인덱스 값
if (existSchema !== -1) {
//존재할 때
console.log('updateSchemaList 존재');
updateSchemaList[existSchema].schema_yn = updateSchemaList[existSchema].schema_yn === 'y' ? 'n' : 'y'; //값 토글
} else {
console.log('updateSchemaList 존재 X');
updateSchemaList.push({
schema_id: item.schema_id,
schema_yn: item.schema_yn === 'y' ? 'n' : 'y', //값 토글
schema_explain: item.schema_explain,
});
}
console.log(Array.from(updateSchemaList));
},
//스키마 설명 수정
chagneExplain(item, event) {
console.log('item_id : ', item.schema_id);
console.log('변경된 설명 : ', event.target.value);
const update_explain = event.target.value; //변경된 스키마 설명
const updateSchemaList = this.updateSchemaList;
const existSchema = this.findSchemaIndex(updateSchemaList, item.schema_id);
if (existSchema !== -1) {
console.log('updateSchemaList 존재');
updateSchemaList[existSchema].schema_explain = update_explain;
} else {
console.log('updateSchemaList 존재 X');
updateSchemaList.push({
schema_id: item.schema_id,
schema_yn: item.schema_yn,
schema_explain: update_explain,
});
}
console.log(Array.from(updateSchemaList));
},
//체크 여부 확인 - input : disable
isChecked(item) {
const updateSchemaList = this.updateSchemaList;
const existSchema = this.findSchemaIndex(updateSchemaList, item.schema_id);
if (
(existSchema === -1 && item.schema_yn === 'n') ||
(existSchema !== -1 && updateSchemaList[existSchema].schema_yn === 'n')
) {
return true;
}
return false;
},
// 변경 내용 전송
setSchema() {
const vm = this;
// 배열로 변경
const UpdateSchemaList = JSON.parse(JSON.stringify(vm.updateSchemaList));
console.log(typeof UpdateSchemaList);
console.log(UpdateSchemaList);
if (UpdateSchemaList.length < 1) {
alert('변경 사항이 없습니다.');
} else {
axios({
url: '/updateSchema.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: UpdateSchemaList,
})
.then((res) => {
console.log('스키마 정보 수정 응답 : ', res.data);
if (res.data > 0) {
alert('변경 내용 저장 완료');
// 변경 후 초기화
vm.updateSchemaList = [];
vm.selectSchemaList(vm.selectedDbIndex);
// 모든 input 칸 리셋
const inputs = document.querySelectorAll('.explain_input');
inputs.forEach((input) => {
input.value = '';
});
}
})
.catch((err) => {
console.log('스키마 정보 수정 에러 : ', err);
alert('스키마 수정 에러');
});
}
},
},
watch: {
},
computed: {
PaginationButton: PaginationButton,
},
components: {
'PageNavigation': PageNavigation,
'PaginationButton': PaginationButton,
'SvgIcon': SvgIcon
},
mounted() {
console.log('main mounted');
this.selectDbList();
}
}
</script>
<style scoped>
.explain_input {
background-color: transparent;
border: none;
}
</style>