<template> <div class="popup-overlay" @click.self="$emit('close')"> <div class="popup-content"> <div class="card"> <div class="card-body"> <div class="buttons" style="margin: 3rem 0 1rem 0;"> <button type="submit" class="btn sm tertiary xsm">다운로드<VerticalAlignBottomOutlined /></button> </div> <div class="form-card "> <h2>임금명세서</h2> <p class="paydate">지급일 : 2025-04-10</p> <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate> <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" 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" required readonly> </div> </div> <div class="col-12 border-x"> <div class="col-12 border-x"> <label for="youremail" class="form-label">부서</label> <input v-model="email" type="text" name="username" class="form-control" 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" required readonly> </div> </div> </form> <div class="tbl-wrap " style="margin-top: 1rem;"> <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> </div> </div> <button @click="$emit('close')" class="close-btn"> <CloseCircleFilled /> </button> </div> </div> </template> <script> import { SearchOutlined, CloseCircleFilled,VerticalAlignBottomOutlined } from '@ant-design/icons-vue'; export default { data() { return { } }, components: { SearchOutlined, CloseCircleFilled, VerticalAlignBottomOutlined }, methods: { selectCar(item) { this.$emit('select', item); // 부모에게 데이터 전달 }, } } </script> <style scoped> .popup-content { width: 50%; } h2{font-size: 35px; letter-spacing: 10px;} table{width: 100%;} .form-control { border-color: #C7CFE3; } .paydate{text-align: end;} </style>