작업중 설정 진행 중 & 배치 모니터링 수정

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

@@ -9,7 +9,7 @@
       <div class="search_wrap">
         <div class="group">
           <h3>
-            <label for="right" class="label">배치 ID  |  {{ this.batchId }}  </label>
+            <label for="right" class="label">배치 ID  |  {{ this.batchId }} | {{ this.batchNm }} |  {{ this.batchType }} </label>
           </h3>
         </div>
         <div class="group">
@@ -57,10 +57,9 @@
             <div class="term">
               <span class="custom_input icon_date">
                   <vuejs-datepicker
-                      :language="ko"
-                      :format="customFormatter"
-                      :disabled-dates="disabledSDate"
-                      v-model="strDate"
+                    :language="ko"
+                    :format="customFormatter"
+                    v-model="strDate"
                   ></vuejs-datepicker>
               </span>
             </div>
@@ -107,7 +106,7 @@ export default {
   name: 'batchDetail',
   data() {
     return {
-      //paramBatchId : this.$route.params.batchId,
+      paramBatchId : this.$route.params.batchId,
       //날짜 조회
       ko: vdp_translation_ko.js,
       periodDay: 7,
@@ -120,8 +119,9 @@ export default {
 
       pageType: 'CALC',
 
-      batchId : this.$route.params.batchId,
-      batchNm : this.$route.params.batchNm,
+      batchId : this.$route.params.props.batchId,
+      batchNm : this.$route.params.props.batchNm,
+      batchType: this.$route.params.props.batchType,
 
       //상태조회
       sttusCd: '',
@@ -154,6 +154,8 @@ export default {
         noDataStr: '검색 결과가 없습니다.',
         params: {
           batchId : '',
+          batchType: '',
+          batchNm: '',
           sttusCd: '',
           startDt: '',
           endDt: '',
@@ -220,6 +222,8 @@ export default {
         startDt: moment(this.startDate).format('YYYYMMDD'),
         endDt: moment(this.endDate).format('YYYYMMDD'),
         batchId: this.batchId,
+        batchNm: this.batchNm,
+        batchType: this.batchType,
         sttusCd: this.sttusCd
       }
       this.$refs.table.search(this.grid.params, isKeep);
@@ -291,10 +295,14 @@ export default {
     },
 
     async runExecuteJob(){
+      console.log("this.strDate",this.strDate)
         const params = {
-          strDate : this.strDate,
-          batchId : this.batchId
+          strDate : moment(this.strDate).format('YYYY-MM-DD'),
+          batchId : this.batchId,
+          batchType : this.batchType,
+          batchNm : this.batchNm,
         }
+        console.log("params",params)
         try {
           const response = await sysMgtApi.batchExecuteJob(params);
           

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

@@ -7,13 +7,21 @@
       </div>
       <div class="table">
         <custom-grid ref="table" :url="grid.url" :columns="grid.columns"></custom-grid>
+        <router-link 
+          :to="{
+            name: 'batchDetail',
+            params: { batchId : 'BATCH_003'}
+          }">
+        </router-link>
       </div>
     </div>
+    
   </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
+import batchDetail from './BatchDetail.vue'
 
 class CustomATagRenderer {
   constructor(props) {
@@ -62,7 +70,7 @@ export default {
             renderer: {
               type: CustomATagRenderer,
               options: {
-                callback: this.batchDetail,
+                callback: this.goBatchDetail,
               },
             },
           },
@@ -77,6 +85,7 @@ export default {
   },
   components: {
     customGrid: customGrid,
+    batchDetail: batchDetail,
   },
   created() {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -112,9 +121,12 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    batchDetail(props) {
-      this.row.batchId = props.batchId;
-      this.$router.push({ path: `/sysMgt/batchDetail/${props.batchId}`, params: this.row });
+    goBatchDetail(props) {
+      // this.row = props
+      // console.log("props1",props.getters)
+      // console.log("props2",props)
+
+      this.$router.push({ name: "batchDetail", params: {props: props} });
     },
     sendStoreData: function () {
       const getP = this.$refs.table.getPagination();

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

@@ -14,38 +14,35 @@
                 <vuejs-datepicker
                     :language="ko"
                     :format="customFormatter"
-                    :disabled-dates="disabledSDate"
                     v-model="startDate"
-                    @selected="selectedStartDate(0)"
-                    @closed="closeDate('start')"
                 ></vuejs-datepicker>
               </span>
             </div>
           </div>
-          <div>
+          <div style="margin-right: 20px;">
             <label for="right" class="label">시작시간</label>
             <div class="term">
               <span class="custom_input icon_date">
-                <vue-timepicker v-model="StartTime" format="hh:mm A" :minute-interval="10"></vue-timepicker>
+                <vue-timepicker v-model="startTime" :minuteInterval="10"></vue-timepicker>
               </span>
             </div>
           </div>
-          <div>
+          <div style="margin-right: 30px;">
             <label for="right" class="label">종료시간</label>
             <div class="term">
               <span class="custom_input icon_date">
-                <vue-timepicker v-model="EndTime" format="hh:mm A" :minute-interval="10"></vue-timepicker>
+                <vue-timepicker v-model="endTime" :minuteInterval="10"></vue-timepicker>
               </span>
             </div>
           </div>
           <div>
-            <input type="radio" name="state" value="use" id="popup_radio1">
-            <label for="popup_radio1">사용</label>
-            <input type="radio" name="state" value="notUse" id="popup_radio2">
-            <label for="popup_radio2">점검중</label>
+            <input type="radio" v-model="state" name="state" value="use" id="popup_radio1">
+            <label for="popup_radio1" style="margin-right: 20px;">사용</label>
+            <input type="radio" v-model="state" name="state" value="notUse" id="popup_radio2">
+            <label for="popup_radio2" style="margin-right: 30px;">점검중</label>
           </div>
           <div>
-            <button type="button" class="button grey" @click="save">저장</button>
+            <button type="button" class="button grey" @click="fnSaveTxt">저장</button>
           </div>
         </div>
       </div>
@@ -68,52 +65,20 @@
 
 <script>
 import customGrid from '@/components/CustomGrid';
-import Timepicker from 'vue-timepicker';
-
-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);
-    });
-  }
-}
-
-
+import moment from 'moment';
+import VueTimepicker from 'vue2-timepicker';
+import 'vue2-timepicker/dist/VueTimepicker.css'
+import sysMgtApi from '../service/sysMgtApi'
 
 export default {
   name: 'workState',
   data() {
     return {
       isFocused: false,
-      srchGbn: '00',
-      srchGbn2: '00',
-      row: {},
-      perPageCnt: 50,
-      options: [
-        { text: '20', value: 20 },
-        { text: '50', value: 50 },
-        { text: '100', value: 100 },
-      ],
       //날짜 조회
       ko: vdp_translation_ko.js,
-      periodDay: 7,
       sDateDiv: 'day',
       startDate: new Date(),
-
       totalItems: 0,
       grid: {
         url: '/api/v1/bo/sysMgt/notiList',
@@ -122,45 +87,32 @@ export default {
         addCls: 'box_OFvis',
         initialRequest: false,
         columns: [
-          { name: 'sndYmd', header: '발송 날짜', align: 'center', width: '15%' },
-          { name: 'userId', header: '유저 ID', align: 'center', width: '15%' },
-          { name: 'notiDiv', header: '알림 구분', align: 'center', width: '15%' },
-          { name: 'webReqId', header: '웹요청 ID', align: 'center', width: '20%' },
-          // { name: 'regDt', header: '등록 일시', align: 'center', width: '15%' },
+          { name: 'day', header: '날짜', align: 'center', width: '15%' },
+          { name: 'userId', header: '시작 시간', align: 'center', width: '15%' },
+          { name: 'notiDiv', header: '종료 시간', align: 'center', width: '15%' },
+          { name: 'webReqId', header: '상태 변경', align: 'center', width: '20%' },
         ],
         noDataStr: '발송 내역이 없습니다.',
         params: {
-          startDt: '',
-          endDt: '',
-          search: '',
-          srchGbn: '',
-          srchGbn2: ''
         },
-        StartTime : null,
-        EndTime : null,
+        startTime : '',
+        endTime : '',
+        state: 'use'
       },
     };
   },
   components: {
     customGrid: customGrid,
     vuejsDatepicker,
-    Timepicker,
+    VueTimepicker,
 
   },
   created() {
-    this.setPeriodDay(0);
   },
   destroyed() {
     // this.$store.commit('dataStore/updateDataStore', '');
     this.$store.commit('searchcondition/updateSearchCondition', {
-      page: 1,
-      perPage: 50,
       params: {
-        startDt: '',
-        endDt: '',
-        search: '',
-        srchGbn: '',
-        srchGbn2: ''
       },
     });
   },
@@ -182,9 +134,30 @@ export default {
   },
 
   methods: {
-    save(){
-      alert("저장!")
-    }
+    fnSaveTxt(){
+      let params = {
+        startDate : this.startDate,
+        startTime : this.startTime,
+        endTime : this.endTime,
+        state : this.state,
+      }
+      sysMgtApi.setWorkState(params);
+
+    },
+    search: function (isKeep) {
+      this.$refs.table.search(this.grid.params, isKeep);
+    },
+
+    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');
+      }
+    },
+
   }
 };
 </script>