2025-08-10 02:36:50 +09:00
|
|
|
|
<?php
|
|
|
|
|
|
// 자재관리 > 리스트
|
2025-11-06 17:45:49 +09:00
|
|
|
|
$CURRENT_SECTION = 'item';
|
2025-08-10 02:36:50 +09:00
|
|
|
|
include '../inc/header.php';
|
|
|
|
|
|
?>
|
|
|
|
|
|
<div class="container" style="max-width:1280px; margin-top:24px;">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 상단 탭 -->
|
|
|
|
|
|
<ul class="nav nav-tabs mb-3">
|
|
|
|
|
|
<li class="nav-item"><a class="nav-link active" href="/tenant/material/list.php">자재 관리</a></li>
|
|
|
|
|
|
<li class="nav-item"><a class="nav-link" href="/tenant/product/model_list.php">모델 관리</a></li>
|
|
|
|
|
|
<li class="nav-item"><a class="nav-link" href="/tenant/product/bom_editor.php">BOM 관리</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 툴바 -->
|
|
|
|
|
|
<div class="d-flex flex-wrap gap-2 align-items-center mb-2">
|
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
|
<label class="text-muted">분류</label>
|
|
|
|
|
|
<select class="form-select form-select-sm" id="filterCategory" style="width:160px;">
|
|
|
|
|
|
<option value="">전체</option>
|
|
|
|
|
|
<option value="자재">자재</option>
|
|
|
|
|
|
<option value="부품">부품</option>
|
|
|
|
|
|
<option value="소재">소재</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="input-group" style="max-width:340px;">
|
|
|
|
|
|
<input type="text" class="form-control form-control-sm" id="keyword" placeholder="품목명/제조사/코드 검색">
|
|
|
|
|
|
<button class="btn btn-outline-secondary btn-sm" id="btnSearch">Search</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
|
<label class="text-muted">표시</label>
|
|
|
|
|
|
<select id="pageSize" class="form-select form-select-sm" style="width:80px;">
|
|
|
|
|
|
<option>10</option><option selected>20</option><option>30</option><option>50</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="ms-auto small text-muted" id="totalInfo">총 0건</div>
|
|
|
|
|
|
<button class="btn btn-primary btn-sm" id="btnOpenCreate">신규등록</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 리스트 -->
|
|
|
|
|
|
<div class="table-responsive border rounded">
|
|
|
|
|
|
<table class="table table-hover table-striped align-middle m-0">
|
|
|
|
|
|
<thead class="table-light">
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th style="width:70px;">NO</th>
|
|
|
|
|
|
<th style="width:120px;">분류</th>
|
|
|
|
|
|
<th>품목명</th>
|
|
|
|
|
|
<th style="width:90px;">단위</th>
|
|
|
|
|
|
<th style="width:140px;">제조사</th>
|
|
|
|
|
|
<th style="width:120px;">이미지</th>
|
|
|
|
|
|
<th style="width:140px;" class="text-center">관리</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody id="listBody"></tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 페이징 -->
|
|
|
|
|
|
<div class="d-flex justify-content-center mt-3">
|
|
|
|
|
|
<nav id="pagerNav" aria-label="Page navigation"></nav>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 등록/수정 모달 -->
|
|
|
|
|
|
<div class="modal fade" id="materialModal" tabindex="-1" aria-hidden="true">
|
|
|
|
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
|
|
|
|
<form class="modal-content needs-validation" id="materialForm" novalidate>
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h5 class="modal-title" id="materialModalTitle">자재 등록</h5>
|
|
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="닫기"></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- === 모달 본문 (동적 규격/기타 + 품목명 자동생성) === -->
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<input type="hidden" id="matId">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 기본정보 -->
|
|
|
|
|
|
<details open class="mb-3">
|
|
|
|
|
|
<summary class="fw-semibold">기본정보 입력</summary>
|
|
|
|
|
|
<div class="row g-3 mt-2">
|
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
|
<label class="form-label">분류 <span class="text-danger">*</span></label>
|
|
|
|
|
|
<select class="form-select" id="matCategory" required>
|
|
|
|
|
|
<option value="">선택</option>
|
|
|
|
|
|
<option>자재</option>
|
|
|
|
|
|
<option>부품</option>
|
|
|
|
|
|
<option>소재</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
<div class="invalid-feedback">분류를 선택해 주세요.</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
<label class="form-label">자재명(베이스) <span class="text-danger">*</span></label>
|
|
|
|
|
|
<input type="text" class="form-control" id="matBaseName" placeholder="예: 절곡판" required>
|
|
|
|
|
|
<div class="invalid-feedback">자재명을 입력해 주세요.</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
|
<label class="form-label">단위</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="matUnit" placeholder="EA, mm, kg …">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
|
<label class="form-label">품목명(자동생성)</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="matName" placeholder="자재명 + 규격값/단위" readonly>
|
|
|
|
|
|
<div class="form-text">규격을 추가하면 자동으로 갱신됩니다. (예) 절곡판 1.5t 20mm</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 규격정보 -->
|
|
|
|
|
|
<details open class="mb-3">
|
|
|
|
|
|
<summary class="fw-semibold d-flex align-items-center">
|
|
|
|
|
|
규격정보 입력
|
|
|
|
|
|
<button type="button" class="btn btn-sm btn-outline-primary ms-2" id="btnAddSpec">＋ 추가</button>
|
|
|
|
|
|
</summary>
|
|
|
|
|
|
<div id="specRows" class="mt-2"></div>
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 기타정보 -->
|
|
|
|
|
|
<details class="mb-3">
|
|
|
|
|
|
<summary class="fw-semibold d-flex align-items-center">
|
|
|
|
|
|
기타정보 입력
|
|
|
|
|
|
<button type="button" class="btn btn-sm btn-outline-primary ms-2" id="btnAddExtra">＋ 추가</button>
|
|
|
|
|
|
</summary>
|
|
|
|
|
|
<div id="extraRows" class="mt-2"></div>
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 부가 입력 -->
|
|
|
|
|
|
<div class="row g-3">
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
<label class="form-label">제조사</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="matMaker">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
<label class="form-label">품목코드</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="matCode">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
<label class="form-label">안전재고</label>
|
|
|
|
|
|
<input type="number" class="form-control" id="matSafety" min="0" step="1" value="0">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
|
<label class="form-label">이미지 업로드</label>
|
|
|
|
|
|
<input class="form-control" type="file" id="matImages" accept="image/*" multiple>
|
|
|
|
|
|
<div class="form-text">여러 장 업로드 가능 (프로토타입: 미리보기만)</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
|
<label class="form-label">비고</label>
|
|
|
|
|
|
<textarea class="form-control" id="matMemo" rows="2"></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
|
<div class="d-flex gap-2 flex-wrap" id="previewWrap"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 모달 푸터 -->
|
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
|
<div class="me-auto small text-muted" id="modalHint"></div>
|
|
|
|
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">취소</button>
|
|
|
|
|
|
<button type="submit" class="btn btn-primary" id="btnSubmit">저장</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 이미지 라이트박스 -->
|
|
|
|
|
|
<div class="modal fade" id="imgModal" tabindex="-1" aria-hidden="true">
|
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
|
|
|
|
<div class="modal-content bg-dark">
|
|
|
|
|
|
<div class="modal-body p-0">
|
|
|
|
|
|
<img id="imgModalImg" src="" alt="preview" class="w-100" style="display:block;">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 토스트 -->
|
|
|
|
|
|
<div class="position-fixed bottom-0 end-0 p-3" style="z-index:1080">
|
|
|
|
|
|
<div id="snack" class="toast align-items-center text-bg-primary border-0" role="alert">
|
|
|
|
|
|
<div class="d-flex">
|
|
|
|
|
|
<div class="toast-body" id="snackMsg">Saved</div>
|
|
|
|
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.thumb{width:56px;height:40px;object-fit:cover;border-radius:4px;cursor:zoom-in;border:1px solid rgba(0,0,0,.06)}
|
|
|
|
|
|
.table > :not(caption) > * > * { vertical-align: middle; }
|
|
|
|
|
|
details > summary { cursor: pointer; }
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ===== 페이지 스크립트 (jQuery 불필요) ===== -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
(function(){
|
|
|
|
|
|
// ---------- 샘플 데이터 ----------
|
|
|
|
|
|
function buildSampleData(count=173){
|
|
|
|
|
|
const cats=['자재','부품','소재'], makers=['KG스틸','대한','경동기업','한빛','에이스','대림'], units=['EA','M','KG','매','BOX'];
|
|
|
|
|
|
return Array.from({length:count}, (_,i)=>({
|
|
|
|
|
|
id: i+1,
|
|
|
|
|
|
category: cats[(i+1)%cats.length],
|
|
|
|
|
|
name: `${cats[(i+1)%cats.length]} 샘플 품목 #${i+1} (${['A','B','C','D'][i%4]})`,
|
|
|
|
|
|
base_name: '',
|
|
|
|
|
|
unit: units[i%units.length],
|
|
|
|
|
|
maker: makers[i%makers.length],
|
|
|
|
|
|
code: `MAT-${String(i+1).padStart(5,'0')}`,
|
|
|
|
|
|
safety: (i%7===0)?50:0,
|
|
|
|
|
|
images: (i%5===0)?[`https://picsum.photos/seed/m${i+1}/120/80`]:[],
|
|
|
|
|
|
specs:[], extras:[]
|
|
|
|
|
|
}));
|
|
|
|
|
|
}
|
|
|
|
|
|
let MATERIALS = buildSampleData();
|
|
|
|
|
|
|
|
|
|
|
|
// ---------- 상태 ----------
|
|
|
|
|
|
let PAGE = 1, SIZE = 20;
|
|
|
|
|
|
|
|
|
|
|
|
// ---------- 헬퍼 ----------
|
|
|
|
|
|
const $ = sel => document.querySelector(sel);
|
|
|
|
|
|
const $$ = sel => Array.from(document.querySelectorAll(sel));
|
|
|
|
|
|
|
|
|
|
|
|
function getFiltered(){
|
|
|
|
|
|
const cat = ($('#filterCategory')?.value || '').trim();
|
|
|
|
|
|
const kw = ($('#keyword')?.value || '').trim().toLowerCase();
|
|
|
|
|
|
return MATERIALS.filter(m=>{
|
|
|
|
|
|
const okCat = !cat || m.category===cat;
|
|
|
|
|
|
const hay = (m.name+' '+(m.maker||'')+' '+(m.code||'')).toLowerCase();
|
|
|
|
|
|
const okKw = !kw || hay.includes(kw);
|
|
|
|
|
|
return okCat && okKw;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ---------- 렌더 ----------
|
|
|
|
|
|
function renderList(){
|
|
|
|
|
|
const data = getFiltered();
|
|
|
|
|
|
const total = data.length;
|
|
|
|
|
|
const pages = Math.max(1, Math.ceil(total / SIZE));
|
|
|
|
|
|
if (PAGE>pages) PAGE=pages;
|
|
|
|
|
|
|
|
|
|
|
|
const start=(PAGE-1)*SIZE, end=start+SIZE;
|
|
|
|
|
|
const pageData = data.slice(start,end);
|
|
|
|
|
|
|
|
|
|
|
|
const body = $('#listBody');
|
|
|
|
|
|
body.innerHTML = pageData.map((m,i)=>`
|
|
|
|
|
|
<tr data-id="${m.id}">
|
|
|
|
|
|
<td>${start+i+1}</td>
|
|
|
|
|
|
<td>${m.category||''}</td>
|
|
|
|
|
|
<td>${m.name||''}</td>
|
|
|
|
|
|
<td>${m.unit||''}</td>
|
|
|
|
|
|
<td>${m.maker||''}</td>
|
|
|
|
|
|
<td>${
|
|
|
|
|
|
(m.images||[]).slice(0,2).map(src=>`<img src="${src}" class="thumb me-1" data-src="${src}">`).join('') +
|
|
|
|
|
|
((m.images&&m.images.length>2)? `<span class="text-muted small">+${m.images.length-2}</span>`:'')
|
|
|
|
|
|
}</td>
|
|
|
|
|
|
<td class="text-center">
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary me-1 btnEdit">수정</button>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-danger btnDel">삭제</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
`).join('') || `<tr><td colspan="7" class="text-center text-muted py-4">데이터가 없습니다.</td></tr>`;
|
|
|
|
|
|
|
|
|
|
|
|
// 총건수
|
|
|
|
|
|
$('#totalInfo').textContent = `총 ${total.toLocaleString()}건 · ${total? (start+1):0}-${Math.min(end,total)} 표시`;
|
|
|
|
|
|
|
|
|
|
|
|
renderPager(pages);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function renderPager(pages){
|
|
|
|
|
|
const nav = $('#pagerNav');
|
|
|
|
|
|
const win=7;
|
|
|
|
|
|
let sp=Math.max(1, PAGE-Math.floor(win/2));
|
|
|
|
|
|
let ep=Math.min(pages, sp+win-1);
|
|
|
|
|
|
sp=Math.max(1, ep-win+1);
|
|
|
|
|
|
|
|
|
|
|
|
let html = `<ul class="pagination pagination-sm m-0">`;
|
|
|
|
|
|
html += `<li class="page-item ${PAGE===1?'disabled':''}">
|
|
|
|
|
|
<a class="page-link" href="#" data-go="first" aria-label="First">«</a></li>`;
|
|
|
|
|
|
html += `<li class="page-item ${PAGE===1?'disabled':''}">
|
|
|
|
|
|
<a class="page-link" href="#" data-go="${PAGE-1}" aria-label="Prev">‹</a></li>`;
|
|
|
|
|
|
for(let p=sp;p<=ep;p++){
|
|
|
|
|
|
html += `<li class="page-item ${p===PAGE?'active':''}">
|
|
|
|
|
|
<a class="page-link" href="#" data-go="${p}">${p}</a></li>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
html += `<li class="page-item ${PAGE===pages?'disabled':''}">
|
|
|
|
|
|
<a class="page-link" href="#" data-go="${PAGE+1}" aria-label="Next">›</a></li>`;
|
|
|
|
|
|
html += `<li class="page-item ${PAGE===pages?'disabled':''}">
|
|
|
|
|
|
<a class="page-link" href="#" data-go="last" aria-label="Last">»</a></li>`;
|
|
|
|
|
|
html += `</ul>`;
|
|
|
|
|
|
nav.innerHTML = html;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ---------- 규격/기타 동적행 + 품목명 자동생성 ----------
|
|
|
|
|
|
const UNIT_OPTIONS = ['EA','mm','cm','m','kg','t','L'];
|
|
|
|
|
|
function specRowTpl(data={label:'규격', value:'', unit:''}) {
|
|
|
|
|
|
const uid='spec_'+Math.random().toString(36).slice(2,8);
|
|
|
|
|
|
const opts=UNIT_OPTIONS.map(u=>`<option ${data.unit===u?'selected':''}>${u}</option>`).join('');
|
|
|
|
|
|
return `
|
|
|
|
|
|
<div class="row g-2 align-items-center border rounded p-2 mb-2" data-type="spec" id="${uid}">
|
|
|
|
|
|
<div class="col-auto"><button type="button" class="btn btn-sm btn-outline-secondary btnDelRow">－</button></div>
|
|
|
|
|
|
<div class="col-md-2"><label class="form-label m-0 small">규격</label>
|
|
|
|
|
|
<input type="text" class="form-control form-control-sm spec-label" value="${data.label||''}" placeholder="예: 두께"></div>
|
|
|
|
|
|
<div class="col-md-4"><label class="form-label m-0 small">값</label>
|
|
|
|
|
|
<input type="text" class="form-control form-control-sm spec-value" value="${data.value||''}" placeholder="예: 1.5"></div>
|
|
|
|
|
|
<div class="col-md-2"><label class="form-label m-0 small">단위</label>
|
|
|
|
|
|
<select class="form-select form-select-sm spec-unit"><option value="">선택</option>${opts}</select></div>
|
|
|
|
|
|
</div>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
function extraRowTpl(data={key:'', value:''}) {
|
|
|
|
|
|
const uid='extra_'+Math.random().toString(36).slice(2,8);
|
|
|
|
|
|
return `
|
|
|
|
|
|
<div class="row g-2 align-items-center border rounded p-2 mb-2" data-type="extra" id="${uid}">
|
|
|
|
|
|
<div class="col-auto"><button type="button" class="btn btn-sm btn-outline-secondary btnDelRow">－</button></div>
|
|
|
|
|
|
<div class="col-md-3"><label class="form-label m-0 small">항목</label>
|
|
|
|
|
|
<input type="text" class="form-control form-control-sm extra-key" value="${data.key||''}" placeholder="예: 색상"></div>
|
|
|
|
|
|
<div class="col-md-6"><label class="form-label m-0 small">값</label>
|
|
|
|
|
|
<input type="text" class="form-control form-control-sm extra-value" value="${data.value||''}" placeholder="예: 블루"></div>
|
|
|
|
|
|
</div>`;
|
|
|
|
|
|
}
|
|
|
|
|
|
function addSpecRow(data){ $('#specRows').insertAdjacentHTML('beforeend', specRowTpl(data)); wireSpecEvents(); composeName(); }
|
|
|
|
|
|
function addExtraRow(data){ $('#extraRows').insertAdjacentHTML('beforeend', extraRowTpl(data)); }
|
|
|
|
|
|
function wireSpecEvents(){
|
|
|
|
|
|
$$('#specRows .spec-value, #specRows .spec-unit, #matBaseName').forEach(el=>{
|
|
|
|
|
|
el.oninput = composeName; el.onchange = composeName;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function composeName(){
|
|
|
|
|
|
const base = ($('#matBaseName')?.value||'').trim();
|
|
|
|
|
|
const parts=[];
|
|
|
|
|
|
$$('#specRows [data-type="spec"]').forEach(row=>{
|
|
|
|
|
|
const v=row.querySelector('.spec-value')?.value.trim();
|
|
|
|
|
|
const u=row.querySelector('.spec-unit')?.value.trim();
|
|
|
|
|
|
if (v) parts.push(u?`${v}${u}`:v);
|
|
|
|
|
|
});
|
|
|
|
|
|
$('#matName').value = [base, ...parts].filter(Boolean).join(' ');
|
|
|
|
|
|
}
|
|
|
|
|
|
document.addEventListener('click', e=>{
|
|
|
|
|
|
if (e.target.id==='btnAddSpec') addSpecRow({});
|
|
|
|
|
|
if (e.target.id==='btnAddExtra') addExtraRow({});
|
|
|
|
|
|
if (e.target.classList.contains('btnDelRow')){
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
const row=e.target.closest('.row'); row?.parentNode?.removeChild(row);
|
|
|
|
|
|
composeName();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function resetDynamicRows(specs=[], extras=[]){
|
|
|
|
|
|
$('#specRows').innerHTML=''; $('#extraRows').innerHTML='';
|
|
|
|
|
|
if (!specs.length) specs=[{}];
|
|
|
|
|
|
specs.forEach(s=> addSpecRow(s));
|
|
|
|
|
|
extras.forEach(x=> addExtraRow(x));
|
|
|
|
|
|
composeName();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ---------- 모달/토스트 ----------
|
|
|
|
|
|
let materialModal, imgModal, snackToast;
|
|
|
|
|
|
function ensureBootstrapInstances(){
|
|
|
|
|
|
// 부트스트랩 JS가 있다면 인스턴스 생성
|
|
|
|
|
|
if (window.bootstrap){
|
|
|
|
|
|
materialModal = materialModal || new bootstrap.Modal('#materialModal');
|
|
|
|
|
|
imgModal = imgModal || new bootstrap.Modal('#imgModal');
|
|
|
|
|
|
snackToast = snackToast || new bootstrap.Toast('#snack');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ---------- 이벤트 바인딩 ----------
|
|
|
|
|
|
// 신규등록
|
|
|
|
|
|
document.getElementById('btnOpenCreate').addEventListener('click', ()=>{
|
|
|
|
|
|
ensureBootstrapInstances();
|
|
|
|
|
|
$('#materialModalTitle').textContent='자재 등록';
|
|
|
|
|
|
$('#btnSubmit').textContent='저장';
|
|
|
|
|
|
$('#materialForm').reset();
|
|
|
|
|
|
$('#matId').value='';
|
|
|
|
|
|
$('#previewWrap').innerHTML='';
|
|
|
|
|
|
$('#modalHint').textContent='※ 필수 입력: 분류, 자재명(베이스)';
|
|
|
|
|
|
resetDynamicRows();
|
|
|
|
|
|
materialModal ? materialModal.show() : document.getElementById('materialModal').classList.add('show');
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 이미지 미리보기
|
|
|
|
|
|
document.getElementById('matImages').addEventListener('change', function(){
|
|
|
|
|
|
const wrap=$('#previewWrap'); wrap.innerHTML='';
|
|
|
|
|
|
Array.from(this.files).forEach(f=>{
|
|
|
|
|
|
const url=URL.createObjectURL(f);
|
|
|
|
|
|
wrap.insertAdjacentHTML('beforeend', `<img src="${url}" class="thumb">`);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 저장(등록/수정)
|
|
|
|
|
|
document.getElementById('materialForm').addEventListener('submit', function(e){
|
|
|
|
|
|
e.preventDefault(); e.stopPropagation();
|
|
|
|
|
|
this.classList.add('was-validated');
|
|
|
|
|
|
if (!this.checkValidity()) return;
|
|
|
|
|
|
|
|
|
|
|
|
const specs = $$('#specRows [data-type="spec"]').map(row=>({
|
|
|
|
|
|
label: row.querySelector('.spec-label')?.value.trim() || '규격',
|
|
|
|
|
|
value: row.querySelector('.spec-value')?.value.trim() || '',
|
|
|
|
|
|
unit : row.querySelector('.spec-unit')?.value.trim() || ''
|
|
|
|
|
|
}));
|
|
|
|
|
|
const extras = $$('#extraRows [data-type="extra"]').map(row=>({
|
|
|
|
|
|
key: row.querySelector('.extra-key')?.value.trim() || '',
|
|
|
|
|
|
value: row.querySelector('.extra-value')?.value.trim() || ''
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
const dto = {
|
|
|
|
|
|
id: $('#matId').value ? parseInt($('#matId').value,10) : null,
|
|
|
|
|
|
category: $('#matCategory').value,
|
|
|
|
|
|
base_name: $('#matBaseName').value.trim(),
|
|
|
|
|
|
name: $('#matName').value.trim(),
|
|
|
|
|
|
unit: $('#matUnit').value.trim(),
|
|
|
|
|
|
maker: $('#matMaker').value.trim(),
|
|
|
|
|
|
code: $('#matCode').value.trim(),
|
|
|
|
|
|
safety: parseInt($('#matSafety').value,10) || 0,
|
|
|
|
|
|
memo: $('#matMemo').value.trim(),
|
|
|
|
|
|
images: [],
|
|
|
|
|
|
specs, extras
|
|
|
|
|
|
};
|
|
|
|
|
|
const files = $('#matImages').files; for (const f of files) dto.images.push(URL.createObjectURL(f));
|
|
|
|
|
|
|
|
|
|
|
|
if (dto.id){
|
|
|
|
|
|
const idx = MATERIALS.findIndex(m=>m.id===dto.id);
|
|
|
|
|
|
if (idx>=0) MATERIALS[idx] = {...MATERIALS[idx], ...dto};
|
|
|
|
|
|
if (snackToast){ $('#snackMsg').textContent='수정되었습니다.'; snackToast.show(); }
|
|
|
|
|
|
}else{
|
|
|
|
|
|
dto.id = (MATERIALS.reduce((mx,m)=>Math.max(mx,m.id),0)||0)+1;
|
|
|
|
|
|
MATERIALS.unshift(dto);
|
|
|
|
|
|
if (snackToast){ $('#snackMsg').textContent='등록되었습니다.'; snackToast.show(); }
|
|
|
|
|
|
}
|
|
|
|
|
|
materialModal?.hide();
|
|
|
|
|
|
PAGE=1; renderList();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 수정/삭제
|
|
|
|
|
|
document.addEventListener('click', e=>{
|
|
|
|
|
|
if (e.target.classList.contains('btnEdit')){
|
|
|
|
|
|
ensureBootstrapInstances();
|
|
|
|
|
|
const id = parseInt(e.target.closest('tr').dataset.id,10);
|
|
|
|
|
|
const m = MATERIALS.find(x=>x.id===id); if(!m) return;
|
|
|
|
|
|
|
|
|
|
|
|
$('#materialModalTitle').textContent='자재 수정';
|
|
|
|
|
|
$('#btnSubmit').textContent='수정';
|
|
|
|
|
|
|
|
|
|
|
|
$('#matId').value=m.id;
|
|
|
|
|
|
$('#matCategory').value=m.category||'';
|
|
|
|
|
|
$('#matBaseName').value=m.base_name || (m.name||'').split(' ')[0] || '';
|
|
|
|
|
|
$('#matUnit').value=m.unit||'';
|
|
|
|
|
|
$('#matName').value=m.name||'';
|
|
|
|
|
|
$('#matMaker').value=m.maker||'';
|
|
|
|
|
|
$('#matCode').value=m.code||'';
|
|
|
|
|
|
$('#matSafety').value=m.safety||0;
|
|
|
|
|
|
$('#matMemo').value=m.memo||'';
|
|
|
|
|
|
$('#matImages').value='';
|
|
|
|
|
|
const wrap=$('#previewWrap'); wrap.innerHTML='';
|
|
|
|
|
|
(m.images||[]).forEach(src=> wrap.insertAdjacentHTML('beforeend', `<img src="${src}" class="thumb">`));
|
|
|
|
|
|
|
|
|
|
|
|
resetDynamicRows(m.specs||[], m.extras||[]);
|
|
|
|
|
|
materialModal ? materialModal.show() : document.getElementById('materialModal').classList.add('show');
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.target.classList.contains('btnDel')){
|
|
|
|
|
|
const id = parseInt(e.target.closest('tr').dataset.id,10);
|
|
|
|
|
|
if (!confirm('삭제하시겠습니까?')) return;
|
|
|
|
|
|
MATERIALS = MATERIALS.filter(m=>m.id!==id);
|
|
|
|
|
|
if (snackToast){ $('#snackMsg').textContent='삭제되었습니다.'; snackToast.show(); }
|
|
|
|
|
|
renderList();
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.target.classList.contains('thumb')){
|
|
|
|
|
|
ensureBootstrapInstances();
|
|
|
|
|
|
const src = e.target.dataset.src || e.target.getAttribute('src');
|
|
|
|
|
|
$('#imgModalImg').setAttribute('src', src);
|
|
|
|
|
|
imgModal ? imgModal.show() : document.getElementById('imgModal').classList.add('show');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 검색/필터/페이지크기
|
|
|
|
|
|
document.getElementById('btnSearch').addEventListener('click', ()=>{ PAGE=1; renderList(); });
|
|
|
|
|
|
document.getElementById('keyword').addEventListener('keydown', e=>{ if(e.key==='Enter'){ PAGE=1; renderList(); }});
|
|
|
|
|
|
document.getElementById('filterCategory').addEventListener('change', ()=>{ PAGE=1; renderList(); });
|
|
|
|
|
|
document.getElementById('pageSize').addEventListener('change', function(){ SIZE=parseInt(this.value,10)||20; PAGE=1; renderList(); });
|
|
|
|
|
|
|
|
|
|
|
|
// 페이징 클릭
|
|
|
|
|
|
document.addEventListener('click', (e)=>{
|
|
|
|
|
|
const a = e.target.closest('#pagerNav a'); if (!a) return;
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
const pages = Math.max(1, Math.ceil(getFiltered().length / SIZE));
|
|
|
|
|
|
const go = a.dataset.go;
|
|
|
|
|
|
if (go==='first') PAGE=1;
|
|
|
|
|
|
else if (go==='last') PAGE=pages;
|
|
|
|
|
|
else PAGE = Math.min(Math.max(parseInt(go,10)||1,1), pages);
|
|
|
|
|
|
renderList();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 최초 렌더
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', ()=>{
|
|
|
|
|
|
try{ ensureBootstrapInstances(); }catch(_){}
|
|
|
|
|
|
const ps=document.getElementById('pageSize'); if(ps) SIZE=parseInt(ps.value,10)||20;
|
|
|
|
|
|
renderList();
|
|
|
|
|
|
});
|
|
|
|
|
|
})();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap JS (모달 동작 보장용; 이미 로드되어 있어도 괜찮습니다) -->
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<?php include '../inc/footer.php'; ?>
|
