* 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>
52 lines
1.6 KiB
Vue
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>
|