File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="networking-wrap">
<div class="content-box">
<div class="title-wrap">
<div class="flex-start">
<img src="../../../../resources/jpg/subscribe.png" alt="구독 아이콘" class="title-icon">
<h2 class="main-title">구독서비스</h2>
</div>
</div>
<div class="btn-wrap">
<div class="data-select">
<select v-model="subscListSearch.searchType" name="data-table-sild" id="data-table-sild"
class="data-table-search" @change="valueChange($event)">
<option v-for="(item, idx) in option" :key="idx" :value=item.value>
{{ item.name }}
</option>
</select>
</div>
<button class="blue-border-bnt" @click="subscExcel()">Excel 다운로드</button>
</div>
<div class="content-wrap">
<table class="select-table">
<thead>
<tr>
<th style="width:10%">no</th>
<th style="width:30%">아이디</th>
<th style="width:10%">기업명</th>
<th style="width:20%">이름</th>
<th style="width:30%">이메일</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>기업명 들어가는 부분</td>
<td>담당자명</td>
<td>이메일</td>
</tr> -->
<tr v-for="(subsc, subIdx) in subscList" :key="subIdx">
<td>{{ subscIdx - subIdx }}</td>
<td>{{ subsc.user_id }}</td>
<td>{{ subsc.company_nm == null ? "-" : subsc.company_nm }}</td>
<td>{{ subsc.user_nm }}</td>
<td>{{ subsc.user_eml }}</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton v-model:currentPage="subscListSearch.currentPage" :perPage="subscListSearch.perPage"
:totalCount="subscListCount" :maxRange="5" :click="subscSelectList" />
</div>
</div>
</div>
</template>
<script>
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import axios from 'axios';
export default {
data() {
return {
subscListSearch: {
currentPage: 1,
perPage: 10,
searchType: 'all',
},
subscList: [],
subscListCount: 0,
subscIdx: 0,
option: [
{ name: '전체', value: 'all'},
{ name: '일반회원', value: 'common'},
{ name: '기업회원', value: 'company'},
],
};
},
methods: {
subscSelectList: function () {
const vm = this;
axios({
url: '/subsc/subscSelectList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.subscListSearch
}).then(function (response) {
vm.subscList = response.data.subscSelectList;
vm.subscListCount = response.data.subscSelectListCount;
vm.subscIdx = vm.subscListCount - (vm.subscListSearch.currentPage - 1) * vm.subscListSearch.perPage;
}).catch(function (error) {
alert('구독서비스 목록 조회 오류, 관리자에게 문의하세요.');
})
},
valueChange: function(event) {
this.subscListSearch.searchType = event.target.value;
this.subscSelectList();
},
subscExcel: function() {
const vm = this;
if(vm.subscListCount === 0) {
alert("데이터가 없어 EXCEL 다운로드를 실행할 수 없습니다.")
return
}
axios({
url: "/subsc/subscExcel.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
responseType: 'arraybuffer',
data: vm.subscListSearch,
})
.then(function (response) {
// console.log("userAccessLogExcel - response : ", response.data);
const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers["content-type"] }));
const link = document.createElement("a");
link.href = url;
let today = COMMON_UTIL.today();
link.download = '[' + today + ']' + '구독자 리스트';
link.click();
window.URL.revokeObjectURL(url);
})
.catch(function (error) {
console.log("userAccessLogExcel - error : ", error);
alert("구독자 리스트 Excel 다운로드 오류, 관리자에게 문의해주세요.");
});
},
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
},
mounted() {
console.log("subscribe mounted")
this.subscSelectList()
}
};
</script>