feat: [approval] 지출형식별 내역 테이블 동적 전환
- 법인카드: 지급은행/계좌/예금주 → 결제카드 컬럼 (선택 카드 자동표시) - 송금: 선택 계좌 정보 자동 채움 (녹색 배경) - 현금/가지급정산, 복지카드: 기존 수동입력 유지 - getFormData()에서 저장 시 카드/계좌 정보 items에 반영
This commit is contained in:
@@ -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,
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user