hubez-admin/frontend/src/modules/custMgt/views/CustList.vue

<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_form">
					<div class="search_wrap">
						<div class="select_box">
							<label for="right" class="label">권한</label>
							<select name="" id="right" v-model="grid.params.searchType1">
								<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" v-model="grid.params.searchType2">
								<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="검색어 입력" v-model="grid.params.searchText1"/>
						</div>
						<div class="input_box">
							<label for="name" class="label">이름(대리점명)</label>
                            <input type="text" id="name" placeholder="검색어 입력" v-model="grid.params.searchText2"/>
						</div>
						<button type="button" class="button grey" v-on:click="search">조회</button>
					</div>
        </div>
        <!-- </form> -->
				<div class="info">
					<!-- <div class="count">총 <span>100</span>건</div> -->
          <div class="count">총 <span>{{ totalItems }}</span>건</div>
					<div class="button_group"> 
						<button type="button" class="button blue admin"  @click="ModalOpen('modal20')">관리자 등록</button>
						<button type="button" class="button blue channel" @click="ModalOpen('modal23')">유지채널 등록</button>
						<button type="button" class="button white delete" @click="deleteRow()">삭제</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="grid.url"
              :perPage="grid.perPage"
              :initialRequest="grid.initialRequest"
              :pagination="grid.pagination"
              :isCheckbox="grid.isCheckbox"
              :columns="grid.columns"
              :noDataStr="grid.noDataStr"
              :addCls="grid.addCls"
              :header="grid.headder"        
          ></custom-grid>
        </div>
            <system-popup ref="systemModal"></system-popup>          
			</div>
		</div>
</template>

<script>
import customGrid from '@/components/CustomGrid';
import SystemPopup from '@/components/SystemPopup.vue';

//import api from '../service/api';
export default {
  name: 'custList',
  data() {
    return {
      totalItems: 0,
      grid: {
        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: 'center', 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: {
          searchType1: '',
          searchType2: '',
          searchText1: '',
          searchText2: ''
        },
        excelHeader: []
      }    
    };
  },  
  components: {
    customGrid: customGrid,      
    SystemPopup
  },
  created(){            
    this.$store.commit("login/isLogin", true);
    this.$store.commit("login/isAuthChk", true);      
    //let cont = document.querySelector(".wrap");      
    //cont.classList.add("main_wrap");
  },
  destroyed() {
      
  },
  mounted() {
    let page = 1;
    // 페이지 정보 및 검색 조건
    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
    let isKeep = false;
    if (getCondition) {
      this.grid.perPage = getCondition.perPage;
      this.grid.params = getCondition.params;
      if (getCondition.sort != undefined && getCondition.sort != null) {
        this.grid.params.sort = getCondition.sort;
      }
      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);
    },
    ModalOpen: function(target){      
      this.$refs.systemModal.ModalOpen(target);
    },
    deleteRow: function(){ //로우데이터 삭제하도록 수정
      var checkTest = this.$refs.table.checkedElementDatas();
      if(checkTest.length == 0){
        alert('체크박스에 체크를 해주세요.')
      }
      for(var i = 0; i < checkTest.length; i++){
        alert(checkTest[i].adminId);
      }
    },
    memberDetail: function(data) {
      if(data.adminId == 'free'){
        this.$router.push({
          path: `./views/MemberDetail`
        });
      }
    },

    
  }
};
</script>