feat(tkuser): 탭 카테고리 그룹핑 + 설비 관리 탭 추가 + tkfb admin 페이지 통합
- tkuser 탭을 5개 카테고리로 그룹핑 (인력/현장/업무/거래/시스템) - 설비 관리 탭 신규 추가 (CRUD, 필터, 상세 보기) - tkfb 사이드바 admin 메뉴 6개를 tkuser 외부 링크로 교체 - tkfb admin HTML 6개를 tkuser 리다이렉트로 변경 - gateway 알림 벨 링크를 tkuser로 변경 - _tkuserBase 헬퍼로 개발/운영 환경 자동 분기 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
@@ -33,16 +33,12 @@
|
||||
<!-- Tab Navigation -->
|
||||
<nav id="tabNav" class="bg-white border-b shadow-sm sticky top-14 z-40 hidden">
|
||||
<div id="tabNavInner" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex gap-1 py-2 overflow-x-auto">
|
||||
<div class="flex gap-1 py-2 overflow-x-auto items-center">
|
||||
<!-- 인력 관리 -->
|
||||
<span class="tab-group-label">인력</span>
|
||||
<button class="tab-btn active px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="users" onclick="switchTab('users', event)">
|
||||
<i class="fas fa-users mr-2"></i>사용자
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="projects" onclick="switchTab('projects', event)">
|
||||
<i class="fas fa-folder-open mr-2"></i>프로젝트
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="workplaces" onclick="switchTab('workplaces', event)">
|
||||
<i class="fas fa-building mr-2"></i>작업장
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="workers" onclick="switchTab('workers', event)">
|
||||
<i class="fas fa-hard-hat mr-2"></i>작업자
|
||||
</button>
|
||||
@@ -52,15 +48,33 @@
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="permissions" onclick="switchTab('permissions', event)">
|
||||
<i class="fas fa-shield-alt mr-2"></i>권한
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="issueTypes" onclick="switchTab('issueTypes', event)">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>이슈 유형
|
||||
<span class="tab-divider"></span>
|
||||
<!-- 현장 관리 -->
|
||||
<span class="tab-group-label">현장</span>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="projects" onclick="switchTab('projects', event)">
|
||||
<i class="fas fa-folder-open mr-2"></i>프로젝트
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="workplaces" onclick="switchTab('workplaces', event)">
|
||||
<i class="fas fa-building mr-2"></i>작업장
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="equipments" onclick="switchTab('equipments', event)">
|
||||
<i class="fas fa-cogs mr-2"></i>설비
|
||||
</button>
|
||||
<span class="tab-divider"></span>
|
||||
<!-- 업무 설정 -->
|
||||
<span class="tab-group-label">업무</span>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="tasks" onclick="switchTab('tasks', event)">
|
||||
<i class="fas fa-tasks mr-2"></i>작업
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="issueTypes" onclick="switchTab('issueTypes', event)">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>이슈 유형
|
||||
</button>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="vacations" onclick="switchTab('vacations', event)">
|
||||
<i class="fas fa-umbrella-beach mr-2"></i>휴가
|
||||
</button>
|
||||
<span class="tab-divider"></span>
|
||||
<!-- 거래/물품 -->
|
||||
<span class="tab-group-label">거래</span>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="partners" onclick="switchTab('partners', event)">
|
||||
<i class="fas fa-truck mr-2"></i>협력업체
|
||||
</button>
|
||||
@@ -70,6 +84,9 @@
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="consumables" onclick="switchTab('consumables', event)">
|
||||
<i class="fas fa-box-open mr-2"></i>소모품
|
||||
</button>
|
||||
<span class="tab-divider"></span>
|
||||
<!-- 시스템 -->
|
||||
<span class="tab-group-label">시스템</span>
|
||||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" data-tab="notificationRecipients" onclick="switchTab('notificationRecipients', event)">
|
||||
<i class="fas fa-bell mr-2"></i>알림 수신자
|
||||
</button>
|
||||
@@ -912,6 +929,49 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ============ 설비 탭 ============ -->
|
||||
<div id="tab-equipments" class="hidden">
|
||||
<div class="grid lg:grid-cols-5 gap-6">
|
||||
<!-- 설비 목록 -->
|
||||
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-base font-semibold text-gray-800"><i class="fas fa-cogs text-emerald-500 mr-2"></i>설비 목록</h2>
|
||||
<button id="btnAddEquipment" onclick="openAddEquipmentTkuser()" class="hidden px-3 py-1.5 bg-slate-700 text-white rounded-lg text-xs hover:bg-slate-800">
|
||||
<i class="fas fa-plus mr-1"></i>설비 등록
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<input type="text" id="equipmentSearchTkuser" class="input-field flex-1 px-3 py-1.5 rounded-lg text-sm" placeholder="설비명, 코드, 제조사 검색..." oninput="filterEquipmentsTkuser()">
|
||||
<select id="equipmentFilterWorkplace" class="input-field px-2 py-1.5 rounded-lg text-sm" onchange="filterEquipmentsTkuser()">
|
||||
<option value="">전체 작업장</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<select id="equipmentFilterType" class="input-field flex-1 px-2 py-1.5 rounded-lg text-sm" onchange="filterEquipmentsTkuser()">
|
||||
<option value="">전체 유형</option>
|
||||
</select>
|
||||
<select id="equipmentFilterStatus" class="input-field px-2 py-1.5 rounded-lg text-sm" onchange="filterEquipmentsTkuser()">
|
||||
<option value="">전체 상태</option>
|
||||
<option value="active">활성</option>
|
||||
<option value="maintenance">정비중</option>
|
||||
<option value="inactive">비활성</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="equipmentsListTkuser" class="space-y-2 max-h-[60vh] overflow-y-auto">
|
||||
<p class="text-gray-400 text-center py-4 text-sm">탭을 선택하면 데이터를 불러옵니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 설비 상세 -->
|
||||
<div class="lg:col-span-3">
|
||||
<div id="equipmentDetailTkuser" class="hidden"></div>
|
||||
<div id="equipmentEmptyTkuser" class="text-center text-gray-400 py-16">
|
||||
<i class="fas fa-cogs text-4xl mb-3"></i>
|
||||
<p>설비를 선택하면 상세 정보를 볼 수 있습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 사용자 편집 모달 -->
|
||||
@@ -2020,6 +2080,159 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 등록 모달 -->
|
||||
<div id="addEquipmentModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeAddEquipmentTkuser()">
|
||||
<div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6 max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold">설비 등록</h3>
|
||||
<button onclick="closeAddEquipmentTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<form id="addEquipmentFormTkuser">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">관리번호 <span class="text-red-400">*</span></label>
|
||||
<input type="text" id="newEquipmentCodeTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">설비명 <span class="text-red-400">*</span></label>
|
||||
<input type="text" id="newEquipmentNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">설비유형</label>
|
||||
<input type="text" id="newEquipmentTypeTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="예: 용접기, 절단기">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">작업장</label>
|
||||
<select id="newEquipmentWorkplaceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
<option value="">선택</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">제조사</label>
|
||||
<input type="text" id="newEquipmentManufacturerTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">모델명</label>
|
||||
<input type="text" id="newEquipmentModelTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">시리얼번호</label>
|
||||
<input type="text" id="newEquipmentSerialTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">설치일</label>
|
||||
<input type="date" id="newEquipmentInstallDateTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">공급업체</label>
|
||||
<input type="text" id="newEquipmentSupplierTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">구매가격</label>
|
||||
<input type="number" id="newEquipmentPriceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" min="0">
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
|
||||
<select id="newEquipmentStatusTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
<option value="active">활성</option>
|
||||
<option value="maintenance">정비중</option>
|
||||
<option value="inactive">비활성</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">사양</label>
|
||||
<textarea id="newEquipmentSpecsTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
|
||||
<textarea id="newEquipmentNotesTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 gap-2">
|
||||
<button type="button" onclick="closeAddEquipmentTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
|
||||
<button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">등록</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 수정 모달 -->
|
||||
<div id="editEquipmentModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeEditEquipmentTkuser()">
|
||||
<div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6 max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold">설비 수정</h3>
|
||||
<button onclick="closeEditEquipmentTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<form id="editEquipmentFormTkuser">
|
||||
<input type="hidden" id="editEquipmentIdTkuser">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">관리번호 <span class="text-red-400">*</span></label>
|
||||
<input type="text" id="editEquipmentCodeTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">설비명 <span class="text-red-400">*</span></label>
|
||||
<input type="text" id="editEquipmentNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">설비유형</label>
|
||||
<input type="text" id="editEquipmentTypeTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="예: 용접기, 절단기">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">작업장</label>
|
||||
<select id="editEquipmentWorkplaceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
<option value="">선택</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">제조사</label>
|
||||
<input type="text" id="editEquipmentManufacturerTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">모델명</label>
|
||||
<input type="text" id="editEquipmentModelTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">시리얼번호</label>
|
||||
<input type="text" id="editEquipmentSerialTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">설치일</label>
|
||||
<input type="date" id="editEquipmentInstallDateTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">공급업체</label>
|
||||
<input type="text" id="editEquipmentSupplierTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">구매가격</label>
|
||||
<input type="number" id="editEquipmentPriceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" min="0">
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
|
||||
<select id="editEquipmentStatusTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
|
||||
<option value="active">활성</option>
|
||||
<option value="maintenance">정비중</option>
|
||||
<option value="inactive">비활성</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">사양</label>
|
||||
<textarea id="editEquipmentSpecsTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
|
||||
<textarea id="editEquipmentNotesTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 gap-2">
|
||||
<button type="button" onclick="closeEditEquipmentTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
|
||||
<button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">저장</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 사진 확대 모달 -->
|
||||
<div id="photoViewModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-[60] flex items-center justify-center p-4 cursor-pointer" onclick="this.classList.add('hidden')">
|
||||
<img id="photoViewImage" class="max-w-full max-h-[90vh] rounded-lg shadow-2xl">
|
||||
@@ -2041,6 +2254,7 @@
|
||||
<script src="/static/js/tkuser-partners.js?v=2026031601"></script>
|
||||
<script src="/static/js/tkuser-vendors.js?v=2026031401"></script>
|
||||
<script src="/static/js/tkuser-consumables.js?v=2026031602"></script>
|
||||
<script src="/static/js/tkuser-equipments.js?v=2026031701"></script>
|
||||
<script src="/static/js/tkuser-notificationRecipients.js?v=2026031701"></script>
|
||||
<!-- Boot -->
|
||||
<script>init();</script>
|
||||
|
||||
@@ -6,6 +6,8 @@ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; back
|
||||
.tab-btn.active { background: #334155; color: white; }
|
||||
.tab-btn:not(.active) { color: #64748b; }
|
||||
.tab-btn:not(.active):hover { background: #e2e8f0; }
|
||||
.tab-group-label { font-size: 0.65rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.25rem; white-space: nowrap; flex-shrink: 0; }
|
||||
.tab-divider { width: 1px; height: 1.25rem; background: #e2e8f0; margin: 0 0.25rem; flex-shrink: 0; }
|
||||
.system-section { border-left: 4px solid; }
|
||||
.system-section.system1 { border-color: #3b82f6; }
|
||||
.system-section.system3 { border-color: #8b5cf6; }
|
||||
@@ -27,6 +29,8 @@ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; back
|
||||
}
|
||||
#tabNav::-webkit-scrollbar { display: none; }
|
||||
#tabNav button { white-space: nowrap; flex-shrink: 0; font-size: 0.8rem; padding: 0.375rem 0.75rem; }
|
||||
.tab-group-label { font-size: 0.6rem; padding: 0 0.125rem; }
|
||||
.tab-divider { margin: 0 0.125rem; }
|
||||
.tab-scroll-hint {
|
||||
position: absolute; right: 0; top: 0; bottom: 0; width: 2rem;
|
||||
background: linear-gradient(to right, transparent, #fff);
|
||||
|
||||
@@ -194,7 +194,7 @@ async function init() {
|
||||
// URL ?tab= 파라미터로 탭 자동 전환 (화이트리스트 + URL 정리)
|
||||
const ALLOWED_TABS = ['users','projects','workplaces','workers','departments',
|
||||
'permissions','issueTypes','tasks','vacations','partners','vendors',
|
||||
'consumables','notificationRecipients'];
|
||||
'consumables','notificationRecipients','equipments'];
|
||||
const urlTab = new URLSearchParams(location.search).get('tab');
|
||||
if (urlTab && ALLOWED_TABS.includes(urlTab)) {
|
||||
const tabBtn = document.querySelector(`.tab-btn[data-tab="${urlTab}"]`);
|
||||
|
||||
253
user-management/web/static/js/tkuser-equipments.js
Normal file
253
user-management/web/static/js/tkuser-equipments.js
Normal file
@@ -0,0 +1,253 @@
|
||||
/* ===== tkuser 설비(Equipment) CRUD ===== */
|
||||
let equipmentsLoaded = false;
|
||||
let equipmentsList = [];
|
||||
let selectedEquipmentIdTkuser = null;
|
||||
|
||||
const EQUIPMENT_STATUS_MAP = {
|
||||
active: { label: '활성', cls: 'bg-green-100 text-green-700' },
|
||||
maintenance: { label: '정비중', cls: 'bg-yellow-100 text-yellow-700' },
|
||||
inactive: { label: '비활성', cls: 'bg-gray-100 text-gray-400' }
|
||||
};
|
||||
|
||||
async function loadEquipmentsTab() {
|
||||
if (equipmentsLoaded) return;
|
||||
equipmentsLoaded = true;
|
||||
if (currentUser && ['admin', 'system'].includes(currentUser.role)) {
|
||||
document.getElementById('btnAddEquipment')?.classList.remove('hidden');
|
||||
}
|
||||
await Promise.all([loadEquipmentFilters(), loadEquipmentsList()]);
|
||||
}
|
||||
|
||||
async function loadEquipmentFilters() {
|
||||
try {
|
||||
// 작업장 필터
|
||||
const wRes = await api('/workplaces');
|
||||
const workplaces = wRes.data || [];
|
||||
const wSel = document.getElementById('equipmentFilterWorkplace');
|
||||
if (wSel) {
|
||||
const current = wSel.value;
|
||||
wSel.innerHTML = '<option value="">전체 작업장</option>' +
|
||||
workplaces.map(w => `<option value="${w.workplace_id}">${escHtml(w.workplace_name)}</option>`).join('');
|
||||
wSel.value = current;
|
||||
}
|
||||
// 유형 필터
|
||||
const tRes = await api('/equipments/types');
|
||||
const types = tRes.data || [];
|
||||
const tSel = document.getElementById('equipmentFilterType');
|
||||
if (tSel) {
|
||||
const current = tSel.value;
|
||||
tSel.innerHTML = '<option value="">전체 유형</option>' +
|
||||
types.map(t => `<option value="${escHtml(t)}">${escHtml(t)}</option>`).join('');
|
||||
tSel.value = current;
|
||||
}
|
||||
// 모달 select 채우기 (작업장)
|
||||
['newEquipmentWorkplaceTkuser', 'editEquipmentWorkplaceTkuser'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.innerHTML = '<option value="">선택</option>' +
|
||||
workplaces.map(w => `<option value="${w.workplace_id}">${escHtml(w.workplace_name)}</option>`).join('');
|
||||
});
|
||||
} catch (e) { /* 필터 로드 실패는 무시 */ }
|
||||
}
|
||||
|
||||
async function loadEquipmentsList() {
|
||||
try {
|
||||
const workplaceId = document.getElementById('equipmentFilterWorkplace')?.value || '';
|
||||
const eqType = document.getElementById('equipmentFilterType')?.value || '';
|
||||
const status = document.getElementById('equipmentFilterStatus')?.value || '';
|
||||
const search = document.getElementById('equipmentSearchTkuser')?.value?.trim() || '';
|
||||
const params = new URLSearchParams();
|
||||
if (workplaceId) params.set('workplace_id', workplaceId);
|
||||
if (eqType) params.set('equipment_type', eqType);
|
||||
if (status) params.set('status', status);
|
||||
if (search) params.set('search', search);
|
||||
const r = await api('/equipments?' + params.toString());
|
||||
equipmentsList = r.data || [];
|
||||
renderEquipmentsListTkuser();
|
||||
} catch (e) {
|
||||
document.getElementById('equipmentsListTkuser').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${e.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderEquipmentsListTkuser() {
|
||||
const c = document.getElementById('equipmentsListTkuser');
|
||||
if (!equipmentsList.length) {
|
||||
c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 설비가 없습니다.</p>';
|
||||
return;
|
||||
}
|
||||
const isAdmin = currentUser && ['admin', 'system'].includes(currentUser.role);
|
||||
c.innerHTML = equipmentsList.map(eq => {
|
||||
const st = EQUIPMENT_STATUS_MAP[eq.status] || EQUIPMENT_STATUS_MAP.active;
|
||||
return `<div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer ${selectedEquipmentIdTkuser === eq.equipment_id ? 'ring-2 ring-indigo-400' : ''}" onclick="selectEquipmentTkuser(${eq.equipment_id})">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium text-gray-800 truncate">
|
||||
<i class="fas fa-cog mr-1.5 text-gray-400 text-xs"></i>${escHtml(eq.equipment_name)}
|
||||
<span class="px-1.5 py-0.5 rounded text-xs ${st.cls} ml-1">${st.label}</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5">
|
||||
<span>${escHtml(eq.equipment_code)}</span>
|
||||
${eq.workplace_name ? `<span>· ${escHtml(eq.workplace_name)}</span>` : ''}
|
||||
${eq.equipment_type ? `<span>· ${escHtml(eq.equipment_type)}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
${isAdmin ? `<div class="flex gap-1 ml-2 flex-shrink-0">
|
||||
<button onclick="event.stopPropagation(); openEditEquipmentTkuser(${eq.equipment_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="수정"><i class="fas fa-pen text-xs"></i></button>
|
||||
<button onclick="event.stopPropagation(); deleteEquipmentTkuser(${eq.equipment_id}, '${escHtml(eq.equipment_name).replace(/'/g, "\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="삭제"><i class="fas fa-trash text-xs"></i></button>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function selectEquipmentTkuser(id) {
|
||||
selectedEquipmentIdTkuser = id;
|
||||
renderEquipmentsListTkuser();
|
||||
try {
|
||||
const r = await api(`/equipments/${id}`);
|
||||
const eq = r.data;
|
||||
renderEquipmentDetailTkuser(eq);
|
||||
document.getElementById('equipmentDetailTkuser').classList.remove('hidden');
|
||||
document.getElementById('equipmentEmptyTkuser').classList.add('hidden');
|
||||
} catch (e) {
|
||||
showToast('상세 조회 실패: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderEquipmentDetailTkuser(eq) {
|
||||
const st = EQUIPMENT_STATUS_MAP[eq.status] || EQUIPMENT_STATUS_MAP.active;
|
||||
const installDate = eq.installation_date ? eq.installation_date.substring(0, 10) : '-';
|
||||
document.getElementById('equipmentDetailTkuser').innerHTML = `
|
||||
<div class="bg-white rounded-xl shadow-sm p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800">${escHtml(eq.equipment_name)}</h3>
|
||||
<span class="px-2 py-1 rounded text-xs font-medium ${st.cls}">${st.label}</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div><span class="text-gray-500">관리번호:</span> <span class="font-medium">${escHtml(eq.equipment_code)}</span></div>
|
||||
<div><span class="text-gray-500">설비유형:</span> <span class="font-medium">${escHtml(eq.equipment_type) || '-'}</span></div>
|
||||
<div><span class="text-gray-500">작업장:</span> <span class="font-medium">${escHtml(eq.workplace_name) || '-'}</span></div>
|
||||
<div><span class="text-gray-500">제조사:</span> <span class="font-medium">${escHtml(eq.manufacturer) || '-'}</span></div>
|
||||
<div><span class="text-gray-500">모델명:</span> <span class="font-medium">${escHtml(eq.model_name) || '-'}</span></div>
|
||||
<div><span class="text-gray-500">시리얼번호:</span> <span class="font-medium">${escHtml(eq.serial_number) || '-'}</span></div>
|
||||
<div><span class="text-gray-500">설치일:</span> <span class="font-medium">${installDate}</span></div>
|
||||
<div><span class="text-gray-500">공급업체:</span> <span class="font-medium">${escHtml(eq.supplier) || '-'}</span></div>
|
||||
${eq.purchase_price ? `<div><span class="text-gray-500">구매가격:</span> <span class="font-medium">${Number(eq.purchase_price).toLocaleString()}원</span></div>` : ''}
|
||||
${eq.specifications ? `<div class="col-span-2"><span class="text-gray-500">사양:</span> <span class="font-medium">${escHtml(eq.specifications)}</span></div>` : ''}
|
||||
${eq.notes ? `<div class="col-span-2"><span class="text-gray-500">비고:</span> <span class="font-medium">${escHtml(eq.notes)}</span></div>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ===== 설비 등록 ===== */
|
||||
function openAddEquipmentTkuser() {
|
||||
// 다음 코드 자동 생성
|
||||
api('/equipments/next-code').then(r => {
|
||||
document.getElementById('newEquipmentCodeTkuser').value = r.data || '';
|
||||
}).catch(() => {});
|
||||
document.getElementById('addEquipmentModalTkuser').classList.remove('hidden');
|
||||
}
|
||||
function closeAddEquipmentTkuser() { document.getElementById('addEquipmentModalTkuser').classList.add('hidden'); document.getElementById('addEquipmentFormTkuser').reset(); }
|
||||
|
||||
async function submitAddEquipmentTkuser(e) {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
equipment_code: document.getElementById('newEquipmentCodeTkuser').value.trim(),
|
||||
equipment_name: document.getElementById('newEquipmentNameTkuser').value.trim(),
|
||||
equipment_type: document.getElementById('newEquipmentTypeTkuser').value.trim() || null,
|
||||
workplace_id: document.getElementById('newEquipmentWorkplaceTkuser').value || null,
|
||||
manufacturer: document.getElementById('newEquipmentManufacturerTkuser').value.trim() || null,
|
||||
model_name: document.getElementById('newEquipmentModelTkuser').value.trim() || null,
|
||||
serial_number: document.getElementById('newEquipmentSerialTkuser').value.trim() || null,
|
||||
installation_date: document.getElementById('newEquipmentInstallDateTkuser').value || null,
|
||||
supplier: document.getElementById('newEquipmentSupplierTkuser').value.trim() || null,
|
||||
purchase_price: document.getElementById('newEquipmentPriceTkuser').value || null,
|
||||
status: document.getElementById('newEquipmentStatusTkuser').value || 'active',
|
||||
specifications: document.getElementById('newEquipmentSpecsTkuser').value.trim() || null,
|
||||
notes: document.getElementById('newEquipmentNotesTkuser').value.trim() || null,
|
||||
};
|
||||
if (!data.equipment_code) { showToast('관리번호는 필수입니다', 'error'); return; }
|
||||
if (!data.equipment_name) { showToast('설비명은 필수입니다', 'error'); return; }
|
||||
try {
|
||||
await api('/equipments', { method: 'POST', body: JSON.stringify(data) });
|
||||
showToast('설비가 등록되었습니다');
|
||||
closeAddEquipmentTkuser();
|
||||
await loadEquipmentFilters();
|
||||
await loadEquipmentsList();
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
/* ===== 설비 수정 ===== */
|
||||
function openEditEquipmentTkuser(id) {
|
||||
const eq = equipmentsList.find(x => x.equipment_id === id);
|
||||
if (!eq) return;
|
||||
document.getElementById('editEquipmentIdTkuser').value = eq.equipment_id;
|
||||
document.getElementById('editEquipmentCodeTkuser').value = eq.equipment_code;
|
||||
document.getElementById('editEquipmentNameTkuser').value = eq.equipment_name;
|
||||
document.getElementById('editEquipmentTypeTkuser').value = eq.equipment_type || '';
|
||||
document.getElementById('editEquipmentWorkplaceTkuser').value = eq.workplace_id || '';
|
||||
document.getElementById('editEquipmentManufacturerTkuser').value = eq.manufacturer || '';
|
||||
document.getElementById('editEquipmentModelTkuser').value = eq.model_name || '';
|
||||
document.getElementById('editEquipmentSerialTkuser').value = eq.serial_number || '';
|
||||
document.getElementById('editEquipmentInstallDateTkuser').value = eq.installation_date ? eq.installation_date.substring(0, 10) : '';
|
||||
document.getElementById('editEquipmentSupplierTkuser').value = eq.supplier || '';
|
||||
document.getElementById('editEquipmentPriceTkuser').value = eq.purchase_price || '';
|
||||
document.getElementById('editEquipmentStatusTkuser').value = eq.status || 'active';
|
||||
document.getElementById('editEquipmentSpecsTkuser').value = eq.specifications || '';
|
||||
document.getElementById('editEquipmentNotesTkuser').value = eq.notes || '';
|
||||
document.getElementById('editEquipmentModalTkuser').classList.remove('hidden');
|
||||
}
|
||||
function closeEditEquipmentTkuser() { document.getElementById('editEquipmentModalTkuser').classList.add('hidden'); }
|
||||
|
||||
async function submitEditEquipmentTkuser(e) {
|
||||
e.preventDefault();
|
||||
const id = document.getElementById('editEquipmentIdTkuser').value;
|
||||
const data = {
|
||||
equipment_code: document.getElementById('editEquipmentCodeTkuser').value.trim(),
|
||||
equipment_name: document.getElementById('editEquipmentNameTkuser').value.trim(),
|
||||
equipment_type: document.getElementById('editEquipmentTypeTkuser').value.trim() || null,
|
||||
workplace_id: document.getElementById('editEquipmentWorkplaceTkuser').value || null,
|
||||
manufacturer: document.getElementById('editEquipmentManufacturerTkuser').value.trim() || null,
|
||||
model_name: document.getElementById('editEquipmentModelTkuser').value.trim() || null,
|
||||
serial_number: document.getElementById('editEquipmentSerialTkuser').value.trim() || null,
|
||||
installation_date: document.getElementById('editEquipmentInstallDateTkuser').value || null,
|
||||
supplier: document.getElementById('editEquipmentSupplierTkuser').value.trim() || null,
|
||||
purchase_price: document.getElementById('editEquipmentPriceTkuser').value || null,
|
||||
status: document.getElementById('editEquipmentStatusTkuser').value || 'active',
|
||||
specifications: document.getElementById('editEquipmentSpecsTkuser').value.trim() || null,
|
||||
notes: document.getElementById('editEquipmentNotesTkuser').value.trim() || null,
|
||||
};
|
||||
try {
|
||||
await api(`/equipments/${id}`, { method: 'PUT', body: JSON.stringify(data) });
|
||||
showToast('수정되었습니다');
|
||||
closeEditEquipmentTkuser();
|
||||
await loadEquipmentFilters();
|
||||
await loadEquipmentsList();
|
||||
if (selectedEquipmentIdTkuser == id) selectEquipmentTkuser(id);
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
/* ===== 설비 삭제 ===== */
|
||||
async function deleteEquipmentTkuser(id, name) {
|
||||
if (!confirm(`"${name}" 설비를 삭제하시겠습니까?`)) return;
|
||||
try {
|
||||
await api(`/equipments/${id}`, { method: 'DELETE' });
|
||||
showToast('삭제 완료');
|
||||
await loadEquipmentsList();
|
||||
if (selectedEquipmentIdTkuser === id) {
|
||||
document.getElementById('equipmentDetailTkuser').classList.add('hidden');
|
||||
document.getElementById('equipmentEmptyTkuser').classList.remove('hidden');
|
||||
selectedEquipmentIdTkuser = null;
|
||||
}
|
||||
} catch (e) { showToast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
/* ===== 필터 ===== */
|
||||
let equipmentSearchTimeout;
|
||||
function filterEquipmentsTkuser() {
|
||||
clearTimeout(equipmentSearchTimeout);
|
||||
equipmentSearchTimeout = setTimeout(loadEquipmentsList, 300);
|
||||
}
|
||||
|
||||
// 검색/필터 이벤트 + 모달 폼 이벤트
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('addEquipmentFormTkuser')?.addEventListener('submit', submitAddEquipmentTkuser);
|
||||
document.getElementById('editEquipmentFormTkuser')?.addEventListener('submit', submitEditEquipmentTkuser);
|
||||
});
|
||||
@@ -20,7 +20,7 @@ function switchTab(name, event) {
|
||||
const headerInner = document.getElementById('headerInner');
|
||||
const wideClass = 'max-w-[1600px]';
|
||||
const defaultClass = 'max-w-7xl';
|
||||
if (name === 'workplaces' || name === 'tasks' || name === 'vacations') {
|
||||
if (name === 'workplaces' || name === 'tasks' || name === 'vacations' || name === 'equipments') {
|
||||
[mainEl, navInner, headerInner].forEach(el => { el.classList.remove(defaultClass); el.classList.add(wideClass); });
|
||||
} else {
|
||||
[mainEl, navInner, headerInner].forEach(el => { el.classList.remove(wideClass); el.classList.add(defaultClass); });
|
||||
@@ -37,4 +37,5 @@ function switchTab(name, event) {
|
||||
if (name === 'vendors' && !vendorsLoaded) loadVendorsTab();
|
||||
if (name === 'consumables' && !consumablesLoaded) loadConsumablesTab();
|
||||
if (name === 'notificationRecipients' && !nrLoaded) loadNotificationRecipientsTab();
|
||||
if (name === 'equipments' && !equipmentsLoaded) loadEquipmentsTab();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user