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

feat: แสดงลำดับ การเลือก

Browse source
This commit is contained in:
Net 2024-06-24 09:43:34 +07:00
parent 1324c1fca3
commit 848f35e47e
1 changed files with 63 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -30,6 +30,7 @@ withDefaults(
id?: string; id?: string;
process?: number; process?: number;
createdAt?: string; createdAt?: string;
index?: number;
}>(), }>(),
{ {
isSelected: false, isSelected: false,
@ -45,9 +46,11 @@ withDefaults(
style="box-shadow: var(--shadow-3); width: 240px; height: 286px" style="box-shadow: var(--shadow-3); width: 240px; height: 286px"
@click="$emit('select', data)" @click="$emit('select', data)"
> >
<div class="q-pa-sm" :class="{ inactive: status }"> <div class="q-pa-sm">
<div class="row flex justify-between text-bold"> <div class="row flex justify-between text-bold">
<div class="col-9">{{ title ?? 'title' }}</div> <div class="col-9" :class="{ inactive: status }">
{{ title ?? 'title' }}
</div>
<div <div
v-if="isSelected === false" v-if="isSelected === false"
class="col-3 relative-position" class="col-3 relative-position"
@ -57,7 +60,7 @@ withDefaults(
flat flat
round round
padding="sm" padding="sm"
class="absolute-top-right dots-btn app-text-muted" class="absolute-top-right dots-btn"
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
size="sm" size="sm"
@click.stop="" @click.stop=""
@ -110,69 +113,72 @@ withDefaults(
size="18px" size="18px"
text-color="white" text-color="white"
> >
1 {{ (index ?? 0) + 1 }}
</q-avatar> </q-avatar>
</div> </div>
<div class="app-text-muted">{{ code ?? 'code' }}</div>
<div class="flex justify-start text-bold"> <div :class="{ inactive: status }">
<div class="app-text-muted">{{ code ?? 'code' }}</div>
<div class="flex justify-start text-bold">
<div
v-if="typeProduct === 'service'"
class="bordered q-pa-xs row surface-0"
style="font-size: 12px; border-radius: 5px; width: 80px"
>
<div class="col">งาน</div>
<q-space />
<div class="col text-center">0</div>
</div>
</div>
<div <div
v-if="typeProduct === 'service'" v-if="typeProduct === 'product'"
class="bordered q-pa-xs row surface-0" class="flex justify-end text-bold"
style="font-size: 12px; border-radius: 5px; width: 80px" style="color: var(--green-10)"
> >
<div class="col">งาน</div> ฿ {{ price }}
<q-space />
<div class="col text-center">0</div>
</div> </div>
</div>
<div <div
v-if="typeProduct === 'product'" class="flex justify-center rounded items-center q-my-md q-py-lg"
class="flex justify-end text-bold" :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
style="color: var(--green-10)"
>
฿ {{ price }}
</div>
<div
class="flex justify-center rounded items-center q-my-md q-py-lg"
:style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
>
<q-img
loading="lazy"
:src="`${baseUrl}/${typeProduct === 'service' ? 'service' : 'product'}/${id}/image`"
style="height: 86px; max-width: 100px"
> >
<template #error> <q-img
<q-img loading="lazy"
style="background: none; height: 86px; max-width: 100px" :src="`${baseUrl}/${typeProduct === 'service' ? 'service' : 'product'}/${id}/image`"
:src=" style="height: 86px; max-width: 100px"
typeProduct === 'product' >
? '/shop-image.png' <template #error>
: '/service-image.png' <q-img
" style="background: none; height: 86px; max-width: 100px"
width="100%" :src="
typeProduct === 'product'
? '/shop-image.png'
: '/service-image.png'
"
width="100%"
/>
</template>
</q-img>
</div>
<div class="row justify-between items-center q-mb-xs">
<div class="q-pr-md" v-if="typeProduct === 'service'">
<q-icon
name="mdi-calendar-month"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/> />
</template> {{ dateFormat(createdAt) }}
</q-img> </div>
</div>
<div class="row justify-between items-center q-mb-xs">
<div class="q-pr-md" v-if="typeProduct === 'service'">
<q-icon
name="mdi-calendar-month"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/>
{{ dateFormat(createdAt) }}
</div>
<div class="q-pr-md" v-if="typeProduct === 'product'"> <div class="q-pr-md" v-if="typeProduct === 'product'">
<q-icon <q-icon
name="mdi-clock-outline" name="mdi-clock-outline"
class="surface-0 rounded q-pa-xs app-text-muted" class="surface-0 rounded q-pa-xs app-text-muted"
size="20px" size="20px"
/> />
{{ process }} วัน {{ process }} วัน
</div>
</div> </div>
</div> </div>
</div> </div>