feat: เเสดงลายละเอียด
This commit is contained in:
Net
parent
3c741947ed
commit
015a011909
1 changed files with 173 additions and 0 deletions
173
src/components/01_branch-management/CardDetailsComponent.vue
Normal file
173
src/components/01_branch-management/CardDetailsComponent.vue
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<script setup lang="ts">
|
||||
import { Branch } from '../../stores/branch/types';
|
||||
|
||||
defineProps<{
|
||||
data?: Branch;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card style="width: 100%">
|
||||
<q-item>
|
||||
<q-card-section class="no-padding">
|
||||
<div class="flex q-gutter-x-md" style="align-items: center">
|
||||
<iconify-icon icon="ic:baseline-home" />
|
||||
<div class="text-h6">รายละเอียดสำนักงานใหญ่</div>
|
||||
|
||||
<div
|
||||
class="text-h6 color-card-text-code"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
Httw
|
||||
</div>
|
||||
<div
|
||||
class="q-pa-sm"
|
||||
style="
|
||||
color: var(--teal-6);
|
||||
background: hsla(var(--teal-6-hsl) / 0.08);
|
||||
border-radius: 25px;
|
||||
"
|
||||
>
|
||||
ดำเนินการอยู่
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-item>
|
||||
</q-card>
|
||||
|
||||
<div class="row">
|
||||
<div class="col q-pa-sm card-details-variable">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="col q-pa-sm">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.color-card-text-code {
|
||||
--_color-card-text-code: var(--gray-12);
|
||||
color: var(--_color-card-text-code);
|
||||
|
||||
&.dark {
|
||||
--_color-card-text-code: var(--cyan-6);
|
||||
}
|
||||
}
|
||||
|
||||
.color-text-static {
|
||||
--_details-text-static-color: var(--gray-6);
|
||||
color: var(--_details-text-static-color);
|
||||
}
|
||||
|
||||
.card-details-row-height {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue