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="title-box flex justify-between mb40">
<p class="title">게시판</p>
<select name="" id="">
<option value="">A반</option>
</select>
</div>
<div class="flex justify-end mb20">
<div class="search-wrap ">
<select name="" id="" class="mr10 data-wrap">
<option value="">전체</option>
</select>
<input type="text" placeholder="검색하세요.">
<button type="button" title="위원회 검색">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch">
학생 추가
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<td>No.</td>
<td>학년</td>
<td>반</td>
<td>성별</td>
<td>이름</td>
</thead>
<tbody>
<tr @click="goToPage('StudentDetail')">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
<button class="selected-btn">1</button>
<button>2</button>
<button>3</button>
<button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
</article>
<div class="flex justify-end ">
</div>
</div>
<div v-show="searchOpen" class="popup-wrap">
<div class="popup-box ">
<div class="flex justify-between mb30">
<p class="popup-title">학생 검색</p>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
<div class="search-wrap mb30">
<input type="text" class="data-wrap" placeholder="">
<button type="button" >
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<td>No.</td>
<td>학년</td>
<td>반</td>
<td>번호</td>
<td>이름</td>
<td>선택</td>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" class="ui-checkbox"></td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
<button class="selected-btn">1</button>
<button>2</button>
<button>3</button>
<button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
</article>
<div class="flex justify-end ">
</div>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10">
취소
</button>
<button type="button" title="" class="new-btn">
등록
</button>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
export default {
data() {
return {
mdiMagnify: mdiMagnify,
mdiWindowClose: mdiWindowClose,
showModal: false,
searchOpen: false,
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
showConfirm(type) {
let message = '';
if (type === 'cancel') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
},
},
watch: {
},
computed: {
},
components: {
SvgIcon
},
mounted() {
console.log('Main2 mounted');
}
}
</script>