90d3e32992
- 일일순회점검 시스템 신규 구현 - DB 테이블: patrol_checklist_items, daily_patrol_sessions, patrol_check_records, workplace_items, item_types - API: /api/patrol/* 엔드포인트 - 프론트엔드: 지도 기반 작업장 점검 UI - 설비 관리 기능 개선 - 구매 관련 필드 추가 (구매일, 가격, 공급업체 등) - 설비 코드 자동 생성 (TKP-XXX 형식) - 작업장 관리 개선 - 레이아웃 이미지 업로드 기능 - 마커 위치 저장 기능 - 부서 관리 기능 추가 - 사이드바 네비게이션 카테고리 재구성 - 이미지 401 오류 수정 (정적 파일 경로 처리) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
322 lines
11 KiB
HTML
322 lines
11 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=2" defer></script>
|
|
<script src="https://instant.page/5.2.0" type="module"></script>
|
|
<style>
|
|
.type-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.type-tab {
|
|
padding: 12px 24px;
|
|
background: var(--gray-100);
|
|
border: 2px solid var(--gray-200);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
transition: all 0.2s;
|
|
}
|
|
.type-tab:hover {
|
|
background: var(--gray-200);
|
|
}
|
|
.type-tab.active {
|
|
background: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
color: white;
|
|
}
|
|
.type-tab.safety.active {
|
|
background: var(--yellow-500);
|
|
border-color: var(--yellow-500);
|
|
}
|
|
|
|
.category-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
.category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
background: var(--gray-100);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
}
|
|
.category-header:hover {
|
|
background: var(--gray-200);
|
|
}
|
|
.category-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
}
|
|
.category-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.severity-badge {
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
.severity-badge.low { background: var(--gray-200); color: var(--gray-700); }
|
|
.severity-badge.medium { background: var(--yellow-100); color: var(--yellow-700); }
|
|
.severity-badge.high { background: var(--orange-100); color: var(--orange-700); }
|
|
.severity-badge.critical { background: var(--red-100); color: var(--red-700); }
|
|
|
|
.item-count {
|
|
font-size: 0.875rem;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.category-items {
|
|
display: none;
|
|
padding: 16px;
|
|
border: 1px solid var(--gray-200);
|
|
border-top: none;
|
|
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
|
}
|
|
.category-section.expanded .category-items {
|
|
display: block;
|
|
}
|
|
.category-section.expanded .category-header {
|
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|
}
|
|
|
|
.item-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.item-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: white;
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.item-info {
|
|
flex: 1;
|
|
}
|
|
.item-name {
|
|
font-weight: 500;
|
|
color: var(--gray-800);
|
|
}
|
|
.item-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-500);
|
|
margin-top: 4px;
|
|
}
|
|
.item-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.add-item-form {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px dashed var(--gray-300);
|
|
}
|
|
.add-item-form input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 48px;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
/* 모달 */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.modal-container {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
}
|
|
.modal-header h2 {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
.modal-body {
|
|
padding: 24px;
|
|
}
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
}
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.95rem;
|
|
}
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-500);
|
|
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar-container"></div>
|
|
|
|
<div class="page-container">
|
|
<main class="main-content">
|
|
<div class="dashboard-main">
|
|
<div class="page-header">
|
|
<div class="page-title-section">
|
|
<h1 class="page-title">신고 카테고리 관리</h1>
|
|
<p class="page-description">부적합 및 안전 신고에 사용되는 카테고리와 항목을 관리합니다</p>
|
|
</div>
|
|
<div class="page-actions">
|
|
<button class="btn btn-primary" onclick="openCategoryModal()">새 카테고리 추가</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 유형 탭 -->
|
|
<div class="type-tabs">
|
|
<button class="type-tab active" data-type="nonconformity" onclick="switchType('nonconformity')">부적합</button>
|
|
<button class="type-tab safety" data-type="safety" onclick="switchType('safety')">안전</button>
|
|
</div>
|
|
|
|
<!-- 카테고리 목록 -->
|
|
<div id="categoryList">
|
|
<div class="empty-state">카테고리를 불러오는 중...</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 카테고리 추가/수정 모달 -->
|
|
<div id="categoryModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<h2 id="categoryModalTitle">새 카테고리</h2>
|
|
<button class="btn btn-secondary btn-sm" onclick="closeCategoryModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="categoryForm" onsubmit="event.preventDefault(); saveCategory();">
|
|
<input type="hidden" id="categoryId">
|
|
<div class="form-group">
|
|
<label class="form-label">카테고리 이름 *</label>
|
|
<input type="text" id="categoryName" class="form-control" placeholder="예: 자재 불량" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">설명</label>
|
|
<textarea id="categoryDescription" class="form-control" rows="3" placeholder="카테고리 설명"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">심각도</label>
|
|
<select id="categorySeverity" class="form-control">
|
|
<option value="low">낮음</option>
|
|
<option value="medium">보통</option>
|
|
<option value="high">높음</option>
|
|
<option value="critical">심각</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" onclick="closeCategoryModal()">취소</button>
|
|
<button type="button" class="btn btn-danger" id="deleteCategoryBtn" onclick="deleteCategory()" style="display: none;">삭제</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveCategory()">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 항목 추가/수정 모달 -->
|
|
<div id="itemModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<h2 id="itemModalTitle">새 항목</h2>
|
|
<button class="btn btn-secondary btn-sm" onclick="closeItemModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="itemForm" onsubmit="event.preventDefault(); saveItem();">
|
|
<input type="hidden" id="itemId">
|
|
<input type="hidden" id="itemCategoryId">
|
|
<div class="form-group">
|
|
<label class="form-label">항목 이름 *</label>
|
|
<input type="text" id="itemName" class="form-control" placeholder="예: 용접봉 품질 미달" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">설명</label>
|
|
<textarea id="itemDescription" class="form-control" rows="3" placeholder="항목 설명"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">심각도</label>
|
|
<select id="itemSeverity" class="form-control">
|
|
<option value="low">낮음</option>
|
|
<option value="medium">보통</option>
|
|
<option value="high">높음</option>
|
|
<option value="critical">심각</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" onclick="closeItemModal()">취소</button>
|
|
<button type="button" class="btn btn-danger" id="deleteItemBtn" onclick="deleteItem()" style="display: none;">삭제</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveItem()">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/issue-category-manage.js"></script>
|
|
</body>
|
|
</html>
|