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 content flex100" style="overflow: visible;">
<div class="flex-column justify-between">
<div class="content-wrap">
<div class="content-titleZone">
<p class="box-title">연계정보 등록</p>
</div>
<table class="form-table mb30">
<colgroup>
<col style="width: " />
<col style="width: " />
<col style="width: " />
<col style="width: " />
</colgroup>
<tbody>
<tr>
<th>연계 명</th>
<td colspan="3">
<input id="conectNm" type="text" placeholder="연계 이름을 입력해 주세요" class="half-input" v-model="connectionDB.conectNm" />
</td>
</tr>
<tr>
<th>DMBS</th>
<td colspan="3">
<select id="databaseType" @change="successAt = false" class="square-select half-input" v-model="connectionDB.databaseType">
<option v-for="(itm, index) in databaseTypeList" :key="index" :value="itm.key"> {{ itm.value }} </option>
</select>
</td>
</tr>
<tr>
<th>IP</th>
<td colspan="3">
<input id="conectIp" type="text" @input="successAt = false" class="half-input" v-model="connectionDB.conectIp" placeholder="127.0.0.1" />
</td>
</tr>
<tr>
<th>PORT</th>
<td colspan="3">
<input id="conectPort" type="text" @input="successAt = false" class="half-input" v-model="connectionDB.conectPort" />
</td>
</tr>
<tr>
<th>DB 명</th>
<td colspan="3">
<input id="databaseNm" type="text" @input="successAt = false" class="half-input" v-model="connectionDB.databaseNm" placeholder="데이터베이스명 OR 스키마명" />
</td>
</tr>
<tr>
<th>접속ID</th>
<td colspan="3">
<input type="text" class="half-input" @input="successAt = false" v-model="connectionDB.userId" placeholder="접속 ID" />
</td>
</tr>
<tr>
<th>접속PW</th>
<td colspan="3">
<input type="password" class="half-input" @input="successAt = false" v-model="connectionDB.userPassword" placeholder="접속 PW" autocomplete="new-password" />
</td>
</tr>
</tbody>
</table>
<div class="content-titleZone flex justify-between">
<p class="box-title">접속결과 확인</p>
<button class="blue-btn small-btn" @click="dataBaseConnectionCheck()"> 접속 테스트 </button>
</div>
<div class="table-zone" style="height: calc(50% - 40px); overflow-y: auto;">
<table class="list-table">
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="80%" />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>접속시간</th>
<th>접속결과</th>
</tr>
</thead>
<tbody>
<tr v-for="(itm, indx) in resultMessage" :key="indx">
<td>{{ indx + 1 }}</td>
<td>{{ itm.time }}</td>
<td>{{ itm.message }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="insertDbConnection()">수정</button>
<button class="red-border-btn small-btn" @click="deleteDbConnection()">삭제</button>
<button class="darkg-border-btn small-btn" @click="goBack()">목록</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from '../../common/defaultAxios.js';
export default {
data() {
return {
// 커넥션 DB 오브젝트
connectionDB: {},
resultMessage: [],
// 연계 성공여부
successAt: false,
databaseTypeList: [],
isCheckConnect: false,
};
},
methods: {
// 공통코드 가져오기
getCommnCode: async function (groupCode) {
const response = await this.$getCommonCode(groupCode);
return response;
},
// 초기화(데이터 베이스 타입 초기화)
init: async function () {
const vm = this;
this.databaseTypeList = await this.$getDataBaseTypeList();
this.connectionDB = Object.assign(
{},
this.$getDefaultJobGroup().connectionDb
);
this.connectionDB.databaseType = this.databaseTypeList.MARIADB.key;
axios({
url: "/data/selectDbConnectionOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { dbConectId: vm.$route.query.dbConnection },
})
.then(function (response) {
vm.connectionDB = response.data.resultData.dbConnection;
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 연계가능 여부 테스트
dataBaseConnectionCheck: function () {
var vm = this;
axios({
url: "/data/dataBaseConnectionCheck.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.connectionDB,
})
.then(function (response) {
if (response.data.checkMessage.success == true) {
vm.successAt = true;
} else {
vm.successAt = false;
}
vm.$showAlert("결과내용", response.data.checkMessage.message);
vm.resultMessage.push({
time: vm.$getFullTime(),
message: response.data.checkMessage.message,
result: response.data.checkMessage.success
? "접속성공"
: "접속실패",
});
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 연계정보 저장
async insertDbConnection() {
var vm = this;
try {
if (vm.$isEmpty(vm.connectionDB.conectNm)) {
vm.$showAlert("경고", "연계제목은 필수입력입니다.");
return false;
}
if (vm.successAt == false && vm.$isEmpty(vm.$route.query.dbConnection)) {
vm.$showAlert("경고", "정상적인 접속정보가 아닙니다.");
return false;
}
const confirmed = await vm.$showConfirm("확인", "연계 정보수정을 진행하시겠습니까?");
if (!confirmed) {
return;
}
const response = await axios({
url: "/data/insertDbConnection.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.connectionDB,
})
vm.$showAlert("메세지", "수정되었습니다.");
vm.$router.push("/dbConnectionList.page");
} catch (error) {
vm.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
};
},
async deleteDbConnection() {
var vm = this;
try {
const confirmed = await vm.$showConfirm("경고", "삭제 하시겠습니까?");
if (!confirmed) {
return;
}
const response = await axios({
url: "/data/deleteConnectionDb.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.connectionDB,
});
if (response.data.resultData.dbConnection.checkMessage.success) {
vm.$showAlert("메세지", "삭제되었습니다.");
vm.$router.push("/dbConnectionList.page");
} else {
vm.$showAlert("메세지", response.data.resultData.dbConnection.checkMessage.message);
}
} catch (error) {
vm.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
}
},
goBack: function () {
window.history.back();
},
},
mounted() {
this.init();
},
};
</script>