refactor: by value
This commit is contained in:
Thanaphon Frappet
parent
971fd835c2
commit
4aafead505
1 changed files with 132 additions and 50 deletions
|
|
@ -1,8 +1,11 @@
|
|||
<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';
|
||||
|
|
@ -10,12 +13,76 @@ 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 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<number[][]>([[]]);
|
||||
const chunks = ref<Product[][]>([[]]);
|
||||
|
||||
const bankList = ref<BankBook[]>([
|
||||
{
|
||||
|
|
@ -33,13 +100,13 @@ const bankList = ref<BankBook[]>([
|
|||
]);
|
||||
|
||||
async function assignData() {
|
||||
for (let i = 0; i < count; i++) {
|
||||
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(1);
|
||||
chunks.value.at(-1)?.push(productList.value[i]);
|
||||
} else {
|
||||
chunks.value.push([]);
|
||||
i--;
|
||||
|
|
@ -105,20 +172,20 @@ watch(elements, () => {
|
|||
<th>{{ $t('peview.productCode') }}</th>
|
||||
<th>{{ $t('general.detail') }}</th>
|
||||
<th>{{ $t('general.amount') }}</th>
|
||||
<th>{{ $t('peview.pric') }}</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="(_, i) in chunk">
|
||||
<tr class="color-tr" v-for="(v, i) in chunk">
|
||||
<td class="text-center">{{ i + 1 }}</td>
|
||||
<td>PG01T01S01001</td>
|
||||
<td>ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)</td>
|
||||
<td>3</td>
|
||||
<td>2,000.00</td>
|
||||
<td>0.00</td>
|
||||
<td>7%</td>
|
||||
<td>12,750.00</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>
|
||||
|
|
@ -130,32 +197,60 @@ watch(elements, () => {
|
|||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ยอดรวม</td>
|
||||
<td class="text-right">11,900.00</td>
|
||||
<td>{{ $t('general.total') }}</td>
|
||||
<td class="text-right">
|
||||
{{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
|
||||
฿
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="bg-color-orange">
|
||||
<td>ส่วนลด</td>
|
||||
<td class="text-right">100.00</td>
|
||||
<td>{{ $t('general.discount') }}</td>
|
||||
<td class="text-right">
|
||||
{{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>จำนวนเงินหลังหักส่วนลด</td>
|
||||
<td class="text-right">0</td>
|
||||
<td>{{ $t('general.totalAfterDiscount') }}</td>
|
||||
<td class="text-right">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
summaryPrice.totalPrice - summaryPrice.totalDiscount,
|
||||
2,
|
||||
)
|
||||
}}
|
||||
฿
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="bg-color-orange">
|
||||
<td>จำนวนเงินยกเว้นภาษี</td>
|
||||
<td class="text-right">0</td>
|
||||
<td>{{ $t('general.totalVatExcluded') }}</td>
|
||||
<td class="text-right">
|
||||
{{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
|
||||
฿
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>จำนวนเงินยกภาษี</td>
|
||||
<td class="text-right">100.00</td>
|
||||
<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>ภาษีมูลค่าเพิ่ม 7%</td>
|
||||
<td class="text-right">100.00</td>
|
||||
<td>{{ $t('general.vat', { msg: '7%' }) }}</td>
|
||||
<td class="text-right">
|
||||
{{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -165,7 +260,7 @@ watch(elements, () => {
|
|||
class="column set-width bg-color-orange full-height"
|
||||
style="padding: 12px"
|
||||
>
|
||||
(หนึ่งหมื่นเจ็ดพันหกร้อยห้าสิบห้าบาท)
|
||||
({{ ThaiBahtText(summaryPrice.finalPrice) }})
|
||||
</div>
|
||||
<div
|
||||
class="column text-right border-5"
|
||||
|
|
@ -180,7 +275,10 @@ watch(elements, () => {
|
|||
padding: 4px;
|
||||
"
|
||||
>
|
||||
11,800.00
|
||||
{{
|
||||
formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0
|
||||
}}
|
||||
฿
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -202,30 +300,14 @@ watch(elements, () => {
|
|||
หมายเหตุ
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="surface-0 border-5 q-mb-md"
|
||||
style="width: 100%; padding: 8px 16px"
|
||||
>
|
||||
<table style="width: 30%" class="q-mb-md" cellpadding="0">
|
||||
<tbody>
|
||||
<tr v-for="(_, i) in Array(5)">
|
||||
<td class="text-center">{{ i + 1 }}</td>
|
||||
<td>1CC6613334</td>
|
||||
<td>MR. ZAYAR LIN</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
สิ่งที่ลูกค้าได้รับ
|
||||
|
||||
<table style="width: 30%" class="q-mt-md" cellpadding="0">
|
||||
<tbody>
|
||||
<tr v-for="(_, i) in Array(5)">
|
||||
<td class="text-center">{{ i + 1 }}</td>
|
||||
<td>ใบอนุญาตทำงาน 2 ปี</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="border-5 q-mb-md" style="width: 100%">
|
||||
<q-input
|
||||
v-model="note"
|
||||
readonly
|
||||
filled
|
||||
type="textarea"
|
||||
style="background: none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue