배치 모니터링 커밋

frontend/src/modules/sysMgt/router/index.js

@@ -2,6 +2,8 @@ import AustList from '../views/AuthList'
 import AdminList from '../views/AdminList'
 import AuthAdd from '../views/AuthAdd'
 import AuthModify from '../views/AuthModify'
+import BatchList from '../views/BatchList'
+import BatchDetail from '../views/BatchDetail'
 
 export default [
   {
@@ -28,6 +30,18 @@ export default [
     name: 'authModify',    
     props: true,  
     meta: { public: false }
+  },
+  {
+    path: '/sysMgt/batchList',    
+    component: BatchList,    
+    name: 'batchList',     
+    meta: { public: false }
+  },
+  {
+    path: '/sysMgt/batchDetail',    
+    component: BatchDetail,    
+    name: 'batchDetail',     
+    meta: { public: false }
   }
 ]
 

frontend/src/modules/sysMgt/service/sysMgtApi.js

@@ -68,6 +68,20 @@ const resetPassword = (params) => {
     return httpClient.post('/api/v1/bo/login/resetPassword', params, { withCredentials: false });
 }
 
+const batchList = (params) => {
+    return httpClient.post('/api/v1/bo/sysMgt/batchList', params, { withCredentials: false } )
+}
+
+const batchDetail = (params) => {
+    return httpClient.post('/api/v1/bo/sysMgt/batchDetail', params, { withCredentials: false })
+}
+
+const batchExecuteJob = (params) => {
+    return httpClient.post('/api/v1/bo/sysMgt/batchExecuteJob', params, { withCredentials: false })
+}
+
+
+
 export default {
     insertAdmin,
     updateAdmin,
@@ -82,5 +96,8 @@ export default {
     authDetail,
     insertAuth,
     updateAuth,
-    resetPassword
+    resetPassword,
+    batchList,
+    batchDetail,
+    batchExecuteJob
   }

frontend/src/modules/sysMgt/views/BatchDetail.vue

@@ -0,0 +1,310 @@
+<template>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">배치 모니터링</h3>
+        <p class="breadcrumb">모니터링 &gt; 배치 모니터링</p>
+      </div>
+      <div class="search_wrap">
+        <div class="group">
+          <h3>
+            <label for="right" class="label">배치 ID  |  {{ this.batchId}}  </label>
+          </h3>
+        </div>
+        <div class="group">
+          <div class="input_box cal">
+            <label for="right" class="label">조회기간</label>
+            <div class="term">
+              <span class="custom_input icon_date">
+                <vuejs-datepicker
+                    :language="ko"
+                    :format="customFormatter"
+                    :disabled-dates="disabledSDate"
+                    v-model="startDate"
+                    @selected="selectedStartDate(0)"
+                    @closed="closeDate('start')"
+                ></vuejs-datepicker>
+              </span>~
+              <span class="custom_input icon_date">
+                <vuejs-datepicker
+                    :language="ko"
+                    :format="customFormatter"
+                    :disabled-dates="disabledEDate"
+                    v-model="endDate"
+                    @selected="selectedEndDate(0)"
+                    @closed="closeDate('end')"
+                ></vuejs-datepicker>
+              </span>
+            </div>
+          </div>
+          <div class="select_box id">
+            <label for="right" class="label">상태</label>
+            <select name="" id="" v-model="sttusCd" @keyup.enter="search">
+              <option value="" selected>전체</option>
+              <option v-for="(option, i) in statType" v-bind:value="option.code" v-bind:key="i">
+                {{ option.codeNm }}
+              </option>
+            </select>
+          </div>
+          <div>
+            <button type="button" class="button grey" @click="search">조회</button>
+          </div>
+        </div>
+        <div class="group" >
+          <div class="input_box cal" v-show ="this.batchId != 'BATCH_016'">
+            <label for="right" class="label">배치 수동 실행 </label>
+            <div class="term">
+              <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledSDate"
+                      v-model="strDate"
+                  ></vuejs-datepicker>
+              </span>
+            </div>
+          </div>
+          <button type="button" class="button grey" @click="runExecuteJob" v-show ="this.batchId != 'BATCH_016'">실행</button>
+        </div>
+      </div>
+
+      <div class="info">
+        <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
+                  option.text
+                }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="table">
+        <custom-grid
+            ref="table"
+            :totalItems="'totalItems'"
+            :url="grid.url"
+            :columns="grid.columns"
+            :pagePerRows="grid.pagePerRows"
+            :pagination="grid.pagination"
+            :noDataStr="grid.noDataStr"
+        ></custom-grid>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import customGrid from '@/components/CustomGrid';
+import moment from 'moment';
+import api from '@/service/api.js';
+import sysMgtApi from '../service/sysMgtApi';
+
+export default {
+  name: 'batchDetail',
+  data() {
+    return {
+      //paramBatchId : this.$route.params.batchId,
+      //날짜 조회
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),
+      strDate: new Date(),
+
+      totalCnt: '',
+
+      pageType: 'CALC',
+
+      batchId : this.$route.params.batchId,
+
+      //상태조회
+      sttusCd: '',
+      statType: [],
+
+      perPageCnt: 50,
+      options: [
+        {text: '20', value: 20},
+        {text: '50', value: 50},
+        {text: '100', value: 100}
+      ],
+      totalItems: 0,
+      grid: {
+        url: '/api/v1/bo/sysMgt/batchDetail',
+        pagePerRows: 20,
+        pagination: true,
+        header: [
+          [
+            {header: '배치ID', childNames: {}},
+            {header: '배치명', childNames: {}},
+          ]
+        ],
+        columns: [
+          // {name: 'batchId', header:'배치ID', align:'center', width:'20%'},
+          {name: 'stDt', header: '시작 일시', align: 'center', width: '25%'},
+          {name: 'fnsDt', header: '종료 일시', align: 'center', width: '25%'},
+          {name: 'sttusCd', header:'상태코드', align: 'center', width: '25%'},
+          {name: 'errMsg', header:'에러메시지', align: 'center', width: '25%'},
+        ],
+        noDataStr: '검색 결과가 없습니다.',
+        params: {
+          batchId : '',
+          sttusCd: '',
+          startDt: '',
+          endDt: '',
+        }
+      }
+    };
+  },  
+  components: {
+    customGrid: customGrid,
+    vuejsDatepicker,
+  },
+  created(){
+    this.setPeriodDay(0);
+    this.setCodeData();
+  },
+  destroyed() {},
+  mounted(){
+    let page = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    let isKeep = false;
+    if (getCondition) {
+      this.grid.pagePerRows = getCondition.perPage;
+      this.grid.params = getCondition.params;
+      page = getCondition.page;
+      isKeep = true;
+    }
+    this.search(isKeep);
+  },
+  beforeRouteLeave(to, from, next) {
+
+    const getP = this.$refs.table.getPagination();
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
+  },
+  
+  methods: {
+    search: function (isKeep) {
+      this.$refs.table.search(this.grid.params, isKeep);
+
+      this.grid.params = {
+        startDt: moment(this.startDate).format('YYYYMMDD'),
+        endDt: moment(this.endDate).format('YYYYMMDD'),
+        batchId: this.$route.params.batchId,
+        sttusCd: this.sttusCd
+      }
+
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+    },
+    changePerPage: function () { 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
+    sendStoreData: function () {
+      const getP = this.$refs.table.getPagination();
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
+        params: this.grid.params
+      });
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    },
+
+    //상태코드 리스트 조회
+    setCodeData() {
+      // 상태 옵션 셋팅.
+      api.commCode({'grpCd': 'BTEXE_STTUS_CD'}).then(response => {
+        this.statType = response.data.data.list;
+      });
+    },
+
+
+    customFormatter: function (date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
+    initSetStartDate() {
+      let setYear = Number(moment(new Date()).format('YYYY'));
+      let initStartDate = new Date(setYear, 0, 1);
+      this.startDate = initStartDate;
+    },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.initSetStartDate();
+
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+    selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        if (type == 'start') {
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: this.endDate};
+        } else if (type == 'end') {
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: new Date()};
+        }
+      }
+    },
+
+    async runExecuteJob(){
+        const params = {
+          strDate : this.strDate,
+          batchId : this.batchId
+        }
+        try {
+          const response = await sysMgtApi.batchExecuteJob(params);
+          
+          const result = response.data;
+          const batchRslt = result.data.BATCH_RSLT;
+          const batchRsltMsg = result.data.BATCH_RSLT_MSG;
+          
+          const succ = 'S';
+          const fail = 'F';
+
+          if(batchRslt == succ){
+            alert("결과 : 성공 \n"+"결과 메시지 : "+batchRsltMsg);
+            this.search();
+          } else if (batchRslt == fail){
+            alert("결과 : 실패 \n"+"결과 메시지 : "+batchRsltMsg);
+            this.search();
+          }
+        } catch (error) {
+        }
+    }
+
+  },
+  
+};
+</script>

frontend/src/modules/sysMgt/views/BatchList.vue

@@ -19,13 +19,36 @@
 </template>
 
 <script>
-import mntrngApi from "../service/mntrngApi.js";
 import customGrid from '@/components/CustomGrid';
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText = String(props.colValue)
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const {callback} = this.props["cgrido" + this.props.colName].options;
+      callback(this.props);
+    });
+  }
+}
+
 export default {
-  name: 'batchCheck',
+  name: 'batchList',
   data() {
     return {
-      batchList : [],
+      row: {},
+      perPageCnt: 50,
       grid: {
         url: '/api/v1/bo/sysMgt/batchList',
         header: [
@@ -35,13 +58,19 @@ export default {
           ]
         ],
         columns: [
-          {name: 'batchType', header: '배치유형', align: 'center', width: '5%'},
-          {name: 'batchNm', header:'배치명',align:'center', width:'15%'},
-          {name: 'batchId', header:'배치ID', align:'center', width:'10%'},
-          {name: 'batchCycle', header:'실행일자',align:'center', width:'10%'},
-          {name: 'batchTime', header:'실행시간',align:'center', width:'10%'},
-          {name: 'regDt', header:'배치 수행시간',align:'center', width:'10%'},
-          {name: 'sttusCd', header:'상태',align:'center', width:'10%'},
+          {name: 'batchType', header: '배치유형', align: 'center', width: '7%'},
+          {
+            name: 'batchNm', header:'배치명',align:'left', width:'15%', renderer: {
+            type: CustomATagRenderer
+            , options: {
+              callback: this.batchDetail,
+            }
+          }},
+          {name: 'batchId', header:'배치ID', align:'center', width:'8%'},
+          {name: 'batchCycle', header:'실행일자',align:'center', width:'8%'},
+          {name: 'batchTime', header:'실행시간',align:'center', width:'7%'},
+          {name: 'regDt', header:'배치 수행시간',align:'center', width:'20%'},
+          {name: 'sttusCd', header:'상태',align:'center', width:'5%'},
           {name: 'errMsg', header:'메시지',align:'left', width:'30%'}
         ]
       }
@@ -51,7 +80,6 @@ export default {
     customGrid: customGrid,
   },
   created(){
-    this.getBatchList();
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
   },
@@ -69,30 +97,19 @@ export default {
   },
 
   methods: {
-    
-    async getBatchList(){
-		  try {
-        console.log("확인하자")
-			  const response = await mntrngApi.batchCheck();
-			  const result = response.data;
-			  if (result != null) {				 
-          this.batchList = response.data.data;
-          console.log("확인하자22")
-        } else {
-        }
-      } catch(err) {
-      }
-	  },
-    
     search: function (isKeep) {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
+    batchDetail(props){
+      this.row.batchId = props.batchId;
+      this.$router.push({name: 'batchDetail', params: this.row});
+    },
     sendStoreData: function () {
-      // const getP = this.$refs.table.getPagination();
+      const getP = this.$refs.table.getPagination();
       this.$store.commit('searchcondition/updateSearchCondition', {
-        // page: getP._currentPage,
-        // perPage: this.perPageCnt,
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
         params: this.grid.params
       });