refactor: card
This commit is contained in:
Methapon2001
parent
fd922592d9
commit
7a9f0451a9
3 changed files with 150 additions and 165 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Branch } from '../../stores/branch/types';
|
||||
import AppBox from '../app/AppBox.vue';
|
||||
|
||||
defineProps<{
|
||||
data?: Branch;
|
||||
|
|
@ -7,147 +8,146 @@ defineProps<{
|
|||
</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="q-pa-md">
|
||||
<div class="flex q-gutter-x-md" style="align-items: center">
|
||||
<Icon icon="ic:baseline-home" />
|
||||
<div class="text-h6">รายละเอียดสำนักงานใหญ่</div>
|
||||
|
||||
<div
|
||||
class="text-h6 color-card-text-code"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ data?.code }}
|
||||
</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?.zipCode }}</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?.zipCode }}</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<div
|
||||
class="text-h6 color-card-text-code"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ data?.code }}
|
||||
</div>
|
||||
<div
|
||||
class="q-pa-sm"
|
||||
style="
|
||||
color: var(--teal-6);
|
||||
background: hsla(var(--teal-6-hsl) / 0.08);
|
||||
border-radius: 25px;
|
||||
"
|
||||
>
|
||||
ดำเนินการอยู่
|
||||
</div>
|
||||
</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 class="row">
|
||||
<div class="col q-pa-sm card-details-variable">
|
||||
<AppBox class="bordered column q-pa-sm" bordered>
|
||||
<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="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 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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col color-text-static">location</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</q-card>
|
||||
<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?.zipCode }}</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?.zipCode }}</div>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
|
||||
<div class="col q-pa-sm">
|
||||
<AppBox bordered>
|
||||
<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>
|
||||
</AppBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const columns = [
|
|||
{
|
||||
name: 'name',
|
||||
required: true,
|
||||
label: props.subBranch ? 'รหัสสาขา' : 'รหัสสำนักงานใหญ่',
|
||||
label: props.subBranch ? 'branchLabel' : 'branchHQLabel',
|
||||
align: 'left',
|
||||
field: (row) => row.name,
|
||||
format: (val) => `${val}`,
|
||||
|
|
@ -36,9 +36,9 @@ const columns = [
|
|||
field: 'branchName',
|
||||
sortable: true,
|
||||
},
|
||||
{ name: 'address', label: 'ที่อยู่', field: 'address', sortable: true },
|
||||
{ name: 'telephoneNo', label: 'เบอร์โทร', field: 'telephoneNo' },
|
||||
{ name: 'code', label: 'สำนักงานใหญ่', field: 'code' },
|
||||
{ name: 'address', label: 'address', field: 'address', sortable: true },
|
||||
{ name: 'telephoneNo', label: 'telephone', field: 'telephoneNo' },
|
||||
{ name: 'code', label: 'รหัส', field: 'code' },
|
||||
{ name: 'type', label: 'ประเภท', field: 'type' },
|
||||
{ name: 'status', label: 'สถานะ', field: 'status' },
|
||||
] satisfies QTableProps['columns'];
|
||||
|
|
@ -60,8 +60,11 @@ const filter = ref('');
|
|||
hide-header
|
||||
>
|
||||
<template v-slot:item="prop">
|
||||
<div class="q-pr-sm q-pb-md">
|
||||
<q-card class="bordered" style="width: 340px">
|
||||
<div
|
||||
class="q-pr-sm q-pb-md col-6"
|
||||
@click.stop="!subBranch && $emit('navigate', prop.row)"
|
||||
>
|
||||
<q-card class="bordered">
|
||||
<q-item
|
||||
class="bordered"
|
||||
:class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''} ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`"
|
||||
|
|
@ -73,7 +76,7 @@ const filter = ref('');
|
|||
style="width: 120px"
|
||||
:style="`${!$q.dark.isActive && i !== 0 ? 'color:gray' : ''}`"
|
||||
>
|
||||
{{ prop.colsMap[k]?.label }}
|
||||
{{ $t(prop.colsMap[k]?.label) }}
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
|
|
@ -82,27 +85,17 @@ const filter = ref('');
|
|||
{{ v }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="v">สำนักงานใหญ่</div>
|
||||
<div v-else>สาขา</div>
|
||||
{{ (v && $t('branchHQLabel')) || $t('branchLabel') }}
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-space />
|
||||
|
||||
<Icon
|
||||
icon="mdi:navigate-next"
|
||||
class="cursor-pointer"
|
||||
v-if="i === 0 && !subBranch"
|
||||
v-if="i === 0"
|
||||
width="20px"
|
||||
@click="$emit('navigate', prop.row)"
|
||||
/>
|
||||
<Icon
|
||||
icon="mdi:navigate-next"
|
||||
class="cursor-pointer"
|
||||
v-if="i === 0 && subBranch"
|
||||
width="20px"
|
||||
@click="$emit('showCard', prop.row)"
|
||||
@click.stop="$emit('show-info', prop.row)"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
|
|
|||
|
|
@ -633,16 +633,8 @@ onMounted(async () => {
|
|||
label="เลือก"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2 q-pr-md">
|
||||
<q-input dense outlined v-model="inputSearch">
|
||||
<template #append>
|
||||
<Icon icon="ic:baseline-search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
style="width: 150px"
|
||||
dense
|
||||
outlined
|
||||
v-model="inputFilter"
|
||||
|
|
@ -655,7 +647,7 @@ onMounted(async () => {
|
|||
<AppBox>
|
||||
<TableCardComponent
|
||||
@navigate="(v) => fetchSubBranch(v.id)"
|
||||
@showCard="(v) => fetchCard(v.name)"
|
||||
@show-info="(v) => fetchCard(v.id)"
|
||||
:sub-branch="subBranch"
|
||||
:rows="rowsBranch"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue