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="col-lg-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">프로젝트 현황</h2>
<!-- //폼그룹 -->
<div class="boxs">
<div class="color-boxs">
<div class="box ">
<h3>전체</h3>
3
</div>
<div class="box blue">
<h3>진행중</h3>
3
</div>
<div class="box red">
<h3>미진행</h3>
3
</div>
<div class="box green">
<h3>완료</h3>
3
</div>
</div>
</div>
<div class="sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">승인 대기</h3>
<div class="input-group">
<select name="" id="" class="form-select">
<option :value="currentYear">{{ currentYear }}년</option>
<option value="all">전체</option>
<option v-for="year in remainingYears" :key="year" :value="year" v-if="year !== currentYear">
{{ year }}년
</option>
</select>
<select name="" id="" class="form-select">
<option :value="currentMonth">{{ currentMonth }}월</option>
<option value="all">전체</option>
<option v-for="month in remainingMonths" :key="month" :value="month" v-if="month !== currentMonth">
{{ month }}월
</option>
</select>
<select name="" id="" class="form-select">
<option value="">부서</option>
</select>
<select name="" id="" class="form-select">
<option value="">전체</option>
<option value="">프로젝트명</option>
<option value="">PM</option>
</select>
<div class="sch-input">
<input type="text" class="form-control">
<button class="ico-sch"><SearchOutlined /></button>
</div>
</div>
</div>
<!-- Table -->
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>구분 </th>
<th>부서</th>
<th>프로젝트명</th>
<th>PM</th>
<th>사업비</th>
<th>기간</th>
<th>상태</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr
v-for="(item, index) in listData"
:key="index"
@click="goToDetailPage(item)"
:class="{ 'expired': isPastStatus(item.status) }"
>
<td>{{ item.type }}</td>
<td>{{ item.department }}</td>
<td>{{ item.projectName }}</td>
<td>{{ item.pm }}</td>
<td>{{ item.budget }}</td>
<td>{{ item.period }}</td>
<td :class="getStatusClass(item.status)">
{{ item.status }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<ul>
<!-- 왼쪽 화살표 (이전 페이지) -->
<li
class="arrow"
:class="{ disabled: currentPage === 1 }"
@click="changePage(currentPage - 1)"
>
<
</li>
<!-- 페이지 번호 -->
<li
v-for="page in totalPages"
:key="page"
:class="{ active: currentPage === page }"
@click="changePage(page)"
>
{{ page }}
</li>
<!-- 오른쪽 화살표 (다음 페이지) -->
<li
class="arrow"
:class="{ disabled: currentPage === totalPages }"
@click="changePage(currentPage + 1)"
>
>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
export default {
data() {
return {
currentMonth,
selectedMonth: currentMonth,
remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
currentYear,
selectedYear: currentYear,
remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
showOptions: false,
currentPage: 1,
totalPages: 3,
photoicon: "/client/resources/img/photo_icon.png",
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
listData: [
{
type: '내부',
department: '기획팀',
projectName: '신규 플랫폼 개발',
pm: '김PM',
budget: '₩50,000,000',
period: '2025-05-01 ~ 2025-08-31',
status: '진행중'
},
{
type: '내부',
department: '기획팀',
projectName: '신규 플랫폼 개발',
pm: '김PM',
budget: '₩50,000,000',
period: '2025-05-01 ~ 2025-08-31',
status: '미진행'
},
{
type: '외부',
department: '운영팀',
projectName: '유지보수 프로젝트',
pm: '박PM',
budget: '₩20,000,000',
period: '2025-03-01 ~ 2025-04-30',
status: '완료'
}],
filteredData: [],
};
},
components:{
SearchOutlined
},
computed: {
},
methods: {
goToAttendancePage(item) {
this.$router.push({ name: 'AttendanceDetail', query: { id: item.id } });
},
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.currentPage = page;
this.$emit('page-changed', page); // 필요 시 부모에 알림
},
async onClickSubmit() {
// `useMutation` 훅을 사용하여 mutation 함수 가져오기
const { mutate, onDone, onError } = useMutation(mygql);
try {
const result = await mutate();
console.log(result);
} catch (error) {
console.error('Mutation error:', error);
}
},
goToDetailPage(item) {
// item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
this.$router.push({ name: 'projectDetail', query: { id: item.id } });
},
// 상태에 따른 클래스 반환 메소드
getStatusClass(status) {
return status === 'active' ? 'status-active' : 'status-inactive';
},
getStatusClass(status) {
if (status === '완료') return 'status-green';
if (status === '진행중') return 'status-approved';
if (status === '미진행') return 'status-pending';
return '';
},
isPastStatus(status) {
return status === '완료' ; // 조건은 필요 시 조정
},
},
created() {
},
mounted() {
},
};
</script>
<style scoped>
tr{cursor: pointer;}
.content .card .color-boxs .box{
width: calc(100% / 4);
}
</style>