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';
|
import { Employee } from 'src/stores/employee/types';
|
||||||
|
|
||||||
// NOTE: Import Components
|
// NOTE: Import Components
|
||||||
|
import ReceiptDialog from './ReceiptDialog.vue';
|
||||||
import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
|
import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
|
||||||
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||||
|
|
@ -76,6 +77,7 @@ const pageState = reactive({
|
||||||
addModal: false,
|
addModal: false,
|
||||||
quotationModal: false,
|
quotationModal: false,
|
||||||
employeeModal: false,
|
employeeModal: false,
|
||||||
|
receiptModal: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
|
const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
|
||||||
|
|
@ -208,6 +210,10 @@ function triggerQuotationDialog(opts: {
|
||||||
window.open(url.toString(), '_blank');
|
window.open(url.toString(), '_blank');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function triggerReceiptDialog() {
|
||||||
|
pageState.receiptModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
const quotationStore = useQuotationStore();
|
const quotationStore = useQuotationStore();
|
||||||
const {
|
const {
|
||||||
data: quotationData,
|
data: quotationData,
|
||||||
|
|
@ -544,7 +550,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
|
||||||
branchId: v.customerBranch.customer.registeredBranchId,
|
branchId: v.customerBranch.customer.registeredBranchId,
|
||||||
})
|
})
|
||||||
"
|
"
|
||||||
@link="console.log('link')"
|
@link="triggerReceiptDialog()"
|
||||||
@upload="console.log('upload')"
|
@upload="console.log('upload')"
|
||||||
@delete="triggerDialogDeleteQuottaion(v.id)"
|
@delete="triggerDialogDeleteQuottaion(v.id)"
|
||||||
@change-status="console.log('change')"
|
@change-status="console.log('change')"
|
||||||
|
|
@ -911,6 +917,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DialogForm>
|
</DialogForm>
|
||||||
|
|
||||||
|
<ReceiptDialog v-model="pageState.receiptModal"></ReceiptDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<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