권혁성
df3feeade9
- 제품모델(KSS01~KDSS01), 설치타입(벽면형/측면형/혼합형), 마감타입(SUS/EGI) select 추가 - FG 코드 파싱으로 입력폼 자동 세팅 (FG-KQTS01-벽면형-SUS → 각 필드 매핑) - calculateFormula() API 호출 시 새 파라미터 전송 - ItemManagementApiController에서 product_model/installation_type/finishing_type 수신 처리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
585 lines
27 KiB
PHP
585 lines
27 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '품목관리')
|
|
|
|
@section('content')
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
|
<h1 class="text-2xl font-bold text-gray-800">품목관리</h1>
|
|
</div>
|
|
|
|
<!-- 3-Panel 레이아웃 -->
|
|
<div class="flex gap-4" style="height: calc(100vh - 180px);">
|
|
|
|
<!-- 좌측 패널: 품목 리스트 -->
|
|
<div class="w-72 flex-shrink-0 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden">
|
|
<!-- 검색 -->
|
|
<div class="p-3 border-b border-gray-200">
|
|
<input type="text"
|
|
id="item-search"
|
|
placeholder="코드 또는 품목명 검색..."
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<!-- 유형 필터 -->
|
|
<div class="flex flex-wrap gap-1 mt-2">
|
|
<button type="button" data-type="" class="item-type-filter active px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800 font-medium">전체</button>
|
|
<button type="button" data-type="FG" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-blue-50">FG</button>
|
|
<button type="button" data-type="PT" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-green-50">PT</button>
|
|
<button type="button" data-type="SM" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-yellow-50">SM</button>
|
|
<button type="button" data-type="RM" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-orange-50">RM</button>
|
|
<button type="button" data-type="CS" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">CS</button>
|
|
</div>
|
|
</div>
|
|
<!-- 품목 리스트 (HTMX) -->
|
|
<div id="item-list"
|
|
class="flex-1 overflow-y-auto"
|
|
hx-get="/api/admin/items?per_page=50"
|
|
hx-trigger="load"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'>
|
|
<div class="flex justify-center items-center p-8">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 중앙 패널: BOM 트리 + 수식 산출 -->
|
|
<div class="flex-1 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden">
|
|
<div class="px-4 py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-1">
|
|
<button type="button" id="tab-static-bom"
|
|
class="bom-tab px-3 py-1.5 text-xs font-medium rounded-md bg-blue-100 text-blue-800"
|
|
onclick="switchBomTab('static')">
|
|
정적 BOM
|
|
</button>
|
|
<button type="button" id="tab-formula-bom"
|
|
class="bom-tab px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200"
|
|
onclick="switchBomTab('formula')"
|
|
style="display:none;">
|
|
수식 산출
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 수식 산출 입력 폼 (가변사이즈 품목 선택 시에만 표시) -->
|
|
<div id="formula-input-panel" style="display:none;" class="p-4 bg-gray-50 border-b border-gray-200">
|
|
<div class="flex items-end gap-3 flex-wrap">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">폭 W (mm)</label>
|
|
<input type="number" id="input-width" value="1000" min="100" max="10000" step="1"
|
|
class="w-24 px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">높이 H (mm)</label>
|
|
<input type="number" id="input-height" value="1000" min="100" max="10000" step="1"
|
|
class="w-24 px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">수량</label>
|
|
<input type="number" id="input-qty" value="1" min="1" max="100" step="1"
|
|
class="w-16 px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">전원</label>
|
|
<select id="input-mp"
|
|
class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
<option value="single">단상(220V)</option>
|
|
<option value="three">삼상(380V)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">제품모델</label>
|
|
<select id="input-product-model"
|
|
class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
<option value="KSS01">KSS01</option>
|
|
<option value="KSS02">KSS02</option>
|
|
<option value="KSE01">KSE01</option>
|
|
<option value="KWE01">KWE01</option>
|
|
<option value="KTE01">KTE01</option>
|
|
<option value="KQTS01">KQTS01</option>
|
|
<option value="KDSS01">KDSS01</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">설치타입</label>
|
|
<select id="input-installation-type"
|
|
class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
<option value="벽면형">벽면형</option>
|
|
<option value="측면형">측면형</option>
|
|
<option value="혼합형">혼합형</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">마감</label>
|
|
<select id="input-finishing-type"
|
|
class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
<option value="SUS">SUS</option>
|
|
<option value="EGI">EGI</option>
|
|
</select>
|
|
</div>
|
|
<button type="button" id="btn-calculate" onclick="calculateFormula()"
|
|
class="px-4 py-1.5 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors">
|
|
산출
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 정적 BOM 영역 -->
|
|
<div id="bom-tree-container" class="flex-1 overflow-y-auto p-4">
|
|
<p class="text-gray-400 text-center py-10">좌측에서 품목을 선택하세요.</p>
|
|
</div>
|
|
|
|
<!-- 수식 산출 결과 영역 (초기 숨김) -->
|
|
<div id="formula-result-container" class="flex-1 overflow-y-auto p-4" style="display:none;">
|
|
<p class="text-gray-400 text-center py-10">오픈사이즈를 입력하고 산출 버튼을 클릭하세요.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우측 패널: 품목 상세 -->
|
|
<div class="w-96 flex-shrink-0 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden">
|
|
<div class="px-4 py-3 border-b border-gray-200">
|
|
<h2 class="text-sm font-semibold text-gray-700">품목 상세</h2>
|
|
</div>
|
|
<div id="item-detail" class="flex-1 overflow-y-auto p-4">
|
|
<p class="text-gray-400 text-center py-10">품목을 선택하면 상세정보가 표시됩니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(function() {
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
|
|
let searchTimer = null;
|
|
let currentTypeFilter = '';
|
|
let currentBomTab = 'static';
|
|
let currentItemId = null;
|
|
let currentItemCode = null;
|
|
let skipCenterUpdate = false;
|
|
|
|
// ── 좌측 검색 (debounce 300ms) ──
|
|
const searchInput = document.getElementById('item-search');
|
|
searchInput.addEventListener('input', function() {
|
|
clearTimeout(searchTimer);
|
|
searchTimer = setTimeout(() => {
|
|
loadItemList();
|
|
}, 300);
|
|
});
|
|
|
|
// ── 유형 필터 ──
|
|
document.querySelectorAll('.item-type-filter').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('.item-type-filter').forEach(b => {
|
|
b.classList.remove('active', 'bg-blue-100', 'text-blue-800', 'font-medium');
|
|
b.classList.add('bg-gray-100', 'text-gray-600');
|
|
});
|
|
this.classList.add('active', 'bg-blue-100', 'text-blue-800', 'font-medium');
|
|
this.classList.remove('bg-gray-100', 'text-gray-600');
|
|
currentTypeFilter = this.dataset.type;
|
|
loadItemList();
|
|
});
|
|
});
|
|
|
|
// ── 품목 리스트 로드 ──
|
|
function loadItemList() {
|
|
const search = searchInput.value.trim();
|
|
let url = `/api/admin/items?per_page=50`;
|
|
if (search) url += `&search=${encodeURIComponent(search)}`;
|
|
if (currentTypeFilter) url += `&item_type=${currentTypeFilter}`;
|
|
|
|
htmx.ajax('GET', url, {
|
|
target: '#item-list',
|
|
swap: 'innerHTML',
|
|
headers: {'X-CSRF-TOKEN': csrfToken}
|
|
});
|
|
}
|
|
|
|
// ── 품목 선택 (좌측/중앙 공용) ──
|
|
window.selectItem = function(itemId, updateTree) {
|
|
if (typeof updateTree === 'undefined') updateTree = true;
|
|
|
|
// 좌측 하이라이트
|
|
document.querySelectorAll('.item-row').forEach(el => {
|
|
el.classList.remove('bg-blue-50', 'border-l-4', 'border-blue-500');
|
|
});
|
|
const selected = document.querySelector(`[data-item-id="${itemId}"]`);
|
|
if (selected) {
|
|
selected.classList.add('bg-blue-50', 'border-l-4', 'border-blue-500');
|
|
}
|
|
|
|
// 중앙 트리 갱신 (좌측에서 클릭 시에만)
|
|
if (updateTree) {
|
|
const treeContainer = document.getElementById('bom-tree-container');
|
|
treeContainer.innerHTML = '<div class="flex justify-center py-10"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>';
|
|
|
|
fetch(`/api/admin/items/${itemId}/bom-tree`, {
|
|
headers: {'X-CSRF-TOKEN': csrfToken}
|
|
})
|
|
.then(res => res.json())
|
|
.then(tree => {
|
|
treeContainer.innerHTML = '';
|
|
if (tree.has_children) {
|
|
const ul = document.createElement('ul');
|
|
ul.className = 'text-sm';
|
|
renderBomTree(tree, ul);
|
|
treeContainer.appendChild(ul);
|
|
} else {
|
|
treeContainer.innerHTML = '<p class="text-gray-400 text-center py-10">BOM 구성이 없습니다.</p>';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
treeContainer.innerHTML = '<p class="text-red-400 text-center py-10">BOM 로드 실패</p>';
|
|
});
|
|
}
|
|
|
|
// 우측 상세 갱신 (항상)
|
|
htmx.ajax('GET', `/api/admin/items/${itemId}/detail`, {
|
|
target: '#item-detail',
|
|
swap: 'innerHTML',
|
|
headers: {'X-CSRF-TOKEN': csrfToken}
|
|
});
|
|
};
|
|
|
|
// 중앙 트리 노드 클릭 (트리 유지, 우측만 갱신)
|
|
window.selectTreeNode = function(itemId) {
|
|
selectItem(itemId, false);
|
|
};
|
|
|
|
// ── BOM 트리 렌더링 ──
|
|
function renderBomTree(node, container) {
|
|
const li = document.createElement('li');
|
|
li.className = 'ml-4';
|
|
|
|
const nodeEl = document.createElement('div');
|
|
nodeEl.className = 'flex items-center gap-2 py-1.5 px-2 rounded cursor-pointer hover:bg-blue-50 transition-colors';
|
|
nodeEl.onclick = () => selectTreeNode(node.id);
|
|
|
|
// 펼침/접힘 토글
|
|
let childList = null;
|
|
if (node.has_children) {
|
|
const toggle = document.createElement('span');
|
|
toggle.className = 'text-gray-400 cursor-pointer select-none text-xs';
|
|
toggle.textContent = '▼';
|
|
toggle.onclick = function(e) {
|
|
e.stopPropagation();
|
|
if (childList.style.display === 'none') {
|
|
childList.style.display = '';
|
|
toggle.textContent = '▼';
|
|
} else {
|
|
childList.style.display = 'none';
|
|
toggle.textContent = '▶';
|
|
}
|
|
};
|
|
nodeEl.appendChild(toggle);
|
|
} else {
|
|
const spacer = document.createElement('span');
|
|
spacer.className = 'w-3 inline-block';
|
|
nodeEl.appendChild(spacer);
|
|
}
|
|
|
|
// 유형 뱃지
|
|
const badge = document.createElement('span');
|
|
badge.className = getTypeBadgeClass(node.item_type);
|
|
badge.textContent = node.item_type;
|
|
nodeEl.appendChild(badge);
|
|
|
|
// 코드 + 이름
|
|
const codeSpan = document.createElement('span');
|
|
codeSpan.className = 'font-mono text-xs text-gray-500';
|
|
codeSpan.textContent = node.code;
|
|
nodeEl.appendChild(codeSpan);
|
|
|
|
const nameSpan = document.createElement('span');
|
|
nameSpan.className = 'text-gray-700 text-sm truncate';
|
|
nameSpan.textContent = node.name;
|
|
nodeEl.appendChild(nameSpan);
|
|
|
|
// 수량
|
|
if (node.quantity) {
|
|
const qtySpan = document.createElement('span');
|
|
qtySpan.className = 'text-blue-600 text-xs font-medium';
|
|
qtySpan.textContent = `(${node.quantity})`;
|
|
nodeEl.appendChild(qtySpan);
|
|
}
|
|
|
|
li.appendChild(nodeEl);
|
|
|
|
// 자식 노드 재귀 렌더링
|
|
if (node.children && node.children.length > 0) {
|
|
childList = document.createElement('ul');
|
|
childList.className = 'border-l border-gray-200';
|
|
node.children.forEach(child => renderBomTree(child, childList));
|
|
li.appendChild(childList);
|
|
}
|
|
|
|
container.appendChild(li);
|
|
}
|
|
|
|
// ── 유형별 뱃지 색상 ──
|
|
function getTypeBadgeClass(type) {
|
|
const colors = {
|
|
'FG': 'bg-blue-100 text-blue-800',
|
|
'PT': 'bg-green-100 text-green-800',
|
|
'SM': 'bg-yellow-100 text-yellow-800',
|
|
'RM': 'bg-orange-100 text-orange-800',
|
|
'CS': 'bg-gray-100 text-gray-800',
|
|
};
|
|
return `inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${colors[type] || 'bg-gray-100 text-gray-800'}`;
|
|
}
|
|
|
|
// 전역에서 사용하도록 노출
|
|
window.getTypeBadgeClass = getTypeBadgeClass;
|
|
|
|
// ── 탭 전환 ──
|
|
window.switchBomTab = function(tab) {
|
|
currentBomTab = tab;
|
|
|
|
// 탭 버튼 스타일
|
|
document.querySelectorAll('.bom-tab').forEach(btn => {
|
|
btn.classList.remove('bg-blue-100', 'text-blue-800');
|
|
btn.classList.add('bg-gray-100', 'text-gray-600');
|
|
});
|
|
const activeBtn = document.getElementById(tab === 'static' ? 'tab-static-bom' : 'tab-formula-bom');
|
|
if (activeBtn) {
|
|
activeBtn.classList.remove('bg-gray-100', 'text-gray-600');
|
|
activeBtn.classList.add('bg-blue-100', 'text-blue-800');
|
|
}
|
|
|
|
// 콘텐츠 영역 전환
|
|
document.getElementById('bom-tree-container').style.display = (tab === 'static') ? '' : 'none';
|
|
document.getElementById('formula-input-panel').style.display = (tab === 'formula') ? '' : 'none';
|
|
document.getElementById('formula-result-container').style.display = (tab === 'formula') ? '' : 'none';
|
|
};
|
|
|
|
// ── 가변사이즈 탭 표시/숨김 ──
|
|
function showFormulaTab() {
|
|
document.getElementById('tab-formula-bom').style.display = '';
|
|
switchBomTab('formula');
|
|
}
|
|
|
|
function hideFormulaTab() {
|
|
document.getElementById('tab-formula-bom').style.display = 'none';
|
|
document.getElementById('formula-input-panel').style.display = 'none';
|
|
document.getElementById('formula-result-container').style.display = 'none';
|
|
switchBomTab('static');
|
|
}
|
|
|
|
// ── FG 코드 파싱 → 입력폼 자동 세팅 ──
|
|
// FG-KQTS01-벽면형-SUS → { model: 'KQTS01', installation: '벽면형', finishing: 'SUS' }
|
|
// 파싱 실패 시 기본값 유지 (추후 FG 코드 형식 변경 대비)
|
|
function parseFgCode(code) {
|
|
if (!code) return null;
|
|
const parts = code.split('-');
|
|
// FG-{MODEL}-{INSTALLATION}-{FINISHING} 형식인 경우만 파싱
|
|
if (parts.length >= 4 && parts[0] === 'FG') {
|
|
return { model: parts[1], installation: parts[2], finishing: parts[3] };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function setSelectValue(selectId, value) {
|
|
const el = document.getElementById(selectId);
|
|
if (!el) return;
|
|
for (let i = 0; i < el.options.length; i++) {
|
|
if (el.options[i].value === value) {
|
|
el.selectedIndex = i;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── 상세 로드 완료 후 FG 품목 감지 → 수식 산출 탭 표시 ──
|
|
document.body.addEventListener('htmx:afterSwap', function(event) {
|
|
if (event.detail.target.id === 'item-detail') {
|
|
// 산출 결과 아이템 클릭 시에는 중앙 패널 유지
|
|
if (skipCenterUpdate) {
|
|
skipCenterUpdate = false;
|
|
return;
|
|
}
|
|
const meta = document.getElementById('item-meta-data');
|
|
if (meta) {
|
|
currentItemId = meta.dataset.itemId;
|
|
currentItemCode = meta.dataset.itemCode;
|
|
if (meta.dataset.itemType === 'FG') {
|
|
// FG 코드에서 모델/설치타입/마감타입 파싱하여 입력폼 자동 세팅
|
|
const parsed = parseFgCode(currentItemCode);
|
|
if (parsed) {
|
|
setSelectValue('input-product-model', parsed.model);
|
|
setSelectValue('input-installation-type', parsed.installation);
|
|
setSelectValue('input-finishing-type', parsed.finishing);
|
|
}
|
|
showFormulaTab();
|
|
calculateFormula();
|
|
} else {
|
|
hideFormulaTab();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// ── 수식 산출 API 호출 ──
|
|
window.calculateFormula = function() {
|
|
if (!currentItemId) return;
|
|
|
|
const width = parseInt(document.getElementById('input-width').value) || 1000;
|
|
const height = parseInt(document.getElementById('input-height').value) || 1000;
|
|
const qty = parseInt(document.getElementById('input-qty').value) || 1;
|
|
const mp = document.getElementById('input-mp').value || 'single';
|
|
const productModel = document.getElementById('input-product-model').value || 'KSS01';
|
|
const installationType = document.getElementById('input-installation-type').value || '벽면형';
|
|
const finishingType = document.getElementById('input-finishing-type').value || 'SUS';
|
|
|
|
if (width < 100 || width > 10000 || height < 100 || height > 10000) {
|
|
alert('폭과 높이는 100~10000 범위로 입력하세요.');
|
|
return;
|
|
}
|
|
|
|
const container = document.getElementById('formula-result-container');
|
|
container.innerHTML = '<div class="flex justify-center py-10"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>';
|
|
|
|
fetch(`/api/admin/items/${currentItemId}/calculate-formula`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken,
|
|
},
|
|
body: JSON.stringify({ width, height, qty, mp, product_model: productModel, installation_type: installationType, finishing_type: finishingType }),
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
return res.text().then(text => {
|
|
let msg = `HTTP ${res.status}`;
|
|
try { const j = JSON.parse(text); msg = j.error || j.message || msg; } catch(e) {}
|
|
throw new Error(msg);
|
|
});
|
|
}
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success === false) {
|
|
container.innerHTML = `
|
|
<div class="text-center py-10">
|
|
<p class="text-red-500 text-sm mb-2">${data.error || '산출 실패'}</p>
|
|
<button onclick="calculateFormula()" class="text-blue-600 text-sm hover:underline">다시 시도</button>
|
|
</div>`;
|
|
return;
|
|
}
|
|
renderFormulaTree(data, container);
|
|
})
|
|
.catch(err => {
|
|
console.error('calculateFormula error:', err);
|
|
container.innerHTML = `
|
|
<div class="text-center py-10">
|
|
<p class="text-red-500 text-sm mb-2">${err.message || '서버 연결 실패'}</p>
|
|
<button onclick="calculateFormula()" class="text-blue-600 text-sm hover:underline">다시 시도</button>
|
|
</div>`;
|
|
});
|
|
};
|
|
|
|
// ── 수식 산출 결과 트리 렌더링 ──
|
|
// API 응답 구조: grouped_items = { CATEGORY_CODE: { name, items: [...], subtotal } }
|
|
// subtotals = { CATEGORY_CODE: { name, count, subtotal } }
|
|
function renderFormulaTree(data, container) {
|
|
container.innerHTML = '';
|
|
|
|
const groupedItems = data.grouped_items || {};
|
|
|
|
// 합계 영역
|
|
if (data.grand_total !== undefined) {
|
|
const totalDiv = document.createElement('div');
|
|
totalDiv.className = 'mb-4 p-3 bg-blue-50 rounded-lg flex justify-between items-center';
|
|
totalDiv.innerHTML = `
|
|
<span class="text-sm font-medium text-blue-800">
|
|
${data.finished_goods?.name || ''} (${data.finished_goods?.code || ''})
|
|
<span class="text-xs text-blue-600 ml-2">W:${data.variables?.W0} H:${data.variables?.H0}</span>
|
|
</span>
|
|
<span class="text-sm font-bold text-blue-900">합계: ${Number(data.grand_total).toLocaleString()}원</span>
|
|
`;
|
|
container.appendChild(totalDiv);
|
|
}
|
|
|
|
// 카테고리 그룹별 렌더링
|
|
Object.entries(groupedItems).forEach(([groupKey, group]) => {
|
|
// group = { name: '강재', items: [...], subtotal: 12345 }
|
|
const groupItems = group.items || [];
|
|
if (groupItems.length === 0) return;
|
|
|
|
const groupDiv = document.createElement('div');
|
|
groupDiv.className = 'mb-3';
|
|
|
|
const groupName = group.name || groupKey;
|
|
const subtotal = group.subtotal || 0;
|
|
|
|
// 그룹 헤더
|
|
const header = document.createElement('div');
|
|
header.className = 'flex items-center gap-2 py-2 px-3 bg-gray-50 rounded-t-lg cursor-pointer';
|
|
header.innerHTML = `
|
|
<span class="toggle-icon text-xs text-gray-400">▼</span>
|
|
<span>📦</span>
|
|
<span class="text-sm font-semibold text-gray-700">${groupName}</span>
|
|
<span class="text-xs text-gray-500">(${groupItems.length}건)</span>
|
|
<span class="ml-auto text-xs font-medium text-gray-600">소계: ${Number(subtotal).toLocaleString()}원</span>
|
|
`;
|
|
|
|
const listDiv = document.createElement('div');
|
|
listDiv.className = 'border border-gray-100 rounded-b-lg divide-y divide-gray-50';
|
|
|
|
// 그룹 접기/펼치기
|
|
header.onclick = function() {
|
|
const toggle = header.querySelector('.toggle-icon');
|
|
if (listDiv.style.display === 'none') {
|
|
listDiv.style.display = '';
|
|
toggle.textContent = '▼';
|
|
} else {
|
|
listDiv.style.display = 'none';
|
|
toggle.textContent = '▶';
|
|
}
|
|
};
|
|
|
|
// 아이템 목록
|
|
groupItems.forEach(item => {
|
|
const row = document.createElement('div');
|
|
row.className = 'flex items-center gap-2 py-1.5 px-3 hover:bg-gray-50 cursor-pointer text-sm';
|
|
row.innerHTML = `
|
|
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
|
|
${item.item_type || 'PT'}
|
|
</span>
|
|
<span class="font-mono text-xs text-gray-500 w-32 truncate">${item.item_code || ''}</span>
|
|
<span class="text-gray-700 flex-1 truncate">${item.item_name || ''}</span>
|
|
<span class="text-xs text-gray-500 w-16 text-right">${item.quantity || 0} ${item.unit || ''}</span>
|
|
<span class="text-xs text-blue-600 font-medium w-20 text-right">${Number(item.total_price || 0).toLocaleString()}원</span>
|
|
`;
|
|
if (item.item_id) {
|
|
row.onclick = () => {
|
|
// 활성 행 표시
|
|
container.querySelectorAll('.formula-row-active').forEach(el => {
|
|
el.classList.remove('formula-row-active', 'ring-1', 'ring-blue-300');
|
|
});
|
|
row.classList.add('formula-row-active', 'ring-1', 'ring-blue-300');
|
|
|
|
// 우측 상세만 갱신, 중앙 패널 유지
|
|
skipCenterUpdate = true;
|
|
htmx.ajax('GET', `/api/admin/items/${item.item_id}/detail`, {
|
|
target: '#item-detail',
|
|
swap: 'innerHTML',
|
|
headers: {'X-CSRF-TOKEN': csrfToken}
|
|
});
|
|
};
|
|
}
|
|
listDiv.appendChild(row);
|
|
});
|
|
|
|
groupDiv.appendChild(header);
|
|
groupDiv.appendChild(listDiv);
|
|
container.appendChild(groupDiv);
|
|
});
|
|
|
|
if (Object.keys(groupedItems).length === 0) {
|
|
container.innerHTML = '<p class="text-gray-400 text-center py-10">산출된 자재가 없습니다.</p>';
|
|
}
|
|
}
|
|
})();
|
|
</script>
|
|
@endpush
|