Commit @b0a85f19f3b4c7e0d127433b0c0d871ca8f100bd

박정하 03-07

250307 박정하 로더 추가

@b0a85f19f3b4c7e0d127433b0c0d871ca8f100bd

654f590

b0a85f1

client/views/component/connection/modalContents/DatasetUpdate.vue

--- client/views/component/connection/modalContents/DatasetUpdate.vue

+++ client/views/component/connection/modalContents/DatasetUpdate.vue


 <template>
+  <div class="container" :style="isLoading ? { cursor: 'wait' } : {}">
+    <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
+    <div v-if="isLoading" class="loading-overlay">
+      <div class="loading-div">
+        <span>LOADING </span>
+        <span class="anima">.</span>
+        <span class="anima">.</span>
+        <span class="anima">.</span>
+      </div>
+    </div>
+  </div>
   <div class="modal-content-monthly">
     <div class="tab-contents mt10">
       <div class="content-titleZone flex justify-between align-center">

           <tr>
             <th>데이터셋 설정</th>
             <td>
-              <button class="blue-border-btn small-btn" @click="fnOpenModal">
-                타겟 데이터 조회
-              </button>
+              <button class="blue-border-btn small-btn" @click="fnOpenModal"> 타겟 데이터 조회 </button>
             </td>
           </tr>
           <tr>

             <td>
               <div class="input-container flex">
                 <label class="radio-label mr5">
-                  <input type="radio" name="radio" :value="false" class="custom-radiobox"
-                    v-model="jobItm.itm_option_bool" />
+                  <input type="radio" name="radio" :value="false" class="custom-radiobox" v-model="jobItm.itm_option_bool" />
                   <span>기존 데이터 삭제</span>
                 </label>
                 <label class="radio-label">
-                  <input type="radio" name="radio" :value="true" class="custom-radiobox"
-                    v-model="jobItm.itm_option_bool" />
+                  <input type="radio" name="radio" :value="true" class="custom-radiobox" v-model="jobItm.itm_option_bool" />
                   <span>기존 데이터 미삭제</span>
                 </label>
               </div>

       <div class="flex mt20">
         <div class="flex50 pl0">
           <div class="content-titleZone flex justify-between align-center">
-            <p class="box-title">
-              원본 데이터 컴럼
-              <small>
-                ( 매칭 : {{ matchs.matchCnt }}, 비매칭 :
-                {{ matchs.unMatchCnt }}
-                )
-              </small>
+            <p class="box-title"> 원본 데이터 컴럼 <small> ( 매칭 : {{ matchs.matchCnt }}, 비매칭 : {{ matchs.unMatchCnt }} ) </small>
             </p>
           </div>
           <div class="columncontBox" style="height: 620px; overflow-y: auto">

               <tbody>
                 <tr v-for="(column, index) of matchList" :key="index">
                   <td>
-                    <p class="col-data">
-                      {{ column.origin.displyColumnNm }}
-                    </p>
+                    <p class="col-data"> {{ column.origin.displyColumnNm }} </p>
                   </td>
-                  <td draggable="true" @dragstart="fnMoveStart(column)" @dragover="fnOnDragover"
-                    @drop="fnChangeMatch('drop', column)" @dblclick="fnChangeMatch('doubleClick', column)">
+                  <td draggable="true" @dragstart="fnMoveStart(column)" @dragover="fnOnDragover" @drop="fnChangeMatch('drop', column)" @dblclick="fnChangeMatch('doubleClick', column)">
                     <p class="col-data">
-                      <span v-if="!$isEmpty(column.target)">
-                        {{ column.target.displyColumnNm }}
-                      </span>
+                      <span v-if="!$isEmpty(column.target)"> {{ column.target.displyColumnNm }} </span>
                     </p>
                   </td>
                 </tr>

           </div>
           <div class="columncontBox" style="height: 620px; overflow-y: auto">
             <ul>
-              <li v-for="(column, index) of frontColumns" :key="index"
-                :class="{ 'col-data': true, disabled: column.isConnect }" :draggable="!column.isConnect"
-                @dragstart="fnOnDragstart(column)">
-                {{ column.displyColumnNm }}
-              </li>
+              <li v-for="(column, index) of frontColumns" :key="index" :class="{ 'col-data': true, disabled: column.isConnect }" :draggable="!column.isConnect" @dragstart="fnOnDragstart(column)"> {{ column.displyColumnNm }} </li>
             </ul>
           </div>
         </div>

           </table>
         </div>
         <div class="modal-end flex justify-end">
-          <button class="blue-btn small-btn" @click="fnSave(itmId)">
-            선택
-          </button>
-          <button class="blue-border-btn small-btn" @click="fnCloseModal">
-            취소
-          </button>
+          <button class="blue-btn small-btn" @click="fnSave(itmId)"> 선택 </button>
+          <button class="blue-border-btn small-btn" @click="fnCloseModal"> 취소 </button>
         </div>
       </div>
     </div>
   </div>
 </template>
-
 <script>
 import axios from "axios";
 import DataPostManagerMain from "../../../pages/data/datapost/DataPostManagerMain.vue";

 
   data() {
     return {
+      isLoading: false,
+
       isOpenModal: false,
 
       jobItm: this.jobItem,

   },
 
   created() {
-    console.log("아이템", this.item);
     if (this.$isEmpty(this.frontNode.dataTable.columnDatas)) {
       this.$showAlert(
         "경고",

     },
 
     fnSave(datasetPostId) {
+      this.isLoading = true;
+
       const vm = this;
       axios({
         url: "/dataset/getDataTableInfo.json",

           vm.jobItm.itm.item = datasetPostId;
           vm.jobItm.dataTable = response.data.resultData.dataTable;
           vm.fnSetTargetData();
+          vm.isLoading = false;
           // 모달 닫기
           vm.fnCloseModal();
         })
         .catch(function (error) {
+          vm.isLoading = false;
           vm.$showAlert(
             "에러 발생",
             "에러가 발생했습니다. 관리자에게 문의해 주세요."

             }
           }
         });
-        this.isCheck =false;
+        this.isCheck = false;
       }
     },
 

   },
 };
 </script>
-
 <style scoped>
 .columncontBox {
   background: #f5f5f5;

654f590

b0a85f1

client/views/component/scheduleComponent/nodes/ReadNode.vue

--- client/views/component/scheduleComponent/nodes/ReadNode.vue

+++ client/views/component/scheduleComponent/nodes/ReadNode.vue


   methods: {
     async nodeOnSetUp() {
       if (this.node.isSetup) {
-        let isCheck = await this.$showConfirm("경고", "READ 작업은 재설정이 필요합니다.");
+        let isCheck = await this.$showConfirm("경고", "읽기 노드 수정 시 재설정이 필요합니다.");
         if (!isCheck) {
           return
         }

654f590

b0a85f1

client/views/pages/schedule/ScheduleManagement.vue

--- client/views/pages/schedule/ScheduleManagement.vue

+++ client/views/pages/schedule/ScheduleManagement.vue


 <template>
-  <div class="container">
+  <div class="container" :style="isLoading ? { cursor: 'wait' } : {}">
+    <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
+    <div v-if="isLoading" class="loading-overlay">
+      <div class="loading-div">
+        <span>LOADING </span>
+        <span class="anima">.</span>
+        <span class="anima">.</span>
+        <span class="anima">.</span>
+      </div>
+    </div>
     <div class="page-titleZone flex justify-between align-center">
       <p class="main-title flex80">스케줄 관리</p>
       <PageNavigation />

             <div class="content-titleZone flex justify-between align-center">
               <p class="box-title">스케줄 목록</p>
               <div class="search-bar flex justify-end align-center">
-                <input type="date" name="start-date" id="start-date" class="square-date"
-                  :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
+                <input type="date" name="start-date" id="start-date" class="square-date" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
                 <span class="coupler">~</span>
-                <input type="date" name="end-date" id="end-date" class="square-date ml5"
-                  :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
+                <input type="date" name="end-date" id="end-date" class="square-date ml5" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
                 <select class="square-select ml5" v-model="search_data1.value">
                   <option :value="null">상태</option>
                   <option :value="true">진행</option>

                   <option value="si.creat_id">작성자</option>
                 </select>
                 <div class="search-square">
-                  <input type="text" class="square-input" placeholder="Search" v-model="search_data2.value"
-                    v-on:keyup.enter="fnSelectScheduleList()" />
+                  <input type="text" class="square-input" placeholder="Search" v-model="search_data2.value" v-on:keyup.enter="fnSelectScheduleList()" />
                   <button class="square-button blue-btn" @click="fnSelectScheduleList()">
                     <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
                   </button>

                   <template v-if="scheduleList.length > 0">
                     <tr v-for="(item, idx) in scheduleList" :key="item" @click="fnSelectSchedule(item.schdulId)">
                       <td>
-                        <input type="checkbox" :value="item" v-model="selectList" @click.stop=""
-                          @change="fnChangeCheckList" />
+                        <input type="checkbox" :value="item" v-model="selectList" @click.stop="" @change="fnChangeCheckList" />
                       </td>
-                      <td>
-                        {{
-                          search.totalRows -
-                          idx -
-                          (search.currentPage - 1) * search.perPage
-                        }}
-                      </td>
+                      <td> {{ search.totalRows - idx - (search.currentPage - 1) * search.perPage }} </td>
                       <td>{{ item.groupNm }}</td>
                       <td>{{ item.creatId }}</td>
                       <td>{{ item.cronChrctr }}</td>

                   </tr>
                 </tbody>
               </table>
-              <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
-                :totalCount="search.totalRows" :maxRange="5" :click="fnSelectScheduleList" />
+              <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="fnSelectScheduleList" />
             </div>
             <div class="flex justify-end">
-              <button class="blue-border-btn small-btn" @click="fnChkSttus(true)">
-                선택 실행
-              </button>
-              <button class="blue-border-btn small-btn" @click="fnChkSttus(false)">
-                선택 중단
-              </button>
-              <button class="red-border-btn small-btn" @click="fnChkDel">
-                선택 삭제
-              </button>
+              <button class="blue-border-btn small-btn" @click="fnChkSttus(true)"> 선택 실행 </button>
+              <button class="blue-border-btn small-btn" @click="fnChkSttus(false)"> 선택 중단 </button>
+              <button class="red-border-btn small-btn" @click="fnChkDel"> 선택 삭제 </button>
             </div>
           </div>
         </div>

                     <span v-else>수정</span>
                   </button>
                   <button class="blue-border-btn small-btn" id="resetButton" @click="fnInitSchedule">
-                    <span v-if="$isEmpty(currentSchedule.schdulId)">
-                      초기화
-                    </span>
+                    <span v-if="$isEmpty(currentSchedule.schdulId)"> 초기화 </span>
                     <span v-else>취소</span>
                   </button>
                 </div>

             </div>
             <div class="right-content flex70">
               <div class="content-box form-box">
-                <DiagramList v-if="editMode == 'vueFlow'" :currentDiagram="currentSchedule.diagram"
-                  @onUpdate="fnUpdateDiagram" @onChange="fnChangeEditMode" @initDiagram="fnInitDiagram" />
-                <DiagramLogList v-if="editMode == 'logList'" :logSearch="logSearch" :logList="logList"
-                  @onChange="fnChangeEditMode" @updateSearchVO="fnSelectScheduleLogList" />
+                <DiagramList v-if="editMode == 'vueFlow'" :currentDiagram="currentSchedule.diagram" @onUpdate="fnUpdateDiagram" @onChange="fnChangeEditMode" @initDiagram="fnInitDiagram" @onChangeLoad="fnChangeLoading" />
+                <DiagramLogList v-if="editMode == 'logList'" :logSearch="logSearch" :logList="logList" @onChange="fnChangeEditMode" @updateSearchVO="fnSelectScheduleLogList" />
               </div>
             </div>
           </div>

 
   data() {
     return {
+      isLoading: false,
+
       // svg
       searchPath: mdiMagnify,
       checkPath: mdiCheckCircle,

 
     // 스케줄 개별 조회
     fnSelectSchedule(scheduleId) {
-      console.log("이걸 선택을 했찌요", scheduleId);
       const vm = this;
+      this.isLoading = true;
       axios({
         url: "/schedule/getSchedule/" + scheduleId,
         method: "get",

             let schedule = response.data.resultData.scheduleVO;
             vm.originSchedule = _.cloneDeep(schedule);
             vm.currentSchedule = _.cloneDeep(schedule);
+
+            vm.isLoading = false;
           } else {
+            vm.isLoading = false;
             vm.$showAlert(
               "에러 발생",
               "요청을 제대로 처리하지 못했습니다. 관리자에게 문의해 주세요."

           }
         })
         .catch((error) => {
+          vm.isLoading = false;
           vm.$showAlert(
             "에러 발생",
             "에러가 발생했습니다. 관리자에게 문의해 주세요."

 
     // 스케줄 등록
     fnAddSchedule() {
-      
-      if(!this.insertValidation()){
+
+      if (!this.insertValidation()) {
         return
       }
       const vm = this;

       return errorNodes.length === 0; // 모든 노드가 올바르게 연결되어 있으면 true 반환
     },
   },
+
+  // 로더 상태 변경
+  fnChangeLoading(status) {
+    this.isLoading = status;
+  }
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,4 +1,15 @@
1	1	<template>
	2	+ <div class="container" :style="isLoading ? { cursor: 'wait' } : {}">
	3	+ <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
	4	+ <div v-if="isLoading" class="loading-overlay">
	5	+ <div class="loading-div">
	6	+ <span>LOADING </span>
	7	+ <span class="anima">.</span>
	8	+ <span class="anima">.</span>
	9	+ <span class="anima">.</span>
	10	+ </div>
	11	+ </div>
	12	+ </div>
2	13	<div class="modal-content-monthly">
3	14	<div class="tab-contents mt10">
4	15	<div class="content-titleZone flex justify-between align-center">
...	...	@@ -13,9 +24,7 @@
13	24	<tr>
14	25	<th>데이터셋 설정</th>
15	26	<td>
16		- <button class="blue-border-btn small-btn" @click="fnOpenModal">
17		- 타겟 데이터 조회
18		- </button>
	27	+ <button class="blue-border-btn small-btn" @click="fnOpenModal"> 타겟 데이터 조회 </button>
19	28	</td>
20	29	</tr>
21	30	<tr>
...	...	@@ -23,13 +32,11 @@
23	32	<td>
24	33	<div class="input-container flex">
25	34	<label class="radio-label mr5">
26		- <input type="radio" name="radio" :value="false" class="custom-radiobox"
27		- v-model="jobItm.itm_option_bool" />
	35	+ <input type="radio" name="radio" :value="false" class="custom-radiobox" v-model="jobItm.itm_option_bool" />
28	36	<span>기존 데이터 삭제</span>
29	37	</label>
30	38	<label class="radio-label">
31		- <input type="radio" name="radio" :value="true" class="custom-radiobox"
32		- v-model="jobItm.itm_option_bool" />
	39	+ <input type="radio" name="radio" :value="true" class="custom-radiobox" v-model="jobItm.itm_option_bool" />
33	40	<span>기존 데이터 미삭제</span>
34	41	</label>
35	42	</div>
...	...	@@ -41,13 +48,7 @@
41	48	<div class="flex mt20">
42	49	<div class="flex50 pl0">
43	50	<div class="content-titleZone flex justify-between align-center">
44		- <p class="box-title">
45		- 원본 데이터 컴럼
46		- <small>
47		- ( 매칭 : {{ matchs.matchCnt }}, 비매칭 :
48		- {{ matchs.unMatchCnt }}
49		- )
50		- </small>
	51	+ <p class="box-title"> 원본 데이터 컴럼 <small> ( 매칭 : {{ matchs.matchCnt }}, 비매칭 : {{ matchs.unMatchCnt }} ) </small>
51	52	</p>
52	53	</div>
53	54	<div class="columncontBox" style="height: 620px; overflow-y: auto">
...	...	@@ -58,16 +59,11 @@
58	59	<tbody>
59	60	<tr v-for="(column, index) of matchList" :key="index">
60	61	<td>
61		- <p class="col-data">
62		- {{ column.origin.displyColumnNm }}
63		- </p>
	62	+ <p class="col-data"> {{ column.origin.displyColumnNm }} </p>
64	63	</td>
65		- <td draggable="true" @dragstart="fnMoveStart(column)" @dragover="fnOnDragover"
66		- @drop="fnChangeMatch('drop', column)" @dblclick="fnChangeMatch('doubleClick', column)">
	64	+ <td draggable="true" @dragstart="fnMoveStart(column)" @dragover="fnOnDragover" @drop="fnChangeMatch('drop', column)" @dblclick="fnChangeMatch('doubleClick', column)">
67	65	<p class="col-data">
68		- <span v-if="!$isEmpty(column.target)">
69		- {{ column.target.displyColumnNm }}
70		- </span>
	66	+ <span v-if="!$isEmpty(column.target)"> {{ column.target.displyColumnNm }} </span>
71	67	</p>
72	68	</td>
73	69	</tr>
...	...	@@ -81,11 +77,7 @@
81	77	</div>
82	78	<div class="columncontBox" style="height: 620px; overflow-y: auto">
83	79	<ul>
84		- <li v-for="(column, index) of frontColumns" :key="index"
85		- :class="{ 'col-data': true, disabled: column.isConnect }" :draggable="!column.isConnect"
86		- @dragstart="fnOnDragstart(column)">
87		- {{ column.displyColumnNm }}
88		- </li>
	80	+ <li v-for="(column, index) of frontColumns" :key="index" :class="{ 'col-data': true, disabled: column.isConnect }" :draggable="!column.isConnect" @dragstart="fnOnDragstart(column)"> {{ column.displyColumnNm }} </li>
89	81	</ul>
90	82	</div>
91	83	</div>
...	...	@@ -124,18 +116,13 @@
124	116	</table>
125	117	</div>
126	118	<div class="modal-end flex justify-end">
127		- <button class="blue-btn small-btn" @click="fnSave(itmId)">
128		- 선택
129		- </button>
130		- <button class="blue-border-btn small-btn" @click="fnCloseModal">
131		- 취소
132		- </button>
	119	+ <button class="blue-btn small-btn" @click="fnSave(itmId)"> 선택 </button>
	120	+ <button class="blue-border-btn small-btn" @click="fnCloseModal"> 취소 </button>
133	121	</div>
134	122	</div>
135	123	</div>
136	124	</div>
137	125	</template>
138		-
139	126	<script>
140	127	import axios from "axios";
141	128	import DataPostManagerMain from "../../../pages/data/datapost/DataPostManagerMain.vue";
...	...	@@ -156,6 +143,8 @@
156	143
157	144	data() {
158	145	return {
	146	+ isLoading: false,
	147	+
159	148	isOpenModal: false,
160	149
161	150	jobItm: this.jobItem,
...	...	@@ -175,7 +164,6 @@
175	164	},
176	165
177	166	created() {
178		- console.log("아이템", this.item);
179	167	if (this.$isEmpty(this.frontNode.dataTable.columnDatas)) {
180	168	this.$showAlert(
181	169	"경고",
...	...	@@ -223,6 +211,8 @@
223	211	},
224	212
225	213	fnSave(datasetPostId) {
	214	+ this.isLoading = true;
	215	+
226	216	const vm = this;
227	217	axios({
228	218	url: "/dataset/getDataTableInfo.json",
...	...	@@ -235,10 +225,12 @@
235	225	vm.jobItm.itm.item = datasetPostId;
236	226	vm.jobItm.dataTable = response.data.resultData.dataTable;
237	227	vm.fnSetTargetData();
	228	+ vm.isLoading = false;
238	229	// 모달 닫기
239	230	vm.fnCloseModal();
240	231	})
241	232	.catch(function (error) {
	233	+ vm.isLoading = false;
242	234	vm.$showAlert(
243	235	"에러 발생",
244	236	"에러가 발생했습니다. 관리자에게 문의해 주세요."
...	...	@@ -280,7 +272,7 @@
280	272	}
281	273	}
282	274	});
283		- this.isCheck =false;
	275	+ this.isCheck = false;
284	276	}
285	277	},
286	278
...	...	@@ -356,7 +348,6 @@
356	348	},
357	349	};
358	350	</script>
359		-
360	351	<style scoped>
361	352	.columncontBox {
362	353	background: #f5f5f5;

...	...	@@ -1,4 +1,15 @@
1	1	<template>
	2	+ <div class="container" :style="isLoading ? { cursor: 'wait' } : {}">
	3	+ <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
	4	+ <div v-if="isLoading" class="loading-overlay">
	5	+ <div class="loading-div">
	6	+ <span>LOADING </span>
	7	+ <span class="anima">.</span>
	8	+ <span class="anima">.</span>
	9	+ <span class="anima">.</span>
	10	+ </div>
	11	+ </div>
	12	+ </div>
2	13	<div class="modal-wrapper">
3	14	<div class="modal-container large-modal">
4	15	<div class="modal-title flex justify-between align-center">
...	...	@@ -63,6 +74,8 @@
63	74
64	75	data() {
65	76	return {
	77	+ isLoading: false,
	78	+
66	79	// icon용 svg path
67	80	searchPath: mdiMagnify,
68	81	closePath: mdiClose,
...	...	@@ -100,6 +113,8 @@
100	113
101	114	// 스케줄 선택 삭제
102	115	init() {
	116	+ this.isLoading = true;
	117	+
103	118	const vm = this;
104	119	axios({
105	120	url: "/diagram/operatorNow/preview",
...	...	@@ -115,8 +130,10 @@
115	130	if (this.diagram.schdulType == "DATA_NODE") {
116	131	this.jobItms = response.data.resultData.list;
117	132	this.activeTab = "TAB_0";
	133	+ vm.isLoading = false;
118	134	}
119	135	} else {
	136	+ vm.isLoading = false;
120	137	vm.$showAlert(
121	138	"에러 발생",
122	139	"에러가 발생했습니다. 관리자에게 문의해 주세요."
...	...	@@ -124,6 +141,7 @@
124	141	}
125	142	})
126	143	.catch((error) => {
	144	+ vm.isLoading = false;
127	145	vm.$showAlert(
128	146	"에러 발생",
129	147	"에러가 발생했습니다. 관리자에게 문의해 주세요."

...	...	@@ -53,7 +53,7 @@
53	53	methods: {
54	54	async nodeOnSetUp() {
55	55	if (this.node.isSetup) {
56		- let isCheck = await this.$showConfirm("경고", "READ 작업은 재설정이 필요합니다.");
	56	+ let isCheck = await this.$showConfirm("경고", "읽기 노드 수정 시 재설정이 필요합니다.");
57	57	if (!isCheck) {
58	58	return
59	59	}

...	...	@@ -1,5 +1,14 @@
1	1	<template>
2		- <div class="container">
	2	+ <div class="container" :style="isLoading ? { cursor: 'wait' } : {}">
	3	+ <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
	4	+ <div v-if="isLoading" class="loading-overlay">
	5	+ <div class="loading-div">
	6	+ <span>LOADING </span>
	7	+ <span class="anima">.</span>
	8	+ <span class="anima">.</span>
	9	+ <span class="anima">.</span>
	10	+ </div>
	11	+ </div>
3	12	<div class="page-titleZone flex justify-between align-center">
4	13	<p class="main-title flex80">스케줄 관리</p>
5	14	<PageNavigation />
...	...	@@ -11,11 +20,9 @@
11	20	<div class="content-titleZone flex justify-between align-center">
12	21	<p class="box-title">스케줄 목록</p>
13	22	<div class="search-bar flex justify-end align-center">
14		- <input type="date" name="start-date" id="start-date" class="square-date"
15		- :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
	23	+ <input type="date" name="start-date" id="start-date" class="square-date" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
16	24	<span class="coupler">~</span>
17		- <input type="date" name="end-date" id="end-date" class="square-date ml5"
18		- :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
	25	+ <input type="date" name="end-date" id="end-date" class="square-date ml5" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
19	26	<select class="square-select ml5" v-model="search_data1.value">
20	27	<option :value="null">상태</option>
21	28	<option :value="true">진행</option>
...	...	@@ -27,8 +34,7 @@
27	34	<option value="si.creat_id">작성자</option>
28	35	</select>
29	36	<div class="search-square">
30		- <input type="text" class="square-input" placeholder="Search" v-model="search_data2.value"
31		- v-on:keyup.enter="fnSelectScheduleList()" />
	37	+ <input type="text" class="square-input" placeholder="Search" v-model="search_data2.value" v-on:keyup.enter="fnSelectScheduleList()" />
32	38	<button class="square-button blue-btn" @click="fnSelectScheduleList()">
33	39	<svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
34	40	</button>
...	...	@@ -63,16 +69,9 @@
63	69	<template v-if="scheduleList.length > 0">
64	70	<tr v-for="(item, idx) in scheduleList" :key="item" @click="fnSelectSchedule(item.schdulId)">
65	71	<td>
66		- <input type="checkbox" :value="item" v-model="selectList" @click.stop=""
67		- @change="fnChangeCheckList" />
	72	+ <input type="checkbox" :value="item" v-model="selectList" @click.stop="" @change="fnChangeCheckList" />
68	73	</td>
69		- <td>
70		- {{
71		- search.totalRows -
72		- idx -
73		- (search.currentPage - 1) * search.perPage
74		- }}
75		- </td>
	74	+ <td> {{ search.totalRows - idx - (search.currentPage - 1) * search.perPage }} </td>
76	75	<td>{{ item.groupNm }}</td>
77	76	<td>{{ item.creatId }}</td>
78	77	<td>{{ item.cronChrctr }}</td>
...	...	@@ -94,19 +93,12 @@
94	93	</tr>
95	94	</tbody>
96	95	</table>
97		- <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
98		- :totalCount="search.totalRows" :maxRange="5" :click="fnSelectScheduleList" />
	96	+ <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="fnSelectScheduleList" />
99	97	</div>
100	98	<div class="flex justify-end">
101		- <button class="blue-border-btn small-btn" @click="fnChkSttus(true)">
102		- 선택 실행
103		- </button>
104		- <button class="blue-border-btn small-btn" @click="fnChkSttus(false)">
105		- 선택 중단
106		- </button>
107		- <button class="red-border-btn small-btn" @click="fnChkDel">
108		- 선택 삭제
109		- </button>
	99	+ <button class="blue-border-btn small-btn" @click="fnChkSttus(true)"> 선택 실행 </button>
	100	+ <button class="blue-border-btn small-btn" @click="fnChkSttus(false)"> 선택 중단 </button>
	101	+ <button class="red-border-btn small-btn" @click="fnChkDel"> 선택 삭제 </button>
110	102	</div>
111	103	</div>
112	104	</div>
...	...	@@ -124,9 +116,7 @@
124	116	<span v-else>수정</span>
125	117	</button>
126	118	<button class="blue-border-btn small-btn" id="resetButton" @click="fnInitSchedule">
127		- <span v-if="$isEmpty(currentSchedule.schdulId)">
128		- 초기화
129		- </span>
	119	+ <span v-if="$isEmpty(currentSchedule.schdulId)"> 초기화 </span>
130	120	<span v-else>취소</span>
131	121	</button>
132	122	</div>
...	...	@@ -134,10 +124,8 @@
134	124	</div>
135	125	<div class="right-content flex70">
136	126	<div class="content-box form-box">
137		- <DiagramList v-if="editMode == 'vueFlow'" :currentDiagram="currentSchedule.diagram"
138		- @onUpdate="fnUpdateDiagram" @onChange="fnChangeEditMode" @initDiagram="fnInitDiagram" />
139		- <DiagramLogList v-if="editMode == 'logList'" :logSearch="logSearch" :logList="logList"
140		- @onChange="fnChangeEditMode" @updateSearchVO="fnSelectScheduleLogList" />
	127	+ <DiagramList v-if="editMode == 'vueFlow'" :currentDiagram="currentSchedule.diagram" @onUpdate="fnUpdateDiagram" @onChange="fnChangeEditMode" @initDiagram="fnInitDiagram" @onChangeLoad="fnChangeLoading" />
	128	+ <DiagramLogList v-if="editMode == 'logList'" :logSearch="logSearch" :logList="logList" @onChange="fnChangeEditMode" @updateSearchVO="fnSelectScheduleLogList" />
141	129	</div>
142	130	</div>
143	131	</div>
...	...	@@ -175,6 +163,8 @@
175	163
176	164	data() {
177	165	return {
	166	+ isLoading: false,
	167	+
178	168	// svg
179	169	searchPath: mdiMagnify,
180	170	checkPath: mdiCheckCircle,
...	...	@@ -264,8 +254,8 @@
264	254
265	255	// 스케줄 개별 조회
266	256	fnSelectSchedule(scheduleId) {
267		- console.log("이걸 선택을 했찌요", scheduleId);
268	257	const vm = this;
	258	+ this.isLoading = true;
269	259	axios({
270	260	url: "/schedule/getSchedule/" + scheduleId,
271	261	method: "get",
...	...	@@ -279,7 +269,10 @@
279	269	let schedule = response.data.resultData.scheduleVO;
280	270	vm.originSchedule = _.cloneDeep(schedule);
281	271	vm.currentSchedule = _.cloneDeep(schedule);
	272	+
	273	+ vm.isLoading = false;
282	274	} else {
	275	+ vm.isLoading = false;
283	276	vm.$showAlert(
284	277	"에러 발생",
285	278	"요청을 제대로 처리하지 못했습니다. 관리자에게 문의해 주세요."
...	...	@@ -287,6 +280,7 @@
287	280	}
288	281	})
289	282	.catch((error) => {
	283	+ vm.isLoading = false;
290	284	vm.$showAlert(
291	285	"에러 발생",
292	286	"에러가 발생했습니다. 관리자에게 문의해 주세요."
...	...	@@ -297,8 +291,8 @@
297	291
298	292	// 스케줄 등록
299	293	fnAddSchedule() {
300		-
301		- if(!this.insertValidation()){
	294	+
	295	+ if (!this.insertValidation()) {
302	296	return
303	297	}
304	298	const vm = this;
...	...	@@ -601,5 +595,10 @@
601	595	return errorNodes.length === 0; // 모든 노드가 올바르게 연결되어 있으면 true 반환
602	596	},
603	597	},
	598	+
	599	+ // 로더 상태 변경
	600	+ fnChangeLoading(status) {
	601	+ this.isLoading = status;
	602	+ }
604	603	};
605	604	</script> (파일 끝에 줄바꿈 문자 없음)

Delete comment