SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [approvals] 사용인감계 create 폼/미리보기 인감비교 형식 반영

Browse Source 
- create.blade.php: buildSealUsagePreviewHtml 인감비교 레이아웃 적용
- create.blade.php: saveApproval formContent에서 seal_type/remarks 제거, attachment_desc 추가
- _seal-usage-form.blade.php: 인감비교 2열 레이아웃 + 용도/제출처/첨부서류 필드
- _seal-usage-show.blade.php: 읽기전용 인감비교 레이아웃
This commit is contained in:
김보곤
2026-03-06 21:09:27 +09:00
parent ae367e733e
commit 20c4e9d879
3 changed files with 124 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
resources/views/approvals/create.blade.php
View File

@@ -985,10 +985,9 @@ function applyBodyTemplate(formId) {
formContent = {
usage_date: document.getElementById('su-usage-date').value,
seal_type: getSealUsageType(),
purpose: suPurpose,
submit_to: suSubmitTo,
remarks: document.getElementById('su-remarks').value.trim(),
attachment_desc: document.getElementById('su-attachment-desc').value.trim(),
company_name: document.getElementById('su-company-name').value,
business_num: document.getElementById('su-business-num').value,
ceo_name: document.getElementById('su-ceo-name').value,
@@ -1831,63 +1830,59 @@ function buildCertPreviewHtml(d) {
// 사용인감계 관련 함수
// =========================================================================
document.getElementById('su-seal-type')?.addEventListener('change', function() {
const customWrap = document.getElementById('su-seal-type-custom-wrap');
if (this.value === '__custom__') {
customWrap.style.display = '';
document.getElementById('su-seal-type-custom').focus();
} else {
customWrap.style.display = 'none';
}
});
function getSealUsageType() {
const sel = document.getElementById('su-seal-type');
if (sel.value === '__custom__') {
return document.getElementById('su-seal-type-custom').value.trim() || '기타';
}
return sel.value;
}
function buildSealUsagePreviewHtml(data) {
const e = (s) => s ? String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : '-';
const dateObj = data.usage_date ? new Date(data.usage_date + 'T00:00:00') : new Date();
const y = dateObj.getFullYear();
const m = String(dateObj.getMonth() + 1).padStart(2, ' ');
const d = String(dateObj.getDate()).padStart(2, ' ');
return `
<div style="text-align:center; margin-bottom:48px;">
<h1 style="font-size:28px; font-weight:700; letter-spacing:12px; margin:0;">사 용 인 감 계</h1>
<div style="text-align:center; margin-bottom:40px;">
<h1 style="font-size:26px; font-weight:700; letter-spacing:14px; margin:0;">사 용 인 감 계</h1>
</div>
<table style="width:100%; border-collapse:collapse; margin-bottom:36px; font-size:14px;">
<!-- 인감 비교란 -->
<table style="width:360px; margin:0 auto 32px; border-collapse:collapse;">
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; width:120px; text-align:center;">사용일자</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.usage_date)}</td>
<td style="border:1px solid #333; padding:8px; text-align:center; font-weight:600; font-size:13px; width:180px; background:#f8f8f8;">법인인감</td>
<td style="border:1px solid #333; padding:8px; text-align:center; font-weight:600; font-size:13px; width:180px; background:#f8f8f8;">사용인감</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">인감종류</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.seal_type)}</td>
<td style="border:1px solid #333; height:140px; text-align:center; vertical-align:middle;">
<span style="color:#bbb; font-size:11px;">(인감 날인)</span>
</td>
<td style="border:1px solid #333; height:140px; text-align:center; vertical-align:middle;">
<span style="color:#bbb; font-size:11px;">(인감 날인)</span>
</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">용 도</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.purpose)}</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">제출처</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.submit_to)}</td>
</tr>
${data.remarks ? `<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">비 고</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.remarks)}</td>
</tr>` : ''}
</table>
<p style="text-align:center; font-size:13px; color:#666; margin-bottom:36px;">
위와 같이 인감 사용을 신청하오니 허가하여 주시기 바랍니다.
</p>
<!-- 용도 / 제출처 -->
<div style="font-size:13px; line-height:2; margin-bottom:8px;">
<p style="margin:0;"><span style="font-weight:600;">용도:</span> ${e(data.purpose)}</p>
<p style="margin:0;"><span style="font-weight:600;">제출처:</span> ${e(data.submit_to)}</p>
</div>
<div style="margin-top:40px; padding:20px 24px; border:1px solid #ddd; border-radius:6px; background:#fafafa;">
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">상 호</span>: ${e(data.company_name)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">사업자등록번호</span>: ${e(data.business_num)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">주 소</span>: ${e(data.company_address)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">대표이사</span>: ${e(data.ceo_name)}</p>
<!-- 확약 문구 -->
<div style="margin:28px 0; padding:16px 20px; border:1px solid #ccc; border-radius:4px; background:#fafafa;">
<p style="font-size:12px; line-height:1.8; margin:0; color:#333;">
위 사용인감은 당사에서 사용하는 인감입니다. 당사는 위 인감사용으로 인한 모든 책임을 질 것을 확약하고 사용인감계를 제출합니다.
</p>
</div>
<!-- 첨부서류 -->
${data.attachment_desc ? `<p style="font-size:12px; margin:0 0 24px; color:#333;"><span style="font-weight:600;">첨부서류:</span> ${e(data.attachment_desc)}</p>` : ''}
<!-- 일자 -->
<p style="text-align:center; font-size:14px; margin:32px 0 28px; letter-spacing:2px;">${y}년 ${m}월 ${d}일</p>
<!-- 회사 정보 -->
<div style="margin-top:20px; font-size:12px; line-height:2;">
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600; letter-spacing:6px;">상 호</span>: ${e(data.company_name)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600;">사업자등록번호</span>: ${e(data.business_num)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600; letter-spacing:6px;">주 소</span>: ${e(data.company_address)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600;">대표이사</span>: ${e(data.ceo_name)}</p>
</div>
`;
}
@@ -1895,10 +1890,9 @@ function buildSealUsagePreviewHtml(data) {
function openSealUsagePreview() {
const data = {
usage_date: document.getElementById('su-usage-date').value,
seal_type: getSealUsageType(),
purpose: document.getElementById('su-purpose').value,
submit_to: document.getElementById('su-submit-to').value,
remarks: document.getElementById('su-remarks').value,
attachment_desc: document.getElementById('su-attachment-desc').value,
company_name: document.getElementById('su-company-name').value,
business_num: document.getElementById('su-business-num').value,
ceo_name: document.getElementById('su-ceo-name').value,

89
resources/views/approvals/partials/_seal-usage-form.blade.php
View File

@@ -14,57 +14,66 @@
<input type="hidden" id="su-company-address" value="{{ $tenantInfo['address'] ?? '' }}">
<div class="space-y-4">
{{-- 인감 사용 정보 --}}
{{-- 1. 인감 날인 비교란 --}}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
<h3 class="text-sm font-semibold text-gray-700">인감 사용 정보</h3>
<h3 class="text-sm font-semibold text-gray-700">1. 인감 날인</h3>
</div>
<div class="p-4 space-y-3">
<div class="flex gap-4 flex-wrap">
<div style="flex: 1 1 200px; max-width: 250px;">
<label class="block text-xs font-medium text-gray-500 mb-1">사용일자 <span class="text-red-500">*</span></label>
<input type="date" id="su-usage-date" value="{{ now()->format('Y-m-d') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="p-4">
<div class="flex gap-6" style="justify-content: center;">
{{-- 법인인감 --}}
<div style="width: 200px; text-align: center;">
<div class="text-sm font-semibold text-gray-700 mb-2">법인인감</div>
<div style="width: 160px; height: 160px; border: 2px solid #d1d5db; border-radius: 8px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #fafafa;">
<span class="text-xs text-gray-400">인감 날인 영역</span>
</div>
<p class="text-xs text-gray-400 mt-2">인쇄 후 날인</p>
</div>
<div style="flex: 1 1 250px; max-width: 300px;">
<label class="block text-xs font-medium text-gray-500 mb-1">인감종류 <span class="text-red-500">*</span></label>
<select id="su-seal-type"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="법인인감">법인인감</option>
<option value="사용인감">사용인감</option>
<option value="대표이사 인감">대표이사 인감</option>
<option value="직인">직인</option>
<option value="__custom__">기타 (직접입력)</option>
</select>
{{-- 사용인감 --}}
<div style="width: 200px; text-align: center;">
<div class="text-sm font-semibold text-gray-700 mb-2">사용인감</div>
<div style="width: 160px; height: 160px; border: 2px solid #d1d5db; border-radius: 8px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #fafafa;">
<span class="text-xs text-gray-400">인감 날인 영역</span>
</div>
<p class="text-xs text-gray-400 mt-2">인쇄 후 날인</p>
</div>
<div id="su-seal-type-custom-wrap" style="flex: 1 1 200px; max-width: 250px; display: none;">
<label class="block text-xs font-medium text-gray-500 mb-1">직접입력</label>
<input type="text" id="su-seal-type-custom" placeholder="인감종류를 입력하세요"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">용도 <span class="text-red-500">*</span></label>
<input type="text" id="su-purpose" placeholder="예: 계약서 날인, 인감증명서 발급 등"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">제출처 <span class="text-red-500">*</span></label>
<input type="text" id="su-submit-to" placeholder="예: 거래처명, 관공서명 등"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">비고</label>
<textarea id="su-remarks" rows="2" placeholder="추가 참고사항 (선택)"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
</div>
</div>
{{-- 회사 정보 (읽기 전용) --}}
{{-- 2. 사용 정보 --}}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
<h3 class="text-sm font-semibold text-gray-700">회사 정보</h3>
<h3 class="text-sm font-semibold text-gray-700">2. 사용 정보</h3>
</div>
<div class="p-4 space-y-3">
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">용도 <span class="text-red-500">*</span></label>
<input type="text" id="su-purpose" placeholder="예: 법인휴대폰 개통 관련 계약에 사용"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">제출처 <span class="text-red-500">*</span></label>
<input type="text" id="su-submit-to" placeholder="예: 이동통신사, 은행명 등"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">첨부서류</label>
<input type="text" id="su-attachment-desc" placeholder="예: 법인인감증명서 1부"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div style="max-width: 250px;">
<label class="block text-xs font-medium text-gray-500 mb-1">일자</label>
<input type="date" id="su-usage-date" value="{{ now()->format('Y-m-d') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
</div>
{{-- 3. 회사 정보 (읽기 전용) --}}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
<h3 class="text-sm font-semibold text-gray-700">3. 회사 정보</h3>
</div>
<div class="p-4 space-y-3">
<div class="flex gap-4 flex-wrap">

45
resources/views/approvals/partials/_seal-usage-show.blade.php
View File

@@ -16,21 +16,36 @@ class="px-3 py-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 border borde
</button>
</div>
{{-- 인감 사용 정보 --}}
{{-- 인감 날인 비교란 (인쇄용 안내) --}}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
<h3 class="text-sm font-semibold text-gray-700">인감 사용 정보</h3>
<h3 class="text-sm font-semibold text-gray-700">인감 날인</h3>
</div>
<div class="p-4">
<div class="flex gap-6" style="justify-content: center;">
<div style="width: 180px; text-align: center;">
<div class="text-sm font-semibold text-gray-700 mb-2">법인인감</div>
<div style="width: 140px; height: 140px; border: 2px dashed #d1d5db; border-radius: 8px; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
<span class="text-xs text-gray-400">인쇄 후 날인</span>
</div>
</div>
<div style="width: 180px; text-align: center;">
<div class="text-sm font-semibold text-gray-700 mb-2">사용인감</div>
<div style="width: 140px; height: 140px; border: 2px dashed #d1d5db; border-radius: 8px; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
<span class="text-xs text-gray-400">인쇄 후 날인</span>
</div>
</div>
</div>
</div>
</div>
{{-- 사용 정보 --}}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
<h3 class="text-sm font-semibold text-gray-700">사용 정보</h3>
</div>
<div class="p-4">
<div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
<div>
<span class="text-xs text-gray-500">사용일자</span>
<div class="text-sm font-medium mt-0.5">{{ $content['usage_date'] ?? '-' }}</div>
</div>
<div>
<span class="text-xs text-gray-500">인감종류</span>
<div class="text-sm font-medium mt-0.5">{{ $content['seal_type'] ?? '-' }}</div>
</div>
<div style="grid-column: 1 / -1;">
<span class="text-xs text-gray-500">용도</span>
<div class="text-sm font-medium mt-0.5">{{ $content['purpose'] ?? '-' }}</div>
@@ -39,12 +54,16 @@ class="px-3 py-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 border borde
<span class="text-xs text-gray-500">제출처</span>
<div class="text-sm font-medium mt-0.5">{{ $content['submit_to'] ?? '-' }}</div>
</div>
@if(!empty($content['remarks']))
@if(!empty($content['attachment_desc']))
<div style="grid-column: 1 / -1;">
<span class="text-xs text-gray-500">비고</span>
<div class="text-sm font-medium mt-0.5">{{ $content['remarks'] }}</div>
<span class="text-xs text-gray-500">첨부서류</span>
<div class="text-sm font-medium mt-0.5">{{ $content['attachment_desc'] }}</div>
</div>
@endif
<div>
<span class="text-xs text-gray-500">일자</span>
<div class="text-sm font-medium mt-0.5">{{ $content['usage_date'] ?? '-' }}</div>
</div>
</div>
</div>
</div>