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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user