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>
<form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
@submit.prevent="handleRegister" novalidate >
<div class="col-12">
<label for="yourName" class="form-label"><p>아이디<p class="require"><img :src="require" alt=""></p></p> </label>
<input v-model="selectedid" type="text" name="name" class="form-control" required readonly
>
<input type="button" class="form-control " value="검색" @click="showPopup1 = true" />
<HrPopup v-if="showPopup1" @close="showPopup1 = false" @select="addApproval" />
</div>
<div class="col-12 ">
<div class="col-12 border-x">
<label for="youremail" class="form-label ">이름</label>
<input v-model="selectedname" type="text" class="form-control" required readonly>
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">부서</label>
<input v-model="selecteddepartment" type="text" class="form-control"
required readonly >
</div>
</div>
<div class="col-12">
<div class="col-12 border-x">
<label for="youremail" class="form-label">직급</label>
<input v-model="selectedposition" type="text" class="form-control" required readonly
>
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">직책</label>
<input v-model="selectedrole" type="text" 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"><p>월<p class="require"><img :src="require" alt=""></p></p> </label>
<select name="" id="" class="form-select">
<option value="">월</option>
</select>
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label"><p>지급일<p class="require"><img :src="require" alt=""></p></p> </label>
<input type="date" class="form-control"
required >
</div>
</div>
</form>
<div class="buttons" style="margin: 10px 0;">
<button type="submit" class="btn btn-red sm">지난달 정보 불러오기</button>
<button type="submit" class="btn primary sm" @click="showPopup = true">출장비 조회</button>
<ChuljangListPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
</div>
<form class="row g-3 needs-validation" @submit.prevent="handleSubmit">
<div class="col-12 form-title">매월지급</div>
<div class="col-12">
<label for="purpose" class="form-label"><p>지급 <button type="button" title="추가" @click="addPayment">
<PlusCircleFilled />
</button><p class="require"><img :src="require" alt=""></p></p> </label>
<div class="approval-container">
<div v-for="(payment, index) in payments" :key="index" class="d-flex gap-2 addapproval mb-2">
<select class="form-select" style="width: 200px;" v-model="payment.category">
<option value="기본급">기본급</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="text" class="form-control" v-model="payment.pay" />
<button type="button" @click="removePayment(index)" class="delete-button">
<CloseOutlined />
</button>
</div>
</div>
</div>
<div class="col-12 border-x">
<label for="purpose" class="form-label"><p>공제 <button type="button" title="추가" @click="addGongje">
<PlusCircleFilled />
</button><p class="require"><img :src="require" alt=""></p></p> </label>
<div class="approval-container">
<div class="d-flex addapproval">
<select class="form-select" style="width: 200px;" >
<option value="국민연금">국민연금</option>
<option value="">건강보험</option>
<option value="">고용보험</option>
<option value="">장기요양</option>
<option value="">소득세</option>
<option value="">지방소득세</option>
</select>
<input type="text" class="form-control" />
</div>
<div class="d-flex addapproval">
<select class="form-select" style="width: 200px;" >
<option value="국민연금">국민연금</option>
<option value="">건강보험</option>
<option value="">고용보험</option>
<option value="">장기요양</option>
<option value="">소득세</option>
<option value="">지방소득세</option>
</select>
<input type="text" class="form-control" />
</div>
<div class="d-flex addapproval">
<select class="form-select" style="width: 200px;" >
<option value="국민연금">국민연금</option>
<option value="">건강보험</option>
<option value="">고용보험</option>
<option value="">장기요양</option>
<option value="">소득세</option>
<option value="">지방소득세</option>
</select>
<input type="text" class="form-control" />
</div>
<div class="d-flex addapproval">
<select class="form-select" style="width: 200px;" >
<option value="국민연금">국민연금</option>
<option value="">건강보험</option>
<option value="">고용보험</option>
<option value="">장기요양</option>
<option value="">소득세</option>
<option value="">지방소득세</option>
</select>
<input type="text" class="form-control" />
</div>
<div class="d-flex addapproval">
<select class="form-select" style="width: 200px;" >
<option value="국민연금">국민연금</option>
<option value="">건강보험</option>
<option value="">고용보험</option>
<option value="">장기요양</option>
<option value="">소득세</option>
<option value="">지방소득세</option>
</select>
<input type="text" class="form-control" />
</div>
<div class="d-flex addapproval">
<select class="form-select" style="width: 200px;" >
<option value="국민연금">국민연금</option>
<option value="">건강보험</option>
<option value="">고용보험</option>
<option value="">장기요양</option>
<option value="">소득세</option>
<option value="">지방소득세</option>
</select>
<input type="text" class="form-control" />
</div>
<div v-for="(gongje, index) in gongjes" :key="index" class="d-flex addapproval">
<select class="form-select" style="width: 200px;" v-model="gongje.category">
<option value="">기본급</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="text" class="form-control" v-model="gongje.pay" />
<button type="button" @click="removeGongje(index)" class="delete-button">
<CloseOutlined />
</button>
</div>
</div>
</div>
</form>
<form class="row g-3 needs-validation" @submit.prevent="handleSubmit" style="margin-top: 10px;">
<div class="col-12 form-title">격월 또는 부정기 지급</div>
<div class="col-12">
<label for="purpose" class="form-label"><p>지급 <button type="button" title="추가" @click="addPayment2">
<PlusCircleFilled />
</button><p class="require"><img :src="require" alt=""></p></p> </label>
<div class="approval-container">
<div v-for="(payment, index) in payments2" :key="index" class="d-flex gap-2 addapproval mb-2">
<select class="form-select" style="width: 200px;" v-model="payment.category">
<option value="선택">선택</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="text" class="form-control" v-model="payment.pay" />
<button type="button" @click="removePayment2(index)" class="delete-button">
<CloseOutlined />
</button>
</div>
</div>
</div>
<div class="col-12 border-x">
<label for="purpose" class="form-label"><p>공제 <button type="button" title="추가" @click="addGongje2">
<PlusCircleFilled />
</button><p class="require"><img :src="require" alt=""></p></p> </label>
<div class="approval-container">
<div v-for="(gongje, index) in gongjes2" :key="index" class="d-flex addapproval">
<select class="form-select" style="width: 200px;" v-model="gongje.category">
<option value="선택">선택</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="text" class="form-control" v-model="gongje.pay" />
<button type="button" @click="removeGongje2(index)" class="delete-button">
<CloseOutlined />
</button>
</div>
</div>
</div>
</form>
<form class="row g-3 needs-validation" @submit.prevent="handleSubmit" style="margin-top: 10px;">
<div class="col-12 form-title">계산방법<button type="button" title="추가" @click="addTr">
<PlusCircleFilled />
</button></div>
<div class="col-12 border-x" >
<div class="tbl-wrap tbl3">
<table class="tbl">
<thead>
<tr>
<th>지급</th>
<th>산출식 또는 산출 방법</th>
<th>지급액(원)</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in listData" :key="index" >
<td>
<select class="form-select" v-model="item.payType">
<option value="">선택</option>
<option value=""></option>
<option value=""></option>
</select>
</td>
<td><input type="text" class="form-control" v-model="item.formula" /></td>
<td><input type="text" class="form-control" v-model="item.amount" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<form class="row g-3 needs-validation" @submit.prevent="handleSubmit" style="margin-top: 10px;">
<div class="col-12 border-x">
<label for="purpose" class="form-label">지급 </label>
<input type="text" class="form-control">
<label for="purpose" class="form-label">지급 </label>
<input type="text" class="form-control">
<label for="purpose" class="form-label">지급 </label>
<input type="text" class="form-control">
</div>
</form>
<div class="buttons">
<button type="submit" class="btn primary">등록</button>
<button type="submit" class="btn tertiary">취소</button>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
import HrPopup from "../../../component/Popup/HrPopup.vue";
import ChuljangListPopup from "../../../component/Popup/ChuljangListPopup.vue";
export default {
data() {
return {
showPopup: false,
showPopup1: false,
selectedid: '',
selectedname: '',
selectedposition: '',
selectedrole: '',
selecteddepartment: '',
approvals: [],
listData: [
{ payType: '', formula: '', amount: '' }
],
payments: [ {
category: '기본급',
pay: '',
},] ,
gongjes: [ {
category: '기본급',
pay: '',
},] ,
payments2: [ {
category: '선택',
pay: '',
},] ,
gongjes2: [ {
category: '선택',
pay: '',
},] ,
require: "/client/resources/img/require.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(),
}
},
components: {
PlusCircleFilled, CloseOutlined, HrPopup, ChuljangListPopup
},
methods: {
addApproval(selectedUser) {
this.approvals.push({
id: selectedUser.id,
name: selectedUser.name,
department: selectedUser.department,
position: selectedUser.position,
role: selectedUser.role,
});
this.selectedid = selectedUser.id; // 입력창에 표시
this.selectedname = selectedUser.name; // 입력창에 표시
this.selecteddepartment = selectedUser.department; // 입력창에 표시
this.selectedposition = selectedUser.position; // 입력창에 표시
this.selectedrole = selectedUser.role; // 입력창에 표시
this.showPopup1 = false;
},
addTr() {
this.listData.push({ payType: '', formula: '', amount: '' });
},
addPayment() {
this.payments.push({
category: '선택',
pay: '',
});
},
removePayment(index) {
this.payments.splice(index, 1);
},
addGongje() {
this.gongjes.push({
category: '선택',
pay: '',
});
},
removeGongje(index) {
this.gongjes.splice(index, 1);
},
addPayment2() {
this.payments2.push({
category: '선택',
pay: '',
});
},
removePayment2(index) {
this.payments2.splice(index, 1);
},
addGongje2() {
this.gongjes2.push({
category: '선택',
pay: '',
});
},
removeGongje2(index) {
this.gongjes2.splice(index, 1);
},
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;}
.approval-container{
width: 100%;
}
.addapproval input{
width: calc(100% - 240px);
}
</style>