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
183
system1-factory/web/static/js/purchase-analysis.js
Normal file
183
system1-factory/web/static/js/purchase-analysis.js
Normal 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 ? '▲' : '▼';
|
||||
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')}`;
|
||||
})();
|
||||
Reference in New Issue
Block a user