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
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>