157 lines
3.7 KiB
Vue
157 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { dateFormat } from 'src/utils/datetime';
|
|
|
|
// NOTE: Import stores
|
|
import { formatAddress } from 'src/utils/address';
|
|
|
|
// NOTE Import Types
|
|
import { Branch } from 'src/stores/branch/types';
|
|
import { Institution } from 'src/stores/institution/types';
|
|
|
|
// NOTE: Import Components
|
|
|
|
defineProps<{
|
|
viewType: 'docOrder' | 'docReceive';
|
|
branch: Branch;
|
|
institution: Institution;
|
|
details: {
|
|
code: string;
|
|
name: string;
|
|
contactName: string;
|
|
contactTel: string;
|
|
};
|
|
}>();
|
|
</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"
|
|
>
|
|
{{
|
|
viewType === 'docReceive'
|
|
? $t('taskOrder.goodReceipt')
|
|
: $t('preview.taskOrder')
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<article class="detail-card">
|
|
<section class="detail-customer-info">
|
|
<article>
|
|
<b>
|
|
{{ !!branch.virtual ? '' : $t('general.company') }} {{ branch.name }}
|
|
</b>
|
|
|
|
<span v-if="branch.province && branch.district && branch.subDistrict">
|
|
{{
|
|
formatAddress({
|
|
address: branch.address,
|
|
addressEN: branch.addressEN,
|
|
moo: branch.moo,
|
|
mooEN: branch.mooEN,
|
|
soi: branch.soi,
|
|
soiEN: branch.soiEN,
|
|
street: branch.street,
|
|
streetEN: branch.streetEN,
|
|
province: branch.province,
|
|
district: branch.district,
|
|
subDistrict: branch.subDistrict,
|
|
})
|
|
}}
|
|
</span>
|
|
<span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
|
|
<span>เบอร์โทร {{ branch.telephoneNo }}</span>
|
|
<span>{{ branch.webUrl }}</span>
|
|
</article>
|
|
<article>
|
|
<b>{{ $t('general.agencyAddress') }}</b>
|
|
<span>
|
|
{{
|
|
formatAddress({
|
|
address: institution.address,
|
|
addressEN: institution.addressEN,
|
|
moo: institution.moo || '-',
|
|
mooEN: institution.mooEN || '-',
|
|
soi: institution.soi || '-',
|
|
soiEN: institution.soiEN || '-',
|
|
street: institution.street || '-',
|
|
streetEN: institution.streetEN || '-',
|
|
province: institution.province,
|
|
district: institution.district,
|
|
subDistrict: institution.subDistrict,
|
|
})
|
|
}}
|
|
</span>
|
|
</article>
|
|
</section>
|
|
<section class="detail-quotation-info">
|
|
<div>
|
|
<div>
|
|
{{
|
|
$t('general.itemNo', {
|
|
msg: ` ${viewType === 'docReceive' ? $t('taskOrder.goodReceipt') : $t('preview.taskOrder')}`,
|
|
})
|
|
}}
|
|
</div>
|
|
<div>{{ details.code }}</div>
|
|
</div>
|
|
<div>
|
|
<div>{{ $t('taskOrder.workName') }}</div>
|
|
<div>{{ details.name }}</div>
|
|
</div>
|
|
<div>
|
|
<div>{{ $t('taskOrder.contacts') }}</div>
|
|
<div>{{ details.contactName }}</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>
|