feat(purchase): 생산소모품 구매 관리 시스템 구현

tkuser: 업체(공급업체) CRUD + 소모품 마스터 CRUD (사진 업로드 포함)
tkfb: 구매신청 → 구매 처리 → 월간 분석/정산 전체 워크플로
설비(equipment) 분류 구매 시 자동 등록 + 실패 시 admin 알림

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-13 21:21:59 +09:00
parent 1abdb92a71
commit 3623551a6b
29 changed files with 2581 additions and 1 deletions

View File

@@ -0,0 +1,183 @@
/* ===== 구매 분석 페이지 ===== */
const CAT_LABELS = { consumable: '소모품', safety: '안전용품', repair: '수선비', equipment: '설비' };
const CAT_ICONS = { consumable: 'fa-box', safety: 'fa-hard-hat', repair: 'fa-wrench', equipment: 'fa-cogs' };
const CAT_BG = { consumable: 'bg-blue-50 text-blue-700', safety: 'bg-green-50 text-green-700', repair: 'bg-amber-50 text-amber-700', equipment: 'bg-purple-50 text-purple-700' };
let currentYearMonth = '';
async function loadAnalysis() {
currentYearMonth = document.getElementById('paMonth').value;
if (!currentYearMonth) { showToast('월을 선택해주세요.', 'error'); return; }
try {
const [summaryRes, purchasesRes, priceChangesRes] = await Promise.all([
api(`/settlements/summary?year_month=${currentYearMonth}`),
api(`/settlements/purchases?year_month=${currentYearMonth}`),
api(`/settlements/price-changes?year_month=${currentYearMonth}`)
]);
renderCategorySummary(summaryRes.data?.categorySummary || []);
renderVendorSummary(summaryRes.data?.vendorSummary || []);
renderPurchaseList(purchasesRes.data || []);
renderPriceChanges(priceChangesRes.data || []);
} catch (e) {
showToast('데이터 로드 실패: ' + e.message, 'error');
}
}
function renderCategorySummary(data) {
const el = document.getElementById('paCategorySummary');
const allCategories = ['consumable', 'safety', 'repair', 'equipment'];
const dataMap = {};
data.forEach(d => { dataMap[d.category] = d; });
const totalAmount = data.reduce((sum, d) => sum + Number(d.total_amount || 0), 0);
el.innerHTML = allCategories.map(cat => {
const d = dataMap[cat] || { count: 0, total_amount: 0 };
const label = CAT_LABELS[cat];
const icon = CAT_ICONS[cat];
const bg = CAT_BG[cat];
return `<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center gap-2 mb-2">
<div class="w-8 h-8 rounded-lg ${bg} flex items-center justify-center"><i class="fas ${icon} text-sm"></i></div>
<span class="text-sm font-medium text-gray-700">${label}</span>
</div>
<div class="text-xl font-bold text-gray-800">${Number(d.total_amount || 0).toLocaleString()}<span class="text-xs font-normal text-gray-400 ml-1">원</span></div>
<div class="text-xs text-gray-500 mt-1">${d.count || 0}건</div>
</div>`;
}).join('') + `
<div class="col-span-2 lg:col-span-4 bg-orange-50 rounded-xl p-3 text-center">
<span class="text-sm text-orange-700 font-semibold">월 합계: ${totalAmount.toLocaleString()}원</span>
</div>`;
}
function renderVendorSummary(data) {
const tbody = document.getElementById('paVendorSummary');
if (!data.length) {
tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-gray-400">해당 월 구매 내역이 없습니다.</td></tr>';
return;
}
tbody.innerHTML = data.map(v => {
const isCompleted = v.settlement_status === 'completed';
const statusBadge = isCompleted
? '<span class="badge badge-green">정산완료</span>'
: '<span class="badge badge-gray">미정산</span>';
const vendorName = v.vendor_name || '(업체 미지정)';
const vendorId = v.vendor_id || 0;
let actionBtn = '';
if (vendorId > 0) {
if (isCompleted) {
actionBtn = `<button onclick="cancelSettlement(${vendorId})" class="px-3 py-1 border border-gray-300 rounded text-xs text-gray-600 hover:bg-gray-50">정산 취소</button>`;
} else {
actionBtn = `<button onclick="completeSettlement(${vendorId})" class="px-3 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600">정산완료</button>`;
}
}
return `<tr class="hover:bg-gray-50">
<td class="px-4 py-3 font-medium text-gray-800">${escapeHtml(vendorName)}</td>
<td class="px-4 py-3 text-right">${v.count}건</td>
<td class="px-4 py-3 text-right font-medium">${Number(v.total_amount || 0).toLocaleString()}원</td>
<td class="px-4 py-3 text-center">${statusBadge}</td>
<td class="px-4 py-3 text-center">${actionBtn}</td>
</tr>`;
}).join('');
}
function renderPurchaseList(data) {
const tbody = document.getElementById('paPurchaseList');
if (!data.length) {
tbody.innerHTML = '<tr><td colspan="8" class="px-4 py-8 text-center text-gray-400">해당 월 구매 내역이 없습니다.</td></tr>';
return;
}
tbody.innerHTML = data.map(p => {
const catLabel = CAT_LABELS[p.category] || p.category;
const catColor = CAT_BG[p.category] || '';
const subtotal = (p.quantity || 0) * (p.unit_price || 0);
const basePrice = Number(p.base_price || 0);
const unitPrice = Number(p.unit_price || 0);
const hasPriceDiff = basePrice > 0 && unitPrice > 0 && basePrice !== unitPrice;
const priceDiffClass = hasPriceDiff ? (unitPrice > basePrice ? 'text-red-600 font-semibold' : 'text-blue-600 font-semibold') : '';
return `<tr class="hover:bg-gray-50 ${hasPriceDiff ? 'bg-yellow-50' : ''}">
<td class="px-4 py-3">
<div class="font-medium text-gray-800">${escapeHtml(p.item_name)}</div>
<div class="text-xs text-gray-500">${escapeHtml(p.maker || '')}</div>
</td>
<td class="px-4 py-3"><span class="px-1.5 py-0.5 rounded text-xs ${catColor}">${catLabel}</span></td>
<td class="px-4 py-3 text-right">${p.quantity}</td>
<td class="px-4 py-3 text-right ${priceDiffClass}">${unitPrice.toLocaleString()}${hasPriceDiff ? `<div class="text-xs text-gray-400">(기준: ${basePrice.toLocaleString()})</div>` : ''}</td>
<td class="px-4 py-3 text-right font-medium">${subtotal.toLocaleString()}원</td>
<td class="px-4 py-3 text-gray-600">${escapeHtml(p.vendor_name || '-')}</td>
<td class="px-4 py-3 text-gray-600">${formatDate(p.purchase_date)}</td>
<td class="px-4 py-3 text-gray-500 text-xs">${escapeHtml(p.notes || '')}</td>
</tr>`;
}).join('');
}
function renderPriceChanges(data) {
const el = document.getElementById('paPriceChanges');
if (!data.length) {
el.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">가격 변동 항목이 없습니다.</p>';
return;
}
el.innerHTML = `<table class="w-full text-sm">
<thead class="bg-gray-50 text-gray-600 text-xs uppercase">
<tr>
<th class="px-4 py-3 text-left">품목</th>
<th class="px-4 py-3 text-right">기준가</th>
<th class="px-4 py-3 text-right">실구매가</th>
<th class="px-4 py-3 text-right">차이</th>
<th class="px-4 py-3 text-left">업체</th>
<th class="px-4 py-3 text-left">구매일</th>
</tr>
</thead>
<tbody class="divide-y">${data.map(p => {
const diff = Number(p.unit_price) - Number(p.base_price);
const arrow = diff > 0 ? '&#9650;' : '&#9660;';
const color = diff > 0 ? 'text-red-600' : 'text-blue-600';
return `<tr class="hover:bg-gray-50">
<td class="px-4 py-3">${escapeHtml(p.item_name)} ${p.maker ? '(' + escapeHtml(p.maker) + ')' : ''}</td>
<td class="px-4 py-3 text-right">${Number(p.base_price).toLocaleString()}원</td>
<td class="px-4 py-3 text-right font-medium ${color}">${Number(p.unit_price).toLocaleString()}원</td>
<td class="px-4 py-3 text-right ${color}">${arrow} ${Math.abs(diff).toLocaleString()}원</td>
<td class="px-4 py-3 text-gray-600">${escapeHtml(p.vendor_name || '-')}</td>
<td class="px-4 py-3 text-gray-600">${formatDate(p.purchase_date)}</td>
</tr>`;
}).join('')}</tbody>
</table>`;
}
/* ===== 정산 처리 ===== */
async function completeSettlement(vendorId) {
if (!confirm('이 업체의 정산을 완료 처리하시겠습니까?')) return;
try {
await api('/settlements/complete', {
method: 'POST',
body: JSON.stringify({ year_month: currentYearMonth, vendor_id: vendorId })
});
showToast('정산 완료 처리되었습니다.');
await loadAnalysis();
} catch (e) { showToast(e.message, 'error'); }
}
async function cancelSettlement(vendorId) {
if (!confirm('정산 완료를 취소하시겠습니까?')) return;
try {
await api('/settlements/cancel', {
method: 'POST',
body: JSON.stringify({ year_month: currentYearMonth, vendor_id: vendorId })
});
showToast('정산이 취소되었습니다.');
await loadAnalysis();
} catch (e) { showToast(e.message, 'error'); }
}
/* ===== Init ===== */
(async function() {
if (!await initAuth()) return;
// 기본값: 현재 월
const now = new Date();
document.getElementById('paMonth').value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
})();

View File

@@ -0,0 +1,294 @@
/* ===== 구매신청 페이지 ===== */
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 CAT_COLORS = { consumable: 'badge-blue', safety: 'badge-green', repair: 'badge-amber', equipment: 'badge-purple' };
const STATUS_LABELS = { pending: '대기', purchased: '구매완료', hold: '보류' };
const STATUS_COLORS = { pending: 'badge-amber', purchased: 'badge-green', hold: 'badge-gray' };
let consumableItems = [];
let vendorsList = [];
let requestsList = [];
let currentRequestForPurchase = null;
let currentRequestForHold = null;
let isAdmin = false;
async function loadInitialData() {
try {
const [itemsRes, vendorsRes] = await Promise.all([
api('/purchase-requests/consumable-items'),
api('/purchase-requests/vendors')
]);
consumableItems = itemsRes.data || [];
vendorsList = vendorsRes.data || [];
populateItemSelect();
populateVendorSelect();
} catch (e) {
console.error('초기 데이터 로드 실패:', e);
}
}
function populateItemSelect() {
const sel = document.getElementById('prItemSelect');
const groups = {};
consumableItems.forEach(item => {
const cat = CAT_LABELS[item.category] || item.category;
if (!groups[cat]) groups[cat] = [];
groups[cat].push(item);
});
let html = '<option value="">소모품 선택</option>';
for (const [cat, items] of Object.entries(groups)) {
html += `<optgroup label="${cat}">`;
items.forEach(item => {
const maker = item.maker ? ` (${escapeHtml(item.maker)})` : '';
html += `<option value="${item.item_id}">${escapeHtml(item.item_name)}${maker}</option>`;
});
html += '</optgroup>';
}
sel.innerHTML = html;
}
function populateVendorSelect() {
const sel = document.getElementById('pmVendor');
sel.innerHTML = '<option value="">업체 선택 (선택사항)</option>' +
vendorsList.map(v => `<option value="${v.vendor_id}">${escapeHtml(v.vendor_name)}</option>`).join('');
}
function onItemSelect() {
const itemId = parseInt(document.getElementById('prItemSelect').value);
const preview = document.getElementById('prItemPreview');
const item = consumableItems.find(i => i.item_id === itemId);
if (!item) { preview.classList.add('hidden'); return; }
preview.classList.remove('hidden');
const photoEl = document.getElementById('prItemPhoto');
if (item.photo_path) {
photoEl.src = TKUSER_BASE_URL + item.photo_path;
photoEl.classList.remove('hidden');
photoEl.onerror = () => photoEl.classList.add('hidden');
} else {
photoEl.classList.add('hidden');
}
document.getElementById('prItemInfo').textContent = `${item.item_name} ${item.maker ? '(' + item.maker + ')' : ''}`;
const price = item.base_price ? Number(item.base_price).toLocaleString() + '원/' + (item.unit || 'EA') : '기준가 미설정';
document.getElementById('prItemPrice').textContent = price;
}
/* ===== 구매신청 제출 ===== */
async function submitPurchaseRequest() {
const item_id = document.getElementById('prItemSelect').value;
const quantity = parseInt(document.getElementById('prQuantity').value) || 0;
const notes = document.getElementById('prNotes').value.trim();
if (!item_id) { showToast('소모품을 선택해주세요.', 'error'); return; }
if (quantity < 1) { showToast('수량은 1 이상이어야 합니다.', 'error'); return; }
try {
await api('/purchase-requests', {
method: 'POST',
body: JSON.stringify({ item_id: parseInt(item_id), quantity, notes })
});
showToast('구매신청이 등록되었습니다.');
document.getElementById('prItemSelect').value = '';
document.getElementById('prQuantity').value = '1';
document.getElementById('prNotes').value = '';
document.getElementById('prItemPreview').classList.add('hidden');
await loadRequests();
} catch (e) { showToast(e.message, 'error'); }
}
/* ===== 신청 목록 ===== */
async function loadRequests() {
try {
const status = document.getElementById('prFilterStatus').value;
const category = document.getElementById('prFilterCategory').value;
const params = new URLSearchParams();
if (status) params.set('status', status);
if (category) params.set('category', category);
const res = await api('/purchase-requests?' + params.toString());
requestsList = res.data || [];
renderRequests();
} catch (e) {
document.getElementById('prRequestList').innerHTML = `<tr><td colspan="7" class="px-4 py-8 text-center text-red-500">${escapeHtml(e.message)}</td></tr>`;
}
}
function renderRequests() {
const tbody = document.getElementById('prRequestList');
if (!requestsList.length) {
tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-8 text-center text-gray-400">구매신청 내역이 없습니다.</td></tr>';
return;
}
tbody.innerHTML = requestsList.map(r => {
const catLabel = CAT_LABELS[r.category] || r.category;
const catColor = CAT_COLORS[r.category] || 'badge-gray';
const statusLabel = STATUS_LABELS[r.status] || r.status;
const statusColor = STATUS_COLORS[r.status] || 'badge-gray';
const photoSrc = r.photo_path ? TKUSER_BASE_URL + r.photo_path : '';
let actions = '';
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 === '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>`;
}
if (r.status === 'pending' && (isAdmin || r.requester_id === currentUser.id)) {
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>`;
}
return `<tr class="hover:bg-gray-50">
<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(r.item_name)}</div>
<div class="text-xs text-gray-500">${escapeHtml(r.maker || '')}</div>
</div>
</div>
</td>
<td class="px-4 py-3"><span class="badge ${catColor}">${catLabel}</span></td>
<td class="px-4 py-3 text-right font-medium">${r.quantity}</td>
<td class="px-4 py-3 text-gray-600">${escapeHtml(r.requester_name || '')}</td>
<td class="px-4 py-3 text-gray-600">${formatDate(r.request_date)}</td>
<td class="px-4 py-3 text-center">
<span class="badge ${statusColor}">${statusLabel}</span>
${r.status === 'hold' && r.hold_reason ? `<div class="text-xs text-gray-400 mt-1">${escapeHtml(r.hold_reason)}</div>` : ''}
</td>
<td class="px-4 py-3 text-center">${actions}</td>
</tr>`;
}).join('');
}
/* ===== 구매 처리 모달 ===== */
function openPurchaseModal(requestId) {
const r = requestsList.find(x => x.request_id === requestId);
if (!r) return;
currentRequestForPurchase = r;
const basePrice = r.base_price ? Number(r.base_price).toLocaleString() + '원' : '-';
document.getElementById('purchaseModalInfo').innerHTML = `
<div class="font-medium">${escapeHtml(r.item_name)} ${r.maker ? '(' + escapeHtml(r.maker) + ')' : ''}</div>
<div class="text-xs text-gray-500 mt-1">분류: ${CAT_LABELS[r.category] || r.category} | 기준가: ${basePrice} | 신청수량: ${r.quantity}</div>
`;
document.getElementById('pmUnitPrice').value = r.base_price || '';
document.getElementById('pmQuantity').value = r.quantity;
document.getElementById('pmDate').value = new Date().toISOString().substring(0, 10);
document.getElementById('pmNotes').value = '';
document.getElementById('pmPriceDiffArea').innerHTML = '';
document.getElementById('purchaseModal').classList.remove('hidden');
showPriceDiff();
}
function closePurchaseModal() {
document.getElementById('purchaseModal').classList.add('hidden');
currentRequestForPurchase = null;
}
function showPriceDiff() {
if (!currentRequestForPurchase) return;
const basePrice = Number(currentRequestForPurchase.base_price) || 0;
const unitPrice = Number(document.getElementById('pmUnitPrice').value) || 0;
const area = document.getElementById('pmPriceDiffArea');
if (basePrice > 0 && unitPrice > 0 && basePrice !== unitPrice) {
const diff = unitPrice - basePrice;
const arrow = diff > 0 ? '&#9650;' : '&#9660;';
const color = diff > 0 ? 'text-red-600' : 'text-blue-600';
area.innerHTML = `
<div class="flex items-center gap-2 text-sm ${color}">
<span>기준가 ${basePrice.toLocaleString()}원 &rarr; 실구매가 ${unitPrice.toLocaleString()}${arrow}${Math.abs(diff).toLocaleString()}</span>
</div>
<label class="flex items-center gap-2 mt-1 cursor-pointer">
<input type="checkbox" id="pmUpdateBasePrice" class="h-4 w-4 rounded">
<span class="text-xs text-gray-600">기준가를 ${unitPrice.toLocaleString()}원으로 업데이트</span>
</label>`;
} else {
area.innerHTML = '';
}
}
async function submitPurchase() {
if (!currentRequestForPurchase) return;
const unit_price = Number(document.getElementById('pmUnitPrice').value);
const purchase_date = document.getElementById('pmDate').value;
if (!unit_price) { showToast('구매 단가를 입력해주세요.', 'error'); return; }
if (!purchase_date) { showToast('구매일을 입력해주세요.', 'error'); return; }
const updateCheckbox = document.getElementById('pmUpdateBasePrice');
const body = {
request_id: currentRequestForPurchase.request_id,
item_id: currentRequestForPurchase.item_id,
vendor_id: parseInt(document.getElementById('pmVendor').value) || null,
quantity: parseInt(document.getElementById('pmQuantity').value) || currentRequestForPurchase.quantity,
unit_price,
purchase_date,
update_base_price: updateCheckbox ? updateCheckbox.checked : false,
notes: document.getElementById('pmNotes').value.trim()
};
try {
const res = await api('/purchases', { method: 'POST', body: JSON.stringify(body) });
let msg = '구매 처리가 완료되었습니다.';
if (res.data?.equipment?.success) msg += ` 설비 ${res.data.equipment.equipment_code} 자동 등록됨.`;
else if (res.data?.equipment && !res.data.equipment.success) msg += ' (설비 자동 등록 실패 - 수동 등록 필요)';
showToast(msg);
closePurchaseModal();
await loadRequests();
} catch (e) { showToast(e.message, 'error'); }
}
/* ===== 보류 모달 ===== */
function openHoldModal(requestId) {
currentRequestForHold = requestId;
document.getElementById('holdReason').value = '';
document.getElementById('holdModal').classList.remove('hidden');
}
function closeHoldModal() {
document.getElementById('holdModal').classList.add('hidden');
currentRequestForHold = null;
}
async function submitHold() {
if (!currentRequestForHold) return;
const hold_reason = document.getElementById('holdReason').value.trim();
try {
await api(`/purchase-requests/${currentRequestForHold}/hold`, {
method: 'PUT',
body: JSON.stringify({ hold_reason })
});
showToast('보류 처리되었습니다.');
closeHoldModal();
await loadRequests();
} catch (e) { showToast(e.message, 'error'); }
}
/* ===== 기타 액션 ===== */
async function revertRequest(requestId) {
if (!confirm('이 신청을 대기 상태로 되돌리시겠습니까?')) return;
try {
await api(`/purchase-requests/${requestId}/revert`, { method: 'PUT' });
showToast('대기 상태로 되돌렸습니다.');
await loadRequests();
} catch (e) { showToast(e.message, 'error'); }
}
async function deleteRequest(requestId) {
if (!confirm('이 구매신청을 삭제하시겠습니까?')) return;
try {
await api(`/purchase-requests/${requestId}`, { method: 'DELETE' });
showToast('삭제되었습니다.');
await loadRequests();
} catch (e) { showToast(e.message, 'error'); }
}
/* ===== Init ===== */
(async function() {
if (!await initAuth()) return;
isAdmin = currentUser && ['admin', 'system', 'system admin'].includes(currentUser.role);
await loadInitialData();
await loadRequests();
})();

View File

@@ -119,6 +119,10 @@ const NAV_MENU = [
{ href: '/pages/attendance/checkin.html', icon: 'fa-user-check', label: '출근 체크', key: 'inspection.checkin' },
{ 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/admin/purchase-analysis.html', icon: 'fa-chart-line', label: '구매 분석', key: 'purchase.analysis', admin: true },
]},
{ cat: '근태 관리', items: [
{ href: '/pages/attendance/my-vacation-info.html', icon: 'fa-info-circle', label: '내 연차 정보', key: 'attendance.my_vacation_info' },
{ href: '/pages/attendance/monthly.html', icon: 'fa-calendar', label: '월간 근태', key: 'attendance.monthly' },