hubez-admin/frontend/src/modules/channelMgt/views/TmpltList.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_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);
    },
  }
};
</script>