diff --git a/resources/views/approvals/create.blade.php b/resources/views/approvals/create.blade.php index b95782d1..c3583269 100644 --- a/resources/views/approvals/create.blade.php +++ b/resources/views/approvals/create.blade.php @@ -14,22 +14,37 @@

문서 내용

- {{-- 양식 선택 --}} + {{-- 양식 선택 + 설명 카드 --}}
-
- - +
+
+
+ +
+ +
+
@@ -242,6 +257,73 @@ class="p-1 text-gray-400 hover:text-gray-600 transition"> const linesData = @json($lines); let isExpenseForm = false; let isPurchaseRequestForm = false; + +const formDescriptions = { + expense: { + title: '지출결의서', + icon: '💰', + color: 'border-amber-200 bg-amber-50', + titleColor: 'text-amber-800', + textColor: 'text-amber-700', + text: '이미 발생한 지출에 대해 사후 보고하는 문서입니다. 법인카드 사용 내역, 계좌이체 등 실제 지출이 완료된 건에 대해 증빙자료와 함께 결재를 요청합니다.', + }, + pr_expense: { + title: '지출품의서', + icon: '📋', + color: 'border-orange-200 bg-orange-50', + titleColor: 'text-orange-800', + textColor: 'text-orange-700', + text: '지출이 발생하기 전 사전 승인을 받는 문서입니다. 예산 범위 내에서 지출 항목과 금액을 기재하여 사전에 승락을 받습니다.', + }, + pr_contract: { + title: '계약체결품의서', + icon: '📝', + color: 'border-purple-200 bg-purple-50', + titleColor: 'text-purple-800', + textColor: 'text-purple-700', + text: '외부 업체와의 계약 체결 전 승인을 받는 문서입니다. 계약 상대방, 계약 내용, 기간, 금액, 주요 조건 등을 명시하여 계약 진행에 대한 사전 승락을 받습니다.', + }, + pr_purchase: { + title: '구매품의서', + icon: '🛒', + color: 'border-blue-200 bg-blue-50', + titleColor: 'text-blue-800', + textColor: 'text-blue-700', + text: '물품 구매 전 사전 승인을 받는 문서입니다. 구매할 품목, 수량, 단가, 납품업체 등을 기재하여 구매 진행에 대한 사전 승락을 받습니다.', + }, + pr_trip: { + title: '출장품의서', + icon: '✈️', + color: 'border-green-200 bg-green-50', + titleColor: 'text-green-800', + textColor: 'text-green-700', + text: '출장 전 계획 승인을 받는 문서입니다. 출장지, 기간, 업무 내용, 예상 경비(교통비·숙박비·식비 등)를 기재하여 출장 진행에 대한 사전 승락을 받습니다.', + }, + pr_settlement: { + title: '비용정산품의서', + icon: '🧾', + color: 'border-teal-200 bg-teal-50', + titleColor: 'text-teal-800', + textColor: 'text-teal-700', + text: '업무 수행 중 발생한 비용의 정산 승인을 받는 문서입니다. 사용일자별 항목과 금액을 기재하고, 법인카드 사용 또는 개인 선지출 여부를 명시합니다.', + }, +}; + +function updateFormDescription(formId) { + const code = formCodes[formId]; + const desc = formDescriptions[code]; + const card = document.getElementById('form-description-card'); + if (!desc) { card.style.display = 'none'; return; } + + const inner = document.getElementById('form-desc-inner'); + inner.className = 'rounded-lg border p-3 text-sm transition-all ' + desc.color; + document.getElementById('form-desc-icon').innerHTML = '' + desc.icon + ''; + document.getElementById('form-desc-title').className = 'font-semibold text-sm mb-1 ' + desc.titleColor; + document.getElementById('form-desc-title').textContent = desc.title; + document.getElementById('form-desc-text').className = 'text-xs leading-relaxed ' + desc.textColor; + document.getElementById('form-desc-text').textContent = desc.text; + card.style.display = ''; +} let isLeaveForm = false; let isCertForm = false; let isCareerCertForm = false; @@ -620,12 +702,15 @@ function applyBodyTemplate(formId) { document.addEventListener('DOMContentLoaded', function() { setTimeout(updateApprovalLineSummary, 200); - // 초기 양식에 대한 폼 모드 전환 - switchFormMode(document.getElementById('form_id').value); + // 초기 양식에 대한 폼 모드 전환 + 설명 카드 + const initialFormId = document.getElementById('form_id').value; + switchFormMode(initialFormId); + updateFormDescription(initialFormId); - // 양식 변경 시 본문 템플릿 자동 채움 + // 양식 변경 시 본문 템플릿 자동 채움 + 설명 카드 업데이트 document.getElementById('form_id').addEventListener('change', function() { applyBodyTemplate(this.value); + updateFormDescription(this.value); }); }); diff --git a/resources/views/approvals/edit.blade.php b/resources/views/approvals/edit.blade.php index a71efc7e..052338e2 100644 --- a/resources/views/approvals/edit.blade.php +++ b/resources/views/approvals/edit.blade.php @@ -63,11 +63,26 @@
- +
+
+ +
+ +
@@ -268,6 +283,55 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon let isPurchaseRequestForm = false; let isCertForm = false; +const formDescriptions = { + expense: { + title: '지출결의서', icon: '💰', + color: 'border-amber-200 bg-amber-50', titleColor: 'text-amber-800', textColor: 'text-amber-700', + text: '이미 발생한 지출에 대해 사후 보고하는 문서입니다. 법인카드 사용 내역, 계좌이체 등 실제 지출이 완료된 건에 대해 증빙자료와 함께 결재를 요청합니다.', + }, + pr_expense: { + title: '지출품의서', icon: '📋', + color: 'border-orange-200 bg-orange-50', titleColor: 'text-orange-800', textColor: 'text-orange-700', + text: '지출이 발생하기 전 사전 승인을 받는 문서입니다. 예산 범위 내에서 지출 항목과 금액을 기재하여 사전에 승락을 받습니다.', + }, + pr_contract: { + title: '계약체결품의서', icon: '📝', + color: 'border-purple-200 bg-purple-50', titleColor: 'text-purple-800', textColor: 'text-purple-700', + text: '외부 업체와의 계약 체결 전 승인을 받는 문서입니다. 계약 상대방, 계약 내용, 기간, 금액, 주요 조건 등을 명시하여 계약 진행에 대한 사전 승락을 받습니다.', + }, + pr_purchase: { + title: '구매품의서', icon: '🛒', + color: 'border-blue-200 bg-blue-50', titleColor: 'text-blue-800', textColor: 'text-blue-700', + text: '물품 구매 전 사전 승인을 받는 문서입니다. 구매할 품목, 수량, 단가, 납품업체 등을 기재하여 구매 진행에 대한 사전 승락을 받습니다.', + }, + pr_trip: { + title: '출장품의서', icon: '✈️', + color: 'border-green-200 bg-green-50', titleColor: 'text-green-800', textColor: 'text-green-700', + text: '출장 전 계획 승인을 받는 문서입니다. 출장지, 기간, 업무 내용, 예상 경비(교통비·숙박비·식비 등)를 기재하여 출장 진행에 대한 사전 승락을 받습니다.', + }, + pr_settlement: { + title: '비용정산품의서', icon: '🧾', + color: 'border-teal-200 bg-teal-50', titleColor: 'text-teal-800', textColor: 'text-teal-700', + text: '업무 수행 중 발생한 비용의 정산 승인을 받는 문서입니다. 사용일자별 항목과 금액을 기재하고, 법인카드 사용 또는 개인 선지출 여부를 명시합니다.', + }, +}; + +function updateFormDescription(formId) { + const code = formCodes[formId]; + const desc = formDescriptions[code]; + const card = document.getElementById('form-description-card'); + if (!desc) { card.style.display = 'none'; return; } + + const inner = document.getElementById('form-desc-inner'); + inner.className = 'rounded-lg border p-3 text-sm transition-all ' + desc.color; + document.getElementById('form-desc-icon').innerHTML = '' + desc.icon + ''; + document.getElementById('form-desc-title').className = 'font-semibold text-sm mb-1 ' + desc.titleColor; + document.getElementById('form-desc-title').textContent = desc.title; + document.getElementById('form-desc-text').className = 'text-xs leading-relaxed ' + desc.textColor; + document.getElementById('form-desc-text').textContent = desc.text; + card.style.display = ''; +} + function escapeHtml(str) { if (!str) return ''; const div = document.createElement('div'); @@ -516,8 +580,10 @@ function applyBodyTemplate(formId) { // 기존 HTML body 자동 감지 → 편집기 자동 활성화 + 결재선 요약 초기화 document.addEventListener('DOMContentLoaded', function () { - // 초기 양식에 대한 폼 모드 전환 - switchFormMode(document.getElementById('form_id').value); + // 초기 양식에 대한 폼 모드 전환 + 설명 카드 + const initialFormId = document.getElementById('form_id').value; + switchFormMode(initialFormId); + updateFormDescription(initialFormId); // 재직증명서 기존 데이터 복원 if (isCertForm) { @@ -566,9 +632,10 @@ function applyBodyTemplate(formId) { // Alpine 초기화 후 기존 결재선 요약 표시 setTimeout(updateApprovalLineSummary, 200); - // 양식 변경 시 본문 템플릿 자동 채움 + // 양식 변경 시 본문 템플릿 자동 채움 + 설명 카드 업데이트 document.getElementById('form_id').addEventListener('change', function() { applyBodyTemplate(this.value); + updateFormDescription(this.value); }); });