시스템관리 - 권한관리, 고객관리 - 청약고객관리/회원관리 추가

frontend/src/modules/custMgt/views/MemberList.vue

@@ -3,163 +3,289 @@
 		<div class="contents">
 			<div class="contents_wrap">
 				<div class="top_wrap">
-					<h3 class="title">회원목록조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
+					<h3 class="title">청약고객관리</h3>
+					<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 회원관리</p>
 				</div>
-				<form autocomplete="off" class="search_form">
+				
+				<div class="top_tab">
+					<a href="javascript:void(0);" @click="toMove('subsList')">청약고객관리</a>
+          <a href="javascript:void(0);" class="on">회원관리</a>
+				</div>
+				
+				<div 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 class="group">
+						<div class="input_box cal">
+							<label for="right" class="label">조회기간</label>
+							<input class="" type="text" id="" v-model="grid.params.startDt"/>
+							<input class="" type="text" id="" v-model="grid.params.endDt"/>
 						</div>
-						<div class="select_box">
+						<div class="select_box id">
 							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
+							<select name="" id="" v-model="grid.params.searchType1">
+								<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 class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
+						<div class="select_box">
+							<label for="right" class="label">구분</label>
+							<select name="" id="" v-model="grid.params.searchType2">
+                <option value="" selected>전체</option>
+                <option value="01" >관리자</option>
+                <option value="02" >사용자</option>
+                <option value="03" >테스트</option>
+							</select>
+						</div>
+						</div>
+						<div class="group">
+						<div class="select_box">
+							<label for="right" class="label">상세검색</label>
+							<select name="" id="" v-model="grid.params.searchType3">
+                <option value="" selected>전체</option>
+								<option value="01" selected>ID</option>
+								<option value="02">이름</option>
+								<option value="03">관리자ID</option>
+							</select>
 						</div>
 						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
+							<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1"/>
+						</div>
+						<button type="button" class="button grey" @click="search">조회</button>
 						</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 class="info">
+					<div class="count">총 <span>{{ totalItems }}</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 class="button_group">
+						<button type="button" class="button blue" @click="ModalOpen();">테스트 ID 생성</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>
+
+        <testId-reg-pop ref="testIdRegPop"> </testId-reg-pop>
+
 			</div>
 		</div>
+	
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
-//import api from '../service/api';
+import TestIdRegPop from '../components/TestIdRegPop';
+import moment from 'moment';
+import api from '@/service/api.js';
+
+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: 'custList',
+  name: 'memberList',
   data() {
     return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
+      // 달력 데이터      
+      sDateDiv: 'day',
+      eDateDiv: 'year',      
+      startDate: null,
+      endDate: null,
+      disabledSDate: { from: new Date()},
+      disabledEDate: { to: new Date()},
+      statType: [],
+      userType: [],
+
+      row:{},
+        
+      // 테이블 리스트 데이터
+      perPageCnt: 50,
+      options: [
+        { text: '20', value: 20},
+        { text: '50', value: 50},
+        { text: '100', value: 100}
+      ],
+      totalItems: 0,	  
+      grid: {
+        url: '/api/v1/bo/custMgt/memberList',
+        pagePerRows: 20,
+        pagination: true,           
+        isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
         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' }
+          { name: 'no', header: 'No', align: 'center', width: 60},
+          { name: 'userNm', header: '이름', align: 'center', width: 130},
+          { name: 'userType', header: '구분', align: 'center', width: 130},
+          { name: 'adminId', header: '관리자ID', align: 'center', width: 130, cls: 'td_line'},
+          { name: 'userId', header: 'ID', align: 'center', width: 130, renderer: {
+              type: CustomATagRenderer
+              , options: {
+                  callback: this.memberDetail,
+              }
+            }
+          },
+          { name: 'regDt', header: '등록일', align: 'center', width: 130},
+          { name: 'userStat', header: '상태', align: 'center', width: 130}
         ],
         noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
+        params: {
+          searchType1: '',
+          searchType2: '',
+          searchType3: '',
+          searchText1: '',          
+          startDt: '',
+          endDt: ''
+        },
         excelHeader: []
       }    
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid, 
+    TestIdRegPop,
   },
+  created(){            
+    this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
+    this.setCodeData();   	
+  },  
   destroyed() {
-      
+    this.$store.commit('searchcondition/updateSearchCondition', {
+        page: 1,
+		    perPage: 50,
+        params: {
+        searchType1: '',
+        searchType2: '',
+        searchType3: '',
+        searchText1: '',          
+        startDt: '',
+        endDt: ''
+		  }
+    });      
   },
   mounted() {
+    // 달력 세팅
+    // this.grid.params.startDt = this.customFormatter(new Date());
+    // this.grid.params.endDt = this.customFormatter(new Date());
+
+    let page = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    console.log('getCondition : '+getCondition);
+
+    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
-    isKeep = true;
+    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.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
+      console.log('this.perPageCnt'+this.perPageCnt);
+      //console.log(this.grid.params);	  
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
     },
-  }
+    toMove(routeName) {
+      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
+    },
+    ModalOpen: function(){      
+      this.$refs.testIdRegPop.ModalOpen();
+    },
+    memberDetail: function(props) {
+      this.row.serviceId = props.userId;      
+      if(props.userType == '관리자 ID'){
+        // 관리자 ID용 상세페이지 이동
+        this.$router.push({ name: 'memberAdminDetail', params: {serviceId : this.row.serviceId} });
+      } else {
+        // 사용자 ID용 상세페이지 이동
+        this.$router.push({ name: 'memberDetail', params: {serviceId : this.row.serviceId} });
+      }      
+    },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
+    sendStoreData: function() {
+      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
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+      // console.log("getCondition : "+ getCondition.perPage);
+    },
+    
+    setCodeData() {
+      // 상태 옵션 셋팅.
+      api.commCode({'grpCd' : 'SVCUSER_STTUS_CD'}).then(response => {
+        this.statType = response.data.data.list;
+      });
+      // 
+      api.commCode({'grpCd' : 'SVCUSER_TP_CD'}).then(response => {
+        this.userType = response.data.data.list;
+      });
+    },
+  },
+  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>