jws-frontend/src/pages/05_quotation/QuotationFormReceipt.vue
Methapon Metanipat e068304923
feat: receipt view (#41)
* refactor: handle show form  receipt

* refactor: fetch receipt

* fix: i18n

* refactor: quotation receipt components

* refactor: by data Receipt

* refactor: delete  btn peview

* fix: wrong view condition

* rfactor: send Queery quotationId

* refactor: edit condition view

---------

Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
Co-authored-by: puriphatt <puriphat@frappet.com>
2024-11-01 09:06:06 +07:00

52 lines
1.6 KiB
Vue

<script lang="ts" setup>
import { formatNumberDecimal } from 'stores/utils';
import { dateFormatJS } from 'src/utils/datetime';
withDefaults(
defineProps<{
payType: string;
amount: number;
date: string | Date;
}>(),
{ payType: 'Full', amount: 0, date: () => new Date() },
);
</script>
<template>
<section class="surface-1 rounded row">
<aside class="column col bordered-r q-py-md q-pl-md">
<span class="text-weight-medium text-body1">
{{ $t('quotation.receiptDialog.PaymentReceive') }}
</span>
<span class="app-text-muted-2 q-pt-md">
{{ $t('quotation.receiptDialog.paymentMethod') }}
</span>
<span class="row items-center">
{{ $t(`quotation.type.${payType}`) }}
<q-icon name="mdi-minus" class="q-px-xs" />
<article class="app-text-positive text-weight-medium">
{{ $t('quotation.receiptDialog.PaymentSuccess') }}
</article>
<article class="q-ml-auto text-weight-bold text-body1 q-pr-lg">
฿ {{ formatNumberDecimal(amount, 2) }}
</article>
</span>
</aside>
<aside class="column col q-py-md text-right self-center q-px-md">
<span class="app-text-positive text-weight-bold text-body1">
{{ $t('quotation.receiptDialog.receiptIssued') }}
</span>
<div class="app-text-muted-2">
<q-icon name="mdi-calendar-blank-outline" />
{{
dateFormatJS({
date: date,
dayStyle: '2-digit',
monthStyle: '2-digit',
})
}}
</div>
</aside>
</section>
</template>
<style scoped></style>