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>
<p class="require"><img :src="require" alt=""> 필수입력</p>
<!-- Multi Columns Form -->
<form class="row g-3 needs-validation" @submit.prevent="handleSubmit">
<div class="col-12">
<label for="inputName5" class="form-label"><p>프로젝트명<p class="require"><img :src="require" alt=""></p></p></label>
<input type="text" class="form-control" />
</div>
<div class="col-12">
<label for="inputName5" class="form-label"><p>회의록 제목<p class="require"><img :src="require" alt=""></p></p></label>
<input type="text" class="form-control" />
</div>
<div class="col-12">
<label for="startDate" class="form-label"><p>일시<p class="require"><img :src="require" alt=""></p></p></label>
<div class="d-flex gap-1">
<input type="date" class="form-control" id="startDate" v-model="startDate" />
<input type="time" class="form-control" id="startTime" v-model="startTime" />
~
</div>
<div class="d-flex gap-1">
<input type="date" class="form-control" id="endDate" v-model="endDate" />
<input type="time" class="form-control" id="endTime" v-model="endTime" />
</div>
</div>
<div class="col-12">
<label for="endDate" class="form-label"><p>장소<p class="require"><img :src="require" alt=""></p></p></label>
<input type="text" class="form-control" />
</div>
<div class="col-12 ">
<label for="dayCount" class="form-label">참석자<button type="button" title="추가" @click="showPopup = true">
<PlusCircleFilled />
</button></label>
<HrPopup v-if="showPopup" @close="showPopup = false" @select="addMember"/>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>소속</th>
<th>직위</th>
<th>이름</th>
<th>삭제</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(member, index) in members" :key="index">
<td><input type="text" class="form-control" v-model="member.department" /></td>
<td><input type="text" class="form-control" v-model="member.position" /></td>
<td><input type="text" class="form-control" v-model="member.name" /></td>
<td>
<button type="button" @click="removeMember(index)">
<CloseOutlined />
</button>
</td>
</tr>
</tbody>
</table>
</div>
</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 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">
<label for="member" class="form-label">
회의비
<button type="button" title="추가" @click="addReceipt">
<PlusCircleFilled />
</button>
</label>
<div class="approval-container">
<div v-for="(receipt, index) in receipts" :key="index" class="d-flex gap-2 addapproval mb-2">
<input type="text" class="form-control" v-model="receipt.name" style="max-width: 150px;" placeholder="여비내역입력"/>
<input type="text" class="form-control" v-model="receipt.cost" style="max-width: 150px;" placeholder="금액입력"/>
<!-- 커스텀 업로드 버튼 -->
<label :for="'fileUpload-' + index" class="upload-label">
영수증 첨부
</label>
<!-- 실제 파일 input (숨김 처리) -->
<input
:id="'fileUpload-' + index"
type="file"
@change="handleFileUpload(index, $event)"
class="hidden-file-input"
/>
<!-- 선택된 파일 이름 표시 -->
<span v-if="receipt.fileName" class="file-name">{{ receipt.fileName }}</span>
<button type="button" @click="removeReceipt(index)" class="delete-button">
<CloseOutlined />
</button>
</div>
</div>
</div>
</form><!-- End Multi Columns Form -->
<div class="buttons">
<button type="submit" class="btn sm primary">등록</button>
<button type="reset" class="btn sm tertiary">취소</button>
</div>
</div>
</div>
</template>
<script>
import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
import HrPopup from '../../../component/Popup/HrPopup.vue';
export default {
data() {
const today = new Date().toISOString().split('T')[0];
return {
showPopup: false,
receipts: [
{
name: '',
cost: '',
},
],
members: [] ,
approvals: [],
require: "/client/resources/img/require.png",
startDate: today,
startTime: "09:00", // 기본 시작 시간 09:00
endDate: today,
endTime: "18:00", // 기본 종료 시간 18:00
category: "",
dayCount: 1,
reason: "", // 사유
fileName: '',
};
},
components: {
PlusCircleFilled, CloseOutlined, HrPopup
},
computed: {
},
methods: {
handleFileUpload(index, event) {
const file = event.target.files[0];
if (file) {
this.receipts[index].file = file;
this.receipts[index].fileName = file.name;
}
},
addReceipt() {
this.receipts.push({
name: '',
cost: '',
file: null,
});
},
removeReceipt(index) {
this.receipts.splice(index, 1);
},
addMember(selectedUser) {
this.members.push({
department: selectedUser.department,
position: selectedUser.position,
name: selectedUser.name, // or other fields if needed
});
this.showPopup = false; // 팝업 닫기
},
removeMember(index) {
this.members.splice(index, 1);
},
addApproval(selectedUser) {
this.approvals.push({
category: '결재',
name: selectedUser.name, // or other fields if needed
});
this.showPopup = false; // 팝업 닫기
},
// 승인자 삭제
removeApproval(index) {
this.approvals.splice(index, 1);
},
calculateDayCount() {
const start = new Date(`${this.startDate}T${this.startTime}:00`);
const end = new Date(`${this.endDate}T${this.endTime}:00`);
let totalHours = (end - start) / (1000 * 60 * 60); // 밀리초를 시간 단위로 변환
if (this.startDate !== this.endDate) {
// 시작일과 종료일이 다른경우
const startDateObj = new Date(this.startDate);
const endDateObj = new Date(this.endDate);
const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
if (this.startTime !== "09:00" || this.endTime !== "18:00") {
this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
} else {
this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
}
} else {
// 시작일과 종료일이 같은 경우
if (this.startTime !== "09:00" || this.endTime !== "18:00") {
this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
} else {
this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
}
}
},
},
mounted() {
},
};
</script>
<style scoped>
table th, table td{border: 0; border-bottom: 0 !important;}
</style>