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