feat: [approval] 지출형식별 내역 테이블 동적 전환

- 법인카드: 지급은행/계좌/예금주 → 결제카드 컬럼 (선택 카드 자동표시)
- 송금: 선택 계좌 정보 자동 채움 (녹색 배경)
- 현금/가지급정산, 복지카드: 기존 수동입력 유지
- getFormData()에서 저장 시 카드/계좌 정보 items에 반영
This commit is contained in:
김보곤
2026-03-04 21:29:11 +09:00
parent 871b470ff2
commit 7b81f954d7

View File

@@ -148,9 +148,12 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-
<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 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" style="min-width: 120px;">계좌번호</th>
<th 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 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>
@@ -178,17 +181,41 @@ class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focu
<input type="text" x-model="item.vendor" 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" 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">
{{-- 법인카드: 선택된 카드 표시 --}}
<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 class="px-1 py-1">
<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">
{{-- 송금: 선택 계좌 자동표시 / 기타: 수동입력 --}}
<td x-show="formData.expense_type !== 'corporate_card'" class="px-1 py-1">
<template x-if="formData.expense_type === '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.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 class="px-1 py-1">
<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">
<td x-show="formData.expense_type !== 'corporate_card'" class="px-1 py-1">
<template x-if="formData.expense_type === '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.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.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.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="비고"
@@ -210,7 +237,7 @@ class="text-red-400 hover:text-red-600 transition" title="삭제"
<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="6" class="px-2 py-2">
<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">
+ 추가
@@ -511,6 +538,11 @@ function makeItem(data) {
},
getFormData() {
const isCard = this.formData.expense_type === 'corporate_card';
const isTransfer = this.formData.expense_type === '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,
@@ -522,15 +554,15 @@ function makeItem(data) {
description: item.description,
amount: parseInt(item.amount) || 0,
vendor: item.vendor,
bank: item.bank,
account_no: item.account_no,
depositor: item.depositor,
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: this.formData.expense_type === 'corporate_card' ? this.formData.selected_card : null,
selected_account: this.formData.expense_type === 'transfer' ? this.formData.selected_account : null,
selected_card: isCard ? this.formData.selected_card : null,
selected_account: isTransfer ? this.formData.selected_account : null,
};
},