feat(purchase): 카테고리 테이블 분리 + 동적 로드 + tkuser 관리

- DB: consumable_categories 테이블 생성, ENUM→VARCHAR 변환, 시드 4개
- API: GET/POST/PUT/DEACTIVATE /api/consumable-categories
- 프론트: 3개 JS 하드코딩 CAT_LABELS 제거 → API loadCategories() 동적 로드
- tkuser: 카테고리 관리 섹션 추가, select 옵션 동적 생성
- 별칭 시드 SQL (INSERT IGNORE 기반)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-01 14:07:14 +09:00
parent 118dc29c95
commit 4063eba5bb
11 changed files with 345 additions and 49 deletions

View File

@@ -1,7 +1,23 @@
/* ===== 구매 분석 페이지 ===== */
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' };
// 카테고리 — API 동적 로드
let _categories = null;
async function loadCategories() {
if (_categories) return _categories;
try { const r = await api('/consumable-categories'); _categories = r.data || []; } catch(e) { _categories = []; }
return _categories;
}
function getCatLabel(code) { return (_categories || []).find(c => c.category_code === code)?.category_name || code || '-'; }
function getCatIcon(code) { return (_categories || []).find(c => c.category_code === code)?.icon || 'fa-box'; }
function getCatBgClass(code) {
const c = (_categories || []).find(x => x.category_code === code);
if (!c) return 'bg-gray-50 text-gray-700';
// Tailwind class 생성 (인라인 스타일 대신)
return '';
}
function getCatColors(code) {
const c = (_categories || []).find(x => x.category_code === code);
return c ? { bg: c.color_bg, fg: c.color_fg } : { bg: '#f3f4f6', fg: '#374151' };
}
const STATUS_LABELS = { received: '입고완료', returned: '반품' };
const STATUS_COLORS = { received: 'badge-teal', returned: 'badge-red' };
@@ -69,20 +85,17 @@ async function loadReceivedBasis() {
/* ===== 렌더링 함수들 ===== */
function renderCategorySummary(data) {
const el = document.getElementById('paCategorySummary');
const allCategories = ['consumable', 'safety', 'repair', 'equipment'];
const cats = _categories || [];
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];
el.innerHTML = cats.map(cat => {
const d = dataMap[cat.category_code] || { count: 0, total_amount: 0 };
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 class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:${cat.color_bg};color:${cat.color_fg}"><i class="fas ${cat.icon} text-sm"></i></div>
<span class="text-sm font-medium text-gray-700">${escapeHtml(cat.category_name)}</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>
@@ -127,8 +140,8 @@ function renderPurchaseList(data) {
return;
}
tbody.innerHTML = data.map(p => {
const catLabel = CAT_LABELS[p.category] || p.category;
const catColor = CAT_BG[p.category] || '';
const catLabel = getCatLabel(p.category);
const catColor = getCatBgClass(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);
@@ -190,8 +203,8 @@ function renderReceivedList(data) {
return;
}
tbody.innerHTML = data.map(r => {
const catLabel = CAT_LABELS[r.category] || r.category || '-';
const catColor = CAT_BG[r.category] || '';
const catLabel = getCatLabel(r.category);
const catColor = getCatBgClass(r.category);
const statusLabel = STATUS_LABELS[r.status] || r.status;
const statusColor = STATUS_COLORS[r.status] || 'badge-gray';
return `<tr class="hover:bg-gray-50 ${r.status === 'returned' ? 'bg-red-50' : ''}">
@@ -236,6 +249,7 @@ async function cancelSettlement(vendorId) {
/* ===== Init ===== */
(async function() {
if (!await initAuth()) return;
await loadCategories();
const now = new Date();
document.getElementById('paMonth').value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
})();

View File

@@ -3,7 +3,14 @@ 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: '설비' };
// 카테고리 — API 동적 로드
let _categories = null;
async function loadCategories() {
if (_categories) return _categories;
try { const r = await api('/consumable-categories'); _categories = r.data || []; } catch(e) { _categories = []; }
return _categories;
}
function getCatLabel(code) { return (_categories || []).find(c => c.category_code === code)?.category_name || code || ''; }
const STATUS_LABELS = { pending: '대기', grouped: '구매진행중', purchased: '구매완료', received: '입고완료', cancelled: '취소', returned: '반품', hold: '보류' };
const STATUS_COLORS = { pending: 'badge-amber', grouped: 'badge-blue', purchased: 'badge-green', received: 'badge-teal', cancelled: 'badge-red', returned: 'badge-red', hold: 'badge-gray' };
const MATCH_LABELS = { exact: '정확', name: '이름', alias: '별칭', spec: '규격', chosung: '초성', chosung_alias: '초성' };
@@ -55,7 +62,7 @@ function renderCards() {
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 catLabel = getCatLabel(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;
@@ -96,7 +103,7 @@ function openDetail(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 catLabel = getCatLabel(category);
const statusLabel = STATUS_LABELS[r.status] || r.status;
const statusColor = STATUS_COLORS[r.status] || 'badge-gray';
@@ -182,7 +189,7 @@ function renderSearchResults(items, query) {
const container = document.getElementById('searchResults');
let html = '';
items.forEach(item => {
const catLabel = CAT_LABELS[item.category] || '';
const catLabel = getCatLabel(item.category);
const matchLabel = MATCH_LABELS[item._matchType] || '';
const spec = item.spec ? ' [' + escapeHtml(item.spec) + ']' : '';
const maker = item.maker ? ' (' + escapeHtml(item.maker) + ')' : '';
@@ -288,7 +295,7 @@ function renderCart() {
list.innerHTML = cartItems.map((c, idx) => {
const spec = c.spec ? ' [' + escapeHtml(c.spec) + ']' : '';
const maker = c.maker ? ' (' + escapeHtml(c.maker) + ')' : '';
const catLabel = CAT_LABELS[c.category] || '';
const catLabel = getCatLabel(c.category);
// 사진 썸네일
let thumbHtml = '';
@@ -478,6 +485,7 @@ function checkViewParam() {
/* ===== Init ===== */
(async function() {
if (!await initAuth()) return;
await loadCategories();
await loadRequests();
checkViewParam();
})();

View File

@@ -3,10 +3,16 @@ 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 CAT_BG = { consumable: '#dbeafe', safety: '#dcfce7', repair: '#fef3c7', equipment: '#f3e8ff' };
const CAT_FG = { consumable: '#1e40af', safety: '#166534', repair: '#92400e', equipment: '#7e22ce' };
// 카테고리 — API에서 동적 로드
let _categories = null;
async function loadCategories() {
if (_categories) return _categories;
try { const r = await api('/consumable-categories'); _categories = r.data || []; } catch(e) { _categories = []; }
return _categories;
}
function getCatLabel(code) { return (_categories || []).find(c => c.category_code === code)?.category_name || code || '-'; }
function getCatBg(code) { return (_categories || []).find(c => c.category_code === code)?.color_bg || '#f3f4f6'; }
function getCatFg(code) { return (_categories || []).find(c => c.category_code === code)?.color_fg || '#374151'; }
const STATUS_LABELS = { pending: '대기', grouped: '구매진행중', purchased: '구매완료', received: '입고완료', cancelled: '취소', returned: '반품', hold: '보류' };
const STATUS_COLORS = { pending: 'badge-amber', grouped: 'badge-blue', purchased: 'badge-green', received: 'badge-teal', cancelled: 'badge-red', returned: 'badge-red', hold: 'badge-gray' };
@@ -125,9 +131,9 @@ function showDropdown(items, query) {
let html = '';
if (items.length > 0) {
items.forEach((item, idx) => {
const catLabel = CAT_LABELS[item.category] || item.category;
const bg = CAT_BG[item.category] || '#f3f4f6';
const fg = CAT_FG[item.category] || '#374151';
const catLabel = getCatLabel(item.category);
const bg = getCatBg(item.category);
const fg = getCatFg(item.category);
const spec = _fmtSpec(item.spec ? escapeHtml(item.spec) : '');
const maker = item.maker ? ` (${escapeHtml(item.maker)})` : '';
const photoSrc = item.photo_path ? (item.photo_path.startsWith('http') ? item.photo_path : TKUSER_BASE_URL + item.photo_path) : '';
@@ -339,8 +345,8 @@ function renderRequests() {
// 등록 품목이면 ci 데이터, 미등록이면 custom 데이터 사용
const itemName = r.item_name || r.custom_item_name || '-';
const category = r.category || r.custom_category;
const catLabel = CAT_LABELS[category] || category || '-';
const catColor = CAT_COLORS[category] || 'badge-gray';
const catLabel = getCatLabel(category);
const catColor = 'badge-gray';
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;
@@ -415,7 +421,7 @@ function openPurchaseModal(requestId) {
document.getElementById('purchaseModalInfo').innerHTML = `
<div class="font-medium">${escapeHtml(itemName)}${_fmtSpec(r.spec ? escapeHtml(r.spec) : '')} ${r.maker ? '(' + escapeHtml(r.maker) + ')' : ''}${isCustom ? ' <span class="text-orange-500 text-xs">(직접입력)</span>' : ''}</div>
<div class="text-xs text-gray-500 mt-1">분류: ${CAT_LABELS[category] || category || '-'} | 기준가: ${basePrice} | 신청수량: ${r.quantity}</div>
<div class="text-xs text-gray-500 mt-1">분류: ${getCatLabel(category)} | 기준가: ${basePrice} | 신청수량: ${r.quantity}</div>
${r.pr_photo_path ? `<img src="${r.pr_photo_path}" class="mt-2 w-20 h-20 rounded object-cover" onerror="this.style.display='none'">` : ''}
`;
document.getElementById('pmUnitPrice').value = r.base_price || '';
@@ -773,6 +779,7 @@ async function submitReceive() {
(async function() {
if (!await initAuth()) return;
isAdmin = currentUser && ['admin', 'system', 'system admin'].includes(currentUser.role);
await loadCategories();
initItemSearch();
await loadInitialData();
await loadRequests();