113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import { QSelect } from 'quasar';
|
|
|
|
// NOTE: Import stores
|
|
import { selectFilterOptionRefMod } from 'stores/utils';
|
|
import useOptionStore from 'stores/options';
|
|
|
|
// NOTE Import Types
|
|
import { BankBook } from 'stores/branch/types';
|
|
|
|
// NOTE: Import Components
|
|
|
|
const optionStore = useOptionStore();
|
|
|
|
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
|
let bankBookFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
defineProps<{
|
|
bankBook: BankBook;
|
|
index: number;
|
|
}>();
|
|
|
|
watch(
|
|
() => optionStore.globalOption,
|
|
() => {
|
|
bankBookFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption.bankBook),
|
|
bankBookOptions,
|
|
'label',
|
|
);
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<fieldset class="rounded" style="border: 1px solid var(--gray-4)">
|
|
<legend>ช่องทางที่ {{ index + 1 }}</legend>
|
|
|
|
<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 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="text-with-label">
|
|
<div>เลขบัญชีธนาคาร</div>
|
|
<div>{{ bankBook.accountNumber }}</div>
|
|
</div>
|
|
<div class="text-with-label">
|
|
<div>ชื่อบัญชี</div>
|
|
<div>{{ bankBook.accountName }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="text-with-label">
|
|
<div>สาขา</div>
|
|
<div>{{ bankBook.bankBranch }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</template>
|
|
|
|
<style scoped>
|
|
legend {
|
|
background-color: white;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.bordered-2 {
|
|
border: 2px solid var(--border-color);
|
|
}
|
|
|
|
.border-5 {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.text-with-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
|
|
& > :first-child {
|
|
color: var(--gray-6);
|
|
}
|
|
}
|
|
</style>
|