parent
c02385d996
commit
f2ed241575
@ -0,0 +1,219 @@
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import * as bootstrap from 'bootstrap'
|
||||
import * as XSLX from 'xlsx'
|
||||
|
||||
const props = defineProps({
|
||||
modalId: String,
|
||||
dto: Object,
|
||||
})
|
||||
|
||||
const modalEl = ref(null)
|
||||
let bsModal = null
|
||||
const activeTab = ref('general')
|
||||
const agentConfig = reactive({
|
||||
description: '',
|
||||
myHostId: '',
|
||||
myHostName: '',
|
||||
myListenPort: 0,
|
||||
knownAgentList: [],
|
||||
statusChecker: {
|
||||
cron: '',
|
||||
consoleHostName: '',
|
||||
consoleListenPort: 0,
|
||||
consoleSslEnabled: false,
|
||||
},
|
||||
dataSourceConfig: [],
|
||||
sqlMapperLocations: [],
|
||||
logging: {
|
||||
logDirectory: '',
|
||||
logFileName: '',
|
||||
logName: '',
|
||||
maxHistory: 30,
|
||||
logPattern: '',
|
||||
rootLogLevel: 'INFO',
|
||||
packages: [],
|
||||
},
|
||||
dropBoxConfig: {
|
||||
receivedMessageStorageRoot: '',
|
||||
processedMessageStorageRoot: '',
|
||||
failureMessageStorageRoot: '',
|
||||
manualMessageStorageRoot: '',
|
||||
threadPoolSize: 0,
|
||||
retentionDaysOfProcessedMessage: 0,
|
||||
dropBoxList: [],
|
||||
},
|
||||
postmanConfig: {
|
||||
threadPoolSize: 0,
|
||||
postmanList: [],
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (modalEl.value) {
|
||||
// 인스턴스가 있으면 재사용, 없으면 생성
|
||||
bsModal = bootstrap.Modal.getOrCreateInstance(modalEl.value, {
|
||||
backdrop: 'static', // 바깥 클릭으로 닫히지 않게
|
||||
keyboard: false, // ESC로 닫히지 않게 (원하시면 true 로)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (bsModal) {
|
||||
bsModal.hide()
|
||||
// Bootstrap v5에서는 dispose 지원
|
||||
if (typeof bsModal.dispose === 'function') {
|
||||
bsModal.dispose()
|
||||
}
|
||||
bsModal = null
|
||||
}
|
||||
})
|
||||
|
||||
function open() {
|
||||
if (bsModal) {
|
||||
if (props.dto) {
|
||||
Object.assign(agentConfig, props.dto)
|
||||
}
|
||||
bsModal.show()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (bsModal) {
|
||||
bsModal.hide()
|
||||
}
|
||||
}
|
||||
|
||||
function configExport() {}
|
||||
|
||||
function configSave() {}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" :id="props.modalId" ref="modalEl" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" :aria-labelledby="props.modalId + 'Label'" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl data-modal-dialog">
|
||||
<div class="modal-content data-modal-content">
|
||||
<div class="modal-header justify-content-between">
|
||||
<h1 class="modal-title fs-5 pt-0" :id="props.modalId + 'Label'">에이전트 설정</h1>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-success btn-sm" @click="configExport">Export</button>
|
||||
<button type="button" class="btn btn-primary btn-sm" @click="configSave">Save</button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body data-modal-body">
|
||||
<ul class="nav nav-tabs mb-3" id="agentConfigTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general-tab-pane" type="button" role="tab" aria-controls="general-tab-pane" aria-selected="true">일반</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="dropbox-tab" data-bs-toggle="tab" data-bs-target="#dropbox-tab-pane" type="button" role="tab" aria-controls="dropbox-tab-pane" aria-selected="false">DropBox</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="postman-tab" data-bs-toggle="tab" data-bs-target="#postman-tab-pane" type="button" role="tab" aria-controls="postman-tab-pane" aria-selected="false">Postman</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content m-1" id="agentConfigTabContent">
|
||||
<div class="tab-pane fade show active" id="general-tab-pane" role="tabpanel" aria-labelledby="general-tab" tabindex="0">
|
||||
<div class="row mb-2">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="agent-config-description-label">description</span>
|
||||
<input type="text" class="form-control" id="agent-config-description-input" aria-describedby="agent-config-description-label agent-config-description-input" v-model="agentConfig.description" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="agent-config-my-host-id-label">myHostId</span>
|
||||
<input type="text" class="form-control" id="agent-config-my-host-id-input" aria-describedby="agent-config-my-host-id-label agent-config-my-host-id-input" v-model="agentConfig.myHostId" readonly />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="agent-config-my-host-name-label">myHostName</span>
|
||||
<input type="text" class="form-control" id="agent-config-my-host-name-input" aria-describedby="agent-config-my-host-name-label agent-config-my-host-name-input" v-model="agentConfig.myHostName" readonly />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="agent-config-my-listen-port-label">myListenPort</span>
|
||||
<input type="text" class="form-control" id="agent-config-my-listen-port-input" aria-describedby="agent-config-my-listen-port-label agent-config-my-listen-port-input" v-model="agentConfig.myListenPort" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="dropbox-tab-pane" role="tabpanel" aria-labelledby="dropbox-tab" tabindex="0">dropbox</div>
|
||||
<div class="tab-pane fade" id="postman-tab-pane" role="tabpanel" aria-labelledby="postman-tab" tabindex="0">postman</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 모달이 화면을 거의 꽉 채우게 */
|
||||
.data-modal-dialog {
|
||||
max-width: calc(100% - 4vh); /* 좌우 95% */
|
||||
margin: 2vh auto; /* 위아래 여백 조금 */
|
||||
}
|
||||
|
||||
/* 모달 전체 높이를 화면의 95% 정도로 */
|
||||
.data-modal-content {
|
||||
height: 95vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 헤더/푸터 빼고 나머지 영역을 테이블 영역으로 */
|
||||
.data-modal-body {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden; /* 여기서는 스크롤 안 하고 */
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* 실제 스크롤이 일어나는 영역 */
|
||||
.data-table-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto; /* 세로/가로 스크롤 모두 */
|
||||
}
|
||||
|
||||
/* 컬럼이 많을 때 한 줄에 계속 붙게(가로 스크롤) */
|
||||
.data-table {
|
||||
white-space: nowrap;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* 헤더 전체를 sticky 처리 */
|
||||
.data-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 헤더 배경/글자 색 지정 */
|
||||
.data-table thead th {
|
||||
background-color: #343a40;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 모달 header 패딩 조정 */
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* 상·하 4px, 좌·우는 기존처럼 16px */
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue