refactor: show peview
This commit is contained in:
Thanaphon Frappet
parent
614423e1f8
commit
624d6facd4
3 changed files with 420 additions and 0 deletions
293
src/pages/05_quotation/peview/ViewForm.vue
Normal file
293
src/pages/05_quotation/peview/ViewForm.vue
Normal file
|
|
@ -0,0 +1,293 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// NOTE: Import stores
|
||||||
|
// NOTE Import Types
|
||||||
|
// NOTE: Import Components
|
||||||
|
import ViewHeader from './ViewHeader.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="row justify-between container">
|
||||||
|
<section class="content">
|
||||||
|
<ViewHeader class="q-mb-lg" />
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="q-mb-sm"
|
||||||
|
style="
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--orange-5);
|
||||||
|
display: block;
|
||||||
|
border-bottom: 2px solid var(--orange-5);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
รายการสินค้า
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<table style="width: 100%" class="q-mb-md" cellpadding="0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>อันดับ</th>
|
||||||
|
<th>รหัสสินค้า</th>
|
||||||
|
<th>รายละเอียด</th>
|
||||||
|
<th>จำนวน</th>
|
||||||
|
<th>ราคาต่อหน่วย</th>
|
||||||
|
<th>ส่วนสด</th>
|
||||||
|
<th>ภาษี</th>
|
||||||
|
<th>มูลค่า</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="color-tr" v-for="(_, i) in Array(18)">
|
||||||
|
<td class="text-center">{{ i + 1 }}</td>
|
||||||
|
<td>PG01T01S01001</td>
|
||||||
|
<td>ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>2,000.00</td>
|
||||||
|
<td>0.00</td>
|
||||||
|
<td>7%</td>
|
||||||
|
<td>12,750.00</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table
|
||||||
|
style="width: 30%; margin-left: auto"
|
||||||
|
class="q-mb-md"
|
||||||
|
cellpadding="0"
|
||||||
|
>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>ยอดรวม</td>
|
||||||
|
<td class="text-right">11,900.00</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="bg-color-orange">
|
||||||
|
<td>ส่วนลด</td>
|
||||||
|
<td class="text-right">100.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>จำนวนเงินหลังหักส่วนลด</td>
|
||||||
|
<td class="text-right">0</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="bg-color-orange">
|
||||||
|
<td>จำนวนเงินยกเว้นภาษี</td>
|
||||||
|
<td class="text-right">0</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>จำนวนเงินยกภาษี</td>
|
||||||
|
<td class="text-right">100.00</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="bg-color-orange">
|
||||||
|
<td>ภาษีมูลค่าเพิ่ม 7%</td>
|
||||||
|
<td class="text-right">100.00</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="row justify-between q-mb-md" style="width: 100%">
|
||||||
|
<div
|
||||||
|
class="column set-width bg-color-orange full-height"
|
||||||
|
style="padding: 12px"
|
||||||
|
>
|
||||||
|
(หนึ่งหมื่นเจ็ดพันหกร้อยห้าสิบห้าบาท)
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="column text-right border-5"
|
||||||
|
style="width: 40%; background: var(--orange-5); padding: 8px"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="border-5"
|
||||||
|
style="
|
||||||
|
width: 70%;
|
||||||
|
margin-left: auto;
|
||||||
|
background: white;
|
||||||
|
padding: 4px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
11,800.00
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content">
|
||||||
|
<ViewHeader class="q-mb-lg" />
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="q-mb-sm"
|
||||||
|
style="
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--orange-5);
|
||||||
|
display: block;
|
||||||
|
border-bottom: 2px solid var(--orange-5);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
หมายเหตุ
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="surface-0 border-5 q-mb-md"
|
||||||
|
style="width: 100%; padding: 8px 16px"
|
||||||
|
>
|
||||||
|
<table style="width: 30%" class="q-mb-md" cellpadding="0">
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(_, i) in Array(5)">
|
||||||
|
<td class="text-center">{{ i + 1 }}</td>
|
||||||
|
<td>1CC6613334</td>
|
||||||
|
<td>MR. ZAYAR LIN</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
สิ่งที่ลูกค้าได้รับ
|
||||||
|
|
||||||
|
<table style="width: 30%" class="q-mt-md" cellpadding="0">
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(_, i) in Array(5)">
|
||||||
|
<td class="text-center">{{ i + 1 }}</td>
|
||||||
|
<td>ใบอนุญาตทำงาน 2 ปี</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="q-mb-sm"
|
||||||
|
style="
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--orange-5);
|
||||||
|
display: block;
|
||||||
|
border-bottom: 2px solid var(--orange-5);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
เงื่อนไข
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="detail-note surface-0 border-5 q-mb-md"
|
||||||
|
style="width: 100%; padding: 8px 16px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
***เงื่อนไขบริการเฉพาะยื่นเอกสาร MOU นำเข้าสัญชาติเมียนมา (RE-TRUN)
|
||||||
|
เท่านั้น
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
- ราคาดังกล่าว เฉพาะคนต่างด้าวสัญชาติเมียนมา ที่มี Passport (เดิม)
|
||||||
|
อายุเล่ม มากกว่า 2 ปี 6 เดือน เท่านั้น กรณี เล่ม Passport (เดิม)
|
||||||
|
มีอายุเล่ม น้อยกว่า 2 ปี จะมีค่าใช้จ่ายเพิ่มเติมในการทำเล่ม Passport
|
||||||
|
(ใหม่)
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
- คนต่างด้าวจะต้องเดินทางกลับประเทศต้นทางก่อน Visa จะหมดอายุ
|
||||||
|
มิฉะนั้นจะถูกปรับฐานอยู่ในราชอาณาจักรเกินกำหนด (Overstay)
|
||||||
|
</span>
|
||||||
|
<span>- คนต่างด้าวจะต้องมีอายุระหว่าง 18-55 ปี เท่านั้น</span>
|
||||||
|
<span>
|
||||||
|
- คนต่างต้าวจะต้องมีบัตรประชาชนพม่า (ฉบับจริง) และสำเนาทะเบียนบ้าน
|
||||||
|
เท่านั้น
|
||||||
|
</span>
|
||||||
|
<span>- ใบเสนอราคานี้มีอายุ 30 วัน นับตั้งแต่วันที่เสนอราคา</span>
|
||||||
|
<span>- เงื่อนไขการชำระเงิน แบ่งจ่าย 3 งวด</span>
|
||||||
|
<span>- งวดที่ 1 ชำระเงิน ณ วันยื่นเอกสาร จำนวน 2000 บาท</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content">
|
||||||
|
<ViewHeader class="q-mb-lg" />
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="q-mb-sm"
|
||||||
|
style="
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--orange-5);
|
||||||
|
display: block;
|
||||||
|
border-bottom: 2px solid var(--orange-5);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
ช่องทางซำระเงิน
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: var(--orange-5);
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-5 {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.set-width {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-color-orange {
|
||||||
|
background-color: hsla(var(--orange-5-hsl) / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-tr:nth-child(odd) {
|
||||||
|
background-color: hsla(var(--orange-5-hsl) / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-inline: auto;
|
||||||
|
background: white;
|
||||||
|
width: 8in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container :deep(*) {
|
||||||
|
font-size: 95%;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
page-break-after: always;
|
||||||
|
break-after: page;
|
||||||
|
}
|
||||||
|
.position-bottom {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
.detail-note {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
& > * {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--orange-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.container {
|
||||||
|
padding: 0;
|
||||||
|
gap: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
122
src/pages/05_quotation/peview/ViewHeader.vue
Normal file
122
src/pages/05_quotation/peview/ViewHeader.vue
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// NOTE: Import stores
|
||||||
|
|
||||||
|
// NOTE Import Types
|
||||||
|
// NOTE: Import Components
|
||||||
|
</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>
|
||||||
|
บริษัท นำคนต่างด้าวมาทำงานในประเทศ จ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด
|
||||||
|
(สำนักงานใหญ่)
|
||||||
|
</b>
|
||||||
|
<span>
|
||||||
|
49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
|
||||||
|
10140
|
||||||
|
</span>
|
||||||
|
<span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
|
||||||
|
<span>เบอร์โทร 02-018-8688</span>
|
||||||
|
<span>https://www.jobsworkerservice.com</span>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<b>ลูกค้า</b>
|
||||||
|
<span>
|
||||||
|
49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
|
||||||
|
10140
|
||||||
|
</span>
|
||||||
|
<span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
|
||||||
|
<span>เบอร์โทร 02-018-8688</span>
|
||||||
|
<span>https://www.jobsworkerservice.com</span>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<section class="detail-quotation-info">
|
||||||
|
<div>
|
||||||
|
<div>เลขที่ใบเสนอราคา</div>
|
||||||
|
<div>QT240120S0003</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>วันที่ใบเสนอราคา</div>
|
||||||
|
<div>20/01/2024 10:36</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>ผู้ขาย</div>
|
||||||
|
<div>นายสดใส ใจงาม 084-363-5222</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>เงื่อนไขการชำระ</div>
|
||||||
|
<div>เงินสด - เต็มจำนวน</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>ชื่องาน</div>
|
||||||
|
<div>MOU Myanmar (Re-turn)</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>ผู้ติดต่อ</div>
|
||||||
|
<div>สุนี เจริญงาม</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>วันครบกำหนดชำระ</div>
|
||||||
|
<div>27/01/2024</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(--orange-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-quotation-info {
|
||||||
|
& > * {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
& > :first-child {
|
||||||
|
color: var(--orange-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -92,6 +92,11 @@ const routes: RouteRecordRaw[] = [
|
||||||
name: 'QuotationAdd',
|
name: 'QuotationAdd',
|
||||||
component: () => import('pages/05_quotation/QuotationForm.vue'),
|
component: () => import('pages/05_quotation/QuotationForm.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/view',
|
||||||
|
name: 'view',
|
||||||
|
component: () => import('pages/05_quotation/peview/ViewForm.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
// Always leave this as last one,
|
// Always leave this as last one,
|
||||||
// but you can also remove it
|
// but you can also remove it
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue