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