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
File name
Commit message
Commit date
<template>
<div class="modal-content-monthly">
<template v-if="currentPage == 1">
<div class="table-zone">
<table class="form-table">
<colgroup>
<col style="width: 25%" />
<col style="width: 75%" />
</colgroup>
<tbody v-if="jobItm.itm != null">
<tr>
<th>연계정보 타입</th>
<td>
<div class="input-container flex">
<label class="radio-label">
<input type="radio" name="radio" :value="false" class="custom-radiobox" @change="successAt = false" v-model="jobItm.itm_option_bool" />
<span>직접입력</span>
</label>
<label class="radio-label">
<input type="radio" name="radio" :value="true" class="custom-radiobox" @change="successAt = false" v-model="jobItm.itm_option_bool" />
<span>불러오기</span>
</label>
</div>
</td>
</tr>
<tr v-show="jobItm.itm_option_bool">
<th>연계정보</th>
<td>
<input type="text" class="half-input" disabled :value="linkConnectionDB.conectNm +
'(' +
linkConnectionDB.conectIp +
')'
" v-if="linkConnectionDB.conectNm != null" />
<input type="text" class="half-input" disabled v-else />
<button class="blue-border-btn small-btn" @click="dbConSearchOpen(true)"> 검색 </button>
</td>
</tr>
<tr>
<th>DMBS</th>
<td>
<select id="databaseType" @change="successAt = false" class="square-select half-input" v-model="inputConnectionDB.databaseType" :disabled="jobItm.itm_option_bool">
<option v-for="(itm, index) in databaseTypeList" :key="index" :value="itm.key"> {{ itm.value }} </option>
</select>
</td>
</tr>
<tr>
<th>IP</th>
<td>
<input id="conectIp" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.conectIp" placeholder="127.0.0.1" :disabled="jobItm.itm_option_bool" />
</td>
</tr>
<tr>
<th>PORT</th>
<td>
<input id="conectPort" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.conectPort" :disabled="jobItm.itm_option_bool" />
</td>
</tr>
<tr>
<th>DB 명</th>
<td>
<input id="databaseNm" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.databaseNm" placeholder="데이터베이스명 OR 스키마명" :disabled="jobItm.itm_option_bool" />
</td>
</tr>
<tr>
<th>접속ID</th>
<td>
<input type="text" class="half-input" @input="successAt = false" v-model="inputConnectionDB.userId" placeholder="접속 ID" :disabled="jobItm.itm_option_bool" />
</td>
</tr>
<tr>
<th>접속PW</th>
<td>
<input type="password" class="half-input" @input="successAt = false" v-model="inputConnectionDB.userPassword" placeholder="접속 PW" autocomplete="new-password" :disabled="jobItm.itm_option_bool" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="content-titleZone flex justy justify-between align-center mt20">
<p class="box-title">데이터베이스 연결 결과</p>
<button class="blue-border-btn small-btn" @click="dataBaseConnectionCheck"> 접속확인 </button>
</div>
<div class="table-zone">
<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>
</template>
<template v-if="currentPage == 2">
<div class="flex content-box" style="min-height: 60dvh; flex-wrap: nowrap;">
<div class="content-box pd10" style="width: 20%;">
<div class="content-titleZone flex justy justify-between align-center" style="height: 45px">
<p class="box-title">데이터베이스 정보</p>
</div>
<div class="content-zone2">
<ul class="content-list" v-if="tableList.length > 0">
<li class="cursor" v-for="(item, indx) in tableList" :key="indx">
<a @click="getTableData(item)" :class="{
'file-list': true,
selected: selectTable === item,
}">
<div class="flex align-center">
<p> {{ item.tableNmKr != null && item.tableNmKr != "" ? item.tableNmKr : item.tableNm }} </p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="content-box" style="width: 80%;">
<div class="flex-column">
<div class="content-box pd10" style="height: 50%;">
<div class="content-titleZone flex justy justify-between align-center" style="height: 45px">
<p class="box-title">쿼리 작업</p>
<button class="icon-btn" @click="executeQuery" title="실행">
<svg-icon type="mdi" :path="playPath" :color="'#fbbe28'"></svg-icon>
</button>
</div>
<div class="flex" style="height: calc(100% - 60px)">
<textarea style="resize: none; width: 100%; height: 100%; padding: 10px;" v-model="jobItm.itm.query"></textarea>
</div>
</div>
<div class="content-box pd10" style="height: 50%;">
<ul class="tab-nav flex justify-start">
<li @click="showTab('tab1')">
<a href="#tab01" :class="{ activeTab: activeTab === 'tab1' }">작업결과</a>
</li>
<li @click="showTab('tab2')">
<a href="#tab02" :class="{ activeTab: activeTab === 'tab2' }">작업log</a>
</li>
</ul>
<div v-show="activeTab === 'tab1'" class="content-box" style="height: calc(100% - 45px); padding: 10px;">
<div class="count-zone mb10" v-if="jobItm.dataTable.columnDatas.length > 0">
<p> 총 <span>{{ jobItm.dataTable.totalRows }}</span>건 중 <span>{{ jobItm.dataTable.rowData.length }}</span>건 조회 </p>
</div>
<div style="height: calc(100% - 15px); overflow: auto;">
<table class="list-table" v-if="jobItm.dataTable.columnDatas.length > 0">
<thead>
<tr>
<th v-for="(itm, indx) in jobItm.dataTable.columnDatas" :key="indx" style="min-width: 150px !important">
<label class="check-label">
<span class="mr10">{{ itm.columnNm }}</span>
<input type="checkbox" class="custom-checkbox" v-model="itm.pkAt" />
</label>
</th>
</tr>
</thead>
<tbody v-if="jobItm.dataTable.rowData.length > 0">
<tr v-for="(row, rows) in jobItm.dataTable.rowData" :key="rows">
<td v-for="(itm, indx) in row" :key="indx" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> {{ itm }} </td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-show="activeTab === 'tab2'" class=" content-box" style="height: calc(100% - 45px); padding: 10px;">
<div style="height: calc(100% - 15px); overflow: auto;">
<table class="list-table">
<colgroup>
<col width="10%" />
<col width="60%" />
<col width="20%" />
<col width="10%" />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>접속시간</th>
<th>접속결과</th>
<th>접속내용</th>
</tr>
</thead>
<tbody>
<tr v-for="(itm, indx) in executeMessage" :key="indx">
<td>{{ indx + 1 }}</td>
<td>{{ itm.message }}</td>
<td>{{ itm.time }}</td>
<td>{{ itm.result }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
<DBConSearch :openPopup="openSearchModal" @modalclose="dbConSearchOpen" @selectItm="selectDbcon" />
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiPlay } from "@mdi/js";
import axios from '../../../common/defaultAxios.js';
import DBConSearch from "../../dataComponent/DbConnectionSearchModal.vue";
export default {
name: "DbRead",
props: {
jobItem: {
type: Object,
},
currentPage: {
type: Number,
},
},
data() {
return {
// 연계정보 불러오기
openSearchModal: false,
// 커넥션 DB 오브젝트
jobItm: this.jobItem,
connectionDB: {},
linkConnectionDB: {},
inputConnectionDB: {},
resultMessage: [],
executeMessage: [],
// 연계 성공여부
successAt: false,
databaseTypeList: [],
tableList: [],
selectTable: {},
activeTab: "tab1",
playPath: mdiPlay,
};
},
methods: {
// 연계가능 여부 테스트
dataBaseConnectionCheck: function () {
var vm = this;
if (this.jobItm.itm_option_bool == true) {
this.jobItm.itm = this.linkConnectionDB;
} else {
this.jobItm.itm = this.inputConnectionDB;
}
this.jobItm.itm.loadAt = this.jobItm.itm_option_bool;
delete this.jobItm.itm.type;
axios({
url: "/data/dataBaseConnectionCheck.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.jobItm.itm,
})
.then(function (response) {
if (response.data.checkMessage.success == true) {
vm.successAt = true;
} else {
vm.successAt = false;
}
vm.$emit("onDfltSetChange", response.data.checkMessage.success);
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) { });
},
// db커넥션 선택창 호출
dbConSearchOpen: function (val) {
this.openSearchModal = val;
},
// 연계정보 받기
selectDbcon: function (dbcon) {
this.linkConnectionDB = dbcon;
},
// 탭 변경
showTab: function (tabName) {
this.activeTab = tabName;
},
//DB 접속 - 테이블 목록 조회
getDbConnectionTableList: function () {
let vm = this;
axios({
url: "/data/selectTableList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.jobItm.itm,
})
.then(function (response) {
if (response.data.checkMessage.success == true) {
vm.tableList = response.data.resultData.tableList;
}
})
.catch(function (error) { });
},
// 테이블 클릭
clickTable: function (itm) {
this.selectTable = itm;
},
// 선택한 테이블 정보 가져오기
getTableData: function (itm) {
let vm = this;
itm.perPage = this.jobItm.dataTable.perPage;
// 통신시 데이터 형문제로 삭제
this.jobItm.itm.creatDt = null;
let requestData = {
dataset: itm,
connectionDB: this.jobItm.itm,
};
axios({
url: "/data/getTableData.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: requestData,
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.jobItm.dataTable = response.data.resultData.dataTable;
vm.jobItm.itm_id = vm.jobItm.itm.dbConectId;
vm.jobItm.itm.query = vm.jobItm.dataTable.query;
vm.columnDatas = response.data.resultData.dataTable.columnDatas;
}
vm.$emit("onDataSetChange", response.data.checkMessage.success);
vm.executeMessage.push({
time: vm.$getFullTime(),
message: response.data.resultData.dataTable.checkMessage.message,
result: response.data.resultData.dataTable.checkMessage.success
? "성공"
: "실패",
});
})
.catch(function (error) {
vm.$emit("onDataSetChange", false);
});
},
// 쿼리 실행
executeQuery: function () {
let vm = this;
// 통신시 데이터 형문제로 삭제
this.jobItm.itm.creatDt = null;
this.jobItm.dataTable.query = this.jobItm.itm.query;
let requestData = {
dataTable: this.jobItm.dataTable,
connectionDB: this.jobItm.itm,
};
axios({
url: "/data/getTableDataByQuery.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: requestData,
})
.then(function (response) {
if (response.data.checkMessage.success) {
vm.jobItm.dataTable = response.data.resultData.dataTable;
vm.jobItm.itm_id = vm.jobItm.itm.dbConectId;
vm.jobItm.itm.query = vm.jobItm.dataTable.query;
}
vm.$emit("onDataSetChange", response.data.checkMessage.success);
vm.executeMessage.push({
time: vm.$getFullTime(),
message: response.data.resultData.dataTable.checkMessage.message,
result: response.data.resultData.dataTable.checkMessage.success
? "성공"
: "실패",
});
})
.catch(function (error) {
vm.$emit("onDataSetChange", false);
});
},
// 초기화 function
init: async function () {
this.databaseTypeList = await this.$getDataBaseTypeList();
if (this.jobItm == null) {
this.jobItm = Object.assign({}, this.$getDefaultJobGroup().node);
this.linkConnectionDB = Object.assign(
{},
this.$getDefaultJobGroup().connectionDb
);
this.inputConnectionDB = Object.assign(
{},
this.$getDefaultJobGroup().connectionDb
);
this.jobItm.itm = Object.assign(
{},
this.$getDefaultJobGroup().connectionDb
);
} else {
if (this.jobItm.itm_option_bool) {
this.linkConnectionDB = this.jobItm.itm;
this.connectionDB = this.linkConnectionDB;
} else {
this.inputConnectionDB = this.jobItm.itm;
this.connectionDB = this.inputConnectionDB;
}
}
if (this.inputConnectionDB.databaseType == null) {
this.inputConnectionDB.databaseType = this.databaseTypeList.MARIADB.key;
}
},
},
watch: {
jobItem: function (v) {
this.jobItm = v;
if (v.itm_option_bool) {
this.linkConnectionDB = this.jobItm.itm;
} else {
this.inputConnectionDB = this.jobItm.itm;
}
},
currentPage(value) {
if (value == 2) {
this.getDbConnectionTableList();
}
},
},
components: {
DBConSearch: DBConSearch,
SvgIcon: SvgIcon,
},
mounted() {
this.init();
},
create() {
if (this.jobItm == null) {
this.jobItm = Object.assign({}, this.defaultJobItm);
this.jobItm.itm = this.$getDefaultJobGroup().connectionDb;
}
},
};
</script>
<style>
.content-zone2 {
height: calc(100% - 57px);
max-height: calc(100% - 57px);
overflow-y: auto;
overflow-x: hidden;
}
</style>