<template> <div class="card "> <div class="card-body"> <h2 class="card-title">직원별 급여명세서</h2> <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate> <div class="col-12"> <label for="yourName" class="form-label">아이디</label> <input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly placeholder="admin"> </div> <div class="col-12 "> <div class="col-12 border-x"> <label for="youremail" class="form-label ">이름<p class="require"><img :src="require" alt=""></p></label> <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly> </div> <div class="col-12 border-x"> <label for="yourPassword" class="form-label">부서</label> <input v-model="password" type="password" name="password" class="form-control" id="yourPassword" required readonly > </div> </div> <div class="col-12"> <div class="col-12 border-x"> <label for="youremail" class="form-label">직급</label> <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly > </div> <div class="col-12 border-x"> <label for="yourPassword" class="form-label">직책</label> <input v-model="password" type="password" name="password" class="form-control" id="yourPassword" required readonly> </div> </div> <div class="col-12 border-x"> <div class="col-12 border-x"> <label for="youremail" class="form-label">월</label> <select name="" id="" class="form-select"> <option value="">월</option> </select> </div> <div class="col-12 border-x"> <label for="yourPassword" class="form-label">지급일</label> <input v-model="password" type="password" name="password" class="form-control" id="yourPassword" required readonly> </div> </div> </form> <div class="tbl-wrap tbl2" style="margin-top: 3rem;"> <table id="myTable" class="tbl data"> <!-- 동적으로 <th> 생성 --> <thead> <tr class="toptitle"><th colspan="5" >세부내역</th></tr> <tr class="middletitle"> <th colspan="3">지급</th> <th colspan="2">공제</th> </tr> </thead> <!-- 동적으로 <td> 생성 --> <tbody> <tr> <th rowspan="7">매월 지급 </th> <th>임금항목</th> <th>지급 금액(원)</th> <th>공제 항목</th> <th>공제 금액(원)</th> </tr> <tr > <td></td> <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tbody> <tr> <th rowspan="3">격월 또는 부정기 지급</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th colspan="2">지급액 계</th> <td></td> <th >지금액 계</th> <td></td> </tr> <tr> <td colspan="3"></td> <th> 실수령액(원)</th> <td></td> </tr> </tbody> </table> <table id="myTable" class="tbl data" style="margin-top: 10px;"> <!-- 동적으로 <th> 생성 --> <thead> <tr class="toptitle"><th colspan="3" >세부내역</th></tr> <tr > <th >구분</th> <th>산출식 또는 산출방법</th> <th>지급액(원)</th> </tr> </thead> <!-- 동적으로 <td> 생성 --> <tbody> <tr > <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <div class="buttons"> <button type="submit" class="btn sm tertiary">목록</button> </div> </div> </div> </template> <script> import GoogleCalendar from "../../../component/GoogleCalendar.vue" export default { data() { return { 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: [ { type: '내부', projectName: 'AI 개발 프로젝트', pm: '홍길동', budget: 50000000, period: '2024-01-01 ~ 2024-12-31', status: '진행중' }, { type: '외부', projectName: '웹 리뉴얼', pm: '김영희', budget: 20000000, period: '2023-01-01 ~ 2023-12-31', status: '미진행' } ] } }, methods: { 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: { }, components: { GoogleCalendar, }, mounted() { console.log('main mounted'); setInterval(() => { this.time = this.getCurrentTime(); }, 1000); } } </script> <style scoped> tr{cursor: pointer;} </style>