716 lines
39 KiB
PHP
716 lines
39 KiB
PHP
{{--
|
|
지출결의서 전용 폼 (Alpine.js)
|
|
Props:
|
|
$initialData (array|null) - 기존 content JSON (edit 시)
|
|
$initialFiles (array|null) - 기존 첨부파일 [{id, name, size, mime_type}] (edit 시)
|
|
$cards (Collection|null) - 법인카드 목록
|
|
$accounts (Collection|null) - 회사 계좌 목록
|
|
--}}
|
|
@php
|
|
$initialData = $initialData ?? [];
|
|
$initialFiles = $initialFiles ?? [];
|
|
$cards = $cards ?? collect();
|
|
$accounts = $accounts ?? collect();
|
|
$userName = auth()->user()->name ?? '';
|
|
@endphp
|
|
|
|
<div id="expense-form-container" style="display: none;"
|
|
x-data="expenseForm({{ json_encode($initialData) }}, '{{ $userName }}', {{ json_encode($initialFiles) }}, {{ $cards->toJson() }}, {{ $accounts->toJson() }})"
|
|
x-init="initAutoSelect()"
|
|
x-cloak>
|
|
|
|
{{-- 지출형식 --}}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">지출형식</label>
|
|
<div class="flex flex-wrap gap-4">
|
|
<template x-for="opt in expenseTypes" :key="opt.value">
|
|
<label class="inline-flex items-center gap-1.5 cursor-pointer">
|
|
<input type="radio" name="expense_type" :value="opt.value"
|
|
x-model="formData.expense_type"
|
|
@change="initAutoSelect()"
|
|
class="text-blue-600 focus:ring-blue-500">
|
|
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 법인카드 선택 패널 --}}
|
|
<div x-show="formData.expense_type === 'corporate_card'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mb-4">
|
|
<div class="border border-blue-200 bg-blue-50/50 rounded-lg p-4">
|
|
<label class="block text-xs font-medium text-gray-600 mb-3">법인카드 선택</label>
|
|
<template x-if="cards.length === 0">
|
|
<div class="text-sm text-gray-500 text-center py-4">
|
|
등록된 법인카드가 없습니다.
|
|
<button type="button" @click="showManageModal('카드 관리', '{{ route('finance.corporate-cards') }}')" class="text-blue-600 hover:underline ml-1">카드 관리</button>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-wrap gap-3" x-show="cards.length > 0">
|
|
<template x-for="card in cards" :key="card.id">
|
|
<div @click="selectCard(card)"
|
|
:class="formData.selected_card?.id === card.id ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200' : 'border-gray-200 bg-white hover:border-gray-300'"
|
|
class="relative border rounded-lg p-3 cursor-pointer transition-all"
|
|
style="flex: 0 0 auto; min-width: 180px; max-width: 220px;">
|
|
{{-- 체크 아이콘 --}}
|
|
<div x-show="formData.selected_card?.id === card.id" class="absolute top-2 right-2">
|
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-xs text-gray-500" x-text="card.card_company"></div>
|
|
<div class="text-sm font-medium text-gray-800 mt-0.5" x-text="card.card_name"></div>
|
|
<div class="text-xs text-gray-500 mt-1 font-mono" x-text="'**** ' + card.card_number.slice(-4)"></div>
|
|
<div class="text-xs text-gray-400 mt-0.5" x-text="card.card_holder_name"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 송금/자동이체 계좌 선택 패널 --}}
|
|
<div x-show="formData.expense_type === 'transfer' || formData.expense_type === 'auto_transfer'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mb-4">
|
|
<div class="border border-green-200 bg-green-50/50 rounded-lg p-4">
|
|
<label class="block text-xs font-medium text-gray-600 mb-3">출금 계좌 선택</label>
|
|
<template x-if="accounts.length === 0">
|
|
<div class="text-sm text-gray-500 text-center py-4">
|
|
등록된 계좌가 없습니다.
|
|
<button type="button" @click="showManageModal('계좌 관리', '{{ route('finance.accounts.index') }}')" class="text-blue-600 hover:underline ml-1">계좌 관리</button>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-wrap gap-3" x-show="accounts.length > 0">
|
|
<template x-for="account in accounts" :key="account.id">
|
|
<div @click="selectAccount(account)"
|
|
:class="formData.selected_account?.id === account.id ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200' : 'border-gray-200 bg-white hover:border-gray-300'"
|
|
class="relative border rounded-lg p-3 cursor-pointer transition-all"
|
|
style="flex: 0 0 auto; min-width: 180px; max-width: 220px;">
|
|
{{-- 체크 아이콘 --}}
|
|
<div x-show="formData.selected_account?.id === account.id" class="absolute top-2 right-2">
|
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="text-sm font-medium text-gray-800" x-text="account.bank_name"></span>
|
|
<template x-if="account.is_primary">
|
|
<span class="text-amber-500 text-xs" title="대표계좌">★</span>
|
|
</template>
|
|
</div>
|
|
<div class="text-xs text-gray-600 mt-1 font-mono" x-text="account.account_number"></div>
|
|
<div class="text-xs text-gray-400 mt-0.5" x-text="account.account_holder"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 세금계산서 --}}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">세금계산서</label>
|
|
<div class="flex flex-wrap gap-4">
|
|
<template x-for="opt in taxInvoiceTypes" :key="opt.value">
|
|
<label class="inline-flex items-center gap-1.5 cursor-pointer">
|
|
<input type="radio" name="tax_invoice" :value="opt.value"
|
|
x-model="formData.tax_invoice"
|
|
class="text-blue-600 focus:ring-blue-500">
|
|
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 기본 정보 --}}
|
|
<div class="grid gap-4 mb-4" style="grid-template-columns: repeat(4, 1fr);">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">작성일자</label>
|
|
<input type="date" x-model="formData.write_date"
|
|
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-600 mb-1">결재일자</label>
|
|
<input type="date" x-model="formData.approval_date"
|
|
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-600 mb-1">지출부서</label>
|
|
<input type="text" x-model="formData.department" 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-600 mb-1">이름</label>
|
|
<input type="text" x-model="formData.writer_name" 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 class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">내역</label>
|
|
<div class="overflow-x-auto border border-gray-200 rounded-lg">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-2 py-2 text-left text-xs font-medium text-gray-600 whitespace-nowrap" style="min-width: 120px;">년/월/일</th>
|
|
<th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 160px;">내용</th>
|
|
<th class="px-2 py-2 text-right text-xs font-medium text-gray-600 whitespace-nowrap" style="min-width: 120px;">금액</th>
|
|
<th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 120px;">업체명</th>
|
|
{{-- 법인카드: 결제카드 컬럼 --}}
|
|
<th x-show="formData.expense_type === 'corporate_card'" class="px-2 py-2 text-left text-xs font-medium text-gray-600 whitespace-nowrap" style="min-width: 180px;">결제카드</th>
|
|
{{-- 송금/기타: 지급은행, 계좌번호, 예금주 --}}
|
|
<th x-show="formData.expense_type !== 'corporate_card'" class="px-2 py-2 text-left text-xs font-medium text-gray-600 whitespace-nowrap" style="min-width: 80px;">지급은행</th>
|
|
<th x-show="formData.expense_type !== 'corporate_card'" class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 120px;">계좌번호</th>
|
|
<th x-show="formData.expense_type !== 'corporate_card'" class="px-2 py-2 text-left text-xs font-medium text-gray-600 whitespace-nowrap" style="min-width: 80px;">예금주</th>
|
|
<th class="px-2 py-2 text-left text-xs font-medium text-gray-600 whitespace-nowrap" style="min-width: 100px;">비고</th>
|
|
<th class="px-2 py-2 text-center text-xs font-medium text-gray-600" style="width: 40px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="(item, index) in formData.items" :key="item._key">
|
|
<tr class="border-t border-gray-100">
|
|
<td class="px-1 py-1">
|
|
<input type="date" x-model="item.date"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</td>
|
|
<td class="px-1 py-1">
|
|
<input type="text" x-model="item.description" placeholder="내용"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</td>
|
|
<td class="px-1 py-1">
|
|
<input type="text" inputmode="numeric"
|
|
:value="formatMoney(item.amount)"
|
|
@input="item.amount = parseMoney($event.target.value); $event.target.value = formatMoney(item.amount)"
|
|
@focus="if(item.amount === 0) $event.target.value = ''"
|
|
@blur="if($event.target.value.trim() === '') { item.amount = 0; $event.target.value = '0'; }"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</td>
|
|
<td class="px-1 py-1">
|
|
<div x-data="vendorSearch(item)">
|
|
<input type="text" x-ref="vinput" :value="item.vendor"
|
|
@input="onInput($event.target.value)"
|
|
@focus="onFocus()"
|
|
@keydown.escape="close()"
|
|
@keydown.arrow-down.prevent="moveDown()"
|
|
@keydown.arrow-up.prevent="moveUp()"
|
|
@keydown.enter.prevent="selectHighlighted()"
|
|
@blur="setTimeout(() => close(), 200)"
|
|
placeholder="거래처 검색"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</div>
|
|
</td>
|
|
{{-- 법인카드: 선택된 카드 표시 --}}
|
|
<td x-show="formData.expense_type === 'corporate_card'" class="px-1 py-1">
|
|
<div x-show="formData.selected_card" class="px-2 py-1.5 bg-blue-50 border border-blue-200 rounded text-xs text-blue-700">
|
|
<span x-text="formData.selected_card?.card_company"></span>
|
|
<span class="font-mono ml-1" x-text="'**** ' + (formData.selected_card?.card_number_last4 || '')"></span>
|
|
</div>
|
|
<div x-show="!formData.selected_card" class="px-2 py-1.5 text-xs text-gray-400">카드를 선택하세요</div>
|
|
</td>
|
|
{{-- 송금/자동이체: 선택 계좌 자동표시 / 기타: 수동입력 --}}
|
|
<td x-show="formData.expense_type !== 'corporate_card'" class="px-1 py-1">
|
|
<template x-if="(formData.expense_type === 'transfer' || formData.expense_type === 'auto_transfer') && formData.selected_account">
|
|
<div class="px-2 py-1.5 bg-green-50 border border-green-200 rounded text-xs text-green-700" x-text="formData.selected_account.bank_name"></div>
|
|
</template>
|
|
<template x-if="formData.expense_type !== 'transfer' && formData.expense_type !== 'auto_transfer' || !formData.selected_account">
|
|
<input type="text" x-model="item.bank" placeholder="은행"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</template>
|
|
</td>
|
|
<td x-show="formData.expense_type !== 'corporate_card'" class="px-1 py-1">
|
|
<template x-if="(formData.expense_type === 'transfer' || formData.expense_type === 'auto_transfer') && formData.selected_account">
|
|
<div class="px-2 py-1.5 bg-green-50 border border-green-200 rounded text-xs text-green-700 font-mono" x-text="formData.selected_account.account_number"></div>
|
|
</template>
|
|
<template x-if="formData.expense_type !== 'transfer' && formData.expense_type !== 'auto_transfer' || !formData.selected_account">
|
|
<input type="text" x-model="item.account_no" placeholder="계좌번호"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</template>
|
|
</td>
|
|
<td x-show="formData.expense_type !== 'corporate_card'" class="px-1 py-1">
|
|
<template x-if="(formData.expense_type === 'transfer' || formData.expense_type === 'auto_transfer') && formData.selected_account">
|
|
<div class="px-2 py-1.5 bg-green-50 border border-green-200 rounded text-xs text-green-700" x-text="formData.selected_account.account_holder"></div>
|
|
</template>
|
|
<template x-if="formData.expense_type !== 'transfer' && formData.expense_type !== 'auto_transfer' || !formData.selected_account">
|
|
<input type="text" x-model="item.depositor" placeholder="예금주"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</template>
|
|
</td>
|
|
<td class="px-1 py-1">
|
|
<input type="text" x-model="item.remark" placeholder="비고"
|
|
class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
</td>
|
|
<td class="px-1 py-1 text-center">
|
|
<button type="button" @click="removeItem(index)"
|
|
class="text-red-400 hover:text-red-600 transition" title="삭제"
|
|
x-show="formData.items.length > 1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
<tfoot class="bg-gray-50 border-t border-gray-200">
|
|
<tr>
|
|
<td class="px-2 py-2 text-xs font-semibold text-gray-700 text-right" colspan="2">합계</td>
|
|
<td class="px-2 py-2 text-xs font-bold text-blue-700 text-right" x-text="formatMoney(totalAmount)"></td>
|
|
<td :colspan="formData.expense_type === 'corporate_card' ? 4 : 6" class="px-2 py-2">
|
|
<button type="button" @click="addItem()"
|
|
class="text-xs text-blue-600 hover:text-blue-800 font-medium transition">
|
|
+ 행 추가
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 첨부서류 메모 --}}
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">첨부서류</label>
|
|
<textarea x-model="formData.attachment_memo" 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 class="mb-2">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">첨부파일</label>
|
|
|
|
{{-- 드래그 앤 드롭 영역 --}}
|
|
<div @dragover.prevent="isDragging = true"
|
|
@dragleave.prevent="isDragging = false"
|
|
@drop.prevent="isDragging = false; handleDrop($event)"
|
|
:class="isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-gray-50'"
|
|
class="border-2 border-dashed rounded-lg p-4 text-center transition-colors cursor-pointer"
|
|
@click="$refs.expenseFileInput.click()">
|
|
<input type="file" x-ref="expenseFileInput" @change="handleFileSelect($event)" multiple class="hidden"
|
|
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.jpg,.jpeg,.png,.gif,.zip,.rar">
|
|
<div class="flex items-center justify-center gap-2 text-sm text-gray-500">
|
|
<svg class="w-5 h-5" :class="isDragging ? 'text-blue-500' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
|
</svg>
|
|
<span>파일을 드래그하거나 <span class="text-blue-600 font-medium">클릭하여 선택</span> (최대 20MB)</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 업로드 중 프로그레스 --}}
|
|
<div x-show="fileUploading" class="mt-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 bg-gray-200 rounded-full h-1.5">
|
|
<div class="h-full bg-blue-600 rounded-full transition-all" :style="'width:' + fileProgress + '%'"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500 whitespace-nowrap" x-text="fileUploadStatus"></span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 업로드된 파일 목록 --}}
|
|
<div x-show="uploadedFiles.length > 0" class="mt-2 space-y-1">
|
|
<template x-for="(f, idx) in uploadedFiles" :key="f.id">
|
|
<div class="flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-lg border border-gray-200 text-xs">
|
|
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
<span class="flex-1 truncate text-gray-700" x-text="f.name"></span>
|
|
<span class="text-gray-400 shrink-0" x-text="formatFileSize(f.size)"></span>
|
|
<button type="button" @click="removeFile(idx)" class="text-red-400 hover:text-red-600 shrink-0" title="삭제">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 관리 페이지 안내 모달 --}}
|
|
<div x-show="manageModal.open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="manageModal.open = false">
|
|
<div class="bg-white rounded-xl shadow-xl p-6" style="width: 400px; max-width: 90vw;">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2" x-text="manageModal.title"></h3>
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
새 탭에서 등록/관리 페이지를 열고, 완료 후 이 페이지를 <strong>새로고침</strong>하면 반영됩니다.
|
|
</p>
|
|
<div class="flex gap-2 justify-end">
|
|
<button type="button" @click="manageModal.open = false"
|
|
class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
|
|
닫기
|
|
</button>
|
|
<a :href="manageModal.url" target="_blank" @click="manageModal.open = false"
|
|
class="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition inline-flex items-center gap-1">
|
|
<span x-text="manageModal.title"></span>
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function expenseForm(initialData, authUserName, initialFiles, cardsData, accountsData) {
|
|
let _keyCounter = 0;
|
|
|
|
function makeItem(data) {
|
|
return {
|
|
_key: ++_keyCounter,
|
|
date: data?.date || '',
|
|
description: data?.description || '',
|
|
amount: parseInt(data?.amount) || 0,
|
|
vendor: data?.vendor || '',
|
|
vendor_id: data?.vendor_id || null,
|
|
vendor_biz_no: data?.vendor_biz_no || '',
|
|
bank: data?.bank || '',
|
|
account_no: data?.account_no || '',
|
|
depositor: data?.depositor || '',
|
|
remark: data?.remark || '',
|
|
};
|
|
}
|
|
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const items = (initialData?.items && initialData.items.length > 0)
|
|
? initialData.items.map(makeItem)
|
|
: [makeItem({ date: today })];
|
|
|
|
return {
|
|
expenseTypes: [
|
|
{ value: 'corporate_card', label: '법인카드' },
|
|
{ value: 'transfer', label: '송금' },
|
|
{ value: 'auto_transfer', label: '자동이체 출금' },
|
|
{ value: 'cash_advance', label: '현금/가지급정산' },
|
|
],
|
|
taxInvoiceTypes: [
|
|
{ value: 'normal', label: '일반' },
|
|
{ value: 'deferred', label: '이월발행' },
|
|
{ value: 'none', label: '없음' },
|
|
],
|
|
cards: cardsData || [],
|
|
accounts: accountsData || [],
|
|
|
|
formData: {
|
|
expense_type: initialData?.expense_type || 'corporate_card',
|
|
tax_invoice: initialData?.tax_invoice || 'normal',
|
|
write_date: initialData?.write_date || today,
|
|
approval_date: initialData?.approval_date || today,
|
|
department: initialData?.department || '경리부',
|
|
writer_name: initialData?.writer_name || authUserName,
|
|
items: items,
|
|
attachment_memo: initialData?.attachment_memo || '',
|
|
selected_card: initialData?.selected_card || null,
|
|
selected_account: initialData?.selected_account || null,
|
|
},
|
|
|
|
// 관리 페이지 모달
|
|
manageModal: { open: false, title: '', url: '' },
|
|
|
|
// 파일 업로드 상태
|
|
isDragging: false,
|
|
fileUploading: false,
|
|
fileProgress: 0,
|
|
fileUploadStatus: '',
|
|
uploadedFiles: initialFiles || [],
|
|
|
|
get totalAmount() {
|
|
return this.formData.items.reduce((sum, item) => sum + (parseInt(item.amount) || 0), 0);
|
|
},
|
|
|
|
addItem() {
|
|
this.formData.items.push(makeItem({ date: today }));
|
|
},
|
|
|
|
removeItem(index) {
|
|
if (this.formData.items.length > 1) {
|
|
this.formData.items.splice(index, 1);
|
|
}
|
|
},
|
|
|
|
selectCard(card) {
|
|
this.formData.selected_card = {
|
|
id: card.id,
|
|
card_name: card.card_name,
|
|
card_company: card.card_company,
|
|
card_number_last4: card.card_number.slice(-4),
|
|
card_holder_name: card.card_holder_name,
|
|
};
|
|
},
|
|
|
|
selectAccount(account) {
|
|
this.formData.selected_account = {
|
|
id: account.id,
|
|
bank_name: account.bank_name,
|
|
account_number: account.account_number,
|
|
account_holder: account.account_holder,
|
|
};
|
|
},
|
|
|
|
initAutoSelect() {
|
|
if ((this.formData.expense_type === 'transfer' || this.formData.expense_type === 'auto_transfer') && !this.formData.selected_account && this.accounts.length > 0) {
|
|
const primary = this.accounts.find(a => a.is_primary);
|
|
this.selectAccount(primary || this.accounts[0]);
|
|
}
|
|
if (this.formData.expense_type === 'corporate_card' && !this.formData.selected_card && this.cards.length === 1) {
|
|
this.selectCard(this.cards[0]);
|
|
}
|
|
},
|
|
|
|
showManageModal(title, url) {
|
|
this.manageModal = { open: true, title, url };
|
|
},
|
|
|
|
formatMoney(value) {
|
|
const num = parseInt(value) || 0;
|
|
return num === 0 ? '0' : num.toLocaleString('ko-KR');
|
|
},
|
|
|
|
parseMoney(str) {
|
|
return parseInt(String(str).replace(/[^0-9-]/g, '')) || 0;
|
|
},
|
|
|
|
formatFileSize(bytes) {
|
|
if (!bytes) return '';
|
|
if (bytes < 1024) return bytes + ' B';
|
|
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
|
|
return (bytes / 1048576).toFixed(1) + ' MB';
|
|
},
|
|
|
|
handleDrop(event) {
|
|
const files = Array.from(event.dataTransfer.files);
|
|
this.uploadFiles(files);
|
|
},
|
|
|
|
handleFileSelect(event) {
|
|
const files = Array.from(event.target.files);
|
|
this.uploadFiles(files);
|
|
event.target.value = '';
|
|
},
|
|
|
|
async uploadFiles(files) {
|
|
if (this.fileUploading || files.length === 0) return;
|
|
|
|
const maxSize = 20 * 1024 * 1024;
|
|
const valid = files.filter(f => {
|
|
if (f.size > maxSize) {
|
|
showToast(`${f.name}: 20MB를 초과합니다.`, 'warning');
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
if (valid.length === 0) return;
|
|
|
|
this.fileUploading = true;
|
|
this.fileProgress = 0;
|
|
let completed = 0;
|
|
|
|
for (const file of valid) {
|
|
this.fileUploadStatus = `${completed + 1}/${valid.length} 업로드 중...`;
|
|
try {
|
|
const result = await this.uploadSingle(file, (p) => {
|
|
this.fileProgress = Math.round(((completed + p / 100) / valid.length) * 100);
|
|
});
|
|
this.uploadedFiles.push(result);
|
|
completed++;
|
|
} catch (e) {
|
|
showToast(`${file.name} 업로드 실패`, 'error');
|
|
}
|
|
}
|
|
|
|
this.fileProgress = 100;
|
|
this.fileUploadStatus = '완료';
|
|
setTimeout(() => { this.fileUploading = false; this.fileProgress = 0; }, 800);
|
|
},
|
|
|
|
uploadSingle(file, onProgress) {
|
|
return new Promise((resolve, reject) => {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.upload.addEventListener('progress', (e) => {
|
|
if (e.lengthComputable) onProgress(Math.round(e.loaded / e.total * 100));
|
|
});
|
|
xhr.onload = () => {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
const res = JSON.parse(xhr.responseText);
|
|
if (res.success) resolve(res.data);
|
|
else reject(new Error(res.message));
|
|
} else { reject(new Error('업로드 실패')); }
|
|
};
|
|
xhr.onerror = () => reject(new Error('네트워크 오류'));
|
|
xhr.open('POST', '/api/admin/approvals/upload-file');
|
|
xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
xhr.send(formData);
|
|
});
|
|
},
|
|
|
|
async removeFile(index) {
|
|
const file = this.uploadedFiles[index];
|
|
try {
|
|
await fetch(`/api/admin/approvals/files/${file.id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
} catch (e) { /* 삭제 실패해도 목록에서는 제거 */ }
|
|
this.uploadedFiles.splice(index, 1);
|
|
},
|
|
|
|
getFormData() {
|
|
const isCard = this.formData.expense_type === 'corporate_card';
|
|
const isTransfer = this.formData.expense_type === 'transfer' || this.formData.expense_type === 'auto_transfer';
|
|
const acct = this.formData.selected_account;
|
|
const card = this.formData.selected_card;
|
|
|
|
return {
|
|
expense_type: this.formData.expense_type,
|
|
tax_invoice: this.formData.tax_invoice,
|
|
write_date: this.formData.write_date,
|
|
approval_date: this.formData.approval_date,
|
|
department: this.formData.department,
|
|
writer_name: this.formData.writer_name,
|
|
items: this.formData.items.map(item => ({
|
|
date: item.date,
|
|
description: item.description,
|
|
amount: parseInt(item.amount) || 0,
|
|
vendor: item.vendor,
|
|
vendor_id: item.vendor_id || null,
|
|
vendor_biz_no: item.vendor_biz_no || '',
|
|
bank: isTransfer && acct ? acct.bank_name : (isCard ? (card?.card_company || '') : item.bank),
|
|
account_no: isTransfer && acct ? acct.account_number : (isCard ? ('**** ' + (card?.card_number_last4 || '')) : item.account_no),
|
|
depositor: isTransfer && acct ? acct.account_holder : (isCard ? (card?.card_holder_name || '') : item.depositor),
|
|
remark: item.remark,
|
|
})),
|
|
total_amount: this.totalAmount,
|
|
attachment_memo: this.formData.attachment_memo,
|
|
selected_card: isCard ? this.formData.selected_card : null,
|
|
selected_account: isTransfer ? this.formData.selected_account : null,
|
|
};
|
|
},
|
|
|
|
getFileIds() {
|
|
return this.uploadedFiles.map(f => f.id);
|
|
},
|
|
};
|
|
}
|
|
|
|
function vendorSearch(item) {
|
|
let debounceTimer = null;
|
|
let dropdown = null;
|
|
let results = [];
|
|
let highlighted = -1;
|
|
let selected = false;
|
|
|
|
function removeDropdown() {
|
|
if (dropdown) { dropdown.remove(); dropdown = null; }
|
|
results = [];
|
|
highlighted = -1;
|
|
}
|
|
|
|
function renderDropdown(inputEl) {
|
|
if (!dropdown) {
|
|
dropdown = document.createElement('div');
|
|
dropdown.className = 'vendor-search-dropdown';
|
|
dropdown.style.cssText = 'position:fixed;z-index:99999;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,0.15);max-height:220px;overflow-y:auto;min-width:220px;';
|
|
document.body.appendChild(dropdown);
|
|
}
|
|
const rect = inputEl.getBoundingClientRect();
|
|
dropdown.style.top = rect.bottom + 2 + 'px';
|
|
dropdown.style.left = rect.left + 'px';
|
|
dropdown.style.width = rect.width + 'px';
|
|
|
|
if (results.length === 0) {
|
|
dropdown.innerHTML = '<div style="padding:8px 12px;font-size:12px;color:#9ca3af;">검색 결과 없음</div>';
|
|
return;
|
|
}
|
|
dropdown.innerHTML = results.map((p, i) => {
|
|
const bg = i === highlighted ? 'background:#eff6ff;' : '';
|
|
const bizInfo = [p.biz_no, p.ceo ? '대표: ' + p.ceo : ''].filter(Boolean).join(' ');
|
|
return `<div data-idx="${i}" style="padding:6px 8px;cursor:pointer;border-bottom:1px solid #f9fafb;${bg}" onmouseenter="this.style.background='#eff6ff'" onmouseleave="this.style.background='${i === highlighted ? '#eff6ff' : ''}'">
|
|
<div style="font-size:12px;font-weight:500;color:#1f2937;">${escapeVendorHtml(p.name)}</div>
|
|
${bizInfo ? '<div style="font-size:11px;color:#9ca3af;margin-top:1px;">' + escapeVendorHtml(bizInfo) + '</div>' : ''}
|
|
</div>`;
|
|
}).join('');
|
|
|
|
dropdown.querySelectorAll('[data-idx]').forEach(el => {
|
|
el.addEventListener('mousedown', (e) => {
|
|
e.preventDefault();
|
|
const idx = parseInt(el.dataset.idx);
|
|
if (results[idx]) {
|
|
item.vendor = results[idx].name;
|
|
item.vendor_id = results[idx].id;
|
|
item.vendor_biz_no = results[idx].biz_no || '';
|
|
inputEl.value = results[idx].name;
|
|
selected = true;
|
|
}
|
|
removeDropdown();
|
|
inputEl.blur();
|
|
});
|
|
});
|
|
}
|
|
|
|
return {
|
|
onInput(value) {
|
|
if (selected) { selected = false; return; }
|
|
item.vendor = value;
|
|
item.vendor_id = null;
|
|
item.vendor_biz_no = '';
|
|
highlighted = -1;
|
|
clearTimeout(debounceTimer);
|
|
if (value.length < 1) { removeDropdown(); return; }
|
|
debounceTimer = setTimeout(() => this.search(value), 250);
|
|
},
|
|
|
|
onFocus() {
|
|
if (selected) return;
|
|
if (item.vendor && item.vendor.length >= 1 && !dropdown) {
|
|
this.search(item.vendor);
|
|
}
|
|
},
|
|
|
|
async search(keyword) {
|
|
try {
|
|
const res = await fetch(`/barobill/tax-invoice/search-partners?keyword=${encodeURIComponent(keyword)}`);
|
|
results = await res.json();
|
|
highlighted = -1;
|
|
renderDropdown(this.$refs.vinput);
|
|
} catch (e) { results = []; removeDropdown(); }
|
|
},
|
|
|
|
close() { removeDropdown(); },
|
|
|
|
moveDown() {
|
|
if (!dropdown || results.length === 0) return;
|
|
clearTimeout(debounceTimer);
|
|
highlighted = (highlighted + 1) % results.length;
|
|
renderDropdown(this.$refs.vinput);
|
|
},
|
|
moveUp() {
|
|
if (!dropdown || results.length === 0) return;
|
|
clearTimeout(debounceTimer);
|
|
highlighted = highlighted <= 0 ? results.length - 1 : highlighted - 1;
|
|
renderDropdown(this.$refs.vinput);
|
|
},
|
|
selectHighlighted() {
|
|
if (highlighted >= 0 && highlighted < results.length) {
|
|
const p = results[highlighted];
|
|
item.vendor = p.name;
|
|
item.vendor_id = p.id;
|
|
item.vendor_biz_no = p.biz_no || '';
|
|
this.$refs.vinput.value = p.name;
|
|
selected = true;
|
|
removeDropdown();
|
|
this.$refs.vinput.blur();
|
|
}
|
|
},
|
|
};
|
|
}
|
|
|
|
function escapeVendorHtml(str) {
|
|
if (!str) return '';
|
|
const d = document.createElement('div');
|
|
d.appendChild(document.createTextNode(str));
|
|
return d.innerHTML;
|
|
}
|
|
</script>
|