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="card ">
<div class="card-body ">
<h2 class="card-title">카드정보 관리</h2>
<div class="flex align-top">
<div class="sch-form-wrap search">
<div class="input-group" style="display: flex;">
<select name="" id="" class="form-select">
<option value="">전체</option>
</select>
<div class="sch-input">
<input type="text" class="form-control">
<button class="ico-sch">
<SearchOutlined />
</button>
</div>
</div>
<div class="tbl-wrap table-scroll">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>카드목록 </th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 100%;">
<div class=" sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">카드 정보</h3>
<div class="buttons" style="margin: 0;">
<button type="submit" class="btn sm tertiary">신규</button>
<button type="reset" class="btn sm secondary">등록</button>
<button type="delete" class="btn sm btn-red">삭제</button>
</div>
</div>
<form class="row g-3 pt-3 needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">
<div class="col-12 ">
<label for="prvonsh" class="form-label">
<p>카드명
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<input type="text" class="form-control " id="reason" v-model="reason" />
</div>
<div class="col-12 ">
<label for="prvonsh" class="form-label">
<p>담당자
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<input type="text" class="form-control " id="reason" v-model="selectedname" readonly />
<input type="button" class="form-control " value="검색" @click="showPopup = true" />
<!-- 팝업 -->
<HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval"/>
</div>
<div class="col-12 chuljang ">
<label for="prvonsh" class="form-label">비고</label>
<input type="text" class="form-control textarea" id="reason" v-model="reason" />
</div>
<div class="col-12 border-x input-radio">
<label for="prvonsh" class="form-label">
<p>사용여부
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<div class="chk-area">
<div class="form-check">
<input type="radio" name="rdo_1" id="rdo_1">
<label for="rdo_1">사용</label>
</div>
<div class="form-check">
<input type="radio" name="rdo_1" id="rdo_2" checked>
<label for="rdo_2">미사용</label>
</div>
</div>
</div>
</form>
<div class=" sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">예약현황</h3>
</div>
<div class="tbl-wrap chk-area">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>부서</th>
<th>신청자</th>
<th>기간</th>
<th>상태</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td>{{ item.buseo }}</td>
<td>{{ item.user }}</td>
<td>{{ item.startDate }} ~ {{ item.endDate }}</td>
<td :class="getStatusClass(item.status)">
{{ item.status }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<ul>
<!-- 왼쪽 화살표 (이전 페이지) -->
<li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
<
</li>
<!-- 페이지 번호 -->
<li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
@click="changePage(page)">
{{ page }}
</li>
<!-- 오른쪽 화살표 (다음 페이지) -->
<li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import HrPopup from "../../../component/Popup/HrPopup.vue";
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
export default {
data() {
return {
showPopup: false,
selectedname: '',
approvals: [],
require: "/client/resources/img/require.png",
h3icon: "/client/resources/img/h3icon.png",
photoicon: "/client/resources/img/photo_icon.png",
img1: "/client/resources/img/img.png",
icon1: "/client/resources/img/icon.png",
dateicon: "/client/resources/img/date.png",
startbtn: "/client/resources/img/start.png",
stopbtn: "/client/resources/img/stop.png",
moreicon: "/client/resources/img/more.png",
today: new Date().toLocaleDateString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
weekday: 'short',
}),
time: this.getCurrentTime(),
listData: [
{
buseo: '',
user: '김철수',
startDate: '2025-05-01',
endDate: '2025-05-03',
status: '예약', // 사용중
},
{
buseo: '',
user: '이영희',
startDate: '2025-05-05',
endDate: '2025-05-06',
status: '예약', // 예약됨
},
{
buseo: '',
user: '박민호',
startDate: '2025-04-25',
endDate: '2025-04-28',
status: '반납', // 반납됨
},
],
}
},
components: {
SearchOutlined, CloseCircleFilled, HrPopup
},
methods: {
addApproval(selectedUser) {
this.approvals.push({
name: selectedUser.name
});
this.selectedname = selectedUser.name; // 입력창에 표시
this.showPopup = false;
},
formatBudget(amount) {
return new Intl.NumberFormat().format(amount) + ' 원';
},
isPastPeriod(period) {
// 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
const endDateStr = period.split('~')[1]?.trim();
if (!endDateStr) return false;
const endDate = new Date(endDateStr);
const today = new Date();
// 현재 날짜보다 과거면 true
return endDate < today;
},
getStatusClass(status) {
return status === 'active' ? 'status-active' : 'status-inactive';
},
getStatusClass(status) {
if (status === '예약') return 'status-pending';
if (status === '반납') return 'status-approved';
// Default empty string
return '';
},
getCurrentTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
},
getCategoryClass(category) {
switch (category) {
case '용역': return 'category-service';
case '내부': return 'category-internal';
case '국가과제': return 'category-government';
default: return '';
}
},
},
watch: {
},
computed: {
},
mounted() {
console.log('main mounted');
setInterval(() => {
this.time = this.getCurrentTime();
}, 1000);
}
}
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>