1ㅊㅏ완료
This commit is contained in:
@@ -43,6 +43,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 요약 -->
|
||||
<div class="card mb-4" v-if="summary.aiSummary">
|
||||
<div class="card-header bg-primary bg-opacity-10">
|
||||
<i class="bi bi-robot me-2"></i><strong>AI 요약</strong>
|
||||
<small class="text-muted ms-2" v-if="summary.aiSummaryAt">
|
||||
({{ formatDateTime(summary.aiSummaryAt) }})
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="ai-summary" v-html="renderMarkdown(summary.aiSummary)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PM 검토 영역 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
@@ -121,17 +134,29 @@
|
||||
<i class="bi bi-check-circle me-1"></i>금주 실적
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
<pre class="mb-0 small" style="white-space: pre-wrap;">{{ report.workDescription || '-' }}</pre>
|
||||
<div v-if="report.workTasks && report.workTasks.length > 0">
|
||||
<div v-for="(task, idx) in report.workTasks" :key="idx" class="mb-1">
|
||||
<span class="badge me-1" :class="task.isCompleted ? 'bg-success' : 'bg-warning'">
|
||||
{{ task.isCompleted ? '완료' : '진행' }}
|
||||
</span>
|
||||
<span class="small" style="white-space: pre-wrap;">{{ task.description }}</span>
|
||||
<span class="text-muted small ms-1">({{ task.hours }}h)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="small text-muted">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차주 계획 -->
|
||||
<div class="mb-3" v-if="report.planDescription">
|
||||
<div class="mb-3" v-if="report.planTasks && report.planTasks.length > 0">
|
||||
<label class="form-label text-muted small">
|
||||
<i class="bi bi-calendar-event me-1"></i>차주 계획
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
<pre class="mb-0 small" style="white-space: pre-wrap;">{{ report.planDescription }}</pre>
|
||||
<div v-for="(task, idx) in report.planTasks" :key="idx" class="mb-1">
|
||||
<span class="small" style="white-space: pre-wrap;">{{ task.description }}</span>
|
||||
<span class="text-muted small ms-1">({{ task.hours }}h)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -237,4 +262,38 @@ function formatDateTime(dateStr: string) {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleString('ko-KR')
|
||||
}
|
||||
|
||||
// 간단한 마크다운 렌더링
|
||||
function renderMarkdown(text: string): string {
|
||||
if (!text) return ''
|
||||
return text
|
||||
// 헤더
|
||||
.replace(/^### (.+)$/gm, '<h5 class="mt-3 mb-2">$1</h5>')
|
||||
.replace(/^## (.+)$/gm, '<h4 class="mt-3 mb-2">$1</h4>')
|
||||
.replace(/^# (.+)$/gm, '<h3 class="mt-3 mb-2">$1</h3>')
|
||||
// 볼드
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
// 이탤릭
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
// 리스트
|
||||
.replace(/^- (.+)$/gm, '<li>$1</li>')
|
||||
.replace(/(<li>.*<\/li>\n?)+/g, '<ul class="mb-2">$&</ul>')
|
||||
// 줄바꿈
|
||||
.replace(/\n/g, '<br>')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ai-summary {
|
||||
line-height: 1.7;
|
||||
}
|
||||
.ai-summary h3, .ai-summary h4, .ai-summary h5 {
|
||||
color: #333;
|
||||
}
|
||||
.ai-summary ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.ai-summary li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
426
frontend/report/summary/[year]/[week].vue
Normal file
426
frontend/report/summary/[year]/[week].vue
Normal file
@@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div>
|
||||
<AppHeader />
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
<div class="mb-4">
|
||||
<NuxtLink to="/report/summary" class="text-decoration-none">
|
||||
<i class="bi bi-arrow-left me-1"></i> 목록으로
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-if="weekInfo">
|
||||
<!-- 주차 헤더 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-calendar-week me-2"></i>
|
||||
{{ weekInfo.reportYear }}년 {{ weekInfo.reportWeek }}주차 취합 보고서
|
||||
</h5>
|
||||
<button class="btn btn-light btn-sm" @click="doReaggregate" :disabled="isReaggregating">
|
||||
<span v-if="isReaggregating">
|
||||
<span class="spinner-border spinner-border-sm me-1"></span>처리중...
|
||||
</span>
|
||||
<span v-else>
|
||||
<i class="bi bi-arrow-repeat me-1"></i>취합 다시하기
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label text-muted small">기간</label>
|
||||
<p class="mb-0 fw-bold">{{ formatDate(weekInfo.weekStartDate) }} ~ {{ formatDate(weekInfo.weekEndDate) }}</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label text-muted small">프로젝트</label>
|
||||
<p class="mb-0 fw-bold">{{ weekInfo.totalProjects }}개</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label text-muted small">총 투입시간</label>
|
||||
<p class="mb-0 fw-bold">{{ formatHours(weekInfo.totalWorkHours) }}</p>
|
||||
</div>
|
||||
<div class="col-md-3 text-end">
|
||||
<button class="btn btn-outline-primary btn-sm" @click="exportToExcel">
|
||||
<i class="bi bi-file-earmark-excel me-1"></i>Excel 다운로드
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 프로젝트별 실적/계획 테이블 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-table me-2"></i>프로젝트별 주간보고
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mb-0 summary-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 280px; min-width: 280px;" class="align-middle text-center">프로젝트</th>
|
||||
<th class="align-middle text-center">
|
||||
금주 실적
|
||||
<i class="bi bi-robot text-info ms-1" title="AI 요약"></i>
|
||||
</th>
|
||||
<th class="align-middle text-center">
|
||||
차주 계획
|
||||
<i class="bi bi-robot text-info ms-1" title="AI 요약"></i>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="proj in projects" :key="proj.projectId">
|
||||
<td class="project-cell">
|
||||
<div class="fw-bold text-primary mb-2">{{ proj.projectName }}</div>
|
||||
<!-- 인원별 실적/계획 미니 테이블 -->
|
||||
<table class="table table-sm table-bordered mb-0 mini-table" v-if="proj.memberHours?.length > 0">
|
||||
<thead>
|
||||
<tr class="table-secondary">
|
||||
<th class="text-center" style="width: 40%">개발자</th>
|
||||
<th class="text-center" style="width: 30%">실적</th>
|
||||
<th class="text-center" style="width: 30%">계획</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(mh, idx) in proj.memberHours" :key="idx">
|
||||
<td class="small">{{ mh.name }}</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-primary">{{ formatMemberHours(mh.workHours) }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-info">{{ formatMemberHours(mh.planHours) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="table-light fw-bold">
|
||||
<td class="text-center small">합계</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-primary">{{ formatMemberHours(sumHours(proj.memberHours, 'workHours')) }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-info">{{ formatMemberHours(sumHours(proj.memberHours, 'planHours')) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</td>
|
||||
<!-- 금주 실적 -->
|
||||
<td class="task-cell">
|
||||
<div v-if="!showRaw[proj.projectId]?.work">
|
||||
<div class="ai-badge mb-2">
|
||||
<i class="bi bi-robot me-1"></i>AI 요약
|
||||
</div>
|
||||
<div class="ai-content" v-html="renderMarkdown(proj.aiWorkSummary || '요약 없음')"></div>
|
||||
<button class="btn btn-sm btn-link p-0 mt-2" @click="toggleRaw(proj.projectId, 'work')">
|
||||
<i class="bi bi-list-ul me-1"></i>원문보기 ({{ proj.workTasks.length }}건)
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button class="btn btn-sm btn-link p-0 mb-2" @click="toggleRaw(proj.projectId, 'work')">
|
||||
<i class="bi bi-robot me-1"></i>AI 요약보기
|
||||
</button>
|
||||
<div v-if="proj.workTasks.length > 0">
|
||||
<div v-for="(task, idx) in proj.workTasks" :key="'w'+idx" class="task-item">
|
||||
<span class="badge me-1" :class="task.isCompleted ? 'bg-success' : 'bg-warning'">
|
||||
{{ task.isCompleted ? '완료' : '진행' }}
|
||||
</span>
|
||||
<span class="task-desc">{{ task.description }}</span>
|
||||
<span class="text-muted small ms-1">({{ task.authorName }}, {{ task.hours }}h)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-muted">-</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- 차주 계획 -->
|
||||
<td class="task-cell">
|
||||
<div v-if="!showRaw[proj.projectId]?.plan">
|
||||
<div class="ai-badge mb-2">
|
||||
<i class="bi bi-robot me-1"></i>AI 요약
|
||||
</div>
|
||||
<div class="ai-content" v-html="renderMarkdown(proj.aiPlanSummary || '요약 없음')"></div>
|
||||
<button class="btn btn-sm btn-link p-0 mt-2" @click="toggleRaw(proj.projectId, 'plan')">
|
||||
<i class="bi bi-list-ul me-1"></i>원문보기 ({{ proj.planTasks.length }}건)
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button class="btn btn-sm btn-link p-0 mb-2" @click="toggleRaw(proj.projectId, 'plan')">
|
||||
<i class="bi bi-robot me-1"></i>AI 요약보기
|
||||
</button>
|
||||
<div v-if="proj.planTasks.length > 0">
|
||||
<div v-for="(task, idx) in proj.planTasks" :key="'p'+idx" class="task-item">
|
||||
<span class="task-desc">{{ task.description }}</span>
|
||||
<span class="text-muted small ms-1">({{ task.authorName }}, {{ task.hours }}h)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-muted">-</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="projects.length === 0">
|
||||
<td colspan="3" class="text-center py-5 text-muted">
|
||||
데이터가 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 인원별 시간 현황 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-people me-2"></i>인원별 시간 현황
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>이름</th>
|
||||
<th class="text-center" style="width: 120px">금주 수행</th>
|
||||
<th class="text-center" style="width: 120px">차주 계획</th>
|
||||
<th class="text-center" style="width: 150px">차주 여유</th>
|
||||
<th style="width: 200px">여유율</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="m in members" :key="m.employeeId">
|
||||
<td>
|
||||
<i class="bi bi-person me-1"></i>{{ m.employeeName }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-primary">{{ formatMemberHours(m.workHours) }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-info">{{ formatMemberHours(m.planHours) }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge" :class="getAvailableClass(m.availableHours)">
|
||||
{{ formatMemberHours(m.availableHours) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div
|
||||
class="progress-bar"
|
||||
:class="getProgressClass(m.planHours)"
|
||||
:style="{ width: Math.min(100, (m.planHours / 40) * 100) + '%' }"
|
||||
>
|
||||
{{ Math.round((m.planHours / 40) * 100) }}%
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="members.length === 0">
|
||||
<td colspan="5" class="text-center py-3 text-muted">
|
||||
데이터가 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center py-5" v-else-if="isLoading">
|
||||
<div class="spinner-border text-primary"></div>
|
||||
<p class="mt-2 text-muted">로딩중...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { fetchCurrentUser } = useAuth()
|
||||
|
||||
const weekInfo = ref<any>(null)
|
||||
const projects = ref<any[]>([])
|
||||
const members = ref<any[]>([])
|
||||
const isLoading = ref(true)
|
||||
const isReaggregating = ref(false)
|
||||
const showRaw = reactive<Record<number, { work: boolean, plan: boolean }>>({})
|
||||
|
||||
onMounted(async () => {
|
||||
const user = await fetchCurrentUser()
|
||||
if (!user) {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
await loadData()
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const year = route.params.year
|
||||
const week = route.params.week
|
||||
|
||||
const res = await $fetch<{ weekInfo: any; projects: any[]; members: any[] }>('/api/report/summary/week/detail', {
|
||||
query: { year, week }
|
||||
})
|
||||
|
||||
weekInfo.value = res.weekInfo
|
||||
projects.value = res.projects || []
|
||||
members.value = res.members || []
|
||||
|
||||
for (const p of projects.value) {
|
||||
showRaw[p.projectId] = { work: false, plan: false }
|
||||
}
|
||||
} catch (e: any) {
|
||||
alert(e.data?.message || '데이터를 불러오는데 실패했습니다.')
|
||||
router.push('/report/summary')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function doReaggregate() {
|
||||
if (!confirm('해당 주차의 모든 프로젝트를 다시 취합하시겠습니까?\nAI 요약이 새로 생성됩니다.')) {
|
||||
return
|
||||
}
|
||||
|
||||
isReaggregating.value = true
|
||||
try {
|
||||
const projectIds = projects.value.map(p => p.projectId)
|
||||
|
||||
await $fetch('/api/report/summary/aggregate', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
projectIds,
|
||||
reportYear: weekInfo.value.reportYear,
|
||||
reportWeek: weekInfo.value.reportWeek
|
||||
}
|
||||
})
|
||||
|
||||
alert('취합이 완료되었습니다.')
|
||||
await loadData()
|
||||
} catch (e: any) {
|
||||
alert(e.data?.message || '취합에 실패했습니다.')
|
||||
} finally {
|
||||
isReaggregating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRaw(projectId: number, type: 'work' | 'plan') {
|
||||
if (!showRaw[projectId]) {
|
||||
showRaw[projectId] = { work: false, plan: false }
|
||||
}
|
||||
showRaw[projectId][type] = !showRaw[projectId][type]
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
if (!dateStr) return '-'
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
}
|
||||
|
||||
function formatHours(hours: number): string {
|
||||
if (!hours || hours <= 0) return '0h'
|
||||
const days = Math.floor(hours / 8)
|
||||
const remain = hours % 8
|
||||
if (days === 0) return `${remain}h`
|
||||
if (remain === 0) return `${days}일`
|
||||
return `${days}일 ${remain}h`
|
||||
}
|
||||
|
||||
function formatMemberHours(hours: number): string {
|
||||
if (!hours || hours <= 0) return '0h'
|
||||
const days = Math.floor(hours / 8)
|
||||
const remain = hours % 8
|
||||
if (days === 0) return `${hours}h`
|
||||
if (remain === 0) return `${days}일`
|
||||
return `${days}일${remain}h`
|
||||
}
|
||||
|
||||
function sumHours(members: any[], key: string): number {
|
||||
if (!members || members.length === 0) return 0
|
||||
return members.reduce((sum, m) => sum + (m[key] || 0), 0)
|
||||
}
|
||||
|
||||
function renderMarkdown(text: string): string {
|
||||
if (!text) return ''
|
||||
return text
|
||||
.replace(/^### (.+)$/gm, '<strong>$1</strong><br>')
|
||||
.replace(/^## (.+)$/gm, '<strong>$1</strong><br>')
|
||||
.replace(/^# (.+)$/gm, '<strong>$1</strong><br>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
.replace(/^- (.+)$/gm, '• $1<br>')
|
||||
.replace(/\n/g, '<br>')
|
||||
}
|
||||
|
||||
function getAvailableClass(hours: number): string {
|
||||
if (hours >= 16) return 'bg-success'
|
||||
if (hours >= 8) return 'bg-warning text-dark'
|
||||
return 'bg-danger'
|
||||
}
|
||||
|
||||
function getProgressClass(planHours: number): string {
|
||||
const percent = (planHours / 40) * 100
|
||||
if (percent >= 100) return 'bg-danger'
|
||||
if (percent >= 80) return 'bg-warning'
|
||||
return 'bg-success'
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
alert('Excel 다운로드 기능은 준비 중입니다.')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.summary-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.project-cell {
|
||||
vertical-align: top;
|
||||
background-color: #f8f9fa;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.task-cell {
|
||||
vertical-align: top;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.task-item {
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
}
|
||||
.task-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.task-desc {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.ai-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.ai-content {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
.mini-table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.mini-table th {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.mini-table td {
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
.mini-table .badge {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4><i class="bi bi-collection me-2"></i>취합 보고서</h4>
|
||||
<p class="text-muted mb-0">프로젝트별 주간보고 취합 목록</p>
|
||||
<p class="text-muted mb-0">주차별 취합 보고서 목록</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" @click="showAggregateModal = true">
|
||||
<i class="bi bi-plus-lg me-1"></i> 취합하기
|
||||
@@ -16,81 +16,68 @@
|
||||
<!-- 필터 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">프로젝트</label>
|
||||
<select class="form-select" v-model="filter.projectId">
|
||||
<option value="">전체</option>
|
||||
<option v-for="p in projects" :key="p.projectId" :value="p.projectId">
|
||||
{{ p.projectName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">연도</label>
|
||||
<select class="form-select" v-model="filter.year">
|
||||
<select class="form-select" v-model="filter.year" @change="loadWeeklyList">
|
||||
<option v-for="y in years" :key="y" :value="y">{{ y }}년</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 d-flex align-items-end">
|
||||
<button class="btn btn-outline-secondary" @click="loadSummaries">
|
||||
<i class="bi bi-search me-1"></i> 조회
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 취합 목록 -->
|
||||
<!-- 주차별 목록 -->
|
||||
<div class="card">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 80px">주차</th>
|
||||
<th style="width: 120px">주차</th>
|
||||
<th style="width: 180px">기간</th>
|
||||
<th>프로젝트</th>
|
||||
<th style="width: 150px">기간</th>
|
||||
<th style="width: 100px">참여인원</th>
|
||||
<th style="width: 100px">총 시간</th>
|
||||
<th style="width: 100px">상태</th>
|
||||
<th style="width: 150px">취합일시</th>
|
||||
<th style="width: 80px">상세</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="summary in summaries" :key="summary.summaryId">
|
||||
<tr v-for="week in weeklyList" :key="week.reportWeek">
|
||||
<td>
|
||||
<strong>W{{ String(summary.reportWeek).padStart(2, '0') }}</strong>
|
||||
</td>
|
||||
<td>{{ summary.projectName }}</td>
|
||||
<td>
|
||||
<small>{{ formatDateRange(summary.weekStartDate, summary.weekEndDate) }}</small>
|
||||
<strong class="text-primary">{{ week.reportWeek }}주차</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary">{{ summary.memberCount }}명</span>
|
||||
<small>{{ formatDateRange(week.weekStartDate, week.weekEndDate) }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{{ summary.totalWorkHours ? summary.totalWorkHours + 'h' : '-' }}
|
||||
</td>
|
||||
<td>
|
||||
<span :class="getStatusBadgeClass(summary.summaryStatus)">
|
||||
{{ getStatusText(summary.summaryStatus) }}
|
||||
<span class="badge bg-secondary me-1" v-for="p in week.projects.slice(0, 3)" :key="p">
|
||||
{{ p }}
|
||||
</span>
|
||||
<span v-if="week.projects.length > 3" class="text-muted small">
|
||||
+{{ week.projects.length - 3 }}개
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<small>{{ formatDateTime(summary.aggregatedAt) }}</small>
|
||||
<span class="badge bg-primary">{{ week.totalMembers }}명</span>
|
||||
</td>
|
||||
<td>
|
||||
{{ week.totalWorkHours ? formatHours(week.totalWorkHours) : '-' }}
|
||||
</td>
|
||||
<td>
|
||||
<small>{{ formatDateTime(week.latestAggregatedAt) }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<NuxtLink
|
||||
:to="`/report/summary/${summary.summaryId}`"
|
||||
:to="`/report/summary/${filter.year}/${week.reportWeek}`"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
>
|
||||
<i class="bi bi-eye"></i>
|
||||
</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="summaries.length === 0">
|
||||
<td colspan="8" class="text-center py-5 text-muted">
|
||||
<tr v-if="weeklyList.length === 0">
|
||||
<td colspan="7" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-inbox display-4"></i>
|
||||
<p class="mt-2 mb-0">취합된 보고서가 없습니다.</p>
|
||||
</td>
|
||||
@@ -105,7 +92,7 @@
|
||||
<div class="modal fade" :class="{ show: showAggregateModal }"
|
||||
:style="{ display: showAggregateModal ? 'block' : 'none' }"
|
||||
tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
@@ -114,39 +101,76 @@
|
||||
<button type="button" class="btn-close" @click="showAggregateModal = false"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">프로젝트 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" v-model="aggregateForm.projectId">
|
||||
<option value="">선택하세요</option>
|
||||
<option v-for="p in projects" :key="p.projectId" :value="p.projectId">
|
||||
{{ p.projectName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="row mb-3">
|
||||
<div class="col-4">
|
||||
<label class="form-label">연도 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" v-model="aggregateForm.reportYear">
|
||||
<select class="form-select" v-model="aggregateForm.reportYear" @change="loadAvailableProjects">
|
||||
<option v-for="y in years" :key="y" :value="y">{{ y }}년</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-8">
|
||||
<label class="form-label">주차 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" v-model="aggregateForm.reportWeek">
|
||||
<option v-for="w in 53" :key="w" :value="w">W{{ String(w).padStart(2, '0') }}</option>
|
||||
<select class="form-select" v-model="aggregateForm.reportWeek" @change="loadAvailableProjects">
|
||||
<option v-for="w in 53" :key="w" :value="w">
|
||||
{{ w }}주차 ({{ getWeekDateRange(aggregateForm.reportYear, w) }})
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info mt-3 mb-0">
|
||||
|
||||
<!-- 프로젝트 선택 -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<label class="form-label mb-0">프로젝트 선택 <span class="text-danger">*</span></label>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary me-1" @click="selectAllAvailable">전체 선택</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" @click="deselectAllAvailable">전체 해제</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoadingProjects" class="text-center py-3">
|
||||
<span class="spinner-border spinner-border-sm me-1"></span> 프로젝트 조회 중...
|
||||
</div>
|
||||
|
||||
<div v-else-if="availableProjects.length === 0" class="alert alert-warning mb-0">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
해당 주차에 제출된 주간보고가 없습니다.
|
||||
</div>
|
||||
|
||||
<div v-else class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
|
||||
<div class="row">
|
||||
<div class="col-md-6" v-for="proj in availableProjects" :key="proj.projectId">
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input"
|
||||
:id="'agg-proj-' + proj.projectId"
|
||||
:value="proj.projectId"
|
||||
v-model="aggregateForm.selectedProjectIds" />
|
||||
<label class="form-check-label" :for="'agg-proj-' + proj.projectId">
|
||||
{{ proj.projectName }}
|
||||
<small class="text-muted">({{ proj.reportCount }}건)</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-muted small mt-2" v-if="availableProjects.length > 0">
|
||||
{{ aggregateForm.selectedProjectIds.length }} / {{ availableProjects.length }} 프로젝트 선택됨
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mb-0" v-if="aggregateForm.selectedProjectIds.length > 0">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
선택한 프로젝트/주차의 제출된 보고서를 취합합니다.
|
||||
{{ aggregateForm.reportYear }}년 {{ aggregateForm.reportWeek }}주차,
|
||||
{{ aggregateForm.selectedProjectIds.length }}개 프로젝트의 보고서를 취합합니다.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="showAggregateModal = false">
|
||||
취소
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" @click="doAggregate" :disabled="isAggregating">
|
||||
<button type="button" class="btn btn-primary" @click="doAggregate"
|
||||
:disabled="isAggregating || aggregateForm.selectedProjectIds.length === 0">
|
||||
<span v-if="isAggregating">
|
||||
<span class="spinner-border spinner-border-sm me-1"></span>취합 중...
|
||||
</span>
|
||||
@@ -163,6 +187,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
|
||||
const { fetchCurrentUser } = useAuth()
|
||||
const { getCurrentWeekInfo } = useWeekCalc()
|
||||
const router = useRouter()
|
||||
@@ -172,20 +198,20 @@ const currentWeek = getCurrentWeekInfo()
|
||||
const years = [currentYear, currentYear - 1, currentYear - 2]
|
||||
|
||||
const filter = ref({
|
||||
projectId: '',
|
||||
year: currentYear
|
||||
})
|
||||
|
||||
const summaries = ref<any[]>([])
|
||||
const projects = ref<any[]>([])
|
||||
const weeklyList = ref<any[]>([])
|
||||
|
||||
// 취합 모달
|
||||
const showAggregateModal = ref(false)
|
||||
const isAggregating = ref(false)
|
||||
const isLoadingProjects = ref(false)
|
||||
const availableProjects = ref<any[]>([])
|
||||
const aggregateForm = ref({
|
||||
projectId: '',
|
||||
reportYear: currentYear,
|
||||
reportWeek: currentWeek.week > 1 ? currentWeek.week - 1 : 1 // 기본값: 지난주
|
||||
reportWeek: currentWeek.week > 1 ? currentWeek.week - 1 : 1,
|
||||
selectedProjectIds: [] as number[]
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -195,51 +221,59 @@ onMounted(async () => {
|
||||
return
|
||||
}
|
||||
|
||||
await loadProjects()
|
||||
await loadSummaries()
|
||||
await loadWeeklyList()
|
||||
})
|
||||
|
||||
async function loadProjects() {
|
||||
async function loadWeeklyList() {
|
||||
try {
|
||||
const res = await $fetch<{ projects: any[] }>('/api/project/list')
|
||||
projects.value = res.projects || []
|
||||
const res = await $fetch<{ weeks: any[] }>('/api/report/summary/weekly-list', {
|
||||
query: { year: filter.value.year }
|
||||
})
|
||||
weeklyList.value = res.weeks || []
|
||||
} catch (e) {
|
||||
console.error('Load projects error:', e)
|
||||
console.error('Load weekly list error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSummaries() {
|
||||
async function loadAvailableProjects() {
|
||||
isLoadingProjects.value = true
|
||||
try {
|
||||
const query: Record<string, any> = { year: filter.value.year }
|
||||
if (filter.value.projectId) query.projectId = filter.value.projectId
|
||||
|
||||
const res = await $fetch<{ summaries: any[] }>('/api/report/summary/list', { query })
|
||||
summaries.value = res.summaries || []
|
||||
const res = await $fetch<{ projects: any[] }>('/api/report/summary/available-projects', {
|
||||
query: {
|
||||
year: aggregateForm.value.reportYear,
|
||||
week: aggregateForm.value.reportWeek
|
||||
}
|
||||
})
|
||||
availableProjects.value = res.projects || []
|
||||
aggregateForm.value.selectedProjectIds = availableProjects.value.map(p => p.projectId)
|
||||
} catch (e) {
|
||||
console.error('Load summaries error:', e)
|
||||
console.error('Load available projects error:', e)
|
||||
availableProjects.value = []
|
||||
} finally {
|
||||
isLoadingProjects.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function doAggregate() {
|
||||
if (!aggregateForm.value.projectId) {
|
||||
if (aggregateForm.value.selectedProjectIds.length === 0) {
|
||||
alert('프로젝트를 선택해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isAggregating.value = true
|
||||
try {
|
||||
const res = await $fetch<{ success: boolean; memberCount: number }>('/api/report/summary/aggregate', {
|
||||
const res = await $fetch<{ success: boolean; summaryCount: number; totalMembers: number }>('/api/report/summary/aggregate', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
projectId: parseInt(aggregateForm.value.projectId as string),
|
||||
projectIds: aggregateForm.value.selectedProjectIds,
|
||||
reportYear: aggregateForm.value.reportYear,
|
||||
reportWeek: aggregateForm.value.reportWeek
|
||||
}
|
||||
})
|
||||
|
||||
alert(`취합 완료! (${res.memberCount}명의 보고서)`)
|
||||
alert(`취합 완료! (${res.summaryCount}개 프로젝트, 총 ${res.totalMembers}명)`)
|
||||
showAggregateModal.value = false
|
||||
await loadSummaries()
|
||||
await loadWeeklyList()
|
||||
} catch (e: any) {
|
||||
alert(e.data?.message || '취합에 실패했습니다.')
|
||||
} finally {
|
||||
@@ -247,23 +281,38 @@ async function doAggregate() {
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadgeClass(status: string) {
|
||||
const classes: Record<string, string> = {
|
||||
'AGGREGATED': 'badge bg-info',
|
||||
'REVIEWED': 'badge bg-success'
|
||||
}
|
||||
return classes[status] || 'badge bg-secondary'
|
||||
function selectAllAvailable() {
|
||||
aggregateForm.value.selectedProjectIds = availableProjects.value.map(p => p.projectId)
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const texts: Record<string, string> = {
|
||||
'AGGREGATED': '취합완료',
|
||||
'REVIEWED': '검토완료'
|
||||
function deselectAllAvailable() {
|
||||
aggregateForm.value.selectedProjectIds = []
|
||||
}
|
||||
|
||||
watch(showAggregateModal, (val) => {
|
||||
if (val) {
|
||||
loadAvailableProjects()
|
||||
}
|
||||
return texts[status] || status
|
||||
})
|
||||
|
||||
function getWeekDateRange(year: number, week: number): string {
|
||||
const jan4 = new Date(year, 0, 4)
|
||||
const jan4Day = jan4.getDay() || 7
|
||||
const week1Monday = new Date(jan4)
|
||||
week1Monday.setDate(jan4.getDate() - jan4Day + 1)
|
||||
|
||||
const monday = new Date(week1Monday)
|
||||
monday.setDate(week1Monday.getDate() + (week - 1) * 7)
|
||||
|
||||
const sunday = new Date(monday)
|
||||
sunday.setDate(monday.getDate() + 6)
|
||||
|
||||
const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
return `${fmt(monday)}~${fmt(sunday)}`
|
||||
}
|
||||
|
||||
function formatDateRange(start: string, end: string) {
|
||||
if (!start || !end) return '-'
|
||||
const s = new Date(start)
|
||||
const e = new Date(end)
|
||||
return `${s.getMonth()+1}/${s.getDate()} ~ ${e.getMonth()+1}/${e.getDate()}`
|
||||
@@ -272,10 +321,16 @@ function formatDateRange(start: string, end: string) {
|
||||
function formatDateTime(dateStr: string) {
|
||||
if (!dateStr) return '-'
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleString('ko-KR', {
|
||||
month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit'
|
||||
})
|
||||
return d.toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
function formatHours(hours: number): string {
|
||||
if (!hours || hours <= 0) return '0h'
|
||||
const days = Math.floor(hours / 8)
|
||||
const remain = hours % 8
|
||||
if (days === 0) return `${remain}h`
|
||||
if (remain === 0) return `${days}일`
|
||||
return `${days}일 ${remain}h`
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user