142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import { dateFormat } from 'src/utils/datetime';
|
|
|
|
// NOTE: Import stores
|
|
|
|
// NOTE Import Types
|
|
import { Branch } from 'src/stores/branch/types';
|
|
import { CustomerBranchRelation, Details } from 'src/stores/quotations/types';
|
|
// NOTE: Import Components
|
|
|
|
defineProps<{
|
|
branch: Branch;
|
|
customer: CustomerBranchRelation;
|
|
details: Details;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row items-center q-mb-lg">
|
|
<div class="column" style="width: 50%">
|
|
<img src="/logo.png" width="192px" style="object-fit: scale-down" />
|
|
</div>
|
|
<div
|
|
class="column"
|
|
style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
|
|
>
|
|
ใบเสนอราคา
|
|
</div>
|
|
</div>
|
|
|
|
<article class="detail-card">
|
|
<section class="detail-customer-info">
|
|
<article>
|
|
<b>บริษัท {{ branch.name }}</b>
|
|
<span>
|
|
{{ !branch.moo ? '' : `หมู่.${branch.moo}` }} ต.{{
|
|
branch.subDistrict?.name
|
|
}}
|
|
อ.{{ branch.district?.name }} จ.{{ branch.province?.name }}
|
|
{{ branch.subDistrict?.zipCode }}
|
|
</span>
|
|
<span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
|
|
<span>เบอร์โทร {{ branch.telephoneNo }}</span>
|
|
<span>{{ branch.webUrl }}</span>
|
|
</article>
|
|
<article>
|
|
<b>ลูกค้า</b>
|
|
<span>
|
|
ต.{{ customer.subDistrict?.name }} อ.{{
|
|
customer.district?.name
|
|
}}
|
|
จ.{{ customer.province?.name }} {{ customer.subDistrict?.zipCode }}
|
|
</span>
|
|
<span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
|
|
<span>เบอร์โทร {{ customer.telephoneNo }}</span>
|
|
</article>
|
|
</section>
|
|
<section class="detail-quotation-info">
|
|
<div>
|
|
<div>เลขที่ใบเสนอราคา</div>
|
|
<div>{{ details.code }}</div>
|
|
</div>
|
|
<div>
|
|
<div>วันที่ใบเสนอราคา</div>
|
|
<div>{{ dateFormat(details.createdAt, true, false, true) }}</div>
|
|
</div>
|
|
<div>
|
|
<div>ผู้ขาย</div>
|
|
<div>{{ details.createdBy }}</div>
|
|
</div>
|
|
<div>
|
|
<div>เงื่อนไขการชำระ</div>
|
|
<div>
|
|
{{
|
|
{
|
|
Full: $t('quotation.type.fullAmountCash'),
|
|
Split: $t('quotation.type.installmentsCash'),
|
|
BillFull: $t('quotation.type.fullAmountBill'),
|
|
BillSplit: $t('quotation.type.installmentsBill'),
|
|
}[details.payCondition]
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>ชื่องาน</div>
|
|
<div>{{ details.workName }}</div>
|
|
</div>
|
|
<div>
|
|
<div>ผู้ติดต่อ</div>
|
|
<div>{{ details.contactName }}</div>
|
|
</div>
|
|
<div>
|
|
<div>วันครบกำหนดชำระ</div>
|
|
<div>{{ dateFormat(details.dueDate, true, false, true) }}</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.detail-card {
|
|
display: flex;
|
|
gap: 16px;
|
|
|
|
& > * {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
& > :first-child {
|
|
max-width: 57.5%;
|
|
}
|
|
}
|
|
|
|
.detail-customer-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
|
|
& > * {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& > :first-child {
|
|
color: var(--main);
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-quotation-info {
|
|
& > * {
|
|
display: flex;
|
|
|
|
& > :first-child {
|
|
color: var(--main);
|
|
}
|
|
|
|
& > * {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|