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="news-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">
<table class="insert-table">
<tbody>
<tr>
<th>받는사람</th>
<td>
<div class="flex mail-write">
<input type="text" name="" id="newsTitle">
<button class="blue-btn" @click="modalType = 'userList'">주소록</button>
</div>
</td>
</tr>
<tr>
<th>제목</th>
<td><input type="text" name="" id="newsTitle"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="smart" id="smart" style="width:100%"></textarea></td>
</tr>
</tbody>
</table>
<div class="btn-wrap">
<button class="dark-gray-btn">임시저장</button>
<button class="gray-btn" @click="selectList">이전</button>
<button class="blue-btn">전송</button>
</div>
</div>
</div>
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title">
<h2>주소 추가</h2>
</div>
<div v-show="modalType == 'userList'" class="modal-content-monthly">
<div class="search-zone flex">
<input type="text" class="user-search" />
<button class="blue-btn">검색</button>
</div>
<div class="list-zone">
<div class="user-list">
<p>사용자 선택</p>
<ul>
<li v-for="(user, index) in users" :key="index"><input type="checkbox" name="" id=""
v-model="selectedUsers" :value="user"> <span>{{ user }}</span></li>
</ul>
</div>
<div class="select-list">
<p>선택된 사용자</p>
<ul>
<li v-for="(user, index) in selectedUsers" :key="index" class="flex"><span>{{ user
}}</span><button class="red-border-btn" @click="removeUser(index)">삭제</button></li>
</ul>
</div>
</div>
</div>
<div class="modal-end">
<button class="dark-gray-btn mgl5" @click="closeModal()">취소</button>
<button class="blue-btn" @click="managerInsert">저장</button>
</div>
</div>
</div>
</div>
</template>
<script>
import '@toast-ui/editor/dist/toastui-editor.css';
export default {
data() {
return {
oEditors: [], // oEditors는 스마트에디터용
// 모달창 오픈 상태
isModalOpen: false,
// 모달창 타입
modalType: null,
// user 배열
users: ['user1', 'user2', 'user3', 'user4'],
selectedUsers: [],
};
},
methods: {
// 모달 메서드
openModal: function () {
this.isModalOpen = true;
},
closeModal: function () {
this.isModalOpen = false;
console.log("1");
this.modalType = null;
console.log("2");
},
// user 삭제
removeUser(index) {
// 선택한 인덱스의 요소를 배열에서 제거
this.selectedUsers.splice(index, 1);
},
// 페이지 이동 메서드
selectList: function () {
this.$router.push({ path: '/adm/mailSelectList.page' });
},
},
watch: {
"modalType": function (newValue, oldValue) {
if (this.modalType != null) {
console.log("modalType watch: ", newValue, oldValue);
this.openModal();
}
},
},
computed: {},
components: {},
mounted() {
// 스마트 에디터 적용
const oEditors = this.oEditors;
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "smart",
sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
htParams: {
bUseToolbar: true, // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bSkipXssFilter: true,
bUseVerticalResizer: true,
bUseModeChanger: true
},
fCreator: "createSEditor2"
});
}
};
</script>
<style scoped>
.news-wrap,
.content-box {
width: 100%;
height: 100%;
font-size: 1.3rem;
}
</style>