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 v-model="dbListSearch.dbmsType" class="square-select">
<option value="all">전체</option>
<option value="PostgreSQL">PostgreSQL</option>
</select>
<span class="option-title">DBMS명</span>
<div class="search-square">
<input
v-model="dbListSearch.searchText"
type="text"
class="square-input"
placeholder="Search"
/>
<button @click="selectDbList" 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="updateDbData()">선택항목 수정</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 class="dbData">
<tr
v-for="(db, index) in dbList"
:key="index"
@mouseover="() => handleSchemaClick(index)"
@click="selectSchemaList"
>
<td>{{ index + 1 }}</td>
<td>
<input type="checkbox" :checked="isSelected(index)" @click="handleClick(index)" />
</td>
<td>{{ getConnectStatus(db.dbms_connect) }}</td>
<td><input type="text" v-model="db.dbms_name" /></td>
<td>
<select v-model="db.dbms_type" @change="updateDriveNm(index)">
<option value="PostgreSQL">PostgreSQL</option>
<option value="MariaDB">MariaDB</option>
</select>
</td>
<td>{{ db.dbms_version }}</td>
<td><input type="text" v-model="db.dbms_url_port" /></td>
<td><input type="text" v-model="db.dbms_drive_nm" /></td>
<td><input type="text" v-model="db.dbms_connect_id" /></td>
<td><input type="password" v-model="db.dbms_connect_pw" /></td>
<td><input type="text" v-model="db.dbms_ag_nm" /></td>
<td><input type="text" v-model="db.dbms_system_nm" /></td>
<td><input type="text" v-model="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_input">
<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="password" 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
v-model:currentPage="dbListSearch.currentPage"
:perPage="dbListSearch.perPage"
:totalCount="dbListCount"
:maxRange="5"
/>
</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 === 'n'" @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_' + item.schema_id"
/>
</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
v-model:currentPage="schemaCurrentPage"
:perPage="schemaPerPage"
:totalCount="schemaListCount"
:maxRange="5"
/>
</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의 인덱스를 저장하는 변수
selectedSchema: null, // 선택된 스키마 행의 인덱스를 저장하는 변수
userName: $cookies.get('USER'),
selectedDbIndex: null,
schemaList: [],
dbListSearch: {
currentPage: 1,
perPage: 10,
user_id: $cookies.get('USER_ID'),
dbmsType: 'all',
searchText: null,
},
dbListCount: 0,
dbIdx: 0,
// 스키마 수정 목록
updateSchemaList: [],
schemaCurrentPage: 1,
schemaPerPage: 10,
schemaIndex: 0,
};
},
methods: {
// db유형마다 다른 driver명이 되도록
updateDriveNm_input() {
if (this.dbInput.dbms_type === 'PostgreSQL') {
this.dbInput.dbms_url_port = 'jdbc:postgresql://{ip}:{port}/{db명}';
this.dbInput.dbms_drive_nm = 'org.postgresql.Driver';
}
},
updateDriveNm(index) {
if (this.dbList[index].dbms_type === 'PostgreSQL') {
this.dbList[index].dbms_url_port = 'jdbc:postgresql://{ip}:{port}/{db명}';
this.dbList[index].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;
}
},
handleSchemaClick(index) {
this.selectedSchema = 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.dbms_name.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: vm.dbListSearch,
})
.then(function (response) {
vm.selectedDb = null;
vm.dbList = response.data.dbList;
vm.dbListCount = response.data.dbListCount;
vm.dbIdx = vm.dbListCount - (vm.dbListSearch.currentPage - 1) * vm.dbListSearch.perPage;
})
.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('스키마 수집이 성공되었습니다!');
vm.selectDbList();
}
})
.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) {
alert('DB가 삭제되었습니다!');
vm.selectDbList();
})
.catch(function (error) {
console.log('deleteDbData - error : ', error);
vm.selectDbList();
});
},
// DB 데이터 수정
updateDbData: function () {
const vm = this;
if (vm.selectedDb == null) {
alert('수정할 DB를 선택해주세요!');
return;
}
axios({
url: 'updateDbData.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: vm.dbList[vm.selectedDb],
})
.then(function (response) {
alert('DB가 수정되었습니다!');
vm.selectDbList();
})
.catch(function (error) {
console.log('updateDbData - error : ', error);
vm.selectDbList();
});
},
//스키마 정보 수집
selectSchemaList() {
const vm = this;
if (vm.dbList && vm.dbList.length > vm.selectedSchema) {
vm.selectedDbIndex = vm.dbList[vm.selectedSchema].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.schemaList;
vm.schemaListCount = res.data.schemaListCount;
vm.schemaIndex = vm.schemaListCount - (vm.schemaCurrentPage - 1) * vm.schemaPerPage;
})
.catch((err) => {
console.log('스키마 정보 수집 에러 : ', err);
alert('스키마 수집 에러');
});
},
/* 수정 정보 저장 하기 */
//인덱스 찾기
findSchemaIndex(schemaList, schemaId) {
return schemaList.findIndex((schema) => schema.schema_id === schemaId);
},
// 수집 여부 상태 토글 - update 배열에 존재할때
toggleSchemaStatus(existingSchema, update_yn) {
existingSchema.schema_yn = update_yn;
existingSchema.schema_explain = update_yn === 'n' ? existingSchema.schema_explain : null;
},
// 수집 여부 상태 변경
changeYN(item) {
const vm = this;
const updateSchemaList = vm.updateSchemaList;
const existSchemaIndex = vm.findSchemaIndex(updateSchemaList, item.schema_id);
console.log(existSchemaIndex); // updateSchemaList에서 item의 인덱스
if (existSchemaIndex !== -1) {
// 아이템이 이미 존재하는 경우
console.log('updateSchemaList에 존재합니다');
const existingSchema = updateSchemaList[existSchemaIndex];
vm.toggleSchemaStatus(existingSchema, existingSchema.schema_yn === 'y' ? 'n' : 'y');
} else {
console.log('updateSchemaList에 존재하지 않습니다');
const update_yn = item.schema_yn === 'y' ? 'n' : 'y';
console.log('update_yn: ', update_yn);
updateSchemaList.push({
schema_id: item.schema_id,
schema_yn: update_yn, // 값 토글
schema_explain: update_yn === 'n' ? item.schema_explain : null,
});
}
console.log('수집 제외 여부: ', Array.from(updateSchemaList));
},
// 설명 변경
chagneExplain(item, event) {
const vm = this;
console.log('item_id : ', item.schema_id);
console.log('변경된 설명 : ', event.target.value);
const update_explain = event.target.value; //변경된 스키마 설명
const updateSchemaList = vm.updateSchemaList;
const existSchemaIndex = vm.findSchemaIndex(updateSchemaList, item.schema_id);
if (existSchemaIndex !== -1) {
console.log('updateSchemaList 존재');
updateSchemaList[existSchemaIndex].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 vm = this;
const updateSchemaList = vm.updateSchemaList;
const existSchemaIndex = vm.findSchemaIndex(updateSchemaList, item.schema_id);
return (
(existSchemaIndex === -1 && item.schema_yn === 'y') ||
(existSchemaIndex !== -1 && updateSchemaList[existSchemaIndex].schema_yn === 'y')
);
},
// 변경 내용 전송
setSchema() {
const vm = this;
// 배열로 변경
const UpdateSchemaList = JSON.parse(JSON.stringify(vm.updateSchemaList));
console.log(typeof UpdateSchemaList);
console.log(UpdateSchemaList);
if (UpdateSchemaList.length < 1) {
alert('변경 사항이 없습니다.');
return;
}
const targetItem = UpdateSchemaList.find(
(v) => v.schema_yn === 'n' && (v.schema_explain === null || v.schema_explain === undefined)
);
if (targetItem) {
alert('설명을 입력하세요');
// 입력 안 한 칸으로 이동
const firstInput = document.querySelector(`.explain_input_${targetItem.schema_id}`);
if (firstInput) {
firstInput.value = '';
firstInput.focus();
}
return;
}
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();
// 모든 input 칸 리셋
const inputs = document.querySelectorAll('[class^="explain_input_"]');
inputs.forEach((input) => {
input.value = '';
});
}
})
.catch((err) => {
console.log('스키마 정보 수정 에러 : ', err);
alert('스키마 수정 에러');
});
},
},
watch: {
'dbListSearch.currentPage': function () {
this.selectDbList();
},
},
computed: {
PaginationButton: PaginationButton,
},
components: {
PageNavigation: PageNavigation,
PaginationButton: PaginationButton,
SvgIcon: SvgIcon,
},
mounted() {
console.log('main mounted');
this.selectDbList();
},
};
</script>
<style>
.dbData input[type='text'] {
min-width: 100px;
}
</style>