고객관리 > 청약고갹관리/회원관리 기능 추가

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

@@ -1,12 +1,12 @@
-import TmpltList from '../views/TmpltList'
-
-export default [
-  {
-    path: '/channelMgt/tmpltList',    
-    component: TmpltList,    
-    name: 'tmpltList',     
-    meta: { public: true }
-  },
-  
-]
-
+import TmpltList from '../views/TmpltList'
+
+export default [
+  {
+    path: '/channelMgt/tmpltList',    
+    component: TmpltList,    
+    name: 'tmpltList',     
+    meta: { public: true }
+  },
+  
+]
+

frontend/src/modules/channelMgt/service/channelMgtApi.js

@@ -0,0 +1,34 @@
+import httpClient from '@/common/http-client';
+import channelListExcelHeader from './mock/channelListExcelHeader.json';
+
+// 공통 코드.
+const getCommCode = (params) => {
+    return httpClient.post('/api/v1/bo/comm/getCode', params, { withCredentials: false });
+}
+
+// 청약정보 엑셀다운로드 목록 조회
+const tmpltListExcel = (params) => {
+    return httpClient.post('/api/v1/bo/channelMgt/tmpltListExcel', params);
+}
+
+const getExcelHeader = category => {
+    // 엑셀에 출력할 Header 정보를 Mockup 데이터로 관리한다.
+    return new Promise(function(resolve, reject) {
+        let header = [];
+        switch (category) {
+            case 'CHANN':
+                header = channelListExcelHeader.header;
+                break;
+            default:
+                header = '';
+                break;
+        }
+        resolve(header);
+    });
+};
+
+export default {
+    getCommCode,
+    tmpltListExcel,
+    getExcelHeader,
+}

frontend/src/modules/channelMgt/service/mock/channelListExcelHeader.json

@@ -0,0 +1,38 @@
+{
+  "header": [
+    [
+      {
+        "key": "no",
+        "name": "NO"
+      },
+      {
+        "key": "bregNo",
+        "name": "사업자번호"
+      },
+      {
+        "key": "tmpltCd",
+        "name": "템플릿코드"
+      },
+      {
+        "key": "tmpltNm",
+        "name": "템플릿명"
+      },
+      {
+        "key": "tmpltType",
+        "name": "템플릿유형"
+      },
+      {
+        "key": "stat",
+        "name": "상태"
+      },
+      {
+        "key": "sendProfile",
+        "name": "발신프로필"
+      },
+      {
+        "key": "lastChgDt",
+        "name": "최종수정일"
+      }
+    ]
+  ]
+}

frontend/src/modules/channelMgt/views/TmpltList.vue

@@ -1,165 +1,336 @@
-<template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">알림톡 템플릿 목록 조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="select_box">
-							<label for="right" class="label">권한</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="대리점">대리점</option>
-								<option value="운영자">운영자</option>
-							</select>
-						</div>
-						<div class="select_box">
-							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
-							</select>
-						</div>
-						<div class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
-						</div>
-						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
-						</div>
-						<button type="button" class="button grey">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>100</span>건</div>
-					<div class="button_group">
-						<button type="button" class="button blue admin">관리자 등록</button>
-						<button type="button" class="button blue channel">유지채널 등록</button>
-						<button type="button" class="button white delete">삭제</button>
-					</div>
-				</div>
-				<!-- <div class="table">
-					<table>
-						<colgroup>
-                            <col width="5%"/>
-                            <col width="15%"/>
-                            <col width="15%"/>
-                            <col width="20%"/>
-                            <col width="20%"/>
-                            <col width="5%"/>
-                            <col width="20%"/>
-                        </colgroup>
-						<thead>
-							<tr>
-								<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
-								<th>NO</th>
-								<th>권한</th>
-								<th>이름(대리점명)</th>
-								<th>ID</th>
-								<th>상태</th>
-								<th>등록일</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
-								<td>10</td>
-								<td>대리점</td>
-								<td>유플러스</td>
-								<td><a href="javascript:void(0)">uplus1</a></td>
-								<td>사용</td>
-								<td>2022-03-10</td>
-							</tr>							
-						</tbody>
-					</table>
-				</div> -->
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="testList.url"
-                        :perPage="testList.perPage"
-                        :initialRequest="testList.initialRequest"
-                        :pagination="testList.pagination"
-                        :isCheckbox="testList.isCheckbox"
-                        :columns="testList.columns"
-                        :noDataStr="testList.noDataStr"
-                        :addCls="testList.addCls"
-                        :header="testList.header"        
-                    ></custom-grid>
-            </div>
-			</div>
-		</div>
-</template>
-
-<script>
-import customGrid from '@/components/CustomGrid';
-//import api from '../service/api';
-export default {
-  name: 'temltList',
-  data() {
-    return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
-        initialRequest: false,
-        addCls: 'box_OFvis',
-
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
-        ],
-        noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
-        excelHeader: []
-      }    
-    };
-  },  
-  components: {
-    customGrid: customGrid
-  },
-  destroyed() {
-      
-  },
-  mounted() {
-    let isKeep = false;
-    isKeep = true;
-    this.search(isKeep);
-  },
-  methods: {
-    search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
-    },
-  }
-};
+<template>
+ 
+		<div class="contents">
+			<div class="contents_wrap">
+				<div class="top_wrap">
+					<h3 class="title">알림톡 템플릿 목록 조회</h3>
+					<p class="breadcrumb">채널관리 &gt; 알림톡 템플릿 관리</p>
+				</div>
+				<form autocomplete="off" class="search_form">
+					<div class="search_wrap">
+						<div class="select_box">
+							<label for="stat" class="label">상태</label>
+							<select name="" id="stat" v-model="grid.params.searchType1" @keyup.enter="search">
+								<option value="">전체</option>
+								<option value="Y">사용</option>
+								<option value="N">폐기</option>
+							</select>
+						</div>
+						<div class="select_box">
+							<label for="searchType" class="label">상세검색</label>
+							<select name="" id="searchType" v-model="grid.params.searchType2" @keyup.enter="search">
+								<option value="custNm" selected="selected">고객사명</option>
+								<option value="bizNo">사업자번호</option>
+								<option value="tmpltNm">템플릿명</option>
+							</select>
+						</div>
+					  <div class="input_box id">
+							<label for="search" class="label">검색어</label>
+                            <input type="text" id="id1" placeholder="검색어 입력" v-model="grid.params.searchText1" v-on:keydown.enter.prevent="search"/>
+						</div>
+						<button type="button" class="button grey" @click="search">조회</button>
+					</div>
+				</form>
+				<div class="info">
+					<div class="count">총 <span>{{ totalItems }}</span>건
+            <div class="select_box NumberSe">
+                <select name="" id="perPage" v-model="grid.pagePerRows" @keyup.enter="search">
+                  <option value="20">20</option>
+                  <option value="50" selected>50</option>
+                  <option value="100">100</option>
+                </select>
+            </div>
+          </div>
+					<div class="button_group">
+						<button type="button" class="button blue admin" @click="excelDown();">엑셀다운로드</button>
+					</div>
+				</div>
+            <div class="table">
+              <custom-grid
+                ref="table"
+                :totalItems="'totalItems'"
+                :url="grid.url"
+                :pagePerRows="grid.pagePerRows"
+                :initialRequest="grid.initialRequest"
+                :pagination="grid.pagination"
+                :isCheckbox="grid.isCheckbox"
+                :columns="grid.columns"
+                :noDataStr="grid.noDataStr"
+                :addCls="grid.addCls"
+                :header="grid.headder"        
+              ></custom-grid>
+            </div>
+			</div>
+		</div>
+</template>
+
+<script>
+import customGrid from '@/components/CustomGrid';
+import channelMgtApi from '../service/channelMgtApi';
+import xlsx from '@/common/excel';
+import moment from 'moment';
+
+class customBRegNo {
+    constructor(props) {
+        this.props = props;
+        const el = document.createElement('td');
+        var bregNo = String(props.colValue);
+        el.innerText= bregNo;
+        if(bregNo.length == 10){
+        el.innerText= bregNo.substring(0,3)+'-'+bregNo.substring(3,5)+'-'+bregNo.substring(5,10)
+        }
+        this.el = el;
+    }
+
+    getElement() {
+        return this.el;
+    }
+
+    addEvent(selEl) {
+    }
+}
+class customTmpltType {
+    constructor(props) {
+        this.props = props;
+        const el = document.createElement('td');
+        var tmpltType = String(props.colValue);
+        el.innerText= "";
+        switch(tmpltType){
+          case '01' :
+            el.innerText= "기본형";
+            break;
+          case '02' :
+            el.innerText= "부가정보형";
+            break;
+          case '03' :
+            el.innerText= "광고추가형";
+            break;
+          case '04' :
+            el.innerText= "복잡형";
+            break;
+          default :
+            break;
+        }
+        this.el = el;
+    }
+
+    getElement() {
+        return this.el;
+    }
+
+    addEvent(selEl) {
+    }
+}
+
+class customStat {
+    constructor(props) {
+        this.props = props;
+        const el = document.createElement('td');
+        var stat = String(props.colValue);
+        el.innerText= "";
+        switch(stat){
+          case 'T' :
+            el.innerText= "신청완료";
+            break;
+          case 'R' :
+            el.innerText= "검수요청완료";
+            break;
+          case 'Q' :
+            el.innerText= "카카오 검수중";
+            break;
+          case 'A' :
+            el.innerText= "템플릿승인";
+            break;
+          case 'S' :
+            el.innerText= "반려(" + props.returnReason + ")";
+            break;
+          default :
+            break;
+        }
+        this.el = el;
+    }
+
+    getElement() {
+        return this.el;
+    }
+
+    addEvent(selEl) {
+    }
+}
+
+export default {
+  name: 'temltList',
+  data() {
+    return {
+     row: {},
+      authType: [],
+	    statType: [],
+      cate2Code: "",
+      totalItems: 0,
+      pageType: 'CHANN',
+
+      // 테이블 리스트 데이터
+      perPageCnt: 50,
+      grid: {
+        url: '/api/v1/bo/channelMgt/tmpltList',
+        perPage: 50,
+        pagination: true,
+        isCheckbox: false,
+        initialRequest: false,
+        addCls: 'box_OFvis',
+
+
+        header: [
+          [
+            { header: 'NO', childNames: [] },
+            { header: '고객사명', childNames: [] },
+            { header: '사업자번호', childNames: [] },
+            { header: '템플릿코드', childNames: [] },
+            { header: '템플릿명', childNames: [] },
+            { header: '템플릿 유형', childNames: [] },
+            { header: '상태(반려사유)', childNames: [] },
+            { header: '발신프로필', childNames: [] },
+            { header: '최종수정일', childNames: [] }
+          ]
+        ],
+
+        columns: [          
+          { name: 'no', header: 'NO', align: 'center', width: 40 },
+          { name: 'custNm', header: '고객사명', align: 'left', width: 120 },
+          { name: 'bregNo', header: '사업자번호', align: 'center', width: 120,renderer: {type: customBRegNo}},
+          { name: 'tmpltCd', header: '템플릿코드', align: 'center', width: 120},
+          { name: 'tmpltNm', header: '템플릿명', align: 'center', width: 120},      
+          { name: 'tmpltType', header: '템플릿 유형', align: 'center', width: 120,renderer: {type: customTmpltType}},      
+          { name: 'stat', header: '상태(반려사유)', align: 'center', width: 120,renderer: {type: customStat}},      
+          { name: 'sendProfile', header: '발신프로필', align: 'center', width: 120},      
+          { name: 'lastChgDt', header: '최종수정일', width: 120, cls: 'td_line' }
+        ],
+        noDataStr: '검색 결과가 없습니다.',        
+        params: {
+          searchType1: '',
+          searchType2: '',
+          searchText1: ''
+		    },
+        excelHeader: []
+      }    
+    };
+  },  
+  components: {
+    customGrid: customGrid,
+    channelMgtApi
+  },
+    created(){            
+    this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    this.getExcelHeader();
+  },
+  destroyed() {
+     this.$store.commit('searchcondition/updateSearchCondition', {
+        page: 1,
+		    perPage: 50,
+        params: {
+          searchType1: '',
+          searchType2: '',
+          searchText1: ''}
+      });
+      
+  },
+  mounted() {
+    
+    let page = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+
+	// store에 저장된 페이지 정보 및 검색 조건을 불러오기
+    let isKeep = false;
+    if (getCondition) {
+      this.grid.pagePerRows = getCondition.perPage;
+      this.grid.params = getCondition.params;      
+      page = getCondition.page;
+      isKeep = true;
+    }
+    this.search(isKeep);   
+  }, 
+  methods: {
+    search: function(isKeep) {
+      console.log(this.grid.params);
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+    },
+    sendStoreData: function() {
+      const getP = this.$refs.table.getPagination();
+      console.log("==========getP : " + getP);
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP._currentPage,        
+		    perPage: this.perPageCnt,        
+        params: {
+          searchType1: '',
+          searchType2: '',
+          searchText1: ''
+		    }
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+      //console.log("getCondition : "+ getCondition.perPage);
+    },
+    async getExcelDataDown() {
+      try {
+        let response;
+        const params = {
+          searchType1: this.grid.params.searchType1,
+          searchType2: this.grid.params.searchType2,
+          searchText1: this.grid.params.searchText1
+        };
+
+        response = await channelMgtApi.tmpltListExcel(params);
+
+        const result = response.data;
+        if (result != null && result.retCode == "0000") {
+          return result.data;
+        }else{
+          return false;
+        }
+      } catch (err) {
+        return false;
+      }
+    }, // end of getExcelDataDown
+    async excelDown() {
+      if (this.$refs.table.getData().length <= 0) {
+        alert('조회된 데이터가 없습니다.');
+        return false;
+      }
+
+      let today = moment().format('YYYYMMDDHHmmss');
+      const saveFileName = `알림톡템플릿목록_${today}.xlsx`;
+
+      const data = await this.getExcelDataDown();
+      let options = {
+        header: this.excelHeader,
+        dataOrder: 'header'
+      };
+      // console.log(data);
+      xlsx.export(data.list, saveFileName, options).then(() => {});
+    },
+    getExcelHeader() {
+      // 헤더를 mockup으로 관리한다.
+      channelMgtApi.getExcelHeader(this.pageType).then(res => {
+        this.excelHeader = res;
+      });
+    },
+  },
+  
+  beforeRouteLeave(to, from, next) {
+	
+	const getP = this.$refs.table.getPagination();
+	console.log("==========getP : " + getP._currentPage);
+	this.$store.commit('searchcondition/updateSearchCondition', {
+	  page: getP._currentPage,        
+	  perPage: this.perPageCnt,        
+	  params: this.grid.params
+	});  
+	// 라우트 하기전 실행 
+	next();
+  }
+};
 </script>