Commit @ffb97d77f38d75adc67163fb0bb88b5c58f2c94d

박정하 04-28

250428 박정하 데이터 활용 수정

@ffb97d77f38d75adc67163fb0bb88b5c58f2c94d

fc5007d

ffb97d7

client/views/component/SplitterLayout.vue

--- client/views/component/SplitterLayout.vue

+++ client/views/component/SplitterLayout.vue


 <template>
-  <Splitter :class="{ 'content-box': true, active: !$isEmpty(selectLayout) && splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="clickLayout(splitInfo)">
+  <Splitter :class="{ 'content-box': true, active: !$isEmpty(selectLayout) && splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="onChange(splitInfo)">
     <SplitterPanel class="content-box padding-1" v-if="splitInfo.children.length < 1" :style="$createStyleSheet(splitInfo.styleSheet)">
       <ComponentTitle v-if="splitInfo.useSj" :title="splitInfo.layoutSj" />
-      <BaseComponent v-else-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="clickLayout(splitInfo)" />
+      <BaseComponent v-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="onChange(splitInfo)" />
     </SplitterPanel>
     <template v-else>
       <SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx" :style="$createStyleSheet(splitInfo.styleSheet)">

       this.splitInfo["layout_size1"] = newSizes.sizes[0];
       this.splitInfo["layout_size2"] = newSizes.sizes[1];
       this.splitInfo["sizes"] = newSizes.sizes;
-    },
-    clickLayout: function (splitInfo) {
-      this.$emit("onChange", splitInfo);
     },
     onChange: function (layout) {
       this.$emit("onChange", layout);

fc5007d

ffb97d7

client/views/component/connection/itm/dataFilter.vue

--- client/views/component/connection/itm/dataFilter.vue

+++ client/views/component/connection/itm/dataFilter.vue


 <template>
   <div v-show="isModalOpen" class="modal-wrapper">
-    <div class="modal-container" style="height: auto">
-      <div class="modal-title">
-        <div class="flex justify-between align-center">
-          <h2>데이터 필터</h2>
-          <button class="close-btn" @click="closeModal">
-            <svg-icon
-              type="mdi"
-              :width="20"
-              :height="20"
-              :path="closePath"
-            ></svg-icon>
-          </button>
-        </div>
+    <div class="modal-container">
+      <div class="modal-title flex justify-between align-center">
+        <h2>데이터베이스 읽기</h2>
+        <button class="close-btn" @click="closeModal">
+          <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
+        </button>
       </div>
-      <div class="modal-content-monthly">
-        <div class="input-container flex">
-          <label class="radio-label">
-            <input
-              type="radio"
-              :name="comId + 'match'"
-              class="custom-radiobox"
-              :value="true"
-              v-model="item.itm.match_type"
-            />
-            <span>AND 연산</span>
-          </label>
-          <label class="radio-label">
-            <input
-              type="radio"
-              :name="comId + 'match'"
-              class="custom-radiobox"
-              :value="false"
-              v-model="item.itm.match_type"
-            />
-            <span>OR 연산</span>
-          </label>
-        </div>
+    </div>
+    <div class="modal-content-monthly">
+      <template v-if="currentPage == 1">
         <div class="table-zone">
           <table class="form-table">
-            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
             <colgroup>
               <col style="width: 25%" />
-              <col style="width: 25%" />
-              <col style="width: 25%" />
-              <col style="width: 25%" />
+              <col style="width: 75%" />
             </colgroup>
-            <thead>
+            <tbody v-if="jobItm.itm != null">
               <tr>
-                <th>컬럼</th>
-                <th>연산</th>
-                <th>내용</th>
-                <th>관리</th>
+                <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>
-            </thead>
-            <tbody>
-              <tr v-for="(filter, indx) in item.itm.filterItems" :key="indx">
+              <tr v-show="jobItm.itm_option_bool">
+                <th>연계정보</th>
                 <td>
-                  <select
-                    class="full-input"
-                    style="width: 100%"
-                    @change="dataInsert($event, filter)"
-                    v-model="filter.coulmn_nm"
-                  >
-                    <option
-                      v-for="(temp, indxc) in item.front_dataTable.columnDatas"
-                      :key="indxc"
-                      :value="temp.orginlColumnNm"
-                    >
-                      {{ temp.displyColumnNm }}
-                    </option>
+                  <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>
-                  <select
-                    class="full-input"
-                    style="width: 100%"
-                    v-model="filter.calc_ty"
-                  >
-                    <option value="1">=</option>
-                    <option
-                      v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
-                      value="2"
-                    >
-                      &lt;
-                    </option>
-                    <option
-                      v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
-                      value="3"
-                    >
-                      &gt;
-                    </option>
-                    <option
-                      v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
-                      value="4"
-                    >
-                      &lt;=
-                    </option>
-                    <option
-                      v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
-                      value="5"
-                    >
-                      &gt;=
-                    </option>
-                    <option value="6">!=</option>
-                    <option
-                      v-if="getDataType(indx, filter.coulmn_nm) == 'STRING'"
-                      value="7"
-                    >
-                      포함
-                    </option>
-                  </select>
+                  <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
-                    :type="setDataType(indx, filter.coulmn_nm)"
-                    style="width: 100%"
-                    v-model="filter.cmpr_value"
-                  />
+                  <input id="conectPort" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.conectPort" :disabled="jobItm.itm_option_bool" />
                 </td>
-                <td style="text-align: center">
-                  <button
-                    class="green-border-btn small-btn"
-                    @click="deleteFilter(indx)"
-                  >
-                    삭제
-                  </button>
+              </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>
-      <div class="modal-end flex justify-end">
-        <button class="gray-btn small-btn" @click="closeModal">닫기</button>
-        <button class="green-btn small-btn" @click="addFiter">필터추가</button>
-      </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" />
   </div>
 </template>
-
 <script>
+// icon용 svg import
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiClose } from "@mdi/js";
+
 export default {
-  name: "data-check",
-  props: {
-    openPopup: {
-      type: Boolean,
-      default: false,
-    },
-    item: {
-      type: Object,
-    },
-    saveNodeData: {
-      type: Function,
-    },
-  },
+  components: { SvgIcon },
+
   data() {
     return {
-      comId:
-        "comId_" +
-        Math.random().toString(36).substring(2, 15) +
-        Math.random().toString(36).substring(2, 15),
-      isModalOpen: this.openPopup,
-      itm: this.item,
-    };
-  },
-  methods: {
-    // 모달 닫기
-    closeModal: function () {
-      this.isModalOpen = false;
-      this.$emit("closePopup", this.item);
-      this.$emit("closePopup2", this.item.id);
-    },
+      // icon용 svg path
+      searchPath: mdiMagnify,
+      closePath: mdiClose,
 
-    dataInsert: function (event, filter) {
-      for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
-        if (
-          this.item.front_dataTable.columnDatas[i].orginlColumnNm ==
-          event.target.value
-        ) {
-          filter.coulmn_nm =
-            this.item.front_dataTable.columnDatas[i].orginlColumnNm;
-          filter.data_ty = this.item.front_dataTable.columnDatas[i].dataTy;
-        }
-      }
-    },
+      isModalOpen: true,
 
-    // 데이터 형반환
-    getDataType: function (index, coulmnNm) {
-      for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
-        if (
-          this.item.front_dataTable.columnDatas[i].displyColumnNm == coulmnNm
-        ) {
-          return this.item.front_dataTable.columnDatas[i].dataTy;
-        }
-      }
-    },
-
-    // 데이터 타입체크
-    setDataType: function (index, coulmnNm) {
-      for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
-        if (
-          this.item.front_dataTable.columnDatas[i].orginlColumnNm == coulmnNm
-        ) {
-          if (this.item.front_dataTable.columnDatas[i].dataTy == "STRING") {
-            return "text";
-          } else if (
-            this.item.front_dataTable.columnDatas[i].datadataTyType == "DATE"
-          ) {
-            return "date";
-          } else if (
-            this.item.front_dataTable.columnDatas[i].dataTy == "DATETIME"
-          ) {
-            return "datetime-local";
-          } else if (
-            this.item.front_dataTable.columnDatas[i].dataTy == "LONG"
-          ) {
-            return "number";
-          } else {
-            return "number";
-          }
-        }
-      }
-    },
-
-    // 필터추가
-    addFiter: function () {
-      const item = JSON.parse(
-        JSON.stringify(this.$getDefaultJobGroup().filterItem)
-      );
-
-      if (
-        this.item.front_dataTable.columnDatas == null ||
-        this.item.front_dataTable.columnDatas.length == 0
-      ) {
-        this.$showAlert("경고", "데이터 컬럼이 없습니다.");
-        return;
-      } else {
-        item.coulmn_nm =
-          this.item.front_dataTable.columnDatas[0].orginlColumnNm;
-        item.data_ty = this.item.front_dataTable.columnDatas[0].dataTy;
-        item.calc_ty = 1;
-        item.indx = this.item.itm.filterItems.length + 1;
-        item.cmpr_value = "";
-      }
-
-      this.item.itm.filterItems.push(item);
-    },
-    // 필터 삭제
-    deleteFilter: function (indx) {
-      this.item.itm.filterItems.splice(indx, 1);
-    },
-  },
-  watch: {
-    openPopup: function (v) {
-      this.isModalOpen = v;
-    },
-
-    item: function (v) {
-      //this.itm = v;
-      
-    },
-  },
-  computed: {},
-  components: {},
-  mounted() {
-  },
-};
+      search: Object.assign({}, this.$getDefaultSerchVO()),
+      searchData: this.$getDefaultSerchItem(null, "string"),
+    }
+  }
+}
 </script>

fc5007d

ffb97d7

client/views/component/flowComponent/JobGroupManagement.vue

--- client/views/component/flowComponent/JobGroupManagement.vue

+++ client/views/component/flowComponent/JobGroupManagement.vue


   <div class="flex-column">
     <div class="content-titleZone flex justify-between align-center">
       <p class="box-title">잡그룹 목록</p>
-      <button class="blue-border-btn small-btn" @click="fnOpenModal"> 아이템 추가 </button>
+      <button class="blue-border-btn small-btn" @click="fnOpenModal">추가</button>
     </div>
     <div class="data-list">
       <template v-for="(item, idx) in currentJobGroup.jobItms" :key="idx">

               <p class="ml10"> ({{ item.dataTable.columnDatas.length > 0 ? "설정 완료" : "미설정" }}) </p>
             </div>
             <div>
-              <button type="button" class="blue-border-btn set-btn" @click="fnOpenSetup(item, idx)"> 수정 </button>
-              <button type="button" class="red-border-btn set-btn" @click="fnDeleteItem(item)"> 삭제 </button>
+              <button type="button" class="blue-border-btn set-btn" @click="fnOpenSetup(item, idx)">수정</button>
+              <button type="button" class="red-border-btn set-btn" @click="fnDeleteItem(item)">삭제</button>
             </div>
           </div>
         </div>

       isOpenSetupModal: false,
     };
   },
-
-  created() { },
-
-  mounted() { },
 
   watch: {
     jobGroup: {

       let typeArr = item.type.split("_");
       if (typeArr[typeArr.length - 1] == "FILTER") {
         this.frontNodes = []; // 초기화
-        this.frontNodes.push(this.currentJobGroup.jobItms[idx - 1]);
-
+        this.frontNodes.push({ jobItm: this.currentJobGroup.jobItms[idx - 1] });
         if (this.frontNodes.length < 1) {
           this.$showAlert("경고", "선행 노드가 없습니다.");
           return;

 
     // 잡아이템설정 저장
     fnSaveSetup(jobItem) {
-      
       this.currentJobGroup.jobItms[this.currentJobItmIdx] = jobItem;
       this.fnCloseSetup(); // 노드설정 모달 닫기
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,7 +2,7 @@
2	2	<div class="flex-column">
3	3	<div class="content-titleZone flex justify-between align-center">
4	4	<p class="box-title">잡그룹 목록</p>
5		- <button class="blue-border-btn small-btn" @click="fnOpenModal"> 아이템 추가 </button>
	5	+ <button class="blue-border-btn small-btn" @click="fnOpenModal">추가</button>
6	6	</div>
7	7	<div class="data-list">
8	8	<template v-for="(item, idx) in currentJobGroup.jobItms" :key="idx">
...	...	@@ -16,8 +16,8 @@
16	16	<p class="ml10"> ({{ item.dataTable.columnDatas.length > 0 ? "설정 완료" : "미설정" }}) </p>
17	17	</div>
18	18	<div>
19		- <button type="button" class="blue-border-btn set-btn" @click="fnOpenSetup(item, idx)"> 수정 </button>
20		- <button type="button" class="red-border-btn set-btn" @click="fnDeleteItem(item)"> 삭제 </button>
	19	+ <button type="button" class="blue-border-btn set-btn" @click="fnOpenSetup(item, idx)">수정</button>
	20	+ <button type="button" class="red-border-btn set-btn" @click="fnDeleteItem(item)">삭제</button>
21	21	</div>
22	22	</div>
23	23	</div>
...	...	@@ -85,10 +85,6 @@
85	85	isOpenSetupModal: false,
86	86	};
87	87	},
88		-
89		- created() { },
90		-
91		- mounted() { },
92	88
93	89	watch: {
94	90	jobGroup: {
...	...	@@ -162,8 +158,7 @@
162	158	let typeArr = item.type.split("_");
163	159	if (typeArr[typeArr.length - 1] == "FILTER") {
164	160	this.frontNodes = []; // 초기화
165		- this.frontNodes.push(this.currentJobGroup.jobItms[idx - 1]);
166		-
	161	+ this.frontNodes.push({ jobItm: this.currentJobGroup.jobItms[idx - 1] });
167	162	if (this.frontNodes.length < 1) {
168	163	this.$showAlert("경고", "선행 노드가 없습니다.");
169	164	return;
...	...	@@ -184,7 +179,6 @@
184	179
185	180	// 잡아이템설정 저장
186	181	fnSaveSetup(jobItem) {
187		-
188	182	this.currentJobGroup.jobItms[this.currentJobItmIdx] = jobItem;
189	183	this.fnCloseSetup(); // 노드설정 모달 닫기
190	184	},

...	...	@@ -1,8 +1,8 @@
1	1	<template>
2		- <Splitter :class="{ 'content-box': true, active: !$isEmpty(selectLayout) && splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="clickLayout(splitInfo)">
	2	+ <Splitter :class="{ 'content-box': true, active: !$isEmpty(selectLayout) && splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="onChange(splitInfo)">
3	3	<SplitterPanel class="content-box padding-1" v-if="splitInfo.children.length < 1" :style="$createStyleSheet(splitInfo.styleSheet)">
4	4	<ComponentTitle v-if="splitInfo.useSj" :title="splitInfo.layoutSj" />
5		- <BaseComponent v-else-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="clickLayout(splitInfo)" />
	5	+ <BaseComponent v-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="onChange(splitInfo)" />
6	6	</SplitterPanel>
7	7	<template v-else>
8	8	<SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx" :style="$createStyleSheet(splitInfo.styleSheet)">
...	...	@@ -31,9 +31,6 @@
31	31	this.splitInfo["layout_size1"] = newSizes.sizes[0];
32	32	this.splitInfo["layout_size2"] = newSizes.sizes[1];
33	33	this.splitInfo["sizes"] = newSizes.sizes;
34		- },
35		- clickLayout: function (splitInfo) {
36		- this.$emit("onChange", splitInfo);
37	34	},
38	35	onChange: function (layout) {
39	36	this.$emit("onChange", layout);

...	...	@@ -1,270 +1,241 @@
1	1	<template>
2	2	<div v-show="isModalOpen" class="modal-wrapper">
3		- <div class="modal-container" style="height: auto">
4		- <div class="modal-title">
5		- <div class="flex justify-between align-center">
6		- <h2>데이터 필터</h2>
7		- <button class="close-btn" @click="closeModal">
8		- <svg-icon
9		- type="mdi"
10		- :width="20"
11		- :height="20"
12		- :path="closePath"
13		- ></svg-icon>
14		- </button>
15		- </div>
	3	+ <div class="modal-container">
	4	+ <div class="modal-title flex justify-between align-center">
	5	+ <h2>데이터베이스 읽기</h2>
	6	+ <button class="close-btn" @click="closeModal">
	7	+ <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	8	+ </button>
16	9	</div>
17		- <div class="modal-content-monthly">
18		- <div class="input-container flex">
19		- <label class="radio-label">
20		- <input
21		- type="radio"
22		- :name="comId + 'match'"
23		- class="custom-radiobox"
24		- :value="true"
25		- v-model="item.itm.match_type"
26		- />
27		- <span>AND 연산</span>
28		- </label>
29		- <label class="radio-label">
30		- <input
31		- type="radio"
32		- :name="comId + 'match'"
33		- class="custom-radiobox"
34		- :value="false"
35		- v-model="item.itm.match_type"
36		- />
37		- <span>OR 연산</span>
38		- </label>
39		- </div>
	10	+ </div>
	11	+ <div class="modal-content-monthly">
	12	+ <template v-if="currentPage == 1">
40	13	<div class="table-zone">
41	14	<table class="form-table">
42		- <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
43	15	<colgroup>
44	16	<col style="width: 25%" />
45		- <col style="width: 25%" />
46		- <col style="width: 25%" />
47		- <col style="width: 25%" />
	17	+ <col style="width: 75%" />
48	18	</colgroup>
49		- <thead>
	19	+ <tbody v-if="jobItm.itm != null">
50	20	<tr>
51		- <th>컬럼</th>
52		- <th>연산</th>
53		- <th>내용</th>
54		- <th>관리</th>
	21	+ <th>연계정보 타입</th>
	22	+ <td>
	23	+ <div class="input-container flex">
	24	+ <label class="radio-label">
	25	+ <input type="radio" name="radio" :value="false" class="custom-radiobox" @change="successAt = false" v-model="jobItm.itm_option_bool" />
	26	+ <span>직접입력</span>
	27	+ </label>
	28	+ <label class="radio-label">
	29	+ <input type="radio" name="radio" :value="true" class="custom-radiobox" @change="successAt = false" v-model="jobItm.itm_option_bool" />
	30	+ <span>불러오기</span>
	31	+ </label>
	32	+ </div>
	33	+ </td>
55	34	</tr>
56		- </thead>
57		- <tbody>
58		- <tr v-for="(filter, indx) in item.itm.filterItems" :key="indx">
	35	+ <tr v-show="jobItm.itm_option_bool">
	36	+ <th>연계정보</th>
59	37	<td>
60		- <select
61		- class="full-input"
62		- style="width: 100%"
63		- @change="dataInsert($event, filter)"
64		- v-model="filter.coulmn_nm"
65		- >
66		- <option
67		- v-for="(temp, indxc) in item.front_dataTable.columnDatas"
68		- :key="indxc"
69		- :value="temp.orginlColumnNm"
70		- >
71		- {{ temp.displyColumnNm }}
72		- </option>
	38	+ <input type="text" class="half-input" disabled :value="linkConnectionDB.conectNm +
	39	+ '(' +
	40	+ linkConnectionDB.conectIp +
	41	+ ')'
	42	+ " v-if="linkConnectionDB.conectNm != null" />
	43	+ <input type="text" class="half-input" disabled v-else />
	44	+ <button class="blue-border-btn small-btn" @click="dbConSearchOpen(true)"> 검색 </button>
	45	+ </td>
	46	+ </tr>
	47	+ <tr>
	48	+ <th>DMBS</th>
	49	+ <td>
	50	+ <select id="databaseType" @change="successAt = false" class="square-select half-input" v-model="inputConnectionDB.databaseType" :disabled="jobItm.itm_option_bool">
	51	+ <option v-for="(itm, index) in databaseTypeList" :key="index" :value="itm.key"> {{ itm.value }} </option>
73	52	</select>
74	53	</td>
	54	+ </tr>
	55	+ <tr>
	56	+ <th>IP</th>
75	57	<td>
76		- <select
77		- class="full-input"
78		- style="width: 100%"
79		- v-model="filter.calc_ty"
80		- >
81		- <option value="1">=</option>
82		- <option
83		- v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
84		- value="2"
85		- >
86		- <
87		- </option>
88		- <option
89		- v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
90		- value="3"
91		- >
92		- >
93		- </option>
94		- <option
95		- v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
96		- value="4"
97		- >
98		- <=
99		- </option>
100		- <option
101		- v-if="getDataType(indx, filter.coulmn_nm) != 'STRING'"
102		- value="5"
103		- >
104		- >=
105		- </option>
106		- <option value="6">!=</option>
107		- <option
108		- v-if="getDataType(indx, filter.coulmn_nm) == 'STRING'"
109		- value="7"
110		- >
111		- 포함
112		- </option>
113		- </select>
	58	+ <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" />
114	59	</td>
	60	+ </tr>
	61	+ <tr>
	62	+ <th>PORT</th>
115	63	<td>
116		- <input
117		- :type="setDataType(indx, filter.coulmn_nm)"
118		- style="width: 100%"
119		- v-model="filter.cmpr_value"
120		- />
	64	+ <input id="conectPort" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.conectPort" :disabled="jobItm.itm_option_bool" />
121	65	</td>
122		- <td style="text-align: center">
123		- <button
124		- class="green-border-btn small-btn"
125		- @click="deleteFilter(indx)"
126		- >
127		- 삭제
128		- </button>
	66	+ </tr>
	67	+ <tr>
	68	+ <th>DB 명</th>
	69	+ <td>
	70	+ <input id="databaseNm" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.databaseNm" placeholder="데이터베이스명 OR 스키마명" :disabled="jobItm.itm_option_bool" />
	71	+ </td>
	72	+ </tr>
	73	+ <tr>
	74	+ <th>접속ID</th>
	75	+ <td>
	76	+ <input type="text" class="half-input" @input="successAt = false" v-model="inputConnectionDB.userId" placeholder="접속 ID" :disabled="jobItm.itm_option_bool" />
	77	+ </td>
	78	+ </tr>
	79	+ <tr>
	80	+ <th>접속PW</th>
	81	+ <td>
	82	+ <input type="password" class="half-input" @input="successAt = false" v-model="inputConnectionDB.userPassword" placeholder="접속 PW" autocomplete="new-password" :disabled="jobItm.itm_option_bool" />
129	83	</td>
130	84	</tr>
131	85	</tbody>
132	86	</table>
133	87	</div>
134		- </div>
135		- <div class="modal-end flex justify-end">
136		- <button class="gray-btn small-btn" @click="closeModal">닫기</button>
137		- <button class="green-btn small-btn" @click="addFiter">필터추가</button>
138		- </div>
	88	+ <div class="content-titleZone flex justy justify-between align-center mt20">
	89	+ <p class="box-title">데이터베이스 연결 결과</p>
	90	+ <button class="blue-border-btn small-btn" @click="dataBaseConnectionCheck"> 접속확인 </button>
	91	+ </div>
	92	+ <div class="table-zone">
	93	+ <table class="list-table">
	94	+ <colgroup>
	95	+ <col width="10%" />
	96	+ <col width="10%" />
	97	+ <col width="80%" />
	98	+ </colgroup>
	99	+ <thead>
	100	+ <tr>
	101	+ <th>No</th>
	102	+ <th>접속시간</th>
	103	+ <th>접속결과</th>
	104	+ </tr>
	105	+ </thead>
	106	+ <tbody>
	107	+ <tr v-for="(itm, indx) in resultMessage" :key="indx">
	108	+ <td>{{ indx + 1 }}</td>
	109	+ <td>{{ itm.time }}</td>
	110	+ <td>{{ itm.message }}</td>
	111	+ </tr>
	112	+ </tbody>
	113	+ </table>
	114	+ </div>
	115	+ </template>
	116	+ <template v-if="currentPage == 2">
	117	+ <div class="flex content-box" style="min-height: 60dvh; flex-wrap: nowrap;">
	118	+ <div class="content-box pd10" style="width: 20%;">
	119	+ <div class="content-titleZone flex justy justify-between align-center" style="height: 45px">
	120	+ <p class="box-title">데이터베이스 정보</p>
	121	+ </div>
	122	+ <div class="content-zone2">
	123	+ <ul class="content-list" v-if="tableList.length > 0">
	124	+ <li class="cursor" v-for="(item, indx) in tableList" :key="indx">
	125	+ <a @click="getTableData(item)" :class="{
	126	+ 'file-list': true,
	127	+ selected: selectTable === item,
	128	+ }">
	129	+ <div class="flex align-center">
	130	+ <p> {{ item.tableNmKr != null && item.tableNmKr != "" ? item.tableNmKr : item.tableNm }} </p>
	131	+ </div>
	132	+ </a>
	133	+ </li>
	134	+ </ul>
	135	+ </div>
	136	+ </div>
	137	+ <div class="content-box" style="width: 80%;">
	138	+ <div class="flex-column">
	139	+ <div class="content-box pd10" style="height: 50%;">
	140	+ <div class="content-titleZone flex justy justify-between align-center" style="height: 45px">
	141	+ <p class="box-title">쿼리 작업</p>
	142	+ <button class="icon-btn" @click="executeQuery" title="실행">
	143	+ <svg-icon type="mdi" :path="playPath" :color="'#fbbe28'"></svg-icon>
	144	+ </button>
	145	+ </div>
	146	+ <div class="flex" style="height: calc(100% - 60px)">
	147	+ <textarea style="resize: none; width: 100%; height: 100%; padding: 10px;" v-model="jobItm.itm.query"></textarea>
	148	+ </div>
	149	+ </div>
	150	+ <div class="content-box pd10" style="height: 50%;">
	151	+ <ul class="tab-nav flex justify-start">
	152	+ <li @click="showTab('tab1')">
	153	+ <a href="#tab01" :class="{ activeTab: activeTab === 'tab1' }">작업결과</a>
	154	+ </li>
	155	+ <li @click="showTab('tab2')">
	156	+ <a href="#tab02" :class="{ activeTab: activeTab === 'tab2' }">작업log</a>
	157	+ </li>
	158	+ </ul>
	159	+ <div v-show="activeTab === 'tab1'" class="content-box" style="height: calc(100% - 45px); padding: 10px;">
	160	+ <div class="count-zone mb10" v-if="jobItm.dataTable.columnDatas.length > 0">
	161	+ <p> 총 <span>{{ jobItm.dataTable.totalRows }}</span>건 중 <span>{{ jobItm.dataTable.rowData.length }}</span>건 조회 </p>
	162	+ </div>
	163	+ <div style="height: calc(100% - 15px); overflow: auto;">
	164	+ <table class="list-table" v-if="jobItm.dataTable.columnDatas.length > 0">
	165	+ <thead>
	166	+ <tr>
	167	+ <th v-for="(itm, indx) in jobItm.dataTable.columnDatas" :key="indx" style="min-width: 150px !important">
	168	+ <label class="check-label">
	169	+ <span class="mr10">{{ itm.columnNm }}</span>
	170	+ <input type="checkbox" class="custom-checkbox" v-model="itm.pkAt" />
	171	+ </label>
	172	+ </th>
	173	+ </tr>
	174	+ </thead>
	175	+ <tbody v-if="jobItm.dataTable.rowData.length > 0">
	176	+ <tr v-for="(row, rows) in jobItm.dataTable.rowData" :key="rows">
	177	+ <td v-for="(itm, indx) in row" :key="indx" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> {{ itm }} </td>
	178	+ </tr>
	179	+ </tbody>
	180	+ </table>
	181	+ </div>
	182	+ </div>
	183	+ <div v-show="activeTab === 'tab2'" class=" content-box" style="height: calc(100% - 45px); padding: 10px;">
	184	+ <div style="height: calc(100% - 15px); overflow: auto;">
	185	+ <table class="list-table">
	186	+ <colgroup>
	187	+ <col width="10%" />
	188	+ <col width="60%" />
	189	+ <col width="20%" />
	190	+ <col width="10%" />
	191	+ </colgroup>
	192	+ <thead>
	193	+ <tr>
	194	+ <th>No</th>
	195	+ <th>접속시간</th>
	196	+ <th>접속결과</th>
	197	+ <th>접속내용</th>
	198	+ </tr>
	199	+ </thead>
	200	+ <tbody>
	201	+ <tr v-for="(itm, indx) in executeMessage" :key="indx">
	202	+ <td>{{ indx + 1 }}</td>
	203	+ <td>{{ itm.message }}</td>
	204	+ <td>{{ itm.time }}</td>
	205	+ <td>{{ itm.result }}</td>
	206	+ </tr>
	207	+ </tbody>
	208	+ </table>
	209	+ </div>
	210	+ </div>
	211	+ </div>
	212	+ </div>
	213	+ </div>
	214	+ </div>
	215	+ </template>
139	216	</div>
	217	+ <DBConSearch :openPopup="openSearchModal" @modalclose="dbConSearchOpen" @selectItm="selectDbcon" />
140	218	</div>
141	219	</template>
142		-
143	220	<script>
	221	+// icon용 svg import
	222	+import SvgIcon from "@jamescoyle/vue-icon";
	223	+import { mdiMagnify, mdiClose } from "@mdi/js";
	224	+
144	225	export default {
145		- name: "data-check",
146		- props: {
147		- openPopup: {
148		- type: Boolean,
149		- default: false,
150		- },
151		- item: {
152		- type: Object,
153		- },
154		- saveNodeData: {
155		- type: Function,
156		- },
157		- },
	226	+ components: { SvgIcon },
	227	+
158	228	data() {
159	229	return {
160		- comId:
161		- "comId_" +
162		- Math.random().toString(36).substring(2, 15) +
163		- Math.random().toString(36).substring(2, 15),
164		- isModalOpen: this.openPopup,
165		- itm: this.item,
166		- };
167		- },
168		- methods: {
169		- // 모달 닫기
170		- closeModal: function () {
171		- this.isModalOpen = false;
172		- this.$emit("closePopup", this.item);
173		- this.$emit("closePopup2", this.item.id);
174		- },
	230	+ // icon용 svg path
	231	+ searchPath: mdiMagnify,
	232	+ closePath: mdiClose,
175	233
176		- dataInsert: function (event, filter) {
177		- for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
178		- if (
179		- this.item.front_dataTable.columnDatas[i].orginlColumnNm ==
180		- event.target.value
181		- ) {
182		- filter.coulmn_nm =
183		- this.item.front_dataTable.columnDatas[i].orginlColumnNm;
184		- filter.data_ty = this.item.front_dataTable.columnDatas[i].dataTy;
185		- }
186		- }
187		- },
	234	+ isModalOpen: true,
188	235
189		- // 데이터 형반환
190		- getDataType: function (index, coulmnNm) {
191		- for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
192		- if (
193		- this.item.front_dataTable.columnDatas[i].displyColumnNm == coulmnNm
194		- ) {
195		- return this.item.front_dataTable.columnDatas[i].dataTy;
196		- }
197		- }
198		- },
199		-
200		- // 데이터 타입체크
201		- setDataType: function (index, coulmnNm) {
202		- for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
203		- if (
204		- this.item.front_dataTable.columnDatas[i].orginlColumnNm == coulmnNm
205		- ) {
206		- if (this.item.front_dataTable.columnDatas[i].dataTy == "STRING") {
207		- return "text";
208		- } else if (
209		- this.item.front_dataTable.columnDatas[i].datadataTyType == "DATE"
210		- ) {
211		- return "date";
212		- } else if (
213		- this.item.front_dataTable.columnDatas[i].dataTy == "DATETIME"
214		- ) {
215		- return "datetime-local";
216		- } else if (
217		- this.item.front_dataTable.columnDatas[i].dataTy == "LONG"
218		- ) {
219		- return "number";
220		- } else {
221		- return "number";
222		- }
223		- }
224		- }
225		- },
226		-
227		- // 필터추가
228		- addFiter: function () {
229		- const item = JSON.parse(
230		- JSON.stringify(this.$getDefaultJobGroup().filterItem)
231		- );
232		-
233		- if (
234		- this.item.front_dataTable.columnDatas == null \|\|
235		- this.item.front_dataTable.columnDatas.length == 0
236		- ) {
237		- this.$showAlert("경고", "데이터 컬럼이 없습니다.");
238		- return;
239		- } else {
240		- item.coulmn_nm =
241		- this.item.front_dataTable.columnDatas[0].orginlColumnNm;
242		- item.data_ty = this.item.front_dataTable.columnDatas[0].dataTy;
243		- item.calc_ty = 1;
244		- item.indx = this.item.itm.filterItems.length + 1;
245		- item.cmpr_value = "";
246		- }
247		-
248		- this.item.itm.filterItems.push(item);
249		- },
250		- // 필터 삭제
251		- deleteFilter: function (indx) {
252		- this.item.itm.filterItems.splice(indx, 1);
253		- },
254		- },
255		- watch: {
256		- openPopup: function (v) {
257		- this.isModalOpen = v;
258		- },
259		-
260		- item: function (v) {
261		- //this.itm = v;
262		-
263		- },
264		- },
265		- computed: {},
266		- components: {},
267		- mounted() {
268		- },
269		-};
	236	+ search: Object.assign({}, this.$getDefaultSerchVO()),
	237	+ searchData: this.$getDefaultSerchItem(null, "string"),
	238	+ }
	239	+ }
	240	+}
270	241	</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,593 +0,0 @@
	1	-<template>
	2	- <div class="modal-wrapper">
	3	- <div class="modal-container large-modal">
	4	- <div class="modal-title flex justify-between align-center">
	5	- <h2>데이터베이스 읽기</h2>
	6	- <button class="close-btn" @click="$emit('onClose')">
	7	- <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	8	- </button>
	9	- </div>
	10	- <div class="modal-content-monthly">
	11	- <!-- 페이지 1: 데이터베이스 연결 설정 -->
	12	- <template v-if="currentPage == 1">
	13	- <!-- 데이터베이스 정보 -->
	14	- <div class="content-titleZone flex justy justify-between align-center">
	15	- <p class="box-title">데이터베이스 정보</p>
	16	- </div>
	17	- <table class="form-table">
	18	- <colgroup>
	19	- <col style="width: 20%" />
	20	- <col style="width: 80%" />
	21	- </colgroup>
	22	- <tbody>
	23	- <tr>
	24	- <th>연계정보 타입</th>
	25	- <td>
	26	- <div class="input-container flex">
	27	- <label class="radio-label">
	28	- <input type="radio" name="radio" :value="false" class="custom-radiobox" @change="onConnectionTypeChange(false)" v-model="jobItm.itm_option_bool" />
	29	- <span>직접입력</span>
	30	- </label>
	31	- <label class="radio-label">
	32	- <input type="radio" name="radio" :value="true" class="custom-radiobox" @change="onConnectionTypeChange(true)" v-model="jobItm.itm_option_bool" />
	33	- <span>불러오기</span>
	34	- </label>
	35	- </div>
	36	- </td>
	37	- </tr>
	38	- <!-- 연계정보 불러오기 선택 시 -->
	39	- <tr v-show="jobItm.itm_option_bool">
	40	- <th>연계정보</th>
	41	- <td>
	42	- <input type="text" class="half-input" disabled :value="getConnectionDisplayText()" />
	43	- <button class="blue-border-btn small-btn" @click="dbConSearchOpen(true)">검색</button>
	44	- </td>
	45	- </tr>
	46	- <tr>
	47	- <th>DMBS</th>
	48	- <td>
	49	- <select id="databaseType" @change="successAt = false" class="square-select half-input" v-model="currentConnectionDB.databaseType" :disabled="jobItm.itm_option_bool">
	50	- <option v-for="(itm, index) in databaseTypeList" :key="index" :value="itm.key">{{ itm.value }}</option>
	51	- </select>
	52	- </td>
	53	- </tr>
	54	- <tr>
	55	- <th>IP</th>
	56	- <td>
	57	- <input id="conectIp" type="text" @input="successAt = false" class="half-input" v-model="currentConnectionDB.conectIp" placeholder="ex. 127.0.0.1" :disabled="jobItm.itm_option_bool" />
	58	- </td>
	59	- </tr>
	60	- <tr>
	61	- <th>PORT</th>
	62	- <td>
	63	- <input id="conectPort" type="text" @input="successAt = false" class="half-input" v-model="currentConnectionDB.conectPort" :disabled="jobItm.itm_option_bool" />
	64	- </td>
	65	- </tr>
	66	- <tr>
	67	- <th>DB 명</th>
	68	- <td>
	69	- <input id="databaseNm" type="text" @input="successAt = false" class="half-input" v-model="currentConnectionDB.databaseNm" placeholder="데이터베이스명 OR 스키마명" :disabled="jobItm.itm_option_bool" />
	70	- </td>
	71	- </tr>
	72	- <tr>
	73	- <th>접속ID</th>
	74	- <td>
	75	- <input type="text" class="half-input" @input="successAt = false" v-model="currentConnectionDB.userId" placeholder="접속 ID" :disabled="jobItm.itm_option_bool" />
	76	- </td>
	77	- </tr>
	78	- <tr>
	79	- <th>접속PW</th>
	80	- <td>
	81	- <input type="password" class="half-input" @input="successAt = false" v-model="currentConnectionDB.userPassword" placeholder="접속 PW" autocomplete="new-password" :disabled="jobItm.itm_option_bool" />
	82	- </td>
	83	- </tr>
	84	- </tbody>
	85	- </table>
	86	- <!-- 데이터베이스 연결 결과 -->
	87	- <div class="content-titleZone flex justy justify-between align-center mt20">
	88	- <p class="box-title">데이터베이스 연결 결과</p>
	89	- <button class="blue-border-btn small-btn" @click="dataBaseConnectionCheck">접속확인</button>
	90	- </div>
	91	- <div class="table-zone">
	92	- <table class="list-table">
	93	- <colgroup>
	94	- <col width="10%" />
	95	- <col width="70%" />
	96	- <col width="20%" />
	97	- </colgroup>
	98	- <thead>
	99	- <tr>
	100	- <th>No</th>
	101	- <th>접속결과</th>
	102	- <th>접속시간</th>
	103	- </tr>
	104	- </thead>
	105	- <tbody>
	106	- <tr v-for="(itm, idx) in resultMessage" :key="idx">
	107	- <td>{{ idx + 1 }}</td>
	108	- <td>{{ itm.message }}</td>
	109	- <td>{{ itm.time }}</td>
	110	- </tr>
	111	- </tbody>
	112	- </table>
	113	- </div>
	114	- </template>
	115	- <!-- 페이지 2: 쿼리 관리 -->
	116	- <template v-if="currentPage == 2">
	117	- <div class="flex content-box" style="min-height: 60dvh; flex-wrap: nowrap;">
	118	- <div class="content-box pd10" style="width: 20%;">
	119	- <div class="content-titleZone flex justy justify-between align-center" style="height: 45px">
	120	- <p class="box-title">데이터베이스 정보</p>
	121	- </div>
	122	- <div class="content-zone2">
	123	- <ul class="content-list" v-if="tableList.length > 0">
	124	- <li class="cursor" v-for="(item, indx) in tableList" :key="indx">
	125	- <a @click="getTableData(item)" :class="{
	126	- 'file-list': true,
	127	- selected: selectTable === item,
	128	- }">
	129	- <div class="flex align-center">
	130	- <p>{{ getTableDisplayName(item) }}</p>
	131	- </div>
	132	- </a>
	133	- </li>
	134	- </ul>
	135	- </div>
	136	- </div>
	137	- <div class="content-box" style="width: 80%;">
	138	- <div class="flex-column">
	139	- <div class="content-box pd10" style="height: 50%;">
	140	- <div class="content-titleZone flex justy justify-between align-center" style="height: 45px">
	141	- <p class="box-title">쿼리 작업</p>
	142	- <button class="icon-btn" @click="executeQuery" title="실행">
	143	- <svg-icon type="mdi" :path="playPath" :color="'#fbbe28'"></svg-icon>
	144	- </button>
	145	- </div>
	146	- <div class="flex" style="height: calc(100% - 60px)">
	147	- <textarea style="resize: none; width: 100%; height: 100%; padding: 10px;" v-model="jobItm.itm.query"></textarea>
	148	- </div>
	149	- </div>
	150	- <div class="content-box pd10" style="height: 50%;">
	151	- <ul class="tab-nav flex justify-start">
	152	- <li @click="showTab('tab1')">
	153	- <a href="#tab01" :class="{ activeTab: activeTab === 'tab1' }">작업결과</a>
	154	- </li>
	155	- <li @click="showTab('tab2')">
	156	- <a href="#tab02" :class="{ activeTab: activeTab === 'tab2' }">작업log</a>
	157	- </li>
	158	- </ul>
	159	- <div v-show="activeTab === 'tab1'" class="content-box" style="height: calc(100% - 45px); padding: 10px;">
	160	- <div class="count-zone mb10" v-if="jobItm.dataTable.columnDatas.length > 0">
	161	- <p>총 <span>{{ jobItm.dataTable.totalRows }}</span>건 중 <span>{{ jobItm.dataTable.rowData.length }}</span>건 조회</p>
	162	- </div>
	163	- <div style="height: calc(100% - 15px); overflow: auto;">
	164	- <table class="list-table">
	165	- <thead>
	166	- <tr v-if="jobItm.dataTable.columnDatas.length > 0">
	167	- <th v-for="(itm, indx) in jobItm.dataTable.columnDatas" :key="indx" style="min-width: 150px !important"> {{ itm.columnNm }} <label class="check-label">
	168	- <input type="checkbox" class="custom-checkbox" v-model="itm.pkAt" />
	169	- </label>
	170	- </th>
	171	- </tr>
	172	- </thead>
	173	- <tbody v-if="jobItm.dataTable.rowData.length > 0">
	174	- <tr v-for="(row, rows) in jobItm.dataTable.rowData" :key="rows">
	175	- <td v-for="(itm, indx) in row" :key="indx" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> {{ itm }} </td>
	176	- </tr>
	177	- </tbody>
	178	- </table>
	179	- </div>
	180	- </div>
	181	- <div v-show="activeTab === 'tab2'" class=" content-box" style="height: calc(100% - 45px); padding: 10px;">
	182	- <div style="height: calc(100% - 15px); overflow: auto;">
	183	- <table class="list-table">
	184	- <colgroup>
	185	- <col width="10%" />
	186	- <col width="60%" />
	187	- <col width="20%" />
	188	- <col width="10%" />
	189	- </colgroup>
	190	- <thead>
	191	- <tr>
	192	- <th>No</th>
	193	- <th>접속내용</th>
	194	- <th>접속시간</th>
	195	- <th>접속결과</th>
	196	- </tr>
	197	- </thead>
	198	- <tbody>
	199	- <tr v-for="(itm, indx) in executeMessage" :key="indx">
	200	- <td>{{ indx + 1 }}</td>
	201	- <td>{{ itm.message }}</td>
	202	- <td>{{ itm.time }}</td>
	203	- <td>{{ itm.result }}</td>
	204	- </tr>
	205	- </tbody>
	206	- </table>
	207	- </div>
	208	- </div>
	209	- </div>
	210	- </div>
	211	- </div>
	212	- </div>
	213	- </template>
	214	- </div>
	215	- <!-- 모달 하단 버튼 영역 -->
	216	- <div class="modal-end flex justify-end">
	217	- <button class="blue-border-btn small-btn" v-if="currentPage == 2" @click="moveTo('prev')">이전</button>
	218	- <button class="blue-border-btn small-btn" v-if="currentPage == 1" @click="moveTo('next')">다음</button>
	219	- <button class="blue-btn small-btn" v-if="isDataSet" @click="fnSave">등록</button>
	220	- <button class="blue-border-btn small-btn" @click="$emit('onClose')">취소</button>
	221	- </div>
	222	- </div>
	223	- </div>
	224	- <DBConSearch :openPopup="openSearchModal" @modalclose="dbConSearchOpen" @selectItm="selectDbcon" />
	225	-</template>
	226	-<script>
	227	-import _ from "lodash";
	228	-import axios from "axios";
	229	-
	230	-// icon용 svg import
	231	-import SvgIcon from "@jamescoyle/vue-icon";
	232	-import { mdiMagnify, mdiClose, mdiPlay } from "@mdi/js";
	233	-
	234	-// 컴포넌트
	235	-import DBConSearch from "../../dataComponent/DbConnectionSearchModal.vue";
	236	-
	237	-export default {
	238	- name: "DatabaseConnectionModal",
	239	-
	240	- components: {
	241	- SvgIcon,
	242	- DBConSearch
	243	- },
	244	-
	245	- props: {
	246	- currentJobItm: String,
	247	- jobItem: Object
	248	- },
	249	-
	250	- data() {
	251	- return {
	252	- // icon용 svg path
	253	- searchPath: mdiMagnify,
	254	- closePath: mdiClose,
	255	- playPath: mdiPlay,
	256	-
	257	- // 페이지 관련
	258	- currentPage: 1,
	259	- activeTab: "tab1",
	260	-
	261	- // 상태 관리
	262	- successAt: false, // 연결 성공 여부
	263	- isDataSet: false, // 데이터 설정 여부 추가
	264	-
	265	- // 데이터 객체들
	266	- jobItm: {
	267	- itm: null,
	268	- itm_option_bool: false,
	269	- dataTable: {
	270	- columnDatas: [],
	271	- rowData: [],
	272	- totalRows: 0,
	273	- perPage: 10,
	274	- query: ""
	275	- }
	276	- },
	277	-
	278	- // 연계정보 관리
	279	- openSearchModal: false,
	280	- linkConnectionDB: {},
	281	- inputConnectionDB: {
	282	- databaseType: "",
	283	- conectIp: "",
	284	- conectPort: "",
	285	- databaseNm: "",
	286	- userId: "",
	287	- userPassword: ""
	288	- },
	289	- // 현재 표시되는 연결 정보 (직접입력/불러오기 모두 대응)
	290	- currentConnectionDB: {
	291	- databaseType: "",
	292	- conectIp: "",
	293	- conectPort: "",
	294	- databaseNm: "",
	295	- userId: "",
	296	- userPassword: ""
	297	- },
	298	-
	299	- // 데이터 목록
	300	- databaseTypeList: [],
	301	- tableList: [],
	302	- selectTable: {},
	303	-
	304	- // 로그 메시지
	305	- resultMessage: [],
	306	- executeMessage: []
	307	- };
	308	- },
	309	-
	310	- watch: {
	311	- jobItem: {
	312	- handler(newVal) {
	313	- if (newVal) {
	314	- this.jobItm = _.cloneDeep(newVal);
	315	- if (this.jobItm.itm_option_bool) {
	316	- this.linkConnectionDB = this.jobItm.itm \|\| {};
	317	- this.currentConnectionDB = _.cloneDeep(this.linkConnectionDB);
	318	- } else {
	319	- this.inputConnectionDB = this.jobItm.itm \|\| {};
	320	- this.currentConnectionDB = _.cloneDeep(this.inputConnectionDB);
	321	- }
	322	- }
	323	- },
	324	- immediate: true
	325	- },
	326	- },
	327	-
	328	- created() {
	329	- this.initializeComponent();
	330	- },
	331	-
	332	- mounted() {
	333	- this.init();
	334	- },
	335	-
	336	- methods: {
	337	- // 초기화 함수들
	338	- initializeComponent() {
	339	- if (!this.$isEmpty(this.currentJobItm)) {
	340	- let currentJobItm = JSON.parse(this.currentJobItm);
	341	- if (!this.$isEmpty(currentJobItm)) {
	342	- this.jobItm = _.cloneDeep(currentJobItm);
	343	- }
	344	- }
	345	-
	346	- if (!this.jobItm.itm) {
	347	- this.jobItm.itm = _.cloneDeep(this.$getDefaultJobGroup().connectionDb \|\| {});
	348	- }
	349	- },
	350	-
	351	- async init() {
	352	- this.databaseTypeList = await this.$getDataBaseTypeList();
	353	-
	354	- if (this.jobItm == null) {
	355	- this.jobItm = _.cloneDeep(this.$getDefaultJobGroup().node \|\| {});
	356	- this.linkConnectionDB = _.cloneDeep(this.$getDefaultJobGroup().connectionDb \|\| {});
	357	- this.inputConnectionDB = _.cloneDeep(this.$getDefaultJobGroup().connectionDb \|\| {});
	358	- this.jobItm.itm = _.cloneDeep(this.$getDefaultJobGroup().connectionDb \|\| {});
	359	- } else {
	360	- if (this.jobItm.itm_option_bool) {
	361	- this.linkConnectionDB = _.cloneDeep(this.jobItm.itm) \|\| {};
	362	- this.currentConnectionDB = _.cloneDeep(this.linkConnectionDB);
	363	- } else {
	364	- this.inputConnectionDB = _.cloneDeep(this.jobItm.itm) \|\| {};
	365	- this.currentConnectionDB = _.cloneDeep(this.inputConnectionDB);
	366	- }
	367	- }
	368	-
	369	- if (!this.inputConnectionDB.databaseType && this.databaseTypeList.MARIADB) {
	370	- this.inputConnectionDB.databaseType = this.databaseTypeList.MARIADB.key;
	371	- if (!this.jobItm.itm_option_bool) {
	372	- this.currentConnectionDB.databaseType = this.databaseTypeList.MARIADB.key;
	373	- }
	374	- }
	375	- },
	376	-
	377	- // 연결 타입 변경 시(직접입력/불러오기) 입력 필드 업데이트
	378	- onConnectionTypeChange(isImport) {
	379	- this.successAt = false;
	380	- if (isImport) {
	381	- // 불러오기 선택 시
	382	- this.currentConnectionDB = _.cloneDeep(this.linkConnectionDB);
	383	- } else {
	384	- // 직접입력 선택 시
	385	- this.currentConnectionDB = _.cloneDeep(this.inputConnectionDB);
	386	- }
	387	- },
	388	-
	389	- // 유틸리티 함수들
	390	- getConnectionDisplayText() {
	391	- return this.linkConnectionDB.conectNm
	392	- ? `${this.linkConnectionDB.conectNm}(${this.linkConnectionDB.conectIp})`
	393	- : "";
	394	- },
	395	-
	396	- getTableDisplayName(item) {
	397	- return item.tableNmKr && item.tableNmKr !== "" ? item.tableNmKr : item.tableNm;
	398	- },
	399	-
	400	- // 데이터베이스 연결 관리
	401	- dataBaseConnectionCheck() {
	402	- if (this.jobItm.itm_option_bool) {
	403	- // 불러오기 모드일 때 linkConnectionDB 사용
	404	- this.jobItm.itm = _.cloneDeep(this.linkConnectionDB);
	405	- } else {
	406	- // 직접입력 모드일 때 currentConnectionDB에서 업데이트된 값 가져옴
	407	- this.inputConnectionDB = _.cloneDeep(this.currentConnectionDB);
	408	- this.jobItm.itm = _.cloneDeep(this.inputConnectionDB);
	409	- }
	410	-
	411	- this.jobItm.itm.loadAt = this.jobItm.itm_option_bool;
	412	-
	413	- if (this.jobItm.itm.type) {
	414	- delete this.jobItm.itm.type;
	415	- }
	416	-
	417	- axios({
	418	- url: "/data/dataBaseConnectionCheck.json",
	419	- method: "post",
	420	- headers: { "Content-Type": "application/json; charset=UTF-8" },
	421	- data: this.jobItm.itm
	422	- })
	423	- .then(response => {
	424	- const checkMessage = response.data.checkMessage \|\| {};
	425	- this.successAt = checkMessage.success === true;
	426	- this.$emit("onDfltSetChange", checkMessage.success);
	427	- this.$showAlert("결과내용", checkMessage.message);
	428	-
	429	- this.resultMessage.push({
	430	- time: this.$getFullTime(),
	431	- message: checkMessage.message,
	432	- result: checkMessage.success ? "접속성공" : "접속실패"
	433	- });
	434	- })
	435	- .catch(error => {
	436	- console.error("Database connection check error:", error);
	437	- this.successAt = false;
	438	- this.$emit("onDfltSetChange", false);
	439	- });
	440	- },
	441	-
	442	- // 연계정보 관리
	443	- dbConSearchOpen(val) {
	444	- this.openSearchModal = val;
	445	- },
	446	-
	447	- selectDbcon(dbcon) {
	448	- this.linkConnectionDB = _.cloneDeep(dbcon);
	449	- // 불러오기 모드이면 현재 표시되는 필드 업데이트
	450	- if (this.jobItm.itm_option_bool) {
	451	- this.currentConnectionDB = _.cloneDeep(this.linkConnectionDB);
	452	- }
	453	- },
	454	-
	455	- getTableData(item) {
	456	- this.selectTable = item;
	457	-
	458	- const requestData = {
	459	- dataset: { ...item, perPage: this.jobItm.dataTable.perPage },
	460	- connectionDB: { ...this.jobItm.itm, creatDt: null }
	461	- };
	462	-
	463	- axios({
	464	- url: "/data/getTableData.json",
	465	- method: "post",
	466	- headers: { "Content-Type": "application/json; charset=UTF-8" },
	467	- data: requestData
	468	- })
	469	- .then(response => {
	470	- if (response.data.checkMessage.success) {
	471	- this.jobItm.dataTable = response.data.resultData.dataTable;
	472	- this.jobItm.itm_id = this.jobItm.itm.dbConectId;
	473	- this.jobItm.itm.query = this.jobItm.dataTable.query;
	474	- this.isDataSet = true;
	475	- } else {
	476	- this.isDataSet = false;
	477	- }
	478	-
	479	- const checkMessage = response.data.resultData.dataTable.checkMessage \|\| {};
	480	- this.executeMessage.push({
	481	- time: this.$getFullTime(),
	482	- message: checkMessage.message,
	483	- result: checkMessage.success ? "성공" : "실패"
	484	- });
	485	- })
	486	- .catch(error => {
	487	- console.error("Get table data error:", error);
	488	- this.isDataSet = false;
	489	- });
	490	- },
	491	-
	492	- executeQuery() {
	493	- const requestData = {
	494	- dataTable: {
	495	- ...this.jobItm.dataTable,
	496	- query: this.jobItm.itm.query
	497	- },
	498	- connectionDB: {
	499	- ...this.jobItm.itm,
	500	- creatDt: null
	501	- }
	502	- };
	503	-
	504	- axios({
	505	- url: "/data/getTableDataByQuery.json",
	506	- method: "post",
	507	- headers: { "Content-Type": "application/json; charset=UTF-8" },
	508	- data: requestData
	509	- })
	510	- .then(response => {
	511	- if (response.data.checkMessage.success) {
	512	- this.jobItm.dataTable = response.data.resultData.dataTable;
	513	- this.jobItm.itm_id = this.jobItm.itm.dbConectId;
	514	- this.jobItm.itm.query = this.jobItm.dataTable.query;
	515	- this.isDataSet = true;
	516	- } else {
	517	- this.isDataSet = false;
	518	- }
	519	-
	520	- const checkMessage = response.data.resultData.dataTable.checkMessage \|\| {};
	521	- this.executeMessage.push({
	522	- time: this.$getFullTime(),
	523	- message: checkMessage.message,
	524	- result: checkMessage.success ? "성공" : "실패"
	525	- });
	526	- })
	527	- .catch(error => {
	528	- console.error("Execute query error:", error);
	529	- this.isDataSet = false;
	530	- });
	531	- },
	532	-
	533	- showTab(tabName) {
	534	- this.activeTab = tabName;
	535	- },
	536	-
	537	- moveTo(type) {
	538	- if (type === 'prev') {
	539	- this.currentPage = 1;
	540	- this.tableList = []; // 초기화
	541	- this.jobItm.dataTable = {
	542	- columnDatas: [],
	543	- rowData: [],
	544	- totalRows: 0,
	545	- perPage: 10,
	546	- query: ""
	547	- }; // 초기화
	548	- } else if (type === 'next') {
	549	- if (!this.successAt) {
	550	- this.$showAlert("경고", "접속에 성공한 경우에만 진행할 수 있습니다.");
	551	- } else {
	552	- this.getDbConnectionTableList(); // 테이블 및 쿼리 관리
	553	- }
	554	- } else {
	555	- this.$showAlert("오류", "올바르지 않은 요청입니다.");
	556	- }
	557	- },
	558	-
	559	- // 테이블 및 쿼리 관리
	560	- getDbConnectionTableList() {
	561	- axios({
	562	- url: "/data/selectTableList.json",
	563	- method: "post",
	564	- headers: { "Content-Type": "application/json; charset=UTF-8" },
	565	- data: this.jobItm.itm
	566	- })
	567	- .then(response => {
	568	- if (response.data.checkMessage.success) {
	569	- this.tableList = response.data.resultData.tableList \|\| [];
	570	- this.currentPage = 2;
	571	- }
	572	- })
	573	- .catch(error => {
	574	- console.error("Get table list error:", error);
	575	- this.tableList = [];
	576	- });
	577	- },
	578	-
	579	- // 저장
	580	- fnSave() {
	581	- this.$emit("onSave", this.jobItm);
	582	- }
	583	- }
	584	-};
	585	-</script>
	586	-<style>
	587	-.content-zone2 {
	588	- height: calc(100% - 57px);
	589	- max-height: calc(100% - 57px);
	590	- overflow-y: auto;
	591	- overflow-x: hidden;
	592	-}
	593	-</style>(파일 끝에 줄바꿈 문자 없음)

Delete comment