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
<!--
작성자 : 정다정
작성일 : 2024.01.16
내용 : 진단대상 DB 관리 스키마 조회 및 테이블 수정
-->
<template>
<div class="content">
<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>
</template>
<script>
import axios from 'axios';
import PaginationButton from '../../component/PaginationButton.vue';
export default {
data() {
return {
dbms_id: 2, //임시 dbms_id
schemaList: [],
perPage: 10,
currentPage: 1,
totalCount: 2,
// 스키마 수정 목록
updateSchemaList: [],
};
},
methods: {
//스키마 정보 수집
getSchema() {
const vm = this;
axios({
url: '/selectSchemaList.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
dbms_id: vm.dbms_id,
},
})
.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.getSchema();
// 모든 input 칸 리셋
const inputs = document.querySelectorAll('.explain_input');
inputs.forEach((input) => {
input.value = '';
});
}
})
.catch((err) => {
console.log('스키마 정보 수정 에러 : ', err);
alert('스키마 수정 에러');
});
}
},
},
components: {
PaginationButton: PaginationButton,
},
mounted() {
this.getSchema();
},
};
</script>
<style>
.explain_input {
background-color: transparent;
border: none;
}
</style>