chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: UI Customer Detail 2 (more detail + i18n)

Browse source
This commit is contained in:
oat_dev 2024-06-07 13:59:36 +07:00
parent f3a146e345
commit ccd7364b8a
5 changed files with 177 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/03_customer-management/BranchCardCustomer.vue
View file

@ -24,37 +24,57 @@ withDefaults(
<template>
<AppBox class="row" no-padding bordered>
<div
class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3"
class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3 items-center"
>
<div>รหัสสาขา {{ data.branchCode }}</div>
<div>รายละเอียด</div>
<div>{{ $t('customerBranchFormTab') }} {{ data.branchCode }}</div>
<q-btn
@click.stop="$emit('view-detail')"
:label="$t('viewDetail')"
rounded
outline
dense
class="q-px-md"
style="color: var(--stone-6)"
/>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">ชื่อสาขา</div>
<div class="col-5">{{ $t('branchName') }}</div>
<div class="col-7">{{ data.branchName }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
<div class="col-5">ที่อยู่</div>
<div class="col-5">{{ $t('address') }}</div>
<div class="col-7">{{ data.address }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">เบอร์โทร</div>
<div class="col-5">{{ $t('telephone') }}</div>
<div class="col-7">{{ data.tel }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
<div class="col-5">ประเภทสำนักงาน</div>
<div class="col-7">{{ data.type }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">ประเภทกิจการ</div>
<div class="col-5">{{ $t('businessTypePure') }}</div>
<div class="col-7">{{ data.typeCop }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
<div class="col-5">สถานะ</div>
<div class="col-7">{{ data.branchName }}</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">{{ $t('status') }}</div>
<div class="col-7">
<q-badge
v-if="data.boolean"
class="q-px-md q-py-xs rounded"
style="background-color: var(--teal-1); color: var(--teal-4)"
>
{{ $t('statusACTIVE') }}
</q-badge>
<q-badge
v-else
text-color="orange"
class="q-px-md q-py-xs rounded"
style="background-color: var(--red-1); color: var(--orange-4)"
>
{{ $t('statusINACTIVE') }}
</q-badge>
</div>
</div>
<div class="row col-12 q-px-md q-py-sm surface-3">
<div class="col-5">ลูกจ้างทั้งหมด</div>
<div class="col-5">{{ $t('allEmployee') }}</div>
<div class="col-7">{{ data.number }}</div>
</div>
</AppBox>

28
src/components/03_customer-management/CustomerInfoComponent.vue
View file

@ -17,7 +17,7 @@ withDefaults(
<template>
<AppBox no-padding bordered>
<div class="row no-wrap justify-between q-pa-md bordered-b surface-2">
<div class="row no-wrap justify-between bordered-b surface-2">
<div class="row items-center">
<q-btn
round
@ -28,8 +28,8 @@ withDefaults(
class="q-mr-md"
/>
<q-card-section
class="q-pa-sm q-pt-md bg-green q-mr-md"
style="border-radius: 0 0 40px 40px; position: relative; bottom: 20px"
class="q-pa-sm q-pt-md bg-green q-mr-md q-mb-sm"
style="border-radius: 0 0 40px 40px; position: relative"
>
<q-avatar no-padding size="50px">
<img src="https://cdn.quasar.dev/img/avatar1.jpg" />
@ -37,23 +37,27 @@ withDefaults(
</q-card-section>
<div>
<div>นายสุขใจ แสนดี</div>
<div class="flex items-center">
<div class="row items-center">
<i
class="isax isax-frame5"
style="font-size: 1rem; color: var(--stone-6)"
/>
{{ '10' }}
<div class="q-px-sm">
{{ '10' }}
</div>
<q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
{{ '2' }}
<div class="q-px-sm">
{{ '2' }}
</div>
</div>
</div>
</div>
<div class="row items-center">
<div class="row items-center q-pa-md">
<q-btn
id="btn-add-customer"
dense
unelevated
:label="'+ ' + $t('customerAdd')"
:label="'+ ' + $t('formDialogTitleCreateSubBranch')"
padding="4px 16px"
@click="console.log('add')"
style="background-color: var(--cyan-6); color: white"
@ -63,7 +67,7 @@ withDefaults(
style="width: 250px"
outlined
dense
label="ค้นหา"
:label="$t('search')"
class="q-mr-lg"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
@ -72,6 +76,8 @@ withDefaults(
<q-btn
icon="mdi-tune-vertical-variant"
size="sm"
:color="$q.dark.isActive ? 'dark' : 'white'"
:text-color="$q.dark.isActive ? 'white' : 'dark'"
class="bordered rounded"
unelevated
>
@ -105,7 +111,9 @@ withDefaults(
</div>
<div class="row q-pa-lg q-col-gutter-xl">
<div v-for="i in 2" class="col-4">
<BranchCardCustomer></BranchCardCustomer>
<BranchCardCustomer
@view-detail="$emit('viewDetail')"
></BranchCardCustomer>
</div>
</div>
</AppBox>