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