refactor(05): receipt dialog
This commit is contained in:
puriphatt
parent
936d600cfc
commit
93d7aa4eb7
3 changed files with 335 additions and 1 deletions
BIN
public/images/upload.png
Normal file
BIN
public/images/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -16,6 +16,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
|
|||
import { Employee } from 'src/stores/employee/types';
|
||||
|
||||
// NOTE: Import Components
|
||||
import ReceiptDialog from './ReceiptDialog.vue';
|
||||
import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
|
||||
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
|
|
@ -76,6 +77,7 @@ const pageState = reactive({
|
|||
addModal: false,
|
||||
quotationModal: false,
|
||||
employeeModal: false,
|
||||
receiptModal: false,
|
||||
});
|
||||
|
||||
const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
|
||||
|
|
@ -208,6 +210,10 @@ function triggerQuotationDialog(opts: {
|
|||
window.open(url.toString(), '_blank');
|
||||
}
|
||||
|
||||
function triggerReceiptDialog() {
|
||||
pageState.receiptModal = true;
|
||||
}
|
||||
|
||||
const quotationStore = useQuotationStore();
|
||||
const {
|
||||
data: quotationData,
|
||||
|
|
@ -544,7 +550,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
|
|||
branchId: v.customerBranch.customer.registeredBranchId,
|
||||
})
|
||||
"
|
||||
@link="console.log('link')"
|
||||
@link="triggerReceiptDialog()"
|
||||
@upload="console.log('upload')"
|
||||
@delete="triggerDialogDeleteQuottaion(v.id)"
|
||||
@change-status="console.log('change')"
|
||||
|
|
@ -911,6 +917,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
|
|||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
||||
<ReceiptDialog v-model="pageState.receiptModal"></ReceiptDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
326
src/pages/05_quotation/ReceiptDialog.vue
Normal file
326
src/pages/05_quotation/ReceiptDialog.vue
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConfigStore } from 'stores/config';
|
||||
import { formatNumberDecimal, commaInput } from 'stores/utils';
|
||||
import DialogForm from 'src/components/DialogForm.vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
const { data: config } = storeToRefs(configStore);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'upload', index: number): void;
|
||||
}>();
|
||||
|
||||
const model = defineModel<boolean>({ default: false, required: true });
|
||||
|
||||
const state = reactive({
|
||||
waitExpansion: true,
|
||||
payExpansion: [] as boolean[],
|
||||
});
|
||||
|
||||
defineProps<{
|
||||
urgent?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<DialogForm
|
||||
:title="$t('quotation.receipt')"
|
||||
v-model:modal="model"
|
||||
width="65%"
|
||||
>
|
||||
<div
|
||||
class="col column"
|
||||
:class="{
|
||||
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<section class="bordered rounded surface-1" style="overflow: hidden">
|
||||
<q-expansion-item
|
||||
hide-expand-icon
|
||||
v-model="state.waitExpansion"
|
||||
header-style="padding:0px"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="column full-width bordered-b">
|
||||
<header class="bg-color-orange text-bold text-body1 q-pa-sm">
|
||||
<q-avatar class="surface-1 q-mr-sm" size="10px" />
|
||||
รอชำระเงิน
|
||||
</header>
|
||||
<span class="q-pa-md row items-center">
|
||||
<q-img
|
||||
src="/images/quotation-avatar.png"
|
||||
width="3rem"
|
||||
class="q-mr-lg"
|
||||
/>
|
||||
<div class="column col">
|
||||
<span class="text-bold text-body1">
|
||||
MOU Myanmar (Re-turn)
|
||||
</span>
|
||||
<span
|
||||
class="row items-center"
|
||||
:class="urgent ? 'urgent' : 'app-text-muted'"
|
||||
>
|
||||
QT240120S0002
|
||||
<q-icon
|
||||
v-if="urgent"
|
||||
class="q-pl-sm"
|
||||
name="mdi-fire"
|
||||
size="xs"
|
||||
/>
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="app-text-muted-2 q-px-md q-py-sm column">
|
||||
<span class="row">
|
||||
{{ $t('general.total') }}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
{{ $t('quotation.discountList') }}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
{{ $t('general.totalAfterDiscount') }}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
{{ $t('general.totalVatExcluded') }}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
{{
|
||||
$t('general.vat', {
|
||||
msg: `${config && Math.round(config.vat * 100)}%`,
|
||||
})
|
||||
}}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
{{ $t('general.totalVatIncluded') }}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
{{ $t('general.discountAfterVat') }}
|
||||
<span class="q-ml-auto" style="color: var(--foreground)">
|
||||
฿ {{ 0 }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</q-expansion-item>
|
||||
<q-separator inset v-if="state.waitExpansion" />
|
||||
<div
|
||||
class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
|
||||
>
|
||||
{{ $t('quotation.totalPriceBaht') }}:
|
||||
<span class="q-px-sm" style="color: var(--foreground)">
|
||||
{{ 0 }}
|
||||
</span>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
rounded
|
||||
padding="0"
|
||||
:icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
|
||||
@click.stop="state.waitExpansion = !state.waitExpansion"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
|
||||
>
|
||||
<span class="text-weight-bold text-body1">การชำระ</span>
|
||||
<div class="row items-center">
|
||||
<span class="app-text-muted-2">วิธีการชำระเงิน</span>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
padding="2px 8px"
|
||||
label="เงินสดแบ่งจ่าย"
|
||||
class="q-ml-auto rounded"
|
||||
style="background: var(--blue-8); color: var(--surface-1)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row items-center q-pt-md q-pb-sm">
|
||||
<span class="app-text-muted-2">จำนวนงวด</span>
|
||||
<span class="q-ml-auto">ทั้งหมด</span>
|
||||
<span class="bordered rounded surface-2 number-box q-mx-sm">2</span>
|
||||
งวด จ่ายไปแล้ว
|
||||
<span class="bordered rounded surface-2 number-box q-mx-sm">1</span>
|
||||
งวด คงเหลือ
|
||||
<span class="bordered rounded surface-2 number-box q-mx-sm">1</span>
|
||||
งวด
|
||||
</div>
|
||||
<div class="row items-center">
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md"
|
||||
style="border: 1px solid hsl(var(--info-bg))"
|
||||
>
|
||||
ยอดทั้งหมด
|
||||
<span class="q-ml-auto">1,0000.00</span>
|
||||
</span>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md q-mx-md"
|
||||
style="border: 1px solid hsl(var(--positive-bg))"
|
||||
>
|
||||
ชำระไปแล้ว
|
||||
<span class="q-ml-auto">1,0000.00</span>
|
||||
</span>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md"
|
||||
style="border: 1px solid hsl(var(--warning-bg))"
|
||||
>
|
||||
คงเหลือ
|
||||
<span class="q-ml-auto">1,0000.00</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="app-text-muted-2 q-pt-md">บิลการชำระ</span>
|
||||
<q-checkbox size="xs" :model-value="false" label="จ่ายเงินทั้งหมด" />
|
||||
|
||||
<section class="row">
|
||||
<div
|
||||
v-for="i in 3"
|
||||
:key="i"
|
||||
class="bordered rounded surface-1 q-mb-md col-12"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<q-expansion-item
|
||||
hide-expand-icon
|
||||
v-model="state.payExpansion[i]"
|
||||
header-style="padding:0px"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="column full-width">
|
||||
<section
|
||||
class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
|
||||
>
|
||||
<span class="text-weight-medium column">
|
||||
งวดทั้งหมด กันยายน 2567
|
||||
<span class="text-caption app-text-muted-2">
|
||||
วันครบกำหนดชำระเงิน วันที่ 1 ตุลาคม 2567
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="q-ml-auto items-center flex bg-color-orange-light q-py-xs q-px-sm rounded"
|
||||
style="color: var(--orange-6)"
|
||||
>
|
||||
<q-avatar size="5px" class="bg-color-orange q-mr-sm" />
|
||||
ยังไม่ได้ชำระเงิน
|
||||
</div>
|
||||
</section>
|
||||
<section class="row items-center q-px-md q-py-sm">
|
||||
ยอดเงินที่ต้องชำระ
|
||||
<span
|
||||
class="q-px-sm q-ml-auto"
|
||||
style="color: var(--foreground)"
|
||||
>
|
||||
{{ 0 }}
|
||||
</span>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
rounded
|
||||
padding="0"
|
||||
:icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
|
||||
@click.stop="
|
||||
state.payExpansion[i] = !state.payExpansion[i]
|
||||
"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="q-px-md q-py-xs text-weight-medium row items-center"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
>
|
||||
งานที่ดำเนินการในงวดนี้
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
padding="0px 8px"
|
||||
label="เพิ่มงาน"
|
||||
class="q-ml-auto app-text-info"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="q-px-md q-py-sm">
|
||||
<span class="app-text-muted">ยังไม่พบงาน</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="q-px-md q-py-xs text-weight-medium row items-center"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
>
|
||||
อัปโหลดใบเสร็จ
|
||||
</div>
|
||||
<div class="surface-2" style="height: 200px">
|
||||
<div class="column full-height items-center justify-center">
|
||||
<q-img src="/images/upload.png" width="150px" />
|
||||
อัปโหลด E-Slip หรือ อัปโหลดเอกสารการชำระเงิน
|
||||
<q-btn
|
||||
unelevated
|
||||
:label="$t('general.upload')"
|
||||
rounded
|
||||
class="app-bg-info q-mt-sm"
|
||||
@click.stop="$emit('upload', i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</DialogForm>
|
||||
</template>
|
||||
<style scoped>
|
||||
.bg-color-orange {
|
||||
--_color: var(--yellow-7-hsl);
|
||||
color: white;
|
||||
background: hsla(var(--_color));
|
||||
}
|
||||
|
||||
.dark .bg-color-orange {
|
||||
--_color: var(--orange-6-hsl);
|
||||
}
|
||||
|
||||
.bg-color-orange-light {
|
||||
--_color: var(--yellow-7-hsl);
|
||||
background: hsla(var(--_color) / 0.2);
|
||||
}
|
||||
.dark .bg-color-orange {
|
||||
--_color: var(--orange-6-hsl / 0.2);
|
||||
}
|
||||
|
||||
.urgent {
|
||||
color: hsl(var(--red-6-hsl));
|
||||
}
|
||||
|
||||
.number-box {
|
||||
text-align: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue