알림 이력 페이지 수정

frontend/src/modules/sysMgt/components/NotiDetailPop.vue

@@ -0,0 +1,74 @@
+<template>
+
+  <div>
+    <div class="dimmed modal21" @click="adminDetailModalClose();"></div>
+    <div class="popup-wrap modal21">
+      <div class="popup modal21 popup_form">
+        <div class="pop-head">
+          <h3 class="pop-tit">메시지 상세 내용</h3>
+        </div>
+        <form autocomplete="off">
+          <table>
+            <tbody>
+            <tr>
+              <th>내용</th>
+              <td>{{ notiMsg }}</td>
+            </tr>
+            <tr>
+              <th>등록 일시</th>
+              <td>{{ regDt }}</td>
+            </tr>        
+            </tbody>
+          </table>
+        </form>
+        <div class="popup-btn2">
+          <button class="btn-default" @click="adminDetailModalClose();">닫기</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  name: "notiDetailPop",
+  watch: {
+    stat() {
+    }
+  },
+  data() {
+    return {
+      row: {},
+      notiMsg: '',
+      regDt : ''
+    }
+  },
+  model: {
+    prop: 'sendData',
+    event: 'event-data'
+  },
+  props: ['sendData'],
+  methods: {
+    // 모달 띄우기
+    async notiDetailModalOpen(props) {
+      this.row.notiMsg = props.notiMsg;
+      this.row.regDt = props.regDt;
+      this.notiMsg = this.row.notiMsg;
+      this.regDt = this.row.regDt;
+      var dimmed = document.getElementsByClassName('modal21');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+    },
+    // 모달 끄기
+    adminDetailModalClose() {
+      var dimmed = document.getElementsByClassName('modal21');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+    },
+  }
+}
+</script>

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

@@ -33,11 +33,11 @@
             </div>
           </div>
           <div class="select_box id">
-            <label for="searchType" class="label">요청코드</label>
+            <label for="searchType" class="label">알림 구분</label>
             <select name="" id="searchType2" v-model="srchGbn2" @keyup.enter="search">
               <option value="00">선택안함</option>
-              <option value="01">종량전환알림</option>
-              <option value="02">이월소멸알림</option>
+              <option value="01">종량 전환 알림</option>
+              <option value="02">이월 소멸 알림</option>
             </select>
           </div>
           <div class="select_box id">
@@ -49,7 +49,7 @@
             </select>
           </div>
           <div class="input_box id">
-            <label for="id1" class="label">ID</label>
+            <label for="id1" class="label">검색어</label>
             <input
               class="search-box"
               type="text"
@@ -92,6 +92,7 @@
           :addCls="grid.addCls"
         ></custom-grid>
       </div>
+      <noti-detail-pop ref="notiDetailModal"></noti-detail-pop>
     </div>
   </div>
 </template>
@@ -99,6 +100,30 @@
 <script>
 import customGrid from '@/components/CustomGrid';
 import moment from 'moment';
+import NotiDetailPop from '../components/NotiDetailPop';
+
+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 {
@@ -131,12 +156,23 @@ export default {
         addCls: 'box_OFvis',
         initialRequest: false,
         columns: [
-          { name: 'sndYmd', header: '발송 날짜', align: 'center', width: '10%' },
-          { name: 'userId', header: '유저 ID', align: 'center', width: '4%' },
-          { name: 'notiDiv', header: '알림 코드', align: 'center', width: '10%' },
-          { name: 'notiMsg', header: '내용', align: 'left', width: '45%' },
-          { name: 'webReqId', header: '웹요청 ID', align: 'center', width: '11%' },
-          { name: 'regDt', header: '등록 일시', align: 'center', width: '15%' },
+          { 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: 'msgTitle', 
+            header: '내용', 
+            align: 'center', 
+            width: '20%' ,
+            renderer: {
+              type: CustomATagRenderer,
+              options: {
+                callback: this.notiDetailPop,
+              },
+            },
+          },
+          // { name: 'regDt', header: '등록 일시', align: 'center', width: '15%' },
         ],
         noDataStr: '발송 내역이 없습니다.',
         params: {
@@ -152,6 +188,7 @@ export default {
   components: {
     customGrid: customGrid,
     vuejsDatepicker,
+    NotiDetailPop
   },
   created() {
     this.setPeriodDay(0);
@@ -193,7 +230,6 @@ export default {
         srchGbn: this.srchGbn,
         srchGbn2: this.srchGbn2
       }
-      console.log(this.grid.params);
 
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
@@ -255,6 +291,10 @@ export default {
       }
     },
 
+    notiDetailPop(props){
+      this.$refs.notiDetailModal.notiDetailModalOpen(props);
+    }
+