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

fix: แก้ type

Browse source
This commit is contained in:
Net 2024-06-25 14:30:51 +07:00
parent 9038275c89
commit c78ae55582
1 changed files with 19 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,13 +6,17 @@ import { dateFormat } from 'src/utils/datetime';
const addedProduct = ref<boolean>(false); const addedProduct = ref<boolean>(false);
import { ProductList, Service } from 'src/stores/product-service/types'; import {
ServiceAndProduct,
ProductList,
Service,
} from 'src/stores/product-service/types';
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL); const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
withDefaults( withDefaults(
defineProps<{ defineProps<{
data?: ProductList; data?: ServiceAndProduct;
title?: string; title?: string;
dense?: boolean; dense?: boolean;
@ -24,11 +28,6 @@ withDefaults(
isAddProduct?: boolean; isAddProduct?: boolean;
isSelected?: boolean; isSelected?: boolean;
code?: string;
price?: number;
id?: string;
process?: number;
createdAt?: string;
index?: number; index?: number;
isDisabled?: boolean; isDisabled?: boolean;
}>(), }>(),
@ -111,7 +110,7 @@ withDefaults(
<q-toggle <q-toggle
dense dense
size="sm" size="sm"
@click="$emit('toggleStatus', id)" @click="$emit('toggleStatus', data?.id)"
:model-value="!isDisabled" :model-value="!isDisabled"
val="xs" val="xs"
padding="none" padding="none"
@ -134,7 +133,7 @@ withDefaults(
<q-avatar <q-avatar
v-if="isAddProduct" v-if="isAddProduct"
:style="`background-color: var(${typeProduct === 'product' ? '--green-10' : '--orange-8'})`" :style="`background-color: var(${data?.type === 'product' ? '--green-10' : '--orange-8'})`"
size="18px" size="18px"
text-color="white" text-color="white"
> >
@ -143,10 +142,10 @@ withDefaults(
</div> </div>
<div :class="{ inactive: isDisabled }"> <div :class="{ inactive: isDisabled }">
<div class="app-text-muted">{{ code ?? 'code' }}</div> <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
<div class="flex justify-start text-bold"> <div class="flex justify-start text-bold">
<div <div
v-if="typeProduct === 'service'" v-if="data?.type === 'service'"
class="bordered q-pa-xs row surface-0" class="bordered q-pa-xs row surface-0"
style="font-size: 12px; border-radius: 5px; width: 80px" style="font-size: 12px; border-radius: 5px; width: 80px"
> >
@ -157,27 +156,27 @@ withDefaults(
</div> </div>
<div <div
v-if="typeProduct === 'product'" v-if="data?.type === 'product'"
class="flex justify-end text-bold" class="flex justify-end text-bold"
style="color: var(--green-10)" style="color: var(--green-10)"
> >
฿ {{ price }} ฿ {{ data?.price }}
</div> </div>
<div <div
class="flex justify-center rounded items-center q-my-md q-py-lg" class="flex justify-center rounded items-center q-my-md q-py-lg"
:style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`" :style="`background-color: var(${data?.type === 'product' ? '--green-0' : '--orange-0'})`"
> >
<q-img <q-img
loading="lazy" loading="lazy"
:src="`${baseUrl}/${typeProduct === 'service' ? 'service' : 'product'}/${id}/image`" :src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
style="height: 86px; max-width: 100px" style="height: 86px; max-width: 100px"
> >
<template #error> <template #error>
<q-img <q-img
style="background: none; height: 86px; max-width: 100px" style="background: none; height: 86px; max-width: 100px"
:src=" :src="
typeProduct === 'product' data?.type === 'product'
? '/shop-image.png' ? '/shop-image.png'
: '/service-image.png' : '/service-image.png'
" "
@ -187,22 +186,22 @@ withDefaults(
</q-img> </q-img>
</div> </div>
<div class="row justify-between items-center q-mb-xs"> <div class="row justify-between items-center q-mb-xs">
<div class="q-pr-md" v-if="typeProduct === 'service'"> <div class="q-pr-md" v-if="data?.type === 'service'">
<q-icon <q-icon
name="mdi-calendar-month" name="mdi-calendar-month"
class="surface-0 rounded q-pa-xs app-text-muted" class="surface-0 rounded q-pa-xs app-text-muted"
size="20px" size="20px"
/> />
{{ dateFormat(createdAt) }} {{ dateFormat(data?.createdAt) }}
</div> </div>
<div class="q-pr-md" v-if="typeProduct === 'product'"> <div class="q-pr-md" v-if="data?.type === '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 }} วัน {{ data?.process }} วัน
</div> </div>
</div> </div>
</div> </div>