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',
|
||||
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,
|
||||
// but you can also remove it
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue