Commit @1015cfeca5a2909ee5f23fd6d93658a0da9cccd5

박정하 04-28

250428 박정하 필터 수정

@1015cfeca5a2909ee5f23fd6d93658a0da9cccd5

671a464

1015cfe

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">
-      <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 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>
-    </div>
-    <div class="modal-content-monthly">
-      <template v-if="currentPage == 1">
+      <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 class="table-zone">
           <table class="form-table">
+            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
             <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%" />
+              <col style="width: 25%" />
+              <col style="width: 25%" />
+              <col style="width: 25%" />
             </colgroup>
             <thead>
               <tr>
-                <th>No</th>
-                <th>접속시간</th>
-                <th>접속결과</th>
+                <th>컬럼</th>
+                <th>연산</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 v-for="(filter, indx) in item.itm.filterItems" :key="indx">
+                <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>
+                  </select>
+                </td>
+                <td>
+                  <select class="full-select" v-model="filter.calc_ty">
+                    <option :value="null">필터를 적용할 연산을 선택하세요.</option>
+                    <option value="1">=</option>
+                    <template v-if="filter.data_ty != 'STRING'">
+                      <option value="2">&lt;</option>
+                      <option value="3">&gt;</option>
+                      <option value="4">&lt;=</option>
+                      <option value="5">&gt;=</option>
+                    </template>
+                    <option value="6">!=</option>
+                    <option value="7" v-if="filter.data_ty == 'STRING'"> 포함 </option>
+                  </select>
+                </td>
+                <td>
+                  <input type="text" class="full-input" v-if="filter.data_ty == 'STRING'" v-model="filter.cmpr_value" placeholder="필터를 적용할 내용을 입력하세요." />
+                  <input type="date" class="full-select" v-else-if="filter.data_ty == 'DATE'" v-model="filter.cmpr_value" />
+                  <input type="datetime-local" class="full-select" v-else-if="filter.data_ty == 'DATETIME'" v-model="filter.cmpr_value" />
+                  <input type="number" class="full-select" v-else v-model="filter.cmpr_value" />
+                </td>
+                <td style="text-align: center">
+                  <button class="green-border-btn small-btn" @click="deleteFilter(indx)"> 삭제 </button>
+                </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>
+      <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>
-    <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 {
-  components: { SvgIcon },
-
+  name: "data-check",
+  props: {
+    openPopup: {
+      type: Boolean,
+      default: false,
+    },
+    item: {
+      type: Object,
+    },
+    saveNodeData: {
+      type: Function,
+    },
+  },
   data() {
     return {
-      // icon용 svg path
-      searchPath: mdiMagnify,
-      closePath: mdiClose,
+      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);
+    },
 
-      isModalOpen: true,
+    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;
+        }
+      }
+    },
 
-      search: Object.assign({}, this.$getDefaultSerchVO()),
-      searchData: this.$getDefaultSerchItem(null, "string"),
-    }
-  }
-}
+    // 데이터 형반환
+    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;
+        }
+      }
+    },
+
+    // 필터추가
+    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;
+    },
+  },
+};
 </script>

671a464

1015cfe

client/views/component/connection/jobContainer.vue

--- client/views/component/connection/jobContainer.vue

+++ client/views/component/connection/jobContainer.vue


       type: Number,
       default: 100,
     },
-    dataEdit:{
+    dataEdit: {
       type: Boolean,
       default: false,
     }

         this.crrentJobGroup.jobItms[indx].front_dataTable =
           this.crrentJobGroup.jobItms[indx - 1].dataTable;
       }
-
       this.popupToggls[indx] = true;
     },
     closePopup: function (indx) {
       this.popupToggls[indx] = false;
-
     },
 
     // 기본 job 데이터
     getDefaultJobGroup: function () {
       var vm = this;
-      this.defaultJobGroup = JSON.parse(
-        JSON.stringify(this.$getDefaultJobGroup().jobGroup)
+      vm.defaultJobGroup = JSON.parse(
+        JSON.stringify(vm.$getDefaultJobGroup().jobGroup)
       );
-      this.defaultJobItm = JSON.parse(
-        JSON.stringify(this.$getDefaultJobGroup().jobItem)
+      vm.defaultJobItm = JSON.parse(
+        JSON.stringify(vm.$getDefaultJobGroup().jobItem)
       );
-      if (this.crrentJobGroup == null) {
-        this.crrentJobGroup = JSON.parse(JSON.stringify(this.defaultJobGroup));
+      if (vm.crrentJobGroup == null) {
+        vm.crrentJobGroup = JSON.parse(JSON.stringify(vm.defaultJobGroup));
       }
+      if (vm.crrentJobGroup.jobItms.length > 0) {
+        vm.popupToggls = [];
+        for (let i = 0; i < vm.crrentJobGroup.jobItms; i++) {
+          vm.popupToggls.push(false);
+        }
+      }
+      console.log("test: ", vm.popupToggls);
     },
 
     // 아이템 선택

       }
 
       this.popupToggls.push(false);
-
       this.crrentJobGroup.jobItms.push(newItm);
     },
 
     execModel: function () {
-
       let vm = this;
       axios({
         url: "/job/executeJob.json",

         data: vm.crrentJobGroup,
       })
         .then(function (response) {
-          
           vm.crrentJobGroup.dataTable = response.data.resultData.dataTable;
           vm.$emit('getDataTable', vm.crrentJobGroup.dataTable)
         })

Add a comment

Open 0
Closed 0

List

...	...	@@ -90,7 +90,7 @@
90	90	type: Number,
91	91	default: 100,
92	92	},
93		- dataEdit:{
	93	+ dataEdit: {
94	94	type: Boolean,
95	95	default: false,
96	96	}
...	...	@@ -119,26 +119,31 @@
119	119	this.crrentJobGroup.jobItms[indx].front_dataTable =
120	120	this.crrentJobGroup.jobItms[indx - 1].dataTable;
121	121	}
122		-
123	122	this.popupToggls[indx] = true;
124	123	},
125	124	closePopup: function (indx) {
126	125	this.popupToggls[indx] = false;
127		-
128	126	},
129	127
130	128	// 기본 job 데이터
131	129	getDefaultJobGroup: function () {
132	130	var vm = this;
133		- this.defaultJobGroup = JSON.parse(
134		- JSON.stringify(this.$getDefaultJobGroup().jobGroup)
	131	+ vm.defaultJobGroup = JSON.parse(
	132	+ JSON.stringify(vm.$getDefaultJobGroup().jobGroup)
135	133	);
136		- this.defaultJobItm = JSON.parse(
137		- JSON.stringify(this.$getDefaultJobGroup().jobItem)
	134	+ vm.defaultJobItm = JSON.parse(
	135	+ JSON.stringify(vm.$getDefaultJobGroup().jobItem)
138	136	);
139		- if (this.crrentJobGroup == null) {
140		- this.crrentJobGroup = JSON.parse(JSON.stringify(this.defaultJobGroup));
	137	+ if (vm.crrentJobGroup == null) {
	138	+ vm.crrentJobGroup = JSON.parse(JSON.stringify(vm.defaultJobGroup));
141	139	}
	140	+ if (vm.crrentJobGroup.jobItms.length > 0) {
	141	+ vm.popupToggls = [];
	142	+ for (let i = 0; i < vm.crrentJobGroup.jobItms; i++) {
	143	+ vm.popupToggls.push(false);
	144	+ }
	145	+ }
	146	+ console.log("test: ", vm.popupToggls);
142	147	},
143	148
144	149	// 아이템 선택
...	...	@@ -223,12 +228,10 @@
223	228	}
224	229
225	230	this.popupToggls.push(false);
226		-
227	231	this.crrentJobGroup.jobItms.push(newItm);
228	232	},
229	233
230	234	execModel: function () {
231		-
232	235	let vm = this;
233	236	axios({
234	237	url: "/job/executeJob.json",
...	...	@@ -239,7 +242,6 @@
239	242	data: vm.crrentJobGroup,
240	243	})
241	244	.then(function (response) {
242		-
243	245	vm.crrentJobGroup.dataTable = response.data.resultData.dataTable;
244	246	vm.$emit('getDataTable', vm.crrentJobGroup.dataTable)
245	247	})

...	...	@@ -1,241 +1,173 @@
1	1	<template>
2	2	<div v-show="isModalOpen" class="modal-wrapper">
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>
	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 type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	9	+ </button>
	10	+ </div>
9	11	</div>
10		- </div>
11		- <div class="modal-content-monthly">
12		- <template v-if="currentPage == 1">
	12	+ <div class="modal-content-monthly">
	13	+ <div class="input-container flex">
	14	+ <label class="radio-label">
	15	+ <input type="radio" :name="comId + 'match'" class="custom-radiobox" :value="true" v-model="item.itm.match_type" />
	16	+ <span>AND 연산</span>
	17	+ </label>
	18	+ <label class="radio-label">
	19	+ <input type="radio" :name="comId + 'match'" class="custom-radiobox" :value="false" v-model="item.itm.match_type" />
	20	+ <span>OR 연산</span>
	21	+ </label>
	22	+ </div>
13	23	<div class="table-zone">
14	24	<table class="form-table">
	25	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
15	26	<colgroup>
16	27	<col style="width: 25%" />
17		- <col style="width: 75%" />
18		- </colgroup>
19		- <tbody v-if="jobItm.itm != null">
20		- <tr>
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>
34		- </tr>
35		- <tr v-show="jobItm.itm_option_bool">
36		- <th>연계정보</th>
37		- <td>
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>
52		- </select>
53		- </td>
54		- </tr>
55		- <tr>
56		- <th>IP</th>
57		- <td>
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" />
59		- </td>
60		- </tr>
61		- <tr>
62		- <th>PORT</th>
63		- <td>
64		- <input id="conectPort" type="text" @input="successAt = false" class="half-input" v-model="inputConnectionDB.conectPort" :disabled="jobItm.itm_option_bool" />
65		- </td>
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" />
83		- </td>
84		- </tr>
85		- </tbody>
86		- </table>
87		- </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%" />
	28	+ <col style="width: 25%" />
	29	+ <col style="width: 25%" />
	30	+ <col style="width: 25%" />
98	31	</colgroup>
99	32	<thead>
100	33	<tr>
101		- <th>No</th>
102		- <th>접속시간</th>
103		- <th>접속결과</th>
	34	+ <th>컬럼</th>
	35	+ <th>연산</th>
	36	+ <th>내용</th>
	37	+ <th>관리</th>
104	38	</tr>
105	39	</thead>
106	40	<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>
	41	+ <tr v-for="(filter, indx) in item.itm.filterItems" :key="indx">
	42	+ <td>
	43	+ <select class="full-input" style="width: 100%" @change="dataInsert($event, filter)" v-model="filter.coulmn_nm">
	44	+ <option v-for="(temp, indxc) in item.front_dataTable.columnDatas" :key="indxc" :value="temp.orginlColumnNm"> {{ temp.displyColumnNm }} </option>
	45	+ </select>
	46	+ </td>
	47	+ <td>
	48	+ <select class="full-select" v-model="filter.calc_ty">
	49	+ <option :value="null">필터를 적용할 연산을 선택하세요.</option>
	50	+ <option value="1">=</option>
	51	+ <template v-if="filter.data_ty != 'STRING'">
	52	+ <option value="2"><</option>
	53	+ <option value="3">></option>
	54	+ <option value="4"><=</option>
	55	+ <option value="5">>=</option>
	56	+ </template>
	57	+ <option value="6">!=</option>
	58	+ <option value="7" v-if="filter.data_ty == 'STRING'"> 포함 </option>
	59	+ </select>
	60	+ </td>
	61	+ <td>
	62	+ <input type="text" class="full-input" v-if="filter.data_ty == 'STRING'" v-model="filter.cmpr_value" placeholder="필터를 적용할 내용을 입력하세요." />
	63	+ <input type="date" class="full-select" v-else-if="filter.data_ty == 'DATE'" v-model="filter.cmpr_value" />
	64	+ <input type="datetime-local" class="full-select" v-else-if="filter.data_ty == 'DATETIME'" v-model="filter.cmpr_value" />
	65	+ <input type="number" class="full-select" v-else v-model="filter.cmpr_value" />
	66	+ </td>
	67	+ <td style="text-align: center">
	68	+ <button class="green-border-btn small-btn" @click="deleteFilter(indx)"> 삭제 </button>
	69	+ </td>
111	70	</tr>
112	71	</tbody>
113	72	</table>
114	73	</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>
	74	+ </div>
	75	+ <div class="modal-end flex justify-end">
	76	+ <button class="gray-btn small-btn" @click="closeModal">닫기</button>
	77	+ <button class="green-btn small-btn" @click="addFiter">필터추가</button>
	78	+ </div>
216	79	</div>
217		- <DBConSearch :openPopup="openSearchModal" @modalclose="dbConSearchOpen" @selectItm="selectDbcon" />
218	80	</div>
219	81	</template>
220	82	<script>
221		-// icon용 svg import
222		-import SvgIcon from "@jamescoyle/vue-icon";
223		-import { mdiMagnify, mdiClose } from "@mdi/js";
224		-
225	83	export default {
226		- components: { SvgIcon },
227		-
	84	+ name: "data-check",
	85	+ props: {
	86	+ openPopup: {
	87	+ type: Boolean,
	88	+ default: false,
	89	+ },
	90	+ item: {
	91	+ type: Object,
	92	+ },
	93	+ saveNodeData: {
	94	+ type: Function,
	95	+ },
	96	+ },
228	97	data() {
229	98	return {
230		- // icon용 svg path
231		- searchPath: mdiMagnify,
232		- closePath: mdiClose,
	99	+ comId:
	100	+ "comId_" +
	101	+ Math.random().toString(36).substring(2, 15) +
	102	+ Math.random().toString(36).substring(2, 15),
	103	+ isModalOpen: this.openPopup,
	104	+ itm: this.item,
	105	+ };
	106	+ },
	107	+ methods: {
	108	+ // 모달 닫기
	109	+ closeModal: function () {
	110	+ this.isModalOpen = false;
	111	+ this.$emit("closePopup", this.item);
	112	+ this.$emit("closePopup2", this.item.id);
	113	+ },
233	114
234		- isModalOpen: true,
	115	+ dataInsert: function (event, filter) {
	116	+ for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
	117	+ if (
	118	+ this.item.front_dataTable.columnDatas[i].orginlColumnNm ==
	119	+ event.target.value
	120	+ ) {
	121	+ filter.coulmn_nm =
	122	+ this.item.front_dataTable.columnDatas[i].orginlColumnNm;
	123	+ filter.data_ty = this.item.front_dataTable.columnDatas[i].dataTy;
	124	+ }
	125	+ }
	126	+ },
235	127
236		- search: Object.assign({}, this.$getDefaultSerchVO()),
237		- searchData: this.$getDefaultSerchItem(null, "string"),
238		- }
239		- }
240		-}
	128	+ // 데이터 형반환
	129	+ getDataType: function (index, coulmnNm) {
	130	+ for (var i = 0; i < this.item.front_dataTable.columnDatas.length; i++) {
	131	+ if (
	132	+ this.item.front_dataTable.columnDatas[i].displyColumnNm == coulmnNm
	133	+ ) {
	134	+ return this.item.front_dataTable.columnDatas[i].dataTy;
	135	+ }
	136	+ }
	137	+ },
	138	+
	139	+ // 필터추가
	140	+ addFiter: function () {
	141	+ const item = JSON.parse(
	142	+ JSON.stringify(this.$getDefaultJobGroup().filterItem)
	143	+ );
	144	+
	145	+ if (
	146	+ this.item.front_dataTable.columnDatas == null \|\|
	147	+ this.item.front_dataTable.columnDatas.length == 0
	148	+ ) {
	149	+ this.$showAlert("경고", "데이터 컬럼이 없습니다.");
	150	+ return;
	151	+ } else {
	152	+ item.coulmn_nm =
	153	+ this.item.front_dataTable.columnDatas[0].orginlColumnNm;
	154	+ item.data_ty = this.item.front_dataTable.columnDatas[0].dataTy;
	155	+ item.calc_ty = 1;
	156	+ item.indx = this.item.itm.filterItems.length + 1;
	157	+ item.cmpr_value = "";
	158	+ }
	159	+
	160	+ this.item.itm.filterItems.push(item);
	161	+ },
	162	+ // 필터 삭제
	163	+ deleteFilter: function (indx) {
	164	+ this.item.itm.filterItems.splice(indx, 1);
	165	+ },
	166	+ },
	167	+ watch: {
	168	+ openPopup: function (v) {
	169	+ this.isModalOpen = v;
	170	+ },
	171	+ },
	172	+};
241	173	</script> (No newline at end of file)

Delete comment