알림 이력 페이지 수정

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);
+    }
+