b8ccde7f17
- 알림 시스템 구축 (navbar 알림 아이콘, 드롭다운) - 알림 수신자 설정 기능 (계정관리 페이지) - 시설설비 관리 페이지 추가 (수리 워크플로우) - 수리 신청 → 접수 → 처리중 → 완료 상태 관리 - 사이드바 메뉴 구조 개선 (공장 관리 카테고리) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
853 lines
28 KiB
HTML
853 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>시설설비 관리 | (주)테크니컬코리아</title>
|
|
<link rel="stylesheet" href="/css/design-system.css">
|
|
<link rel="stylesheet" href="/css/admin-pages.css?v=8">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
<script src="/js/api-base.js"></script>
|
|
<script src="/js/app-init.js?v=3" defer></script>
|
|
<style>
|
|
.repair-page {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.stats-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
background: white;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
border-left: 4px solid var(--gray-300);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.stat-card.active {
|
|
background: var(--primary-50);
|
|
}
|
|
|
|
.stat-card.reported { border-left-color: var(--error-500); }
|
|
.stat-card.received { border-left-color: var(--warning-500); }
|
|
.stat-card.in_progress { border-left-color: var(--primary-500); }
|
|
.stat-card.completed { border-left-color: var(--success-500); }
|
|
|
|
.stat-value {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.repair-table-container {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.repair-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.repair-table th,
|
|
.repair-table td {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.repair-table th {
|
|
background: var(--bg-secondary);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.repair-table tr:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-badge.reported {
|
|
background: var(--error-100);
|
|
color: var(--error-700);
|
|
}
|
|
|
|
.status-badge.received {
|
|
background: var(--warning-100);
|
|
color: var(--warning-700);
|
|
}
|
|
|
|
.status-badge.in_progress {
|
|
background: var(--primary-100);
|
|
color: var(--primary-700);
|
|
}
|
|
|
|
.status-badge.completed, .status-badge.resolved {
|
|
background: var(--success-100);
|
|
color: var(--success-700);
|
|
}
|
|
|
|
.action-btns {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
border-radius: var(--radius-md);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: var(--transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-receive {
|
|
background: var(--warning-500);
|
|
color: white;
|
|
}
|
|
|
|
.btn-receive:hover {
|
|
background: var(--warning-600);
|
|
}
|
|
|
|
.btn-start {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
}
|
|
|
|
.btn-start:hover {
|
|
background: var(--primary-600);
|
|
}
|
|
|
|
.btn-complete {
|
|
background: var(--success-500);
|
|
color: white;
|
|
}
|
|
|
|
.btn-complete:hover {
|
|
background: var(--success-600);
|
|
}
|
|
|
|
.btn-view {
|
|
background: var(--gray-100);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-view:hover {
|
|
background: var(--gray-200);
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 3rem;
|
|
text-align: center;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.repair-desc {
|
|
max-width: 200px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.assignee-info {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* 모달 */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-overlay.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--border-light);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-group textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--border-light);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: var(--radius-md);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--gray-100);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.detail-label {
|
|
width: 80px;
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-value {
|
|
flex: 1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.photo-thumbnails {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.photo-thumb {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1 1 45%;
|
|
}
|
|
|
|
.repair-table {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.repair-table th:nth-child(3),
|
|
.repair-table td:nth-child(3),
|
|
.repair-table th:nth-child(5),
|
|
.repair-table td:nth-child(5) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar-container"></div>
|
|
<div id="sidebar-container"></div>
|
|
|
|
<main class="main-content">
|
|
<div class="repair-page">
|
|
<div class="page-header">
|
|
<h1>시설설비 관리</h1>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-card reported" onclick="filterByStatus('reported')">
|
|
<div class="stat-value" id="reportedCount">0</div>
|
|
<div class="stat-label">신청</div>
|
|
</div>
|
|
<div class="stat-card received" onclick="filterByStatus('received')">
|
|
<div class="stat-value" id="receivedCount">0</div>
|
|
<div class="stat-label">접수</div>
|
|
</div>
|
|
<div class="stat-card in_progress" onclick="filterByStatus('in_progress')">
|
|
<div class="stat-value" id="inProgressCount">0</div>
|
|
<div class="stat-label">처리중</div>
|
|
</div>
|
|
<div class="stat-card completed" onclick="filterByStatus('completed')">
|
|
<div class="stat-value" id="completedCount">0</div>
|
|
<div class="stat-label">완료</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="repair-table-container">
|
|
<table class="repair-table">
|
|
<thead>
|
|
<tr>
|
|
<th>신청일</th>
|
|
<th>작업장</th>
|
|
<th>유형</th>
|
|
<th>설명</th>
|
|
<th>담당자</th>
|
|
<th>상태</th>
|
|
<th>처리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="repairTableBody">
|
|
<tr>
|
|
<td colspan="7" class="empty-state">로딩중...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 접수 모달 -->
|
|
<div class="modal-overlay" id="receiveModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>접수 확인</h3>
|
|
<button class="modal-close" onclick="closeModal('receiveModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>담당자 배정 *</label>
|
|
<select id="receiveAssignee" required>
|
|
<option value="">담당자 선택</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>메모</label>
|
|
<textarea id="receiveNotes" placeholder="접수 시 메모 (선택사항)"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('receiveModal')">취소</button>
|
|
<button class="btn btn-primary" onclick="submitReceive()">접수 확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 완료 모달 -->
|
|
<div class="modal-overlay" id="completeModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>완료 처리</h3>
|
|
<button class="modal-close" onclick="closeModal('completeModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>처리 내용 *</label>
|
|
<textarea id="completeNotes" placeholder="처리 내용을 입력하세요..." required></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('completeModal')">취소</button>
|
|
<button class="btn btn-primary" onclick="submitComplete()">완료 처리</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상세 모달 -->
|
|
<div class="modal-overlay" id="detailModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>상세 정보</h3>
|
|
<button class="modal-close" onclick="closeModal('detailModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="detailContent">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('detailModal')">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentReportId = null;
|
|
let allRepairs = [];
|
|
let workers = [];
|
|
let currentFilter = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setTimeout(() => {
|
|
loadWorkers();
|
|
loadRepairRequests();
|
|
}, 300);
|
|
});
|
|
|
|
async function loadWorkers() {
|
|
try {
|
|
const response = await window.apiCall('/workers?status=active');
|
|
if (response.success) {
|
|
workers = response.data || [];
|
|
populateAssigneeDropdown();
|
|
}
|
|
} catch (error) {
|
|
console.error('작업자 목록 로드 오류:', error);
|
|
}
|
|
}
|
|
|
|
function populateAssigneeDropdown() {
|
|
const select = document.getElementById('receiveAssignee');
|
|
select.innerHTML = '<option value="">담당자 선택</option>' +
|
|
workers.map(w => `<option value="${w.worker_id}">${w.worker_name} (${w.job_type || ''})</option>`).join('');
|
|
}
|
|
|
|
async function loadRepairRequests() {
|
|
try {
|
|
const response = await window.apiCall('/work-issues?category_type=nonconformity');
|
|
if (response.success) {
|
|
allRepairs = response.data || [];
|
|
updateStats();
|
|
renderTable();
|
|
}
|
|
} catch (error) {
|
|
console.error('수리 목록 로드 오류:', error);
|
|
document.getElementById('repairTableBody').innerHTML =
|
|
'<tr><td colspan="7" class="empty-state">데이터를 불러올 수 없습니다.</td></tr>';
|
|
}
|
|
}
|
|
|
|
function updateStats() {
|
|
const counts = {
|
|
reported: 0,
|
|
received: 0,
|
|
in_progress: 0,
|
|
completed: 0
|
|
};
|
|
|
|
allRepairs.forEach(r => {
|
|
if (counts.hasOwnProperty(r.status)) {
|
|
counts[r.status]++;
|
|
}
|
|
});
|
|
|
|
document.getElementById('reportedCount').textContent = counts.reported;
|
|
document.getElementById('receivedCount').textContent = counts.received;
|
|
document.getElementById('inProgressCount').textContent = counts.in_progress;
|
|
document.getElementById('completedCount').textContent = counts.completed;
|
|
|
|
// 활성 필터 표시
|
|
document.querySelectorAll('.stat-card').forEach(card => {
|
|
card.classList.remove('active');
|
|
});
|
|
if (currentFilter) {
|
|
document.querySelector(`.stat-card.${currentFilter}`)?.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function filterByStatus(status) {
|
|
if (currentFilter === status) {
|
|
currentFilter = null; // 토글 off
|
|
} else {
|
|
currentFilter = status;
|
|
}
|
|
updateStats();
|
|
renderTable();
|
|
}
|
|
|
|
function renderTable() {
|
|
const tbody = document.getElementById('repairTableBody');
|
|
|
|
let filtered = allRepairs;
|
|
if (currentFilter) {
|
|
filtered = allRepairs.filter(r => r.status === currentFilter);
|
|
}
|
|
|
|
if (filtered.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="7" class="empty-state">수리 신청 내역이 없습니다.</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = filtered.map(r => `
|
|
<tr>
|
|
<td>${formatDate(r.report_date)}</td>
|
|
<td>${r.workplace_name || '-'}</td>
|
|
<td>${r.issue_item_name || '-'}</td>
|
|
<td class="repair-desc" title="${escapeHtml(r.additional_description || '')}">${escapeHtml(r.additional_description || '-')}</td>
|
|
<td>
|
|
${r.assigned_full_name || r.assigned_user_name || '-'}
|
|
${r.assigned_at ? `<div class="assignee-info">${formatDate(r.assigned_at)}</div>` : ''}
|
|
</td>
|
|
<td><span class="status-badge ${r.status}">${getStatusText(r.status)}</span></td>
|
|
<td class="action-btns">
|
|
${getActionButtons(r)}
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function getActionButtons(r) {
|
|
let buttons = '';
|
|
|
|
switch (r.status) {
|
|
case 'reported':
|
|
buttons = `<button class="btn-sm btn-receive" onclick="openReceiveModal(${r.report_id})">접수</button>`;
|
|
break;
|
|
case 'received':
|
|
buttons = `<button class="btn-sm btn-start" onclick="startProcessing(${r.report_id})">처리시작</button>`;
|
|
break;
|
|
case 'in_progress':
|
|
buttons = `<button class="btn-sm btn-complete" onclick="openCompleteModal(${r.report_id})">완료</button>`;
|
|
break;
|
|
}
|
|
|
|
buttons += `<button class="btn-sm btn-view" onclick="viewDetail(${r.report_id})">상세</button>`;
|
|
return buttons;
|
|
}
|
|
|
|
function getStatusText(status) {
|
|
const texts = {
|
|
'reported': '신청',
|
|
'received': '접수',
|
|
'in_progress': '처리중',
|
|
'completed': '완료',
|
|
'closed': '종료',
|
|
'resolved': '완료'
|
|
};
|
|
return texts[status] || status;
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '-';
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString('ko-KR', {
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
if (!text) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// 접수 모달
|
|
function openReceiveModal(reportId) {
|
|
currentReportId = reportId;
|
|
document.getElementById('receiveNotes').value = '';
|
|
document.getElementById('receiveAssignee').value = '';
|
|
document.getElementById('receiveModal').classList.add('show');
|
|
}
|
|
|
|
async function submitReceive() {
|
|
const assigneeId = document.getElementById('receiveAssignee').value;
|
|
|
|
if (!assigneeId) {
|
|
alert('담당자를 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 1. 접수 처리
|
|
const receiveRes = await window.apiCall(`/work-issues/${currentReportId}/receive`, {
|
|
method: 'PUT'
|
|
});
|
|
|
|
if (!receiveRes.success) {
|
|
throw new Error(receiveRes.message || '접수 처리 실패');
|
|
}
|
|
|
|
// 2. 담당자 배정
|
|
const assignRes = await window.apiCall(`/work-issues/${currentReportId}/assign`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
assigned_user_id: parseInt(assigneeId)
|
|
})
|
|
});
|
|
|
|
// 3. 관련 알림 읽음 처리
|
|
await markRelatedNotificationAsRead(currentReportId);
|
|
|
|
alert('접수 완료되었습니다.');
|
|
closeModal('receiveModal');
|
|
loadRepairRequests();
|
|
|
|
} catch (error) {
|
|
console.error('접수 오류:', error);
|
|
alert('접수 처리 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// 처리 시작
|
|
async function startProcessing(reportId) {
|
|
if (!confirm('처리를 시작하시겠습니까?')) return;
|
|
|
|
try {
|
|
const response = await window.apiCall(`/work-issues/${reportId}/start`, {
|
|
method: 'PUT'
|
|
});
|
|
|
|
if (response.success) {
|
|
alert('처리가 시작되었습니다.');
|
|
loadRepairRequests();
|
|
} else {
|
|
throw new Error(response.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('처리 시작 오류:', error);
|
|
alert('처리 시작 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
// 완료 모달
|
|
function openCompleteModal(reportId) {
|
|
currentReportId = reportId;
|
|
document.getElementById('completeNotes').value = '';
|
|
document.getElementById('completeModal').classList.add('show');
|
|
}
|
|
|
|
async function submitComplete() {
|
|
const notes = document.getElementById('completeNotes').value.trim();
|
|
|
|
if (!notes) {
|
|
alert('처리 내용을 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await window.apiCall(`/work-issues/${currentReportId}/complete`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
resolution_notes: notes
|
|
})
|
|
});
|
|
|
|
if (response.success) {
|
|
alert('완료 처리되었습니다.');
|
|
closeModal('completeModal');
|
|
loadRepairRequests();
|
|
} else {
|
|
throw new Error(response.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('완료 처리 오류:', error);
|
|
alert('완료 처리 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
// 상세 보기
|
|
async function viewDetail(reportId) {
|
|
try {
|
|
const response = await window.apiCall(`/work-issues/${reportId}`);
|
|
if (response.success && response.data) {
|
|
const r = response.data;
|
|
let html = `
|
|
<div class="detail-row">
|
|
<span class="detail-label">신청일</span>
|
|
<span class="detail-value">${formatDate(r.report_date)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">신청자</span>
|
|
<span class="detail-value">${r.reporter_full_name || r.reporter_name || '-'}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">작업장</span>
|
|
<span class="detail-value">${r.workplace_name || '-'}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">유형</span>
|
|
<span class="detail-value">${r.issue_item_name || '-'}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">상태</span>
|
|
<span class="detail-value"><span class="status-badge ${r.status}">${getStatusText(r.status)}</span></span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">설명</span>
|
|
<span class="detail-value">${escapeHtml(r.additional_description) || '-'}</span>
|
|
</div>
|
|
`;
|
|
|
|
if (r.assigned_full_name || r.assigned_user_name) {
|
|
html += `
|
|
<div class="detail-row">
|
|
<span class="detail-label">담당자</span>
|
|
<span class="detail-value">${r.assigned_full_name || r.assigned_user_name}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (r.resolution_notes) {
|
|
html += `
|
|
<div class="detail-row">
|
|
<span class="detail-label">처리내용</span>
|
|
<span class="detail-value">${escapeHtml(r.resolution_notes)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// 사진
|
|
const photos = [r.photo_path1, r.photo_path2, r.photo_path3, r.photo_path4, r.photo_path5].filter(p => p);
|
|
if (photos.length > 0) {
|
|
html += `
|
|
<div class="detail-row">
|
|
<span class="detail-label">사진</span>
|
|
<span class="detail-value">
|
|
<div class="photo-thumbnails">
|
|
${photos.map(p => `<img src="${p}" class="photo-thumb" onclick="window.open('${p}', '_blank')">`).join('')}
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
document.getElementById('detailContent').innerHTML = html;
|
|
document.getElementById('detailModal').classList.add('show');
|
|
}
|
|
} catch (error) {
|
|
console.error('상세 조회 오류:', error);
|
|
alert('상세 정보를 불러올 수 없습니다.');
|
|
}
|
|
}
|
|
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('show');
|
|
currentReportId = null;
|
|
}
|
|
|
|
async function markRelatedNotificationAsRead(reportId) {
|
|
try {
|
|
const response = await window.apiCall('/notifications?limit=100');
|
|
if (response.success) {
|
|
const notifications = response.data || [];
|
|
const related = notifications.find(n =>
|
|
n.reference_type === 'work_issue_reports' &&
|
|
n.reference_id == reportId
|
|
);
|
|
if (related) {
|
|
await window.apiCall(`/notifications/${related.notification_id}/read`, {
|
|
method: 'POST'
|
|
});
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn('알림 읽음 처리 실패:', e);
|
|
}
|
|
}
|
|
|
|
// 모달 외부 클릭시 닫기
|
|
document.querySelectorAll('.modal-overlay').forEach(modal => {
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
this.classList.remove('show');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|