feat(purchase): 소모품 신청 시스템 v2 — 모바일 최적화, 스마트 검색, 그룹화, 입고 알림
- 4단계 상태 플로우: pending → grouped → purchased → received - 한국어 스마트 검색: 초성 매칭(ㅁㅈㄱ→면장갑), 별칭 테이블, 인메모리 캐시 - 모바일 전용 신청 페이지: 바텀시트 UI, FAB, 카드 리스트, 스크롤 페이지네이션 - 인라인 품목 등록: 미등록 품목 검색→등록→신청 단일 트랜잭션 - 관리자 그룹화: 체크박스 다중 선택, 구매 그룹(batch) 생성/일괄 구매/입고 - 입고 처리: 사진+보관위치 등록, 부분 입고 허용, batch 자동 상태 전환 - 알림: notifyHelper에 target_user_ids 추가, 구매진행중/입고완료 시 신청자 ntfy+push Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
317
system1-factory/web/css/purchase-mobile.css
Normal file
317
system1-factory/web/css/purchase-mobile.css
Normal file
@@ -0,0 +1,317 @@
|
||||
/* purchase-mobile.css — 소모품 신청 모바일 전용 */
|
||||
|
||||
/* 메인 컨텐츠 (하단 네비 여유) */
|
||||
.pm-content {
|
||||
padding-bottom: calc(76px + env(safe-area-inset-bottom));
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 상태 탭 */
|
||||
.pm-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding: 8px 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.pm-tabs::-webkit-scrollbar { display: none; }
|
||||
.pm-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pm-tab.active {
|
||||
background: #ea580c;
|
||||
color: white;
|
||||
}
|
||||
.pm-tab .tab-count {
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 카드 리스트 */
|
||||
.pm-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.pm-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.pm-card:active { box-shadow: 0 0 0 2px rgba(234,88,12,0.2); }
|
||||
.pm-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.pm-card-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.pm-card-custom { font-size: 11px; color: #ea580c; margin-left: 4px; }
|
||||
.pm-card-meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.pm-card-qty { color: #374151; font-weight: 600; }
|
||||
|
||||
/* FAB */
|
||||
.pm-fab {
|
||||
position: fixed;
|
||||
bottom: calc(84px + env(safe-area-inset-bottom));
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #ea580c;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(234,88,12,0.35);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.pm-fab:active { transform: scale(0.92); }
|
||||
|
||||
/* 바텀시트 */
|
||||
.pm-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
.pm-overlay.open { opacity: 1; pointer-events: auto; }
|
||||
|
||||
.pm-sheet {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 16px 16px 0 0;
|
||||
z-index: 101;
|
||||
max-height: 92vh;
|
||||
overflow-y: auto;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.pm-sheet.open { transform: translateY(0); }
|
||||
.pm-sheet-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: #d1d5db;
|
||||
border-radius: 2px;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.pm-sheet-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px 8px;
|
||||
}
|
||||
.pm-sheet-title { font-size: 17px; font-weight: 700; color: #1f2937; }
|
||||
.pm-sheet-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pm-sheet-body { padding: 0 20px 20px; }
|
||||
|
||||
/* 검색 */
|
||||
.pm-search-wrap { position: relative; margin-bottom: 12px; }
|
||||
.pm-search-input {
|
||||
width: 100%;
|
||||
padding: 12px 40px 12px 14px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pm-search-input:focus { border-color: #ea580c; }
|
||||
.pm-search-spinner {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
}
|
||||
.pm-search-spinner.show { display: block; }
|
||||
.pm-search-results {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
.pm-search-results.open { display: block; }
|
||||
.pm-search-item {
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.pm-search-item:last-child { border-bottom: none; }
|
||||
.pm-search-item:active { background: #fff7ed; }
|
||||
.pm-search-item .match-type {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
background: #f3f4f6;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pm-search-register {
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #ea580c;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.pm-search-register:active { background: #fff7ed; }
|
||||
|
||||
/* 폼 필드 */
|
||||
.pm-field { margin-bottom: 12px; }
|
||||
.pm-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px; }
|
||||
.pm-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pm-input:focus { border-color: #ea580c; }
|
||||
.pm-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
background: white;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 사진 */
|
||||
.pm-photo-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border: 1.5px dashed #d1d5db;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
min-height: 44px;
|
||||
}
|
||||
.pm-photo-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 제출 */
|
||||
.pm-submit {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #ea580c;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 16px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.pm-submit:active { background: #c2410c; }
|
||||
.pm-submit:disabled { background: #d1d5db; cursor: not-allowed; }
|
||||
|
||||
/* 상세 시트 */
|
||||
.pm-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.pm-detail-label { color: #9ca3af; }
|
||||
.pm-detail-value { color: #1f2937; font-weight: 500; }
|
||||
.pm-received-photo {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 빈 상태 */
|
||||
.pm-empty {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.pm-empty i { font-size: 32px; margin-bottom: 8px; display: block; }
|
||||
|
||||
/* 로딩 */
|
||||
.pm-loading {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 스피너 애니메이션 */
|
||||
@keyframes pm-spin { to { transform: translateY(-50%) rotate(360deg); } }
|
||||
.pm-search-spinner.show i { animation: pm-spin 0.8s linear infinite; }
|
||||
147
system1-factory/web/pages/purchase/request-mobile.html
Normal file
147
system1-factory/web/pages/purchase/request-mobile.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>소모품 신청 - TK 공장관리</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026040101">
|
||||
<link rel="stylesheet" href="/css/purchase-mobile.css?v=2026040101">
|
||||
<script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- 헤더 -->
|
||||
<header class="bg-orange-700 text-white sticky top-0 z-50">
|
||||
<div class="px-4 flex justify-between items-center h-12">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="mobileMenuBtn" class="text-orange-200 hover:text-white"><i class="fas fa-bars text-lg"></i></button>
|
||||
<h1 class="text-base font-semibold">소모품 신청</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span id="headerUserName" class="text-sm text-orange-200"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 사이드 네비 -->
|
||||
<nav id="sideNav" class="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-40 transform -translate-x-full transition-transform duration-200" style="top:48px"></nav>
|
||||
<div id="mobileOverlay" class="fixed inset-0 bg-black/40 z-30 hidden" onclick="toggleMobileMenu()"></div>
|
||||
|
||||
<div class="pm-content">
|
||||
<!-- 상태 탭 -->
|
||||
<div class="pm-tabs" id="statusTabs">
|
||||
<button class="pm-tab active" data-status="" onclick="filterByStatus(this)">전체</button>
|
||||
<button class="pm-tab" data-status="pending" onclick="filterByStatus(this)">대기</button>
|
||||
<button class="pm-tab" data-status="grouped" onclick="filterByStatus(this)">구매진행중</button>
|
||||
<button class="pm-tab" data-status="purchased" onclick="filterByStatus(this)">구매완료</button>
|
||||
<button class="pm-tab" data-status="received" onclick="filterByStatus(this)">입고완료</button>
|
||||
</div>
|
||||
|
||||
<!-- 카드 리스트 -->
|
||||
<div class="pm-cards" id="requestCards"></div>
|
||||
<div class="pm-loading hidden" id="loadingMore">더 불러오는 중...</div>
|
||||
</div>
|
||||
|
||||
<!-- FAB -->
|
||||
<button class="pm-fab" onclick="openRequestSheet()"><i class="fas fa-plus"></i></button>
|
||||
|
||||
<!-- 신청 바텀시트 -->
|
||||
<div class="pm-overlay" id="requestOverlay" onclick="closeRequestSheet()"></div>
|
||||
<div class="pm-sheet" id="requestSheet">
|
||||
<div class="pm-sheet-handle"></div>
|
||||
<div class="pm-sheet-header">
|
||||
<span class="pm-sheet-title">소모품 신청</span>
|
||||
<button class="pm-sheet-close" onclick="closeRequestSheet()"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="pm-sheet-body">
|
||||
<!-- 검색 -->
|
||||
<div class="pm-search-wrap">
|
||||
<input type="text" id="searchInput" class="pm-search-input" placeholder="품목 검색 (이름, 초성, 별칭)">
|
||||
<div class="pm-search-spinner" id="searchSpinner"><i class="fas fa-spinner text-orange-500"></i></div>
|
||||
</div>
|
||||
<div class="pm-search-results" id="searchResults"></div>
|
||||
|
||||
<!-- 선택된 품목 표시 -->
|
||||
<div id="selectedItemWrap" class="hidden mb-3">
|
||||
<div class="flex items-center gap-2 p-3 bg-orange-50 rounded-lg">
|
||||
<div class="flex-1">
|
||||
<div id="selectedItemName" class="font-medium text-sm text-gray-800"></div>
|
||||
<div id="selectedItemMeta" class="text-xs text-gray-500 mt-1"></div>
|
||||
</div>
|
||||
<button onclick="clearSelectedItem()" class="text-gray-400 hover:text-red-500"><i class="fas fa-times-circle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="selectedItemId">
|
||||
<input type="hidden" id="selectedCustomName">
|
||||
|
||||
<!-- 신규 품목 등록 영역 (Phase 4에서 활성화) -->
|
||||
<div id="newItemForm" class="hidden">
|
||||
<div class="p-3 bg-yellow-50 border border-yellow-200 rounded-lg mb-3">
|
||||
<div class="text-sm font-medium text-yellow-800 mb-2"><i class="fas fa-plus-circle mr-1"></i>새 품목 등록</div>
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">품목명 *</label>
|
||||
<input type="text" id="newItemName" class="pm-input" readonly>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">규격</label>
|
||||
<input type="text" id="newItemSpec" class="pm-input" placeholder="예: 300mm">
|
||||
</div>
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">제조사</label>
|
||||
<input type="text" id="newItemMaker" class="pm-input" placeholder="예: 3M">
|
||||
</div>
|
||||
</div>
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">분류 (선택)</label>
|
||||
<select id="newItemCategory" class="pm-select">
|
||||
<option value="">나중에 분류</option>
|
||||
<option value="consumable">소모품</option>
|
||||
<option value="safety">안전용품</option>
|
||||
<option value="repair">수선비</option>
|
||||
<option value="equipment">설비</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 수량/메모/사진 -->
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">수량 *</label>
|
||||
<input type="number" id="reqQuantity" class="pm-input" value="1" min="1" inputmode="numeric">
|
||||
</div>
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">메모</label>
|
||||
<input type="text" id="reqNotes" class="pm-input" placeholder="요청 사항">
|
||||
</div>
|
||||
<div class="pm-field">
|
||||
<label class="pm-label">사진 첨부</label>
|
||||
<label class="pm-photo-btn">
|
||||
<i class="fas fa-camera"></i>
|
||||
<span id="photoLabel">사진 촬영/선택</span>
|
||||
<input type="file" id="reqPhotoInput" accept="image/*,.heic,.heif" capture="environment" class="hidden" onchange="onMobilePhotoSelected(this)">
|
||||
</label>
|
||||
<img id="reqPhotoPreview" class="pm-photo-preview hidden">
|
||||
</div>
|
||||
|
||||
<button id="submitBtn" class="pm-submit" onclick="submitRequest()">신청하기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 바텀시트 -->
|
||||
<div class="pm-overlay" id="detailOverlay" onclick="closeDetailSheet()"></div>
|
||||
<div class="pm-sheet" id="detailSheet">
|
||||
<div class="pm-sheet-handle"></div>
|
||||
<div class="pm-sheet-header">
|
||||
<span class="pm-sheet-title">신청 상세</span>
|
||||
<button class="pm-sheet-close" onclick="closeDetailSheet()"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="pm-sheet-body" id="detailContent"></div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/tkfb-core.js?v=2026040101"></script>
|
||||
<script src="/static/js/purchase-request-mobile.js?v=2026040101"></script>
|
||||
<script src="/static/js/shared-bottom-nav.js?v=2026040101"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -114,7 +114,9 @@
|
||||
<select id="prFilterStatus" class="px-3 py-2 border rounded-lg text-sm" onchange="loadRequests()">
|
||||
<option value="">전체 상태</option>
|
||||
<option value="pending">대기</option>
|
||||
<option value="grouped">구매진행중</option>
|
||||
<option value="purchased">구매완료</option>
|
||||
<option value="received">입고완료</option>
|
||||
<option value="hold">보류</option>
|
||||
</select>
|
||||
<select id="prFilterCategory" class="px-3 py-2 border rounded-lg text-sm" onchange="loadRequests()">
|
||||
@@ -127,6 +129,27 @@
|
||||
<button onclick="loadRequests()" class="px-3 py-2 border rounded-lg text-sm text-gray-600 hover:bg-gray-100">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</button>
|
||||
<!-- 그룹 액션 (admin only) -->
|
||||
<div id="batchActions" class="hidden ml-auto flex items-center gap-2">
|
||||
<span id="selectedCount" class="text-sm text-gray-500">0건 선택</span>
|
||||
<button onclick="openBatchCreateModal()" class="px-3 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
|
||||
<i class="fas fa-layer-group mr-1"></i>그룹 생성
|
||||
</button>
|
||||
</div>
|
||||
<button id="batchViewBtn" class="hidden ml-2 px-3 py-2 border border-blue-300 text-blue-600 rounded-lg text-sm hover:bg-blue-50" onclick="toggleBatchView()">
|
||||
<i class="fas fa-layer-group mr-1"></i>그룹 보기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 그룹 목록 (토글) -->
|
||||
<div id="batchView" class="hidden mb-4">
|
||||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="font-semibold text-gray-700"><i class="fas fa-layer-group mr-1 text-blue-500"></i>구매 그룹</h3>
|
||||
<button onclick="loadBatches()" class="text-xs text-gray-400 hover:text-gray-600"><i class="fas fa-sync-alt"></i></button>
|
||||
</div>
|
||||
<div id="batchList" class="space-y-2 text-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 신청 목록 -->
|
||||
@@ -135,6 +158,7 @@
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs uppercase">
|
||||
<tr>
|
||||
<th class="px-2 py-3 text-center" id="thCheckbox" style="display:none"><input type="checkbox" id="selectAllCb" onchange="toggleSelectAll(this)"></th>
|
||||
<th class="px-4 py-3 text-left">품목</th>
|
||||
<th class="px-4 py-3 text-left">분류</th>
|
||||
<th class="px-4 py-3 text-right">수량</th>
|
||||
@@ -218,10 +242,75 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 그룹 생성 모달 -->
|
||||
<div id="batchCreateModal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeBatchCreateModal()">
|
||||
<div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-blue-700"><i class="fas fa-layer-group mr-2"></i>구매 그룹 <20><><EFBFBD>성</h3>
|
||||
<button onclick="closeBatchCreateModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div id="batchSelectedInfo" class="mb-3 text-sm text-gray-600"></div>
|
||||
<div class="mb-3">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">그룹명</label>
|
||||
<input type="text" id="bcName" class="w-full px-3 py-2 border rounded-lg text-sm" placeholder="예: 4월 소모품 1차">
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">분류</label>
|
||||
<select id="bcCategory" class="w-full px-3 py-2 border rounded-lg text-sm">
|
||||
<option value="">자동 분류</option>
|
||||
<option value="consumable">소모품</option>
|
||||
<option value="safety">안전<EFBFBD><EFBFBD><EFBFBD>품</option>
|
||||
<option value="repair">수선비</option>
|
||||
<option value="equipment">설비</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">업체</label>
|
||||
<select id="bcVendor" class="w-full px-3 py-2 border rounded-lg text-sm"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">메모</label>
|
||||
<input type="text" id="bcNotes" class="w-full px-3 py-2 border rounded-lg text-sm" placeholder="메모">
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" onclick="closeBatchCreateModal()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
|
||||
<button type="button" onclick="submitBatchCreate()" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">생성</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 입고 처리 <20><>달 -->
|
||||
<div id="receiveModal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeReceiveModal()">
|
||||
<div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-teal-700"><i class="fas fa-box-open mr-2"></i>입고 처리</h3>
|
||||
<button onclick="closeReceiveModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div id="receiveModalInfo" class="mb-4 p-3 bg-gray-50 rounded-lg"></div>
|
||||
<div class="mb-3">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">보관 위치</label>
|
||||
<input type="text" id="rcLocation" class="w-full px-3 py-2 border rounded-lg text-sm" placeholder="예: 1층 자재창고 A-3선반">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">입고 사진 (선택)</label>
|
||||
<input type="file" id="rcPhotoInput" accept="image/*,.heic,.heif" onchange="onReceivePhotoSelected(this)" class="text-sm">
|
||||
<div id="rcPhotoPreview" class="hidden mt-2">
|
||||
<img id="rcPhotoPreviewImg" class="w-24 h-24 rounded object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 gap-2">
|
||||
<button type="button" onclick="closeReceiveModal()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
|
||||
<button type="button" onclick="submitReceive()" class="px-4 py-2 bg-teal-600 text-white rounded-lg text-sm hover:bg-teal-700">입고 확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/tkfb-core.js?v=2026033108"></script>
|
||||
<script src="/static/js/purchase-request.js?v=2026031602"></script>
|
||||
<script src="/static/js/tkfb-core.js?v=2026040101"></script>
|
||||
<script src="/static/js/purchase-request.js?v=2026040101"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -42,6 +42,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
|
||||
.badge-gray { background: #f3f4f6; color: #6b7280; }
|
||||
.badge-orange { background: #fff7ed; color: #c2410c; }
|
||||
.badge-purple { background: #faf5ff; color: #7c3aed; }
|
||||
.badge-teal { background: #f0fdfa; color: #0d9488; }
|
||||
|
||||
/* Collapsible */
|
||||
.collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
|
||||
|
||||
393
system1-factory/web/static/js/purchase-request-mobile.js
Normal file
393
system1-factory/web/static/js/purchase-request-mobile.js
Normal file
@@ -0,0 +1,393 @@
|
||||
/* ===== 소모품 신청 모바일 ===== */
|
||||
const TKUSER_BASE_URL = location.hostname.includes('technicalkorea.net')
|
||||
? 'https://tkuser.technicalkorea.net'
|
||||
: location.protocol + '//' + location.hostname + ':30180';
|
||||
|
||||
const CAT_LABELS = { consumable: '소모품', safety: '안전용품', repair: '수선비', equipment: '설비' };
|
||||
const STATUS_LABELS = { pending: '대기', grouped: '구매진행중', purchased: '구매완료', received: '입고완료', hold: '보류' };
|
||||
const STATUS_COLORS = { pending: 'badge-amber', grouped: 'badge-blue', purchased: 'badge-green', received: 'badge-teal', hold: 'badge-gray' };
|
||||
const MATCH_LABELS = { exact: '정확', name: '이름', alias: '별칭', spec: '규격', chosung: '초성', chosung_alias: '초성' };
|
||||
|
||||
let currentPage = 1;
|
||||
let currentStatus = '';
|
||||
let totalPages = 1;
|
||||
let isLoadingMore = false;
|
||||
let requestsList = [];
|
||||
let photoBase64 = null;
|
||||
let searchTimer = null;
|
||||
let isRegisterMode = false;
|
||||
|
||||
/* ===== 상태 탭 필터 ===== */
|
||||
function filterByStatus(btn) {
|
||||
document.querySelectorAll('.pm-tab').forEach(t => t.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
currentStatus = btn.dataset.status;
|
||||
currentPage = 1;
|
||||
requestsList = [];
|
||||
loadRequests();
|
||||
}
|
||||
|
||||
/* ===== 신청 목록 로드 ===== */
|
||||
async function loadRequests(append = false) {
|
||||
try {
|
||||
if (!append) {
|
||||
document.getElementById('requestCards').innerHTML = '<div class="pm-loading">불러오는 중...</div>';
|
||||
}
|
||||
const params = new URLSearchParams({ page: currentPage, limit: 20 });
|
||||
if (currentStatus) params.set('status', currentStatus);
|
||||
|
||||
const res = await api('/purchase-requests/my-requests?' + params.toString());
|
||||
const items = res.data || [];
|
||||
totalPages = res.pagination?.totalPages || 1;
|
||||
|
||||
if (append) {
|
||||
requestsList = requestsList.concat(items);
|
||||
} else {
|
||||
requestsList = items;
|
||||
}
|
||||
renderCards();
|
||||
} catch (e) {
|
||||
document.getElementById('requestCards').innerHTML = `<div class="pm-empty"><i class="fas fa-exclamation-circle"></i>${escapeHtml(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCards() {
|
||||
const container = document.getElementById('requestCards');
|
||||
if (!requestsList.length) {
|
||||
container.innerHTML = '<div class="pm-empty"><i class="fas fa-box-open"></i>신청 내역이 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = requestsList.map(r => {
|
||||
const itemName = r.item_name || r.custom_item_name || '-';
|
||||
const category = r.category || r.custom_category;
|
||||
const catLabel = CAT_LABELS[category] || category || '';
|
||||
const statusLabel = STATUS_LABELS[r.status] || r.status;
|
||||
const statusColor = STATUS_COLORS[r.status] || 'badge-gray';
|
||||
const isCustom = !r.item_id && r.custom_item_name;
|
||||
|
||||
return `<div class="pm-card" onclick="openDetail(${r.request_id})">
|
||||
<div class="pm-card-header">
|
||||
<div>
|
||||
<div class="pm-card-name">${escapeHtml(itemName)}${isCustom ? '<span class="pm-card-custom">(직접입력)</span>' : ''}</div>
|
||||
${catLabel ? `<span class="badge ${STATUS_COLORS[category] || 'badge-gray'} mt-1" style="font-size:11px">${catLabel}</span>` : ''}
|
||||
</div>
|
||||
<span class="badge ${statusColor}">${statusLabel}</span>
|
||||
</div>
|
||||
<div class="pm-card-meta">
|
||||
<span>수량: <span class="pm-card-qty">${r.quantity}</span></span>
|
||||
<span>${formatDate(r.request_date)}</span>
|
||||
${r.batch_name ? `<span><i class="fas fa-layer-group"></i> ${escapeHtml(r.batch_name)}</span>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
/* ===== 무한 스크롤 ===== */
|
||||
window.addEventListener('scroll', () => {
|
||||
if (isLoadingMore || currentPage >= totalPages) return;
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
|
||||
isLoadingMore = true;
|
||||
currentPage++;
|
||||
document.getElementById('loadingMore').classList.remove('hidden');
|
||||
loadRequests(true).finally(() => {
|
||||
isLoadingMore = false;
|
||||
document.getElementById('loadingMore').classList.add('hidden');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* ===== 상세 바텀시트 ===== */
|
||||
function openDetail(requestId) {
|
||||
const r = requestsList.find(x => x.request_id === requestId);
|
||||
if (!r) return;
|
||||
|
||||
const itemName = r.item_name || r.custom_item_name || '-';
|
||||
const category = r.category || r.custom_category;
|
||||
const catLabel = CAT_LABELS[category] || category || '-';
|
||||
const statusLabel = STATUS_LABELS[r.status] || r.status;
|
||||
const statusColor = STATUS_COLORS[r.status] || 'badge-gray';
|
||||
|
||||
let html = `
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-lg font-bold">${escapeHtml(itemName)}</div>
|
||||
<span class="badge ${statusColor} mt-2">${statusLabel}</span>
|
||||
</div>
|
||||
<div class="pm-detail-row"><span class="pm-detail-label">분류</span><span class="pm-detail-value">${catLabel}</span></div>
|
||||
<div class="pm-detail-row"><span class="pm-detail-label">수량</span><span class="pm-detail-value">${r.quantity}</span></div>
|
||||
<div class="pm-detail-row"><span class="pm-detail-label">신청일</span><span class="pm-detail-value">${formatDate(r.request_date)}</span></div>
|
||||
`;
|
||||
if (r.notes) {
|
||||
html += `<div class="pm-detail-row"><span class="pm-detail-label">메모</span><span class="pm-detail-value">${escapeHtml(r.notes)}</span></div>`;
|
||||
}
|
||||
if (r.batch_name) {
|
||||
html += `<div class="pm-detail-row"><span class="pm-detail-label">구매 그룹</span><span class="pm-detail-value">${escapeHtml(r.batch_name)}</span></div>`;
|
||||
}
|
||||
if (r.hold_reason) {
|
||||
html += `<div class="pm-detail-row"><span class="pm-detail-label">보류 사유</span><span class="pm-detail-value text-red-600">${escapeHtml(r.hold_reason)}</span></div>`;
|
||||
}
|
||||
|
||||
// 입고 정보
|
||||
if (r.status === 'received') {
|
||||
html += `<div class="mt-4 p-3 bg-teal-50 rounded-lg">
|
||||
<div class="text-sm font-semibold text-teal-700 mb-2"><i class="fas fa-box-open mr-1"></i>입고 완료</div>`;
|
||||
if (r.received_location) {
|
||||
html += `<div class="text-sm text-gray-700"><i class="fas fa-map-marker-alt mr-1 text-teal-500"></i>보관위치: ${escapeHtml(r.received_location)}</div>`;
|
||||
}
|
||||
if (r.received_at) {
|
||||
html += `<div class="text-xs text-gray-500 mt-1">${formatDateTime(r.received_at)}${r.received_by_name ? ' · ' + escapeHtml(r.received_by_name) : ''}</div>`;
|
||||
}
|
||||
if (r.received_photo_path) {
|
||||
html += `<img src="${r.received_photo_path}" class="pm-received-photo" onerror="this.style.display='none'">`;
|
||||
}
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
// 신청 사진
|
||||
if (r.pr_photo_path) {
|
||||
html += `<div class="mt-3"><div class="text-xs text-gray-500 mb-1">첨부 사진</div><img src="${r.pr_photo_path}" class="pm-received-photo" onerror="this.style.display='none'"></div>`;
|
||||
}
|
||||
|
||||
document.getElementById('detailContent').innerHTML = html;
|
||||
document.getElementById('detailOverlay').classList.add('open');
|
||||
document.getElementById('detailSheet').classList.add('open');
|
||||
}
|
||||
|
||||
function closeDetailSheet() {
|
||||
document.getElementById('detailOverlay').classList.remove('open');
|
||||
document.getElementById('detailSheet').classList.remove('open');
|
||||
}
|
||||
|
||||
/* ===== 신청 바텀시트 ===== */
|
||||
function openRequestSheet() {
|
||||
document.getElementById('requestOverlay').classList.add('open');
|
||||
document.getElementById('requestSheet').classList.add('open');
|
||||
document.getElementById('searchInput').focus();
|
||||
}
|
||||
|
||||
function closeRequestSheet() {
|
||||
document.getElementById('requestOverlay').classList.remove('open');
|
||||
document.getElementById('requestSheet').classList.remove('open');
|
||||
resetRequestForm();
|
||||
}
|
||||
|
||||
function resetRequestForm() {
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.getElementById('searchResults').classList.remove('open');
|
||||
document.getElementById('selectedItemWrap').classList.add('hidden');
|
||||
document.getElementById('selectedItemId').value = '';
|
||||
document.getElementById('selectedCustomName').value = '';
|
||||
document.getElementById('newItemForm').classList.add('hidden');
|
||||
document.getElementById('reqQuantity').value = '1';
|
||||
document.getElementById('reqNotes').value = '';
|
||||
document.getElementById('reqPhotoInput').value = '';
|
||||
document.getElementById('reqPhotoPreview').classList.add('hidden');
|
||||
document.getElementById('photoLabel').textContent = '사진 촬영/선택';
|
||||
photoBase64 = null;
|
||||
isRegisterMode = false;
|
||||
}
|
||||
|
||||
/* ===== 서버 스마트 검색 ===== */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const input = document.getElementById('searchInput');
|
||||
input.addEventListener('input', () => {
|
||||
clearTimeout(searchTimer);
|
||||
const q = input.value.trim();
|
||||
if (q.length === 0) {
|
||||
document.getElementById('searchResults').classList.remove('open');
|
||||
document.getElementById('searchSpinner').classList.remove('show');
|
||||
return;
|
||||
}
|
||||
document.getElementById('searchSpinner').classList.add('show');
|
||||
searchTimer = setTimeout(async () => {
|
||||
try {
|
||||
const res = await api('/purchase-requests/search?q=' + encodeURIComponent(q));
|
||||
renderSearchResults(res.data || [], q);
|
||||
} catch (e) {
|
||||
console.error('검색 오류:', e);
|
||||
} finally {
|
||||
document.getElementById('searchSpinner').classList.remove('show');
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
function renderSearchResults(items, query) {
|
||||
const container = document.getElementById('searchResults');
|
||||
let html = '';
|
||||
|
||||
items.forEach(item => {
|
||||
const catLabel = CAT_LABELS[item.category] || '';
|
||||
const matchLabel = MATCH_LABELS[item._matchType] || '';
|
||||
const spec = item.spec ? ' [' + escapeHtml(item.spec) + ']' : '';
|
||||
const maker = item.maker ? ' (' + escapeHtml(item.maker) + ')' : '';
|
||||
html += `<div class="pm-search-item" onclick="selectSearchItem(${item.item_id})">
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-medium">${escapeHtml(item.item_name)}${spec}${maker}</div>
|
||||
${catLabel ? `<div class="text-xs text-gray-400 mt-0.5">${catLabel}</div>` : ''}
|
||||
</div>
|
||||
${matchLabel ? `<span class="match-type">${matchLabel}</span>` : ''}
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 새 품목 등록 옵션
|
||||
html += `<div class="pm-search-register" onclick="selectNewItem()">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
<span>"${escapeHtml(query)}" 새 품목으로 등록 후 신청</span>
|
||||
</div>`;
|
||||
|
||||
container.innerHTML = html;
|
||||
container.classList.add('open');
|
||||
}
|
||||
|
||||
/* ===== 품목 선택 ===== */
|
||||
let searchItemsCache = [];
|
||||
|
||||
function selectSearchItem(itemId) {
|
||||
// API 검색 결과에서 선택 — searchResults에서 데이터 가져오기
|
||||
api('/purchase-requests/search?q=' + encodeURIComponent(document.getElementById('searchInput').value.trim()))
|
||||
.then(res => {
|
||||
const item = (res.data || []).find(i => i.item_id === itemId);
|
||||
if (!item) return;
|
||||
document.getElementById('selectedItemId').value = item.item_id;
|
||||
document.getElementById('selectedCustomName').value = '';
|
||||
document.getElementById('selectedItemName').textContent = item.item_name + (item.spec ? ' [' + item.spec + ']' : '') + (item.maker ? ' (' + item.maker + ')' : '');
|
||||
document.getElementById('selectedItemMeta').textContent = (CAT_LABELS[item.category] || '') + (item.base_price ? ' · ' + Number(item.base_price).toLocaleString() + '원' : '');
|
||||
document.getElementById('selectedItemWrap').classList.remove('hidden');
|
||||
document.getElementById('searchResults').classList.remove('open');
|
||||
document.getElementById('newItemForm').classList.add('hidden');
|
||||
isRegisterMode = false;
|
||||
});
|
||||
}
|
||||
|
||||
function selectNewItem() {
|
||||
const query = document.getElementById('searchInput').value.trim();
|
||||
if (!query) return;
|
||||
document.getElementById('selectedItemId').value = '';
|
||||
document.getElementById('selectedCustomName').value = query;
|
||||
document.getElementById('selectedItemName').textContent = query;
|
||||
document.getElementById('selectedItemMeta').textContent = '직접 입력';
|
||||
document.getElementById('selectedItemWrap').classList.remove('hidden');
|
||||
document.getElementById('searchResults').classList.remove('open');
|
||||
|
||||
// 신규 등록 폼 표시
|
||||
document.getElementById('newItemForm').classList.remove('hidden');
|
||||
document.getElementById('newItemName').value = query;
|
||||
isRegisterMode = true;
|
||||
}
|
||||
|
||||
function clearSelectedItem() {
|
||||
document.getElementById('selectedItemWrap').classList.add('hidden');
|
||||
document.getElementById('selectedItemId').value = '';
|
||||
document.getElementById('selectedCustomName').value = '';
|
||||
document.getElementById('newItemForm').classList.add('hidden');
|
||||
document.getElementById('searchInput').value = '';
|
||||
isRegisterMode = false;
|
||||
}
|
||||
|
||||
/* ===== 사진 ===== */
|
||||
async function onMobilePhotoSelected(inputEl) {
|
||||
const file = inputEl.files[0];
|
||||
if (!file) return;
|
||||
let processFile = file;
|
||||
|
||||
const isHeic = file.type === 'image/heic' || file.type === 'image/heif' ||
|
||||
file.name.toLowerCase().endsWith('.heic') || file.name.toLowerCase().endsWith('.heif');
|
||||
if (isHeic && typeof heic2any !== 'undefined') {
|
||||
document.getElementById('photoLabel').textContent = '변환 중...';
|
||||
try {
|
||||
const blob = await heic2any({ blob: file, toType: 'image/jpeg', quality: 0.85 });
|
||||
processFile = new File([blob], file.name.replace(/\.hei[cf]$/i, '.jpg'), { type: 'image/jpeg' });
|
||||
} catch (e) {
|
||||
console.warn('HEIC 변환 실패, 원본 사용:', e);
|
||||
// 폴백: 원본 파일 그대로 사용
|
||||
}
|
||||
}
|
||||
|
||||
if (processFile.size > 10 * 1024 * 1024) {
|
||||
showToast('파일 크기는 10MB 이하만 가능합니다.', 'error');
|
||||
document.getElementById('photoLabel').textContent = '사진 촬영/선택';
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
photoBase64 = e.target.result;
|
||||
document.getElementById('reqPhotoPreview').src = photoBase64;
|
||||
document.getElementById('reqPhotoPreview').classList.remove('hidden');
|
||||
document.getElementById('photoLabel').textContent = '사진 변경';
|
||||
};
|
||||
reader.readAsDataURL(processFile);
|
||||
}
|
||||
|
||||
/* ===== 신청 제출 ===== */
|
||||
async function submitRequest() {
|
||||
const itemId = document.getElementById('selectedItemId').value;
|
||||
const customName = document.getElementById('selectedCustomName').value;
|
||||
const quantity = parseInt(document.getElementById('reqQuantity').value) || 0;
|
||||
|
||||
if (!itemId && !customName) { showToast('품목을 선택하거나 검색해주세요.', 'error'); return; }
|
||||
if (quantity < 1) { showToast('수량은 1 이상이어야 합니다.', 'error'); return; }
|
||||
|
||||
const btn = document.getElementById('submitBtn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = '처리 중...';
|
||||
|
||||
try {
|
||||
if (isRegisterMode && customName) {
|
||||
// Phase 4: 인라인 등록 + 신청
|
||||
const body = {
|
||||
item_name: customName,
|
||||
spec: document.getElementById('newItemSpec').value.trim() || null,
|
||||
maker: document.getElementById('newItemMaker').value.trim() || null,
|
||||
category: document.getElementById('newItemCategory').value || null,
|
||||
quantity,
|
||||
notes: document.getElementById('reqNotes').value.trim() || null
|
||||
};
|
||||
if (photoBase64) body.photo = photoBase64;
|
||||
await api('/purchase-requests/register-and-request', {
|
||||
method: 'POST', body: JSON.stringify(body)
|
||||
});
|
||||
} else {
|
||||
// 기존 방식
|
||||
const body = { quantity, notes: document.getElementById('reqNotes').value.trim() };
|
||||
if (itemId) {
|
||||
body.item_id = parseInt(itemId);
|
||||
} else {
|
||||
body.custom_item_name = customName;
|
||||
body.custom_category = document.getElementById('newItemCategory')?.value || null;
|
||||
}
|
||||
if (photoBase64) body.photo = photoBase64;
|
||||
await api('/purchase-requests', {
|
||||
method: 'POST', body: JSON.stringify(body)
|
||||
});
|
||||
}
|
||||
|
||||
showToast('소모품 신청이 등록되었습니다.');
|
||||
closeRequestSheet();
|
||||
currentPage = 1;
|
||||
requestsList = [];
|
||||
await loadRequests();
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = '신청하기';
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== URL 파라미터로 상세 열기 ===== */
|
||||
function checkViewParam() {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const viewId = urlParams.get('view');
|
||||
if (viewId) {
|
||||
// 데이터 로드 후 상세 열기
|
||||
setTimeout(() => openDetail(parseInt(viewId)), 500);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Init ===== */
|
||||
(async function() {
|
||||
if (!await initAuth()) return;
|
||||
await loadRequests();
|
||||
checkViewParam();
|
||||
})();
|
||||
@@ -7,8 +7,8 @@ const CAT_LABELS = { consumable: '소모품', safety: '안전용품', repair: '
|
||||
const CAT_COLORS = { consumable: 'badge-blue', safety: 'badge-green', repair: 'badge-amber', equipment: 'badge-purple' };
|
||||
const CAT_BG = { consumable: '#dbeafe', safety: '#dcfce7', repair: '#fef3c7', equipment: '#f3e8ff' };
|
||||
const CAT_FG = { consumable: '#1e40af', safety: '#166534', repair: '#92400e', equipment: '#7e22ce' };
|
||||
const STATUS_LABELS = { pending: '대기', purchased: '구매완료', hold: '보류' };
|
||||
const STATUS_COLORS = { pending: 'badge-amber', purchased: 'badge-green', hold: 'badge-gray' };
|
||||
const STATUS_LABELS = { pending: '대기', grouped: '구매진행중', purchased: '구매완료', received: '입고완료', hold: '보류' };
|
||||
const STATUS_COLORS = { pending: 'badge-amber', grouped: 'badge-blue', purchased: 'badge-green', received: 'badge-teal', hold: 'badge-gray' };
|
||||
|
||||
function _fmtSpec(spec) { return spec ? ' [' + spec + ']' : ''; }
|
||||
|
||||
@@ -21,6 +21,8 @@ let isAdmin = false;
|
||||
let photoBase64 = null;
|
||||
let searchDebounceTimer = null;
|
||||
let dropdownActiveIndex = -1;
|
||||
let selectedRequestIds = new Set();
|
||||
let batchesVisible = false;
|
||||
|
||||
async function loadInitialData() {
|
||||
try {
|
||||
@@ -310,8 +312,18 @@ async function loadRequests() {
|
||||
|
||||
function renderRequests() {
|
||||
const tbody = document.getElementById('prRequestList');
|
||||
selectedRequestIds.clear();
|
||||
updateSelectedCount();
|
||||
|
||||
// admin이면 체크박스 열 보이기, 그룹 버튼 보이기
|
||||
if (isAdmin) {
|
||||
document.getElementById('thCheckbox').style.display = '';
|
||||
document.getElementById('batchActions').classList.remove('hidden');
|
||||
document.getElementById('batchViewBtn').classList.remove('hidden');
|
||||
}
|
||||
|
||||
if (!requestsList.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-8 text-center text-gray-400">소모품 신청 내역이 없습니다.</td></tr>';
|
||||
tbody.innerHTML = `<tr><td colspan="${isAdmin ? 8 : 7}" class="px-4 py-8 text-center text-gray-400">소모품 신청 내역이 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = requestsList.map(r => {
|
||||
@@ -336,6 +348,11 @@ function renderRequests() {
|
||||
if (isAdmin && r.status === 'pending') {
|
||||
actions = `<button onclick="openPurchaseModal(${r.request_id})" class="px-2 py-1 bg-orange-500 text-white rounded text-xs hover:bg-orange-600 mr-1" title="구매 처리"><i class="fas fa-shopping-cart"></i></button>
|
||||
<button onclick="openHoldModal(${r.request_id})" class="px-2 py-1 bg-gray-400 text-white rounded text-xs hover:bg-gray-500" title="보류"><i class="fas fa-pause"></i></button>`;
|
||||
} else if (isAdmin && r.status === 'grouped') {
|
||||
actions = `<button onclick="openPurchaseModal(${r.request_id})" class="px-2 py-1 bg-orange-500 text-white rounded text-xs hover:bg-orange-600 mr-1" title="구매 처리"><i class="fas fa-shopping-cart"></i></button>
|
||||
<button onclick="openHoldModal(${r.request_id})" class="px-2 py-1 bg-gray-400 text-white rounded text-xs hover:bg-gray-500" title="보류"><i class="fas fa-pause"></i></button>`;
|
||||
} else if (isAdmin && r.status === 'purchased') {
|
||||
actions = `<button onclick="openReceiveModal(${r.request_id})" class="px-2 py-1 bg-teal-500 text-white rounded text-xs hover:bg-teal-600" title="입고 처리"><i class="fas fa-box-open"></i></button>`;
|
||||
} else if (isAdmin && r.status === 'hold') {
|
||||
actions = `<button onclick="revertRequest(${r.request_id})" class="px-2 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600" title="대기로 되돌리기"><i class="fas fa-undo"></i></button>`;
|
||||
}
|
||||
@@ -343,13 +360,18 @@ function renderRequests() {
|
||||
actions += ` <button onclick="deleteRequest(${r.request_id})" class="px-2 py-1 bg-red-400 text-white rounded text-xs hover:bg-red-500" title="삭제"><i class="fas fa-trash"></i></button>`;
|
||||
}
|
||||
|
||||
const cbCell = isAdmin && r.status === 'pending'
|
||||
? `<td class="px-2 py-3 text-center" style="${isAdmin ? '' : 'display:none'}"><input type="checkbox" class="request-cb h-4 w-4" data-id="${r.request_id}" onchange="onRequestChecked()"></td>`
|
||||
: `<td class="px-2 py-3" style="${isAdmin ? '' : 'display:none'}"></td>`;
|
||||
|
||||
return `<tr class="hover:bg-gray-50">
|
||||
${cbCell}
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
${photoSrc ? `<img src="${photoSrc}" class="w-8 h-8 rounded object-cover" onerror="this.style.display='none'">` : ''}
|
||||
<div>
|
||||
<div class="font-medium text-gray-800">${escapeHtml(itemName)}${r.spec ? ' <span class="text-gray-400">[' + escapeHtml(r.spec) + ']</span>' : ''}${isCustom ? ' <span class="text-xs text-orange-500">(직접입력)</span>' : ''}</div>
|
||||
<div class="text-xs text-gray-500">${escapeHtml(r.maker || '')}</div>
|
||||
<div class="text-xs text-gray-500">${escapeHtml(r.maker || '')}${r.batch_name ? ' <span class="text-blue-500"><i class="fas fa-layer-group"></i> ' + escapeHtml(r.batch_name) + '</span>' : ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@@ -508,6 +530,197 @@ async function deleteRequest(requestId) {
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
/* ===== 그룹화 기능 ===== */
|
||||
function onRequestChecked() {
|
||||
selectedRequestIds.clear();
|
||||
document.querySelectorAll('.request-cb:checked').forEach(cb => {
|
||||
selectedRequestIds.add(parseInt(cb.dataset.id));
|
||||
});
|
||||
updateSelectedCount();
|
||||
}
|
||||
|
||||
function updateSelectedCount() {
|
||||
const el = document.getElementById('selectedCount');
|
||||
if (el) el.textContent = selectedRequestIds.size + '건 선택';
|
||||
}
|
||||
|
||||
function toggleSelectAll(masterCb) {
|
||||
document.querySelectorAll('.request-cb').forEach(cb => {
|
||||
cb.checked = masterCb.checked;
|
||||
});
|
||||
onRequestChecked();
|
||||
}
|
||||
|
||||
function openBatchCreateModal() {
|
||||
if (selectedRequestIds.size === 0) { showToast('그룹에 포함할 신청 건을 선택해주세요.', 'error'); return; }
|
||||
document.getElementById('batchSelectedInfo').textContent = `${selectedRequestIds.size}건의 신청을 그룹으로 묶습니다.`;
|
||||
document.getElementById('bcName').value = '';
|
||||
document.getElementById('bcCategory').value = '';
|
||||
document.getElementById('bcNotes').value = '';
|
||||
// 업체 셀렉트 채우기
|
||||
const sel = document.getElementById('bcVendor');
|
||||
sel.innerHTML = '<option value="">업체 선택</option>' +
|
||||
vendorsList.map(v => `<option value="${v.vendor_id}">${escapeHtml(v.vendor_name)}</option>`).join('');
|
||||
document.getElementById('batchCreateModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeBatchCreateModal() {
|
||||
document.getElementById('batchCreateModal').classList.add('hidden');
|
||||
}
|
||||
|
||||
async function submitBatchCreate() {
|
||||
const body = {
|
||||
batch_name: document.getElementById('bcName').value.trim() || null,
|
||||
category: document.getElementById('bcCategory').value || null,
|
||||
vendor_id: parseInt(document.getElementById('bcVendor').value) || null,
|
||||
notes: document.getElementById('bcNotes').value.trim() || null,
|
||||
request_ids: Array.from(selectedRequestIds)
|
||||
};
|
||||
try {
|
||||
await api('/purchase-batches', { method: 'POST', body: JSON.stringify(body) });
|
||||
showToast('구매 그룹이 생성되었습니다.');
|
||||
closeBatchCreateModal();
|
||||
selectedRequestIds.clear();
|
||||
await loadRequests();
|
||||
if (batchesVisible) await loadBatches();
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
function toggleBatchView() {
|
||||
batchesVisible = !batchesVisible;
|
||||
document.getElementById('batchView').classList.toggle('hidden', !batchesVisible);
|
||||
if (batchesVisible) loadBatches();
|
||||
}
|
||||
|
||||
async function loadBatches() {
|
||||
try {
|
||||
const res = await api('/purchase-batches');
|
||||
const batches = res.data || [];
|
||||
const container = document.getElementById('batchList');
|
||||
if (!batches.length) {
|
||||
container.innerHTML = '<div class="text-gray-400 text-center py-4">생성된 그룹이 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
const BATCH_STATUS = { pending: { label: '진행중', color: 'badge-blue' }, purchased: { label: '구매완료', color: 'badge-green' }, received: { label: '입고완료', color: 'badge-teal' } };
|
||||
container.innerHTML = batches.map(b => {
|
||||
const s = BATCH_STATUS[b.status] || { label: b.status, color: 'badge-gray' };
|
||||
return `<div class="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50">
|
||||
<div>
|
||||
<span class="font-medium">${escapeHtml(b.batch_name || '그룹 #' + b.batch_id)}</span>
|
||||
<span class="badge ${s.color} ml-2">${s.label}</span>
|
||||
<span class="text-xs text-gray-400 ml-2">${b.request_count || 0}건</span>
|
||||
${b.vendor_name ? `<span class="text-xs text-gray-400 ml-1">· ${escapeHtml(b.vendor_name)}</span>` : ''}
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
${b.status === 'pending' ? `<button onclick="batchPurchase(${b.batch_id})" class="px-2 py-1 bg-orange-500 text-white rounded text-xs hover:bg-orange-600" title="일괄 구매"><i class="fas fa-shopping-cart"></i></button>
|
||||
<button onclick="batchDelete(${b.batch_id})" class="px-2 py-1 bg-red-400 text-white rounded text-xs hover:bg-red-500" title="삭제"><i class="fas fa-trash"></i></button>` : ''}
|
||||
${b.status === 'purchased' ? `<button onclick="batchReceive(${b.batch_id})" class="px-2 py-1 bg-teal-500 text-white rounded text-xs hover:bg-teal-600" title="일괄 입고"><i class="fas fa-box-open"></i></button>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
} catch (e) { console.error('그룹 목록 로드 실패:', e); }
|
||||
}
|
||||
|
||||
async function batchPurchase(batchId) {
|
||||
if (!confirm('이 그룹의 모든 신청을 구매완료 처리하시겠습니까?')) return;
|
||||
try {
|
||||
await api(`/purchase-batches/${batchId}/purchase`, { method: 'POST' });
|
||||
showToast('일괄 구매 처리 완료.');
|
||||
await Promise.all([loadRequests(), loadBatches()]);
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function batchDelete(batchId) {
|
||||
if (!confirm('이 그룹을 삭제하시겠습니까? 포함된 신청은 대기 상태로 복원됩니다.')) return;
|
||||
try {
|
||||
await api(`/purchase-batches/${batchId}`, { method: 'DELETE' });
|
||||
showToast('그룹이 삭제되었습니다.');
|
||||
await Promise.all([loadRequests(), loadBatches()]);
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function batchReceive(batchId) {
|
||||
// 간단한 입고 — 위치만 입력
|
||||
const location = prompt('보관 위치를 입력하세요 (선택):');
|
||||
if (location === null) return; // 취소
|
||||
try {
|
||||
await api(`/purchase-batches/${batchId}/receive`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ received_location: location || null })
|
||||
});
|
||||
showToast('일괄 입고 처리 완료.');
|
||||
await Promise.all([loadRequests(), loadBatches()]);
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
/* ===== 입고 처리 모달 ===== */
|
||||
let currentRequestForReceive = null;
|
||||
let receivePhotoBase64 = null;
|
||||
|
||||
function openReceiveModal(requestId) {
|
||||
const r = requestsList.find(x => x.request_id === requestId);
|
||||
if (!r) return;
|
||||
currentRequestForReceive = r;
|
||||
const itemName = r.item_name || r.custom_item_name || '-';
|
||||
document.getElementById('receiveModalInfo').innerHTML = `
|
||||
<div class="font-medium">${escapeHtml(itemName)}</div>
|
||||
<div class="text-xs text-gray-500 mt-1">수량: ${r.quantity} | 신청자: ${escapeHtml(r.requester_name || '')}</div>
|
||||
`;
|
||||
document.getElementById('rcLocation').value = '';
|
||||
receivePhotoBase64 = null;
|
||||
document.getElementById('rcPhotoPreview').classList.add('hidden');
|
||||
document.getElementById('rcPhotoInput').value = '';
|
||||
document.getElementById('receiveModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeReceiveModal() {
|
||||
document.getElementById('receiveModal').classList.add('hidden');
|
||||
currentRequestForReceive = null;
|
||||
receivePhotoBase64 = null;
|
||||
}
|
||||
|
||||
async function onReceivePhotoSelected(inputEl) {
|
||||
const file = inputEl.files[0];
|
||||
if (!file) return;
|
||||
let processFile = file;
|
||||
const isHeic = file.type === 'image/heic' || file.type === 'image/heif' ||
|
||||
file.name.toLowerCase().endsWith('.heic') || file.name.toLowerCase().endsWith('.heif');
|
||||
if (isHeic && typeof heic2any !== 'undefined') {
|
||||
try {
|
||||
const blob = await heic2any({ blob: file, toType: 'image/jpeg', quality: 0.85 });
|
||||
processFile = new File([blob], file.name.replace(/\.hei[cf]$/i, '.jpg'), { type: 'image/jpeg' });
|
||||
} catch (e) {
|
||||
// 변환 실패 시 원본 시도
|
||||
console.warn('HEIC 변환 실패, 원본 사용:', e);
|
||||
}
|
||||
}
|
||||
if (processFile.size > 10 * 1024 * 1024) { showToast('파일 크기는 10MB 이하만 가능합니다.', 'error'); return; }
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
receivePhotoBase64 = e.target.result;
|
||||
document.getElementById('rcPhotoPreviewImg').src = receivePhotoBase64;
|
||||
document.getElementById('rcPhotoPreview').classList.remove('hidden');
|
||||
};
|
||||
reader.readAsDataURL(processFile);
|
||||
}
|
||||
|
||||
async function submitReceive() {
|
||||
if (!currentRequestForReceive) return;
|
||||
const received_location = document.getElementById('rcLocation').value.trim();
|
||||
const body = { received_location };
|
||||
if (receivePhotoBase64) body.photo = receivePhotoBase64;
|
||||
|
||||
try {
|
||||
await api(`/purchase-requests/${currentRequestForReceive.request_id}/receive`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
showToast('입고 처리가 완료되었습니다.');
|
||||
closeReceiveModal();
|
||||
await loadRequests();
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
/* ===== Init ===== */
|
||||
(async function() {
|
||||
if (!await initAuth()) return;
|
||||
|
||||
@@ -20,6 +20,11 @@
|
||||
label: '작업보고',
|
||||
icon: '<svg ' + SVG_ATTR + '><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>'
|
||||
},
|
||||
{
|
||||
href: '/pages/purchase/request-mobile.html',
|
||||
label: '소모품',
|
||||
icon: '<svg ' + SVG_ATTR + '><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>'
|
||||
},
|
||||
{
|
||||
href: '/pages/attendance/my-vacation-info.html',
|
||||
label: '연차관리',
|
||||
|
||||
@@ -133,7 +133,8 @@ const NAV_MENU = [
|
||||
{ href: '/pages/attendance/work-status.html', icon: 'fa-briefcase', label: '근무 현황', key: 'inspection.work_status' },
|
||||
]},
|
||||
{ cat: '소모품 관리', items: [
|
||||
{ href: '/pages/purchase/request.html', icon: 'fa-shopping-cart', label: '생산 소모품 신청', key: 'purchase.request' },
|
||||
{ href: '/pages/purchase/request-mobile.html', icon: 'fa-shopping-cart', label: '소모품 신청', key: 'purchase.request_mobile' },
|
||||
{ href: '/pages/purchase/request.html', icon: 'fa-clipboard-list', label: '소모품 관리', key: 'purchase.request' },
|
||||
{ href: '/pages/admin/purchase-analysis.html', icon: 'fa-chart-line', label: '소모품 분석', key: 'purchase.analysis', admin: true },
|
||||
]},
|
||||
{ cat: '근태 관리', items: [
|
||||
|
||||
Reference in New Issue
Block a user