feat: สร้าง deatail drawer component
This commit is contained in:
Net
parent
44776ecb12
commit
87d98355ba
1 changed files with 156 additions and 0 deletions
|
|
@ -0,0 +1,156 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Branch } from '../../stores/branch/types';
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
data?: Branch;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const open = defineModel('open', { type: Boolean, default: false });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-drawer
|
||||||
|
overlay
|
||||||
|
bordered
|
||||||
|
class="q-pa-md"
|
||||||
|
side="right"
|
||||||
|
tabindex="0"
|
||||||
|
:width="500"
|
||||||
|
:breakpoint="500"
|
||||||
|
:model-value="true"
|
||||||
|
v-model="open"
|
||||||
|
>
|
||||||
|
<q-toolbar class="q-mb-md q-pa-none">
|
||||||
|
<q-toolbar-title>
|
||||||
|
<q-icon name="mdi-home" size="md" />
|
||||||
|
<span class="text-weight-bold q-pl-sm">รายละเอียดสำนักงานใหญ่</span>
|
||||||
|
</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
v-close-popup
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
icon="mdi-close"
|
||||||
|
color="red"
|
||||||
|
@click="() => $emit('open')"
|
||||||
|
id="fileFormIconClose"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<section class="q-mb-md">
|
||||||
|
<q-card class="bordered column q-pa-sm">
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">รหัสสาขา</div>
|
||||||
|
<div class="col-2">{{ data?.code }}</div>
|
||||||
|
<div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
|
||||||
|
<div class="col-3">{{ data?.taxNo }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div>
|
||||||
|
<div class="col-2">{{ data?.name }}</div>
|
||||||
|
<div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
|
||||||
|
<div class="col-3">{{ data?.nameEN }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row q-pt-sm q-pb-md card-details-row-height">
|
||||||
|
<div
|
||||||
|
class="col color-card-text-code"
|
||||||
|
:class="{ dark: $q.dark.isActive }"
|
||||||
|
>
|
||||||
|
ที่อยู่สาขา
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">ที่อยู่</div>
|
||||||
|
<div class="col-2">{{ data?.address }}</div>
|
||||||
|
<div class="col-4 color-text-static">แขวง/ตำบล</div>
|
||||||
|
<div class="col-3">
|
||||||
|
{{ data?.subDistrict?.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">เขต/อำเภอ</div>
|
||||||
|
<div class="col-2">{{ data?.district?.name }}</div>
|
||||||
|
<div class="col-4 color-text-static">จังหวัด</div>
|
||||||
|
<div class="col-3">{{ data?.province?.name }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
|
||||||
|
<div class="col-2">{{ data?.code }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row q-pt-sm q-pb-md card-details-row-height">
|
||||||
|
<div
|
||||||
|
class="col color-card-text-code"
|
||||||
|
:class="{ dark: $q.dark.isActive }"
|
||||||
|
>
|
||||||
|
ที่อยู่สาขา ENG
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">Address</div>
|
||||||
|
<div class="col-2">{{ data?.addressEN }}</div>
|
||||||
|
<div class="col-4 color-text-static">Subdistrict</div>
|
||||||
|
<div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">District</div>
|
||||||
|
<div class="col-2">{{ data?.district?.nameEN }}</div>
|
||||||
|
<div class="col-4 color-text-static">Province</div>
|
||||||
|
<div class="col-3">{{ data?.province?.nameEN }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-3 color-text-static">Zip code</div>
|
||||||
|
<div class="col-2">{{ data?.code }}</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="q-mb-md">
|
||||||
|
<q-card class="bordered q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-5 color-text-static">เบอร์โทรศัพท์สาขา</div>
|
||||||
|
<div class="col">{{ data?.telephoneNo }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row card-details-row-height">
|
||||||
|
<div class="col-5 color-text-static">อีเมลติดต่อสาขา</div>
|
||||||
|
<div class="col">{{ data?.email }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col full-width">
|
||||||
|
<div
|
||||||
|
class="column"
|
||||||
|
style="border-radius: 6px; border: 1px solid #e0e0e0"
|
||||||
|
>
|
||||||
|
<div class="col q-pa-sm" style="border-bottom: 1px solid #e0e0e0">
|
||||||
|
Id line
|
||||||
|
</div>
|
||||||
|
<div class="col flex flex-center full-width bg-grey-3 q-pa-sm">
|
||||||
|
<q-img
|
||||||
|
src="/qrcode.png"
|
||||||
|
spinner-color="white"
|
||||||
|
style="height: 80px; max-width: 80px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col color-text-static">location</div>
|
||||||
|
<div class="col"></div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</section>
|
||||||
|
</q-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue