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/mail-icon.png" alt="메일 아이콘" class="title-icon">
<h2 class="main-title">메일발송 관리</h2>
</div>
</div>
<div class="content-wrap">
<div class="btn-wrap">
<div class="data-select">
<select v-model="mailListSearch.searchType" name="data-table-sild" id="data-table-sild">
<option v-for="(item, idx) in option" :key="idx" :value=item.value>
{{ item.name }}
</option>
</select>
<div class="input-group">
<input type="text" class="input" placeholder="검색어를 입력해주세요."
v-model="mailListSearch.searchText" @keyup.enter="mailSelectList()">
<input class="button--submit" value="검색" type="submit" @click="mailSelectList()">
</div>
</div>
</div>
<div class="sort-wrap" style="grid-column: 1 / span 2;">
<ul class="flex-end">
<li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
@click="changeColor(index)">
{{ item.name }}
</li>
</ul>
</div>
<table class="select-table">
<thead>
<tr>
<th style="width:10%">no</th>
<th style="width:70%">제목</th>
<th style="width:10%">전송일시</th>
<th style="width:10%">보내는이</th>
</tr>
</thead>
<tbody>
<tr v-for="(mail, idx) in mailList" :key="idx" @click="mailSelectOnePage(mail)">
<td v-if="activeIndex == 0">{{ mailIdx - idx }}</td>
<td v-if="activeIndex == 1">{{ (mailListSearch.currentPage - 1) * mailListSearch.perPage + idx + 1 }}</td>
<td>{{ mail.eml_title }}</td>
<td>{{ yyyymmdd(mail.eml_reg_dt) }}</td>
<td>{{ mail.sender_id }}</td>
</tr>
<tr v-if="mailListCount == 0">
<td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<div class="btn-wrap">
<button class="blue-btn" @click="mailInsertPage">메일작성하기</button>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton v-model:currentPage="mailListSearch.currentPage" :perPage="mailListSearch.perPage"
:totalCount="mailListCount" :maxRange="5" :click="mailSelectList" />
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
export default {
data() {
return {
mailListSearch: {
currentPage: 1,
perPage: 10,
searchType: 'all',
searchText: null,
sort: 'desc'
},
mailListCount: 0,
mailIdx: 0,
mailList: [],
sorts: [{ name: '최신순', value: 'desc' },
{ name: '등록순', value: 'asc' }],
activeIndex:0,
option: [
{ name: '전체', value: 'all'},
{ name: '제목', value: 'title'},
{ name: '보내는이', value: 'writer'},
]
};
},
methods: {
changeColor(index) {
this.activeIndex = index;
this.mailListSearch.sort = this.sorts[index].value;
this.mailSelectList();
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
// 메일 작성 시 네이버 웍스 api 인증을 위한 페이지로 이동.
mailInsertPage: function () {
const currentUrl = window.location.href;
const url = new URL(currentUrl);
const host = url.origin;
axios({
url: '/token/authorize.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { uriData: host }
}).then(function (response) {
const redirectUrl = response.data;
window.location.href = redirectUrl;
}).catch(error => {
alert('메일 작성 오류, 관리자에게 문의하세요.');
console.error(error);
});
},
//메일 상세조회 페이지로 이동
mailSelectOnePage: function (item) {
this.$router.push({ path: '/adm/mailSelectOne.page', query: { 'eml_id': item.eml_id } });
},
mailSelectList: function () {
const vm = this;
axios({
url: '/post/mailSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.mailListSearch
}).then(function (response) {
console.log(response.data.mailSelectListCount);
vm.mailList = response.data.mailSelectList;
vm.mailListCount = response.data.mailSelectListCount;
vm.mailIdx = vm.mailListCount - (vm.mailListSearch.currentPage - 1) * vm.mailListSearch.perPage;
}).catch(function (error) {
alert('메일 관리 조회 오류, 관리자에게 문의하세요.');
console.error(error);
})
},
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
},
mounted() {
console.log('Mails mounted')
this.mailSelectList();
}
};
</script>