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