464 lines
12 KiB
Vue
464 lines
12 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, nextTick, ref, watch } from 'vue';
|
|
import ThaiBahtText from 'thai-baht-text';
|
|
|
|
// NOTE: Import stores
|
|
import useOptionStore from 'stores/options';
|
|
import { formatNumberDecimal } from 'stores/utils';
|
|
import { commaInput } from 'stores/utils';
|
|
|
|
// NOTE Import Types
|
|
import { BankBook } from 'stores/branch/types';
|
|
|
|
// NOTE: Import Components
|
|
import ViewHeader from './ViewHeader.vue';
|
|
import BankComponents from './BankComponents.vue';
|
|
import { readonly } from 'vue';
|
|
|
|
const optionStore = useOptionStore();
|
|
let count = 50;
|
|
|
|
type Product = {
|
|
id: string;
|
|
code: string;
|
|
detail: string;
|
|
amount: number;
|
|
priceUnit: number;
|
|
discount: number;
|
|
vat: number;
|
|
value: number;
|
|
};
|
|
|
|
type SummaryPrice = {
|
|
totalPrice: number;
|
|
totalDiscount: number;
|
|
vat: number;
|
|
vatExcluded: number;
|
|
finalPrice: number;
|
|
};
|
|
|
|
const summaryPrice = ref<SummaryPrice>({
|
|
totalPrice: 0,
|
|
totalDiscount: 0,
|
|
vat: 0,
|
|
vatExcluded: 0,
|
|
finalPrice: 15525,
|
|
});
|
|
|
|
const note = ref<string>('asdasd\d \n อะไรครับdasdasd');
|
|
const productList = ref<Product[]>([
|
|
{
|
|
id: 'cm14grwo30002z8ch55keto89',
|
|
code: 'PG01T01S01001',
|
|
detail: 'ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
|
|
amount: 3,
|
|
priceUnit: 2000.0,
|
|
discount: 0.0,
|
|
vat: 7,
|
|
value: 12750.0,
|
|
},
|
|
{
|
|
id: 'cm14grwo30112z8ch55keto00',
|
|
code: 'PG01T01S01002',
|
|
detail:
|
|
'ค่าบริการและค่าดำเนินงานยื่นขอบัญชีรายชื่อ (Name list) สัญชาติเมียนมา',
|
|
amount: 3,
|
|
priceUnit: 7100.0,
|
|
discount: 0.0,
|
|
vat: 7,
|
|
value: 4750.0,
|
|
},
|
|
{
|
|
id: 'Am14grwo30112z8ch55keto00',
|
|
code: 'PG01T01S01002',
|
|
detail:
|
|
'ค่าบริการและค่าดำเนินงานยื่นแจ้งที่พักอาศัยและยื่นแบบแจ้งการจ้างคนต่างด้าว',
|
|
amount: 1,
|
|
priceUnit: 14100.0,
|
|
discount: 100.0,
|
|
vat: 7,
|
|
value: 1050.0,
|
|
},
|
|
]);
|
|
|
|
const elements = ref<HTMLElement[]>([]);
|
|
const chunks = ref<Product[][]>([[]]);
|
|
|
|
const bankList = ref<BankBook[]>([
|
|
{
|
|
id: 'cm14grwo30003z8chvzouoc87',
|
|
currentlyUse: true,
|
|
branchId: 'cm14grwo30002z8ch55keto89',
|
|
bankUrl:
|
|
'http://192.168.1.61:20102/api/v1/branch/cm14grwo30002z8ch55keto89/bank-qr/cm14grwo30003z8chvzouoc87?ts=1729148488206',
|
|
bankName: 'ktb',
|
|
bankBranch: 'โรงพยาบาลศิริราชปิยมหาราชการุณย์',
|
|
accountType: '',
|
|
accountNumber: '1-520-361442-23',
|
|
accountName: 'บริษัท สยามเทคโนโลยี จำกัด',
|
|
},
|
|
]);
|
|
|
|
async function assignData() {
|
|
for (let i = 0; i < productList.value.length; i++) {
|
|
let el = elements.value.at(-1);
|
|
|
|
if (!el) return;
|
|
|
|
if (getHeight(el) < 500) {
|
|
chunks.value.at(-1)?.push(productList.value[i]);
|
|
} else {
|
|
chunks.value.push([]);
|
|
i--;
|
|
}
|
|
|
|
await nextTick();
|
|
}
|
|
}
|
|
|
|
function getHeight(el: HTMLElement) {
|
|
const shadow = document.createElement('div');
|
|
|
|
shadow.style.opacity = '0';
|
|
shadow.style.position = 'absolute';
|
|
shadow.style.top = '-999999px';
|
|
shadow.style.left = '-999999px';
|
|
shadow.style.pointerEvents = 'none';
|
|
|
|
document.body.appendChild(shadow);
|
|
|
|
shadow.appendChild(el.cloneNode(true));
|
|
|
|
const height = shadow.offsetHeight;
|
|
|
|
document.body.removeChild(shadow);
|
|
|
|
return height;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await optionStore.fetchOption();
|
|
assignData();
|
|
});
|
|
|
|
watch(elements, () => {
|
|
console.log(elements.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button @click="console.log(elements)">Click</button>
|
|
<div class="row justify-between container">
|
|
<section class="content" v-for="chunk in chunks">
|
|
<ViewHeader />
|
|
|
|
<span
|
|
class="q-mb-sm q-mt-md"
|
|
style="
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: var(--orange-5);
|
|
display: block;
|
|
border-bottom: 2px solid var(--orange-5);
|
|
"
|
|
>
|
|
{{ $t('peview.productList') }}
|
|
</span>
|
|
|
|
<table ref="elements" class="q-mb-sm" cellpadding="0" style="width: 100%">
|
|
<tbody>
|
|
<tr>
|
|
<th>{{ $t('peview.rank') }}</th>
|
|
<th>{{ $t('peview.productCode') }}</th>
|
|
<th>{{ $t('general.detail') }}</th>
|
|
<th>{{ $t('general.amount') }}</th>
|
|
<th>{{ $t('peview.pricePerUnit') }}</th>
|
|
<th>{{ $t('peview.discount') }}</th>
|
|
<th>{{ $t('peview.vat') }}</th>
|
|
<th>{{ $t('peview.value') }}</th>
|
|
</tr>
|
|
<tr class="color-tr" v-for="(v, i) in chunk">
|
|
<td class="text-center">{{ i + 1 }}</td>
|
|
<td>{{ v.code }}</td>
|
|
<td>{{ v.detail }}</td>
|
|
<td>{{ v.amount }}</td>
|
|
<td>{{ formatNumberDecimal(v.priceUnit, 2) }}</td>
|
|
<td>{{ formatNumberDecimal(v.discount, 2) }}</td>
|
|
<td>{{ formatNumberDecimal(v.vat, 2) }}</td>
|
|
<td>{{ formatNumberDecimal(v.value, 2) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table
|
|
style="width: 30%; margin-left: auto"
|
|
class="q-mb-md"
|
|
cellpadding="0"
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ $t('general.total') }}</td>
|
|
<td class="text-right">
|
|
{{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
|
|
฿
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="bg-color-orange">
|
|
<td>{{ $t('general.discount') }}</td>
|
|
<td class="text-right">
|
|
{{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ $t('general.totalAfterDiscount') }}</td>
|
|
<td class="text-right">
|
|
{{
|
|
formatNumberDecimal(
|
|
summaryPrice.totalPrice - summaryPrice.totalDiscount,
|
|
2,
|
|
)
|
|
}}
|
|
฿
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="bg-color-orange">
|
|
<td>{{ $t('general.totalVatExcluded') }}</td>
|
|
<td class="text-right">
|
|
{{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
|
|
฿
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t('general.totalVatIncluded') }}</td>
|
|
<td class="text-right">
|
|
{{
|
|
formatNumberDecimal(
|
|
summaryPrice.totalPrice -
|
|
summaryPrice.totalDiscount +
|
|
summaryPrice.vat,
|
|
2,
|
|
)
|
|
}}
|
|
฿
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="bg-color-orange">
|
|
<td>{{ $t('general.vat', { msg: '7%' }) }}</td>
|
|
<td class="text-right">
|
|
{{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="row justify-between q-mb-md" style="width: 100%">
|
|
<div
|
|
class="column set-width bg-color-orange full-height"
|
|
style="padding: 12px"
|
|
>
|
|
({{ ThaiBahtText(summaryPrice.finalPrice) }})
|
|
</div>
|
|
<div
|
|
class="column text-right border-5"
|
|
style="width: 40%; background: var(--orange-5); padding: 8px"
|
|
>
|
|
<span
|
|
class="border-5"
|
|
style="
|
|
width: 70%;
|
|
margin-left: auto;
|
|
background: white;
|
|
padding: 4px;
|
|
"
|
|
>
|
|
{{
|
|
formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0
|
|
}}
|
|
฿
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<ViewHeader class="q-mb-lg" />
|
|
|
|
<span
|
|
class="q-mb-sm q-mt-md"
|
|
style="
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: var(--orange-5);
|
|
display: block;
|
|
border-bottom: 2px solid var(--orange-5);
|
|
"
|
|
>
|
|
หมายเหตุ
|
|
</span>
|
|
|
|
<div
|
|
class="border-5 surface-0 detail-note q-mb-md"
|
|
style="width: 100%; padding: 8px 16px; white-space: pre-wrap"
|
|
>
|
|
{{ note }}
|
|
</div>
|
|
|
|
<span
|
|
class="q-mb-sm"
|
|
style="
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: var(--orange-5);
|
|
display: block;
|
|
border-bottom: 2px solid var(--orange-5);
|
|
"
|
|
>
|
|
เงื่อนไข
|
|
</span>
|
|
|
|
<div
|
|
class="detail-note surface-0 border-5 q-mb-md"
|
|
style="width: 100%; padding: 8px 16px"
|
|
>
|
|
<span>
|
|
***เงื่อนไขบริการเฉพาะยื่นเอกสาร MOU นำเข้าสัญชาติเมียนมา (RE-TRUN)
|
|
เท่านั้น
|
|
</span>
|
|
|
|
<span>
|
|
- ราคาดังกล่าว เฉพาะคนต่างด้าวสัญชาติเมียนมา ที่มี Passport (เดิม)
|
|
อายุเล่ม มากกว่า 2 ปี 6 เดือน เท่านั้น กรณี เล่ม Passport (เดิม)
|
|
มีอายุเล่ม น้อยกว่า 2 ปี จะมีค่าใช้จ่ายเพิ่มเติมในการทำเล่ม Passport
|
|
(ใหม่)
|
|
</span>
|
|
|
|
<span>
|
|
- คนต่างด้าวจะต้องเดินทางกลับประเทศต้นทางก่อน Visa จะหมดอายุ
|
|
มิฉะนั้นจะถูกปรับฐานอยู่ในราชอาณาจักรเกินกำหนด (Overstay)
|
|
</span>
|
|
<span>- คนต่างด้าวจะต้องมีอายุระหว่าง 18-55 ปี เท่านั้น</span>
|
|
<span>
|
|
- คนต่างต้าวจะต้องมีบัตรประชาชนพม่า (ฉบับจริง) และสำเนาทะเบียนบ้าน
|
|
เท่านั้น
|
|
</span>
|
|
<span>- ใบเสนอราคานี้มีอายุ 30 วัน นับตั้งแต่วันที่เสนอราคา</span>
|
|
<span>- เงื่อนไขการชำระเงิน แบ่งจ่าย 3 งวด</span>
|
|
<span>- งวดที่ 1 ชำระเงิน ณ วันยื่นเอกสาร จำนวน 2000 บาท</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<ViewHeader class="q-mb-lg" />
|
|
|
|
<span
|
|
class="q-mb-sm"
|
|
style="
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: var(--orange-5);
|
|
display: block;
|
|
border-bottom: 2px solid var(--orange-5);
|
|
"
|
|
>
|
|
ช่องทางซำระเงิน
|
|
</span>
|
|
<BankComponents
|
|
v-for="bank in bankList"
|
|
:bank-book="bank"
|
|
:key="bank.id"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background: var(--orange-5);
|
|
color: white;
|
|
|
|
padding: 4px;
|
|
}
|
|
td {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.border-5 {
|
|
border-radius: 5px;
|
|
}
|
|
.set-width {
|
|
width: 50%;
|
|
}
|
|
|
|
.bg-color-orange {
|
|
background-color: hsla(var(--orange-5-hsl) / 0.1);
|
|
}
|
|
|
|
.color-tr:nth-child(odd) {
|
|
background-color: hsla(var(--orange-5-hsl) / 0.1);
|
|
}
|
|
|
|
.container {
|
|
padding: 1rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-inline: auto;
|
|
background: var(--gray-3);
|
|
width: calc(8.3in + 1rem);
|
|
}
|
|
|
|
.container :deep(*) {
|
|
font-size: 95%;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
padding: 0.5in;
|
|
align-items: center;
|
|
background: white;
|
|
page-break-after: always;
|
|
break-after: page;
|
|
/* height: 11.7in; */
|
|
/* max-height: 11.7in; */
|
|
}
|
|
|
|
.position-bottom {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.detail-note {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
& > * {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border-style: solid;
|
|
border-color: var(--orange-5);
|
|
}
|
|
|
|
@media print {
|
|
.container {
|
|
padding: 0;
|
|
gap: 0;
|
|
width: 100%;
|
|
background: white;
|
|
}
|
|
|
|
.content {
|
|
padding: 0;
|
|
height: unset;
|
|
}
|
|
}
|
|
</style>
|