refactor: edit layout bank
This commit is contained in:
Thanaphon Frappet
parent
7d684f0612
commit
f6ad3a98c9
1 changed files with 48 additions and 119 deletions
|
|
@ -21,6 +21,7 @@ let bankBookFilter: (
|
|||
|
||||
defineProps<{
|
||||
bankBook: BankBook;
|
||||
index: number;
|
||||
}>();
|
||||
|
||||
watch(
|
||||
|
|
@ -36,132 +37,50 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset>
|
||||
<legend>ช่องทางที่ 1</legend>
|
||||
<fieldset class="rounded" style="border: 1px solid var(--gray-4)">
|
||||
<legend>ช่องทางที่ {{ index + 1 }}</legend>
|
||||
|
||||
<div class="border-5 full-width row">
|
||||
<div class="col column flex flex-center q-pa-sm" style="width: 20%">
|
||||
<q-img class="text-center" src="/qrcode.png"></q-img>
|
||||
<div class="border-5 full-width row" style="gap: var(--size-4)">
|
||||
<div class="column q-pa-sm" style="width: fit-content">
|
||||
<img
|
||||
:src="bankBook.bankUrl"
|
||||
class="rounded"
|
||||
style="
|
||||
border: 1px solid var(--gray-3);
|
||||
object-fit: scale-down;
|
||||
width: 1in;
|
||||
height: 1in;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="column" style="width: 80%">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
emit-value
|
||||
fill-input
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="value"
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
class="col-12 col-md-4"
|
||||
autocomplete="off"
|
||||
dense
|
||||
:label="$t('branch.form.bank')"
|
||||
:options="bankBookOptions"
|
||||
readonly
|
||||
hide-dropdown-icon
|
||||
for="select-bankbook"
|
||||
:model-value="bankBook.bankName || '-'"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (bankBook.bankName = v) : '')
|
||||
"
|
||||
@filter="bankBookFilter"
|
||||
@clear="bankBook.bankName = ''"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
<q-item
|
||||
v-if="scope.opt"
|
||||
v-bind="scope.itemProps"
|
||||
class="row items-center"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-img
|
||||
:src="`/img/bank/${scope.opt.value}.png`"
|
||||
class="bordered"
|
||||
style="border-radius: 50%"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ scope.opt.label }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:selected-item="scope">
|
||||
<q-item-section
|
||||
v-if="scope.opt && bankBook.bankName"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-img
|
||||
:src="`/img/bank/${scope.opt.value}.png`"
|
||||
class="bordered"
|
||||
style="border-radius: 50%"
|
||||
/>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="column col" style="gap: var(--size-3)">
|
||||
<div class="row" style="justify-content: space-between">
|
||||
<div class="text-with-label">
|
||||
<div>เลขบัญชีธนาคาร</div>
|
||||
<div class="row items-start">
|
||||
<img
|
||||
width="25px"
|
||||
height="25px"
|
||||
class="q-mr-xs"
|
||||
:src="`/img/bank/${bankBook.bankName}.png`"
|
||||
/>
|
||||
{{ bankBook.accountNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
for="input-bankbook"
|
||||
class="col-12 col-md-4"
|
||||
hide-bottom-space
|
||||
dense
|
||||
readonly
|
||||
:label="$t('branch.form.bankAccountNumber')"
|
||||
:maxlength="15"
|
||||
:model-value="bankBook.accountNumber || '-'"
|
||||
@update:model-value="
|
||||
(v) =>
|
||||
typeof v === 'string' ? (bankBook.accountNumber = v) : ''
|
||||
"
|
||||
/>
|
||||
<div class="text-with-label">
|
||||
<div>เลขบัญชีธนาคาร</div>
|
||||
<div>{{ bankBook.accountNumber }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
for="input-bankbook"
|
||||
class="col-12 col-md-4"
|
||||
hide-bottom-space
|
||||
dense
|
||||
readonly
|
||||
:label="$t('branch.form.bankAccountName')"
|
||||
:model-value="bankBook.accountName || '-'"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (bankBook.accountName = v) : '')
|
||||
"
|
||||
/>
|
||||
<div class="text-with-label">
|
||||
<div>ชื่อบัญชี</div>
|
||||
<div>{{ bankBook.accountName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
for="input-bankbook"
|
||||
class="col-md-4 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
readonly
|
||||
:label="$t('branch.form.bankBranch')"
|
||||
:model-value="bankBook.bankBranch || '-'"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (bankBook.bankBranch = v) : '')
|
||||
"
|
||||
/>
|
||||
<div class="text-with-label">
|
||||
<div>สาขา</div>
|
||||
<div>{{ bankBook.bankBranch }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -181,4 +100,14 @@ legend {
|
|||
.border-5 {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.text-with-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
& > :first-child {
|
||||
color: var(--gray-6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue