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="pagetitle">
<h2>프로젝트 내역</h2>
</div>
<!-- End Page Title -->
<section class="section">
<div class="row">
<!-- 해당년도 연차 수 -->
<!-- 전체 -->
<div class="col-xxl-2 col-md-3">
<button type="button" class="btn btn-light mb-2">
전체 <span class="badge bg-secondary text-light">개</span>
</button>
</div>
<!-- End 전체 -->
<div class="col-xxl-2 col-md-3">
<button type="button" class="btn btn-light mb-2">
진행중 프로젝트 <span class="badge bg-secondary text-light">개</span>
</button>
</div>
<div class="col-xxl-2 col-xl-3">
<button type="button" class="btn btn-light mb-2">
완료된 프로젝트 <span class="badge bg-secondary text-light">개</span>
</button>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">프로젝트 내역</h5>
<div class="d-flex pb-3 justify-content-between">
<div class="datatable-search d-flex gap-1 ">
<div class="col-xxl-5 col-md-4">
<select class="form-select" v-model="selectedYear">
<option value="">전체</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}</option>
</select>
</div>
<div class="col-xxl-5 col-md-4">
<select class="form-select" v-model="selectedMonth">
<option value="">월</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}</option>
</select>
</div>
<button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-4"
@click="filterData">조회</button>
</div>
<div class="d-flex justify-content-end ">
<button type="button" class="btn btn-outline-primary">
등록
</button>
<button type="button" class="btn btn-outline-secondary" @click="deletePending">
삭제
</button>
</div>
</div>
<!-- Table -->
<table id="myTable" class="table datatable table-hover table-bordered">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">프로젝트명</th>
<th rowspan="2">주관</th>
<th colspan="4" class="text-center">기간</th>
<th rowspan="2">총 투입일</th>
<th rowspan="2">비고</th>
</tr>
<tr>
<th data-type="date" data-format="YYYY/DD/MM">사업시작</th>
<th data-type="date" data-format="YYYY/DD/MM">사업종료</th>
<th data-type="date" data-format="YYYY/DD/MM">투입시작</th>
<th data-type="date" data-format="YYYY/DD/MM">투입종료</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in ProjectData" :key="index">
<td>
<div class="form-check">
<label class="form-check-label" for="acceptTerms">{{ index + 1 }}</label>
<input v-model="item.acceptTerms" class="form-check-input" type="checkbox" />
</div>
</td>
<td>{{ item.projectNm }}</td>
<td>{{ item.orgNm }}</td>
<td>{{ item.BstartDate }}</td>
<td>{{ item.BendDate }}</td>
<td>{{ item.MystartDate }}</td>
<td>{{ item.MyendDate }}</td>
<td>{{ item.totalDays }}</td>
<td>{{ item.rm }}</td>
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
years: [2023, 2024, 2025],
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
selectedYear: '',
selectedMonth: '',
filteredData: [],
};
},
methods: {
deletePending() {
const selectedItems = this.ProjectData.filter(item => item.acceptTerms);
const nonDeletableItems = selectedItems.filter(item => item.approvalStatus === true);
if (nonDeletableItems.length > 0) {
alert("승인된 건은 삭제할 수 없습니다.");
return;
}
if (selectedItems.length > 0) {
this.ProjectData = this.ProjectData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
filterData() {
if (!this.selectedYear && !this.selectedMonth) {
this.filteredData = this.ProjectData;
} else {
this.filteredData = this.ProjectData.filter(item => {
const itemYear = new Date(item.BstartDate).getFullYear();
const itemMonth = new Date(item.BstartDate).getMonth() + 1;
return (
(!this.selectedYear || itemYear === parseInt(this.selectedYear)) &&
(!this.selectedMonth || itemMonth === parseInt(this.selectedMonth))
);
});
}
this.updateTotalDays();
},
updateTotalDays() {
// filteredData에서 각 항목의 totalDays 계산
this.filteredData.forEach(item => {
const mystartDate = new Date(item.MystartDate);
const myendDate = new Date(item.MyendDate);
// 날짜 차이 계산 (밀리초 단위로 계산 후, 일수로 변환)
const timeDiff = myendDate - mystartDate;
const daysDiff = timeDiff / (1000 * 60 * 60 * 24);
item.totalDays = daysDiff >= 0 ? daysDiff : 0;
});
},
},
created() {
// 로컬스토리지에서 기존 데이터가 있으면 불러오기
const storedData = localStorage.getItem('projectFormData');
console.log(storedData);
if (storedData) {
// Parse the data and wrap it in an array
const parsedData = JSON.parse(storedData);
// Ensure the data is in an array format
this.ProjectData = Array.isArray(parsedData) ? parsedData : [parsedData];
}
},
mounted() {
const currentYear = new Date().getFullYear();
this.selectedYear = currentYear;
this.updateTotalDays();
},
};
</script>
<style scoped></style>